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.