Category: javascript

Four chapters submitted to O’Reilly

Published on by Yakov Fain2 Comments

We have submitted the drafts of four chapters of the book “Enterprise Web Development: from Desktop to Mobile” to O’Reilly for review and editing. This is a pretty hands-on book as we are developing an application Save Sick Child while explaining various techniques and technologies. The readers will get a new independent working application every time we add a new piece of functionality (e.g. login, donation form, video, Google maps, charts, auction, etc.). These projects will be published on the dedicated Web site savesickchild.org. For example, this is a sample application illustrating modularization of the JavaScript-based UI.

ssc15

The following chapters are submitted to the publisher, but the raw texts are available for you to read now on the github at https://github.com/Farata/EnterpriseWebBook:

Chapter 2. Advanced Intro to JavaScript
Chapter 3. Mocking up Save Sick Child
Chapter 4. Using AJAX and JSON
Chapter 9. Replacing HTTP with WebSockets

Currently we are working on the chapters on responsive design, test-driven development and modularization of the JavaScript applications. We’re making these unpolished chapters available for you to read hoping to get valuable technical feedback from you. Please do let us know if you see some bugs or inefficient solutions in the code samples. We really really appreciate it.

JSON and Condoms

Published on by Yakov Fain3 Comments

This morning I was discussing the JSON data format with the co-authors of our upcoming book Enterprise Web Development (you can read its draft at http://enterprisewebbook.com/). We were discussing pros and cons of using the JSON format in the Web and the role of the JavaScript eval() function in the history of the Web development. As a result of this discussion, some of the new content can be added to the book section on JSON, for example:

“Usually, JSON-related articles and blogs are quick to remind you about the evil nature of the JavaScript function eval() that can take any JavaScript and execute it. The JSON.parse() is pictured as a protection against the malicious JavaScript that can be injected into your appplication’s code and then executed by eval() by your Web browser. The main argument is that JSON.parse() will not be processing the incoming code unless it contains valid JSON data.”

 But our discussion had a part that won’t make it into the book (O’Reilly’s editors are pretty strict), but can be shared with you in this blog. Protecting your application’s fragile body from being infected by means of eval() can and should be done outside of your application code by using HTTPS protocol and eliminating the cross-origin scripting by routing all requests to third-party data sources via proxying such requests through your own hosts. If the previous statement seems to be to complicated for understanding, I’ll give you another explanation that any adult software developer will understand.

If a man puts on a condom before having sex with a woman domestic partner, it’s like calling JSON.parse() – both are guaranteed that no malicious stuff will be injected. But if a man approaches a woman domestic partner without a condom, but holding a piece of paper signed by a venereologist certifying that this man is healthy – it’s like allowing using eval(), but providing protection at the security layer of your Web application.

Got it?

JavaScript for Java Developers at Devoxx 2012

Published on by Yakov FainLeave a comment

Last week I made a presentation “JavaScript for Java Developers” at the conference Devoxx in Belgium. The presentation was well received. My special thanks to Peter Pilgrim who posted a nice feedback in his blog.

Now I’m getting requests for the slides of this presentation, and they are available for download. But I can offer you something better than these slides. We started writing a book for O’Reilly “Enterprise Web Development: From Desktop to Mobile”, and the current raw version (non-edited bits and pieces) of some of its texts is available for free at EnterpriseWebBook.com.

We’ve created a Git repository for all book materials, and started pushing the new content there daily. After each push we run a script that generates the new HTML version for EnterpriseWebBook.com. The Chapter 2 titled “Advanced Introduction to JavaScript” will be completed by the end of this week, and it covers all the materials presented at Devoxx, but in a more detailed fashion.

Your technical feedback is greatly appreciated. Please don’t suggest fixing missing commas – leave it to professional copy editors from O’Reilly. But if you want to praise or criticize the book materials from the technical point of view, feel free to send me emails directly at yakovfain at gmail.com.

From Quill Pens to O’Reilly Publishing

Published on by Yakov Fain5 Comments

 1812

Imagine I wanted to write a book about Web development in the year 1812. Which tools would I need? I’d need an ink, a quill pen, and a stack of paper. To make multiple copies of the book, a publisher would hire a bunch of people who’d use ink, quill pens, and a stack of paper. By the way, this nice image of a quill pen is taken from Wikipedia.

 2009

Quill pens are gone. My colleagues and I were writing another book for O’Reilly. The process was not as simple as in 1812: we used MS Word with the publisher’s template. When the draft of a chapter was ready I’d upload it to the publisher server and send an email to the editor. It’s not too bad is it?

 2012

First, we’re happy to say that O’Reilly Publishing has accepted our new book proposal “Enterprise Web Development: From Desktop to Mobile“. The book will have four authors and let me tell you how we are going to write it.

The chapters should be submitted into O’Reilly’s SVN code repository in XML-based markup called DocBook so the publisher can eventually convert the text into multiple formats for the multi-channel distribution.

Just had a meeting with my co-authors to decide on the work flow for the book writing. First, my hat off to O’Reilly for allowing use to make the manuscript available for everyone (as we add content) online for free. This is really cool – we’ll be building community around the book while writing it and, I’m sure, we’ll be getting lots of good feedback, which will definitely improve the quality of the final version of the book.

But let me explain you the work flow and the environment we’re planning to create and use for the book writing.

0. Create an account with a mind-mapping service (we use MindMeister ) so the co-authors can easily store and exchange the ideas related to this project.

1. Create a repository in Github where we’ll store all the book content – the text and the code samples.

2. Create a Web site on Github where people can read the book (under Creative Commons license) as HTML document.

3. The text editor of choice is Sublime Text 2, where we’ll write the text not in DocBook, but in a more simple to read format – John Gruber’s Markdown.

4. Write a shell script that will do the following:
a) Convert Markdown into DocBook using Pandoc
b) Submit Markdown to Github with an option for automatic conversion into
HTML and publishing it online.

5. Install and configure Jenkins Continuous Integration Server to run the items in Step 4 automatically

6. Make sure that Jenkins automatically submits the generated DocBook to O’Reilly’s Subversion server.

7. Create a small proof of concept to test all of the above and get the confirmation from O’Reilly that all this automatic generation-conversion-submission works and the resulting data format is acceptable.

Do you like this quill pen, circa 2012? We do and are looking forward to working with O’Reilly!

Ext JS Tutorial

Published on by Yakov FainLeave a comment

Today’s JavaScript landscape consists of dozens if not hundreds of frameworks. Some of them serve as tiny additions to your Web page – they  implement just a certain design pattern. For example, if you need to implement declarative binding of your HTML elements and data models, use knockout.js. If you just want to check if certain HTML5 features are supported by the user’s Web browser add a small modernizr.js to your Web page.

But there are feature-complete frameworks that you can use a foundation of your entire Web application. Such framework include rich library of UI components, support MVC paradigm, offer their own layout managers, styling, effects, and may even have server side components. One of such large and multi-featured frameworks is Ext JS from Sencha.

It’s being used by many IT shops developing enterprise Web applications. In our company we also use Ext JS in some Web applications. We’ve also  added Ext JS code generation to our open source tool Clear Data Builder – it’s a useful tool for creating CRUD applications having Ext JS on the client side talk to Java on the server. We’ve also developed our own Ext JS training curriculum and teach it as two or three day workshop by request.

My colleague Victor has recorded a one hour screencast that can serve as a brief introduction to Ext JS. This presentation has been a part of our fifth annual symposium on enterprise software development. Enjoy the presentation!

Advanced Introduction to JavaScript

Published on by Yakov Fain2 Comments

Some software developers have an impression that JavaScript is a second-league interpreted language with the main purpose of making Web pages a little prettier. The reality is different though. JavaScript is a powerful, flexible, dynamically typed language that supports object-oriented programming. JavaScript functions are the first class citizen that can live their own lives as opposed to Java’s methods. HTML5 becomes a new buzzword, but 80% of development time on such projects is spent writing JavaScript code.This presentation is a super-intensive overview of the modern JavaScript programming language.


I’ve recorded this screencast for the Fifth Annual Farata Symposium on Software Development.

Readers of my blog who want to enroll into my 6-session hands-on online course on JavaScript should use the promotional code yakov.js to get 30% off the tuition.

Adobe or HTML5?

Published on by Yakov Fain9 Comments

I know, some people will say it’s apples to oranges. Some people will say Adobe is also pushing for HTML5. But I’m writing this for people who read the title of this blog correctly: Flex or JavaScript.

Disclaimer 1. I do both.

Disclaimer 2. I don’t care about game programming. I work for a company that does enterprise development.

In the enterprise IT circles Adobe is a whipping boy of 2012. Adobe has accepted this award, and only their cleaning ladies and janitors didn’t apologize for what their CTO and CEO did last November hiding behind the wide back of Danny Winokur. But let’s put emotions behind and get real.

Today, there are two types of the enterprise CIO’s: those who don’t care about developing for mobile and those who do. CIO’s who don’t care about mobile can be divided into two groups: smart and typical.
Smarts will start new Web projects selecting a technology that would allow them to easily go mobile if the life will force them to do so. And not so smart will just go HTML5 because this buzzword is an easy sell to CEO’s.

Let’s continue splitting hairs. Enterprise Web projects can be divided into two categories – Web pages and Web applications. Web pages can be divided into (you guessed it right) two categories – those don’t have to be blazing fast (just show them that Donate or Pay button), and those that must be blazing fast.
Further splits would involve Intranet vs Internet, and by reliability requirements.

Now the most important question, “Who do you care about the most?” As the saying goes, men who shave in the evening love their wives, and those who shave in the morning love their work. Who can you afford to love more – developers or the users?

Seven years ago the most popular examples of successful AJAX applications were Google’s gmail and maps. Most of the people were drawn into this Google state of mind forgetting that their own teams had less skillful developers and more modest budget than Google’s.

Today, people are choosing the technology to go mobile. In a meeting with a prospective client I’d start drawing on the white board. You have two choices… I’m not going to do it here, but learn from the past – don’t assume that what the big guys do is affordable to you too.

I’ve learned from a Facebook engineer presentation that their users login from 2500 different mobile devices. On the other hand, this article states that Facebook has bad experience with their HTML5 mobile application and they are creating an iPhone version in Objective-C. Sounds great. What about people carrying 2499 other mobile devices.

Do you have to make such choices? Do you have skillful teams of Objective-C, C++, and Java programmers or prefer to have the same code base in HTML5? How many concurrent users do you have? Do you have enough money to cater to all possible devices your users carry?

It’s up to you to decide. But for most of the enterprise mobile Web applications the choice comes down to selecting between Adobe AIR and JavaScript. If you select AIR, it’ll cover all your today’s intranet desktop needs and the same team will be able to port this app to iOS, Android and Blackberry devices. If you are ready to dive into JavaScript, just double the time allocated to the development cycle of your project. But you may save time in the long run cause your Web application will already work on lots of mobile devices, especially if you’ve been using responsive design principles.

As to myself, my typical week is split between Adobe AIR and JavaScript. And yours?

JavaScript’s Sharp

Published on by Yakov Fain5 Comments

While JavaScript’s popularity grows daily, it’s not obvious if enterprise developers spoiled by predictable languages like Java or C# will fill comfortable with it. If they won’t – the cost of the JavaScript-based projects will remain high.

Just take a look at this code snippet on the right – I’ve been using Firebug,the Firefox add-on to run it. The code is on the right, and the result of invoking the function doIt() is on the left.

Yes, it outputs 10 on the console. If you don’t know why it did so, get ready do allocate a substantial time for doing a really thorough testing of your HTML-JavaScript application.

People say that if you cut your finger don’t blame the knife. True. Should we even use sharp knives? Yes, if we are very careful and responsible adults. But we shouldn’t give sharp knives to kids. And majority of today’s enterprise developers are kids playing with legos, a.k.a. frameworks. Unfortunately, you can’t get away with creating an enterprise Web application without programming in a raw language. This is when the fun begins. Let’s embrace it, but be careful.

P.S. If you want to know why the code above printed 10 and not 5, read an excellent blog by Angus Croll where I picked this code sample from.

An Elevator Pitch for Modernizr

Published on by Yakov Fain2 Comments

Say, you’re creating a new startup. What’s one of the most important things you need badly? Money. But how do you convince someone to give you some cash? An elevator pitch. You need to think hard and produce 2-3 (not 20-30!) sentences that clearly explain what’s your product is about and why it’s better than tons of similar others.

This elevator pitch technique of being brief and up to the point is extremely important even if you’re not in the startup business. You always sell something even if there is no money involved. Let me stop beating around the bush.

There is a great little library that JavaScript developers must use – it’s called Modernizr. Now I challenge everyone who doesn’t know what it’s about to look at modernizr.com and try to figure it out from it’s main page.

Still have no clue after reading all this text? I don’t blame you. These guys created a great library, but they didn’t bother to sell it to you. It’s free – why bother selling, right? Wrong! If you like your product, spend some time trying to come up with an elevator pitch.
Have you read the section “Why use Modernizr?” Was it convincing enough? Do you feel the need to start using it? Actually, there are two important words buried in there: “feature detection”. This is it. This is the holly grail.

How to fix the text? I’d removed all the text from this page except the links and replaced it with just one statement:

Modernizr is a tiny JavaScript library that allows your JavaScript to detect if the latest HTML5 features are supported in the user’s browser. On the Web page load, it creates an object with dozens of properties indicating if particular features (e.g. canvas or audio) are supported so you can branch out your JavaScript program accordingly.

Having said that, I want to take my hat off to the creators of this little gem Modernizr.

Time to Write a new Book: Enterprise HTML5 and Going Mobile

Published on by Yakov Fain8 Comments
Yesterday, I was talking to my business partners (and former co-authors) about writing a new book. So far, the working title of the book is “Enterprise HTML5 and Going Mobile”. In this book we’ll explain different approaches to creating desktop and mobile Web sites and applications while developing  various versions of a sample Web site “Save the Children”. Below is the current version of TOC:

Enterprise HTML5 and Going Mobile

Part 1. HTML5 On The Desktop

Chapter 1. What’s HTML5?
Chapter 2. The Web Site “Save The Children”: UI Design and Specification
Chapter 3. JavaScript Basics
Chapter 4. JavaScript Objects and Functions
Chapter 5. JavaScript in the Browser
Chapter 6. JSON
Chapter 7. AJAX
Chapter 8. Websockets
Chapter 9. Intro to JQuery Framework
Chapter 10. Intro to Ext JS Framework
Chapter 11. Test-Driven Development with JavaScript
Chapter 12. Save The Children: Working with the Data on the server
Chapter 13. Securing Web Applications

Part 2. Going Mobile

Chapter 14. Responsive Design: One Site Fits All
Chapter 15. Intro to JQuery Mobile framework
Chapter 16. Save The Children. Take 1.
Chapter 17. Intro to Sencha Touch framework
Chapter 18. Save The Children. Take 2.
Chapter 19. Accessing Native API with PhoneGap

We may include another chapter on going cloud. Did we miss any subjects useful for the enterprise developers? Your feedback is appreciated.