Ext JS Tutorial

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!

Talking to Publisher About New Book

I’ve contacted a publisher regarding possible publication of our new book. We’ve been working with these publishers in the past and they seem to be interested, which means the publisher started asking certain questions to see if such a book will have a market value. This blog is our response to these questions.

The question was caused by the proposed book title: “Enterprise HTML5: Desktop and Mobile”. What the word enterprise means in this title and is this book about HTML5? The title of the book can be changed to “Enterprise Web Development. From Desktop to Mobile”. IMO, HTML5 became a buzzword meaning a lot more than HTML. This book is more about Web development than HTML. The targeted audience is intermediate developers and the knowledge of HTML basics is assumed.

This book is mostly about developing for desktop and mobile in JavaScript and related technologies. Many enterprise development managers are facing (or will be soon) the need to make their applications or Web sites available on the plethora of devices used for accessing Internet. They need some kind of a roadmap for going mobile. There are different approaches for doing this. One approach is to create separate teams developing native applications for popular operational environments (e.g. iOS, Android, etc.) This approach can produce good results as long as they can afford creating and maintaining several versions of the same application. Another approach is to create an HTML5 application, which is will use modern versions of HTML, JavaScript, and CSS. This approach has different flavors though. One is to have the same codebase for both mobile and desktop version (this approach is also known as Responsive Design). Another – have two versions of the HTML5 code – one for desktops and the other for mobile devices. If you go with the latter approach, the next question arises – which JavaScript framework to use that will allow reusing as much of the code as possible and to minimize the learning curve. This book will allow you to compare JQuery and Ext JS – popular JavaScript frameworks for desktop development, and their mobile versions: JQuery Mobile and Sencha Touch. Is this an intermediate to advanced book? Which other books will compete with this one?

So let’s profile the books that are currently available on the Web market.

Most of the available books on the HTML/JavaScript market can be divided by three categories:

1. Tutorials on HTML, JavaScript, CSS or particular JavaScript frameworks. For example, Larry Ullman’s “Modern JavaScript. Develop and Design” or “JavaScript 24-hour trainer” are good JavaScript tutorials.

2. Cookbooks or design patterns. These books show code fragments helping to accomplish certain isolated tasks. O’Reilly’s “HTML5 Cookbook” or “JavaScript Cookbook” are good representatives in this category.

3. Advanced books. These cover advanced topics of a programming language (e.g. “Secrets of the JavaScript Ninja” by John Resig) or explain a certain aspect of development, for example “High Performance JavaScript” by Nicholas Zakas.

These are definitely useful books. But our book won’t perfectly fit into any of these categories cause it’ll have a little bit of everything. We’ll structure the materials around designing, developing, and re-developing a sample Web site using HTML, JavaScript, CSS, and popular frameworks. While working on this Web site the reader will learn the language/tools and compare different approaches to cross-platform development. Of course, if you didn’t work with JavaScript before, a chapter on JavaScript will be quite useful for you. But it’s an advanced introduction to JavaScript – we assume that you know what the loops are about and won’t give you a coverage of all types of loops in JavaScript. If you know JavaScript already – just skip this chapter.

On the other hand, such advanced concepts as callbacks or closures deserve better coverage, so we’ll spend some time explaining them. While developing a mobile version of the sample Web site in jQuery Mobile (and then in Sencha Touch), we’ll explain a bare minimum of this framework – just so you can complete this Web application. We are also planning to compare these JavaScript frameworks and highlight the issues that will allow larger Web sites to be written in an efficient and modular fashion.

So we assume that a reader of our new book has some background in programming, but it won’t be overly complicated to be included in the category of advanced books. I’d say that we’d like to write a practical book that will cover the entire cycle of the Web application development using the modern tools and techniques. This book will be written by software engineers from Farata Systems all of which work on real world Web projects.

The TOC of the Book “Enterprise HTML5 on Desktop and Mobile”

I’ll be participating in writing a new book on the enterprise development with HTML5. At this point we have created only the first cut of mind map that includes a TOC with very brief description of the chapters.

This is a work in progress and every bit of it may change. But the main idea is that we’re going to build a sample Web site Save a Child and will describe and comment on this process. Everything is a work in progress and subject to change. So far we haven’t submitted an official proposal to any book publisher yet, but we will. Below is the text as it was exported by MindMeister. Your feedback is greatly appreciated.

Part 1. Desktop

Ch1. HTML5 and its New APIs

Provide a brief overview of all APIs that are included in HTML5 spec (Web Storage, WebSQL, Web Sockets, Web Workers). List the browsers supporting HTML5. Is it safe to start an HTML5 project since not all Web browsers fully support HTML5?

Ch2. Mocking Up the “Save a Child” Web Site

Create a  mock up of the sample Web site Save a Child that supports donations to ill children. The Web site has to support videos, images and be integrated with some payments system. The mockup should include three versions of the UI: desktop, tablet, smart phone.
By the end of this chapter the HTML version of Save a Child is ready with hardcoded data.

Ch3. Advanced Intro to JavaScript

This chapter should cover the JavaScript language overview based on the “Advanced Intro to JavaScript” presentation: Objects, Functions, Closures, JS in the Web Browser. All examples should be re-written as building blocks for the “Save a Child” site. Coverage of the tools (IDE, Web inspectors and debuggers go here too).
By the end of this chapter we’ll have a new version of Save a Child, which includes some scripts in JavaScript. All the data are stored in a plain text format in local files.

Ch4. Using Ajax and JSON

After explaining the JSON data format we’ll deploy Save a Child under the remote Tomcat server on one of our servers. We’ll also provide the instructions on installing Tomcat on the local machine for those readers who want to do it.
Then goes the explanation of the AJAX way of retrieving data from the remote server without the need to refresh the entire page.
In the final version of the Web site the data feed will be organized by a Java program deployed under a Java EE server – we’ll use Oracle’s GlassFish 4.0 for being the leader in implementing all the latest Java EE specifications.

Ch5. Test-Driven Development with JavaScript

The chapter starts with a brief overview of available test frameworks. Then, it explains how to set up a new Save a Child  project in the IDE using selected test framework.

Ch6. “Save a Child” with JQuery framework

In this chapter we’ll start introducing JQuery framework to Save a Child code developed in chapters 2-5. While this chapter won’t have a formal tutorial on the JQuery framework, we’ll briefly explain its basics and each component that’ll be used in Save a Child.
By the end of this chapter the reader has a working version of Save a Child site built using HTML, JavaScript, CSS, JSon, Ajax, and JQuery framework.

CH7 “Save a Child” with Ext JS framework

In this chapter we’ll use some of the code from ch 2-5, but this time we’ll use the Sencha’s Ext JS framework.
The reader will learn the principles of building Web sites with Ext JS.
We’ll demo the use of our own open source generator Clear Data Builder that can generate the EXT JS code based on Java classes.
By the end of this chapter the reader will have working version of the Save a Child Web site. We’ll also compare the pros and cons of its Ext JS and JQuery’s versions.

Ch8. Replacing HTTP with WebSockets

This chapter will introduce the WebSocket API, which is a part of HTML5 spec. We’ll pick one of the data flow in Save a Child site and replace HTTP communication with WebSockets protocol.
Using the monitoring tool we’ll show the performance bandwidth usage benefits that WebSockets protocol brings to the Web.
This chapter will be based on this WebSockets presentation.

CH9. Securing Web Applications

This chapter will add authentication and authorization features for the users Save a child. They will be able to login to this Web site and perform different actions according to their role.

Ch10. Large Scale JavaScript Projects

The Save a Chile site is a rather small Web project. But in the enterprise world, lots of applications have a lot larger code base. In this chapter we’ll give an example of how to build modularized Web applications that can load the code on as needed basis. We’ll also give an example of how to organize the data exchange between different modules in a loosely coupled fashion.

Part 2. Mobile

Ch11. Responsive Design: One Site Fits All

The chapter starts with a brief overview of different approaches to making the Web site to the mobile space. One of the approaches is having only one Web site for all devices. This approach is is called Responsive Design, and we’ll modify the design of the Save a Child site to introduce different layouts for the desktop, tablet, and smartphone devices.
By the end of this chapter the site Save a Child will automatically change its layout based on the user’s device without the losing any functionality.

Ch12. “Save a Child” With JQuery Mobile

This chapter will demonstrate how to build the mobile version of Save a Child using JQuery Mobile framework.

Ch13. “Save a Child” with Sencha Touch

This chapter will demonstrate how to build the mobile version of Save a Child using the Sencha Touch framework.

Ch14. Hybrid Applications: HTML + Native API

This chapter explains how to add the bridge HTML and native mobile API with the Phone GAP framework. It’ll add the GPS service to the mobile version of “Save a Child”.

Proponents of the native mobile applications suggest that having direct access to all native api offered by a mobile device (camera, contacts, GPS et al.) is a must have. This chapter explains how to bridge HTML and native mobile API using the Phone GAP framework to have the best of both worlds. It’ll add the GPS service to the mobile version of the Save a Child application.

This chapter/book will end describing our vision of the most efficient way of making your existing Web application to thousands different mobile devices at a reasonable cost.

Advanced Introduction to JavaScript

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.

An Elevator Pitch for Modernizr

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.

Good bye, Google Chrome!

I’ve been using Firefox on my MAC as my default system browser for years until I got really irritated with the need to kill it once in a while after it became non-responsive. Switched to Google Chrome, but was still running Firefox for testing of my HTML/JavaScript code with the great add-on Firebug.

It looks like its time to say good bye to Google Chrome. Periodically, it just start rendering Web pages blank. I found a cure that works sometimes – grab the corner of the window and start slowly resizing it. You might get lucky and find the size that Chrome likes and start rendering the content again. Being an enterprise developer I can’t imagine releasing an application into production that once in a while shows a blank screen to the users. I have no idea how Google can get away with it.

You may suggest that I should file a bug. But what do I write in there? It doesn’t render the content once in a while? Steps to reproduce: just freaking run Chrome for a couple of days with a dozen of opened tabs.

What’s next? Safari. Let’s see what the future holds. Keeping my fingers crossed. If you know of any Safari surprises, please let me know. I’ll still be using great Developers Tools of Chrome though – it’s a great tool.

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

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.

Attending QCon, a Smart Conference

The last three days I spent participating in the QCon conference in New York City. This is one of the small group of conferences catering to software developers. Running a 100-speakers conference around the world is a hugely expensive project, and I hope the organizers broke even, which is very difficult in New York. Long story short – I like this conference. Speakers are well prepared, the crowd is eager to learn, the food is good, and the Wi-Fi works (I kid you not – 20Mbps up and down).

There were six parallel tracks  at the event, which were changing each day. This is unusual, but smart. Every morning would start in the main auditorium, where the track chairs would introduce every presentation from their track. This is also something I’ve never seen before at any conference, and I can confess that these short intros changed my personal selection of the talks.The third thing that impressed me were presentation evaluation sheets. This is how they looked like:

The KISS principle in action! Instead of forcing people to fill out these annoying questionnaires from traditional evaluation sheets, the attendees were asked to pick a sheet of the appropriate color and drop it in the bowl. Green, if you like the preso, yellow means the presentation deserved to be a part of the event, and red if it sucked. If you wanted to add some comments, pens were right there – just write whatever you want on this little piece of paper. Smart. Keep it simple stupid.

During these three days I’ve attended a bunch of quality presentations:

Security weaknesses in Java was very practical, and I can apply the new knowledge to one of the projects I’m involved with.

Learning how NASA uses cloud computing to process information from Mars rovers is another fact that may finally push me into the cloud space.

I was surprised to learn that Node.js, a server-side JavaScript framework, can process 695K transaction per second. It’s really impressive even though Java did 3.5M TPS in a similar setup.

I like presentations by Cameron Purdy. This time he was talking about HTML5, Mobile, and compared the roles of Java’s and C++ in today’s IT. He’s well spoken and always add lots of appropriate jokes to his talks.  Cameron listed a couple of reasons of why Java didn’t supplant C++. But IMO, didn’t mention the most importan ones:
1. Apple’s iOS has no Java
2. Microsoft didn’t upgrade JRE in Internet Explorer since ’98 (remember that infamous Sun-Microsoft las suite?)

Arun Gupta from Oracle is an excellent speaker, and it was interesting to see his first presentation showing how Java EE moves toward HTML5 clients (JavaScript – JSON-WebSockets-JavaEE).

I like FireFox’s add-on FireBug – the HTML/DOM/CSS/Network/JavaScript inspector/debugger. Now I know that it’s safe to install Firefox nightly builds to enjoy the latest greatness of this popular browser.

Peter Bell was showing how to use Spring Data with No SQL databases. While he was talking about a hierarchical databases, I felt like déjà vu. Seasoned (a.k.a. old) software developers knew about how great the hierarchical databases were since the last century. But working with them was not for the faint of hearts. SQL looked simpler, so programmers embraced relational DBMS. The years went by, and an average programmer became a little dumber, and SQL became a tough language to learn. This resulted in the flourishing of the Object-Relational Mapping frameworks. You know Java, but don’t know SQL? Not a problem. You’ll survive on our project – just write Java and XML. It’s going to be long, painful and non-performing, but ORM will allow us to bring juniors on board. Now, it seems that Spring Data can hide the complexities of dealing with hierarchical databases and even juniors will be able to work with them. Good luck, guys!

Charlie Hunt did a great job explaining the internals of Java garbage collector. Check out his recent book “Java Performance”.

Steve Souders is THE web performance guy. This time he was talking about performance of high performance in the mobile. Not sure if you are thinking about moving your application or a Web site to mobile, but you definitely should be.

Yesterday, I went to hear the presentation by Adobe’s evangelist Christophe Coenraets. I have a rule – if Christophe present at the conference I attend – it’s a must see. No matter what he’s talking about, his presentations are clear, well prepared and up to the point. In the past he was covering various Flex-related topics, but after Adobe decided to kill Flex, he’s working in the HTML5 field. Christophe’s presentation was about using JavaScript on mobile highlighting access to the native APIs via the PhoneGap library. IMO, this is a right way to go and I enjoyed this talk.

Adobe Flex framework remains a touchy-feely subject for me regardless of my own principle “Don’t fall in love with the Phillips screwdriver”. Any tool is just a tool, but I really enjoyed working with this framework. I understand that corporations exists to make profits. I understand that if a software product doesn’t bring money to the firm, one of the solutions is to nuke it. But it shouldn’t be done in such a cynical way. Last year, at Adobe MAX conference they said that the future of Flex is rosy, a month later they announced, “We donate Flex to Apache Foundation” explaining that Adobe’s changing the direction. That’s fine. A month later, they applied a hit man technique – an additional shot in the forehead – to make sure the body is dead for real. Adobe said that the Flash Player, the runtime required for Flex won’t go to Apache, and they won’t support new versions of Apache Flex. It’s as if Oracle would donate Java to open source, but the future version of JVM wouldn’t support future version of Java. I doubt Oracle would ever do something like this. Adobe won’t run the MAX conference in 2012 – are they ashamed of themselves?

I’ve attended two sessions on the agile methodologies, and have to admit that I’m still not sold. Sure enough, if a prospective client will ask if our company runs the project in agile mode, I’ll answer, “Sure thing!” And, most likely, what we do is agile. But we don’t do it as a religion with all paraphernalia that comes with agile methodologies. We work in a highly virtualized world. A bunch of VMs runs on our servers. But let alone VM’s – in some cases our developers are virtualized. They work from different countries and some of them never saw each other. Yeah, yeah, yeah…You put and shuffle the stickers on the board daily. Stand up meetings? I don’t care if our developers work in horizontal or vertical position, if they work in the morning, evening, or after midnights. As long as they get the work done, have good communication skills, speak English, and don’t behave as prima donnas, they are super agile. Please don’t show this blog to any of our customers or we can loose the project.

Finally, I’ve attended a great inspirational talk by Mike Lee, an American software developer living in Amsterdam (as he put it, the city that San Francisco wants to be). Now I’m also thinking of spending three-four weeks living and working from Amsterdam. I never been in this city, but plan to run  JavaScript training there.

My QCon participation was not just about attending sessions. QCon organizers were kind enough to offer a meeting room to the members of the Java NYSIG – a huge users group lead by Frank Greco. I delivered the presentation “JavaScript for Java Developers” on Tuesday evening. This presentation was videotaped by the QCon’s crew and should appear at InfoQ  soon.

You might have noticed that the most frequently used word in this post was JavaScript. Yes, as of today, this is my language of choice for developing the client portion of Web and mobile applications. If you want to hear more about it, attend our fifth annual symposium on software development  in New York City. Rephrasing the well known statement about the water, “You can’t stop JavaScript – you can only redirect it”.

Good luck QCon! Hope to see you next year.

Who Moved my Web to Mobile?

In our company it became a tradition to run an annual symposium on software development in New York City. This is a technical event with zero marketing, where our engineers are given an opportunity to share their experience gained while develping real-world applications. This year we’ll focus on the Web applications developed with HTML, JavaScript, CSS, and Java. I’ll be making two presentations there.

1. Advanced Introduction to JavaScript

“Advanced Introduction” means that we’ll start from scratch, but the complexity of the materials will rapidly increase, and by the end of the talk you’ll start respecting JavaScript a lot. The thing is that 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.

2. Who Moved My Web to Mobile

IMHO, this topic becomes important and practical for many software developers, team leads, and managers. Sooner or later the budget will be approved, and you won’t be able to postpone the migration of your Web site or application to mobile devices any further. How to start moving your tried and true JSP/Struts Web site to this wild new world of mobile devices? Is it possible to develop one Web site that looks good on desktops, tablets, on smartfones? Should you go with HTML5 or native mobile applications? What about Adobe AIR? In this presentation we’ll discuss pros and cons of various approaches. You’ll also see the comparison of two JavaScript mobile frameworks: JQuery Mobile and Sencha Touch.
Although it may sound immodest of me to say so (what’s new?), this presentation is the most efficient way of getting a hang of all these topicsin a short period of time.

Hope to see you there.

Yakov

Is HTML5 Web 3.0?

About six years ago I wrote a blog titled “I have no idea what  Web 2.0 means“.  That blog had link to a video where IT leaders were helplessly trying to explain what Web 2.0 means. One guy said something like this, “Everyone wants to do it, and you can’t find enough people to do it”.  I still believe Web 2.0 was nothing else but a catchy marketing term, which helped selling such events as Web 2.0 Expo, Web 2.0 Summit, and helped Forrester in selling their typical 7-page-for-1000-bucks-zero-info reports (this one was quietly removed).

The Web 2.0 term is fully milked out and the IT world needs something else for the next big thing. HTML5 perfectly fits the bill. Make no mistake, HTML 5 is not simply a standard of a markup language that will be finalized by 2022 – this would be a hard sell. HTML5 means a set of technologies, techniques, styling elements, APIs, and mainly, JavaScript frameworks that are available now and being used for the development of the today’s Web applications.  It’s like Web 3.0: “Everyone wants to do it, and you can’t find enough people to do it”.

Don’t fight the trend. Join the movement. If you are creating any framework or a product for the Web, ideally, stick the word HTML5 right into its title to help enterprise architects in justifying licensing this software. “See, it’s HTML5-compliant. Everybody does it.” If you can’t, make sure that your marketing brochures and white papers are heavily sprinkled with the HTML5 word.

Five years ago, someone told me that Web 3.0 would be about semantic Web. He was wrong. Web 3.0 is HTML5. The digit five in HTML5 means that this party will last for the next 5 years. Join the party!

P.S. If you didn’t know what HTML5 means before reading this blog and still have no clue, don’t get angry with me. I don’t know what it is either. Just tried to fantasize. Have you ever had Web fantasies? Me to.