A for Ajax, Part 5: Object Oriented JavaScript, JavaScript libraries

JavaScript is the glue that makes Ajax work. It is the only language through which we can create Ajax enabled front-ends.

As ASP.NET developers, our approach when we need to use JavaScript in our applications is to ‘Google, copy and paste’, with some modifications, if required. But Ajax enabled web applications are serious applications and require a much better understanding of the language.

Ray Djajadinata in Create Advanced Web Applications With Object-Oriented Techniques writes: “Indeed, until recently, I’d always been able to get by with whatever little JavaScript I knew, armed only with the MSDN DHTML reference and my C++/C# experience. It was only when I started working on real-world AJAX applications that I realized how inadequate my JavaScript actually was. The complexity and interactivity of this new generation of Web applications requires a totally different approach to writing JavaScript code. These are serious JavaScript applications! The way we’ve been writing our throwaway scripts simply doesn’t cut it anymore.”

And continues: “I didn’t learn JavaScript of my own volition. I had to pick it up quickly because I realized that I was ill-prepared to work on a real-world AJAX application without it. At first, I felt like I had gone down a few levels in the programmer hierarchy. (JavaScript! What would my C++ friends say?) But once I got over my initial resistance, I realized that JavaScript was actually a powerful, expressive, and compact language. It even boasts features that other, more popular languages are only beginning to support.”

JavaScript’s object-oriented approach is different then a conventional object-oriented language such as C#. However it brings to your applications the same advantages you derive from a conventional OO language. OO Javascript may seem quirky at first, but as you get up to speed, you begin to appreciate its awesome power. You also realise the discipline required so you don’t abuse its power.

For complex projects, it is best to use a JavaScript library. JavaScript libraries extend Javascript to make it even more powerful. A few examples:
• ExtJS provides you with an excellent collection of controls for the front end.
• Microsoft’s Ajax Library extends JavaScript “objects to give them the richness of .NET Framework classes”.
• jQuery is important for ASP.NET developers if only because Mirosoft will be using it in a big way in ASP.NET 4.0.

For those on the ASP.NET platform, knowing how to use the Microsoft’s Ajax Library and JQuery would certainly be an asset.

Further reading
General:
JavaScript
A re-introduction to JavaScript
Code Conventions for the JavaScript Programming Language

Microsoft:
Microsoft AJAX Library namespaces
jQuery and Microsoft

Books
JavaScript:
David Flanagan, JavaScript: The Definitive Guide, 5th Edition, Wiley Publishing, Inc., ISBN-13: 978-0596101992
Douglas Crockford, JavaScript: The Good Parts, O'Reilly Media, Inc., ISBN-13: 978-0596517748
Stoyan Stefanov, Object-Oriented JavaScript, Packt Publishing Ltd., ISBN-13: 978-1847194145
Ross Harmes and Dustin Diaz, Pro JavaScript Design Patterns, Apress, ISBN-13: 978-1590599082

jQuery:
Bear Bibeault and Yehuda Katz, jQuery in Action, Manning Publications, ISBN-13: 978-1933988351
Jonathan Chaffer andKarl Swedberg, Learning jQuery, Packt Publishing Ltd., ISBN-13: 978-1847192509
Jonathan Chaffer andKarl Swedberg, jQuery Reference Guide, Packt Publishing Ltd., ISBN-13: 978-1847193810

ExtJS:
Shea Frederick, Colin Ramsay and Steve 'Cutter' Blades, Learning Ext JS, Packt Publishing Ltd., ISBN-13: 978-1847195142

Video links (from Mix 11):
Mix 11

A for Ajax, Part 4: The technologies and practices an Ajax enabled web application developer must know

To create an effective Ajax enabled application, a developer needs to have a good understanding of a number of front-end and back-end technologies and performance related best practices. In a series of future posts, I will cover some of these. This post is more of a road map to those future posts.

Front-end:
Jesse James Garrett of Adaptive Path coined the word ‘Ajax’: “Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
• standards-based presentation using XHTML and CSS;
• dynamic display and interaction using the Document Object Model;
• data interchange and manipulation using XML and XSLT;
• asynchronous data retrieval using XMLHttpRequest;
• and JavaScript binding everything together.”

In future posts we will look at these technologies in some detail, probably in the following order:
JavaScript and libraries
DOM
XMLHttpRequest object and how to handle XML and JSON data formats
XHTML and CSS

Front-end Best Practices:
Separating Content, Style and Behavior
This is also known as Separating HTML, CSS, and Javascript. In a forum I found this question: “..Why should i keep JavaScript code out of the HTML code? I asked someone else and he told me "1. separation of concerns. 2. don't have to worry about breaking attributes 3. not all events have attributes 4. works better with custom events and delegation." Why should i care about any of those things?..”

We will look at this in more detail in a later post and try to answer the ‘why should I care’ question.

Usability
Ajax enabled web applications break the way we use the Back/Forward buttons and Bookmarks. Most JavaScript libraries now have support to overcome this usability issue; developers need to code this into the application. For situations where this support is not available we could use one of the following libraries:
Really Simple History (RSH): Ajax history and bookmarking library
Yahoo! UI Library: Browser History Manager

Validate the XHTML, CSS and Javascript
It is always a good practice [http://validator.w3.org/docs/why.html] to validate the XHTML, CSS before we go into production.
You can validate the markup of the XHTML document at http://validator.w3.org/#validate_by_input.
You can validate the CSS at http://jigsaw.w3.org/css-validator/#validate_by_input.

You can validate JavaScript code using the JSLint JavaScript Verifier tool at http://www.jslint.com/. Douglas Crockford, the author of this tool writes: “JavaScript is a young-for-its-age language. It was originally intended to do small tasks in webpages, tasks for which Java was too heavy and clumsy. But JavaScript is a very capable language, and it is now being used in larger projects. Many of the features that were intended to make the language easy to use are troublesome for larger projects. … JavaScript is a sloppy language, but inside it there is an elegant, better language. JSLint helps you to program in that better language and to avoid most of the slop.”

Front-end Performance:
In an Ajax enabled web application project I was involved in, the client described the performance of the application as “scary fast in Firefox and Chrome, and much faster than usual in IE”. In later posts I will share some of the important aspects for improving performance, such as:
• Tools to monitor HTTP traffic
• Minification of CSS and Javascript
• IIS settings to increase performance

Back-end:
Ajax enabled web applications are more often than not, datacentic applications. As .NET developers we need to know how to convert the data to a JSON format before it is passed to the front-end. The .NET framework has several ways to do this. In future posts we will explore areas such as:
• Converting data to JSON format in C#.
• Communication with the database, in particular LINQ to SQL and the ADO.NET Entity Framework.
• Communication between the front-end and back-end.

Looking back at 2008

2008 was a good year. Once I got settled in, the last year at my current job has been very satisfying.

I lead the effort on three AJAX projects using the ExtJs Javascript library. Learnt a lot about code optimisation and performance in AJAX projects, object oriented JavaScript, JSON, stuff like the CTE in SQL Server 2005. The client's comment "..one of the fastest web applications I have used.." validated the hard work we put into the projects. I have begun to post my experience with AJAX in the A for Ajax posts in this blog. There are 3 posts on this subject already, more will follow.

There was another interesting project - a BI application where the data was being presented through web parts - where we got to investigate more asynchronous activities - like asynchronous loading of the web parts and asynchronous calls to the database. The technical demands of the project kept us on our toes, but the project was ultimately scuttled by bad client behaviour.

The last year has also been about earning the respect of my colleagues at my current job. I have always been blessed with very good colleague work throughout my career: they work hard, they take responsibilities willingly, they have a hunger for knowledge, are open to new ideas and ways of doing things, they create the magic in the end product.

A very interesting aspect was the diverse clientele I had to deal with - across Australia, Canada, Europe and the USA. All of them have been, and continue to be, very tough customers. And it was, and is, a pleasure working with all of them. I owe a lot to them: the tougher the customer, greater the satisfaction of winning them over with your work.

The end of 2008 and the beginning of this year has brought more learning opputunities - in XUL, XBL, JQuery, technically challenging ASP.NET projects - and another tough customer.

Looks like 2009 will be a good year too.