Joe Lennon

(This article was published on IBM developerWorks in November 2010)

When writing JavaScript and Asynchronous JavaScript + XML (Ajax) applications, it is all too easy to focus on the interactive features they have to offer, while forgetting about the basic fundamentals of web application development. It is important to write JavaScript and Ajax applications in an unobtrusive manner for a number of reasons. First, doing so lets you keep the logic of the application separate from your content, making it easier to maintain your applications going forward. Additionally, it lets you ensure that your application behaves consistently across various platforms and web browsers in its most basic form, resulting in you only needing to worry about this issue when you add in the JavaScript and Ajax features. Most importantly, perhaps, is that developing web applications in this manner means that you are following the idea of progressive enhancement, meaning that your application will support users who are using browsers that do not support JavaScript or particular JavaScript features (including Ajax). If you have been writing JavaScript applications in an obtrusive manner up until now, this article will help you discover the best practices that allow you to create web applications that work for everybody, while providing all the bells and whistles to those users who can use them.

The term unobtrusive JavaScript has a relatively loose definition, but is generally accepted as being the process of creating web pages and applications using a collection of good programming practices. These include the following:

• Keeping separate the JavaScript, CSS, and HTML elements of your application
• Using JavaScript to progressively enhance your application—don’t use JavaScript for core functions
• Maintaining your code structure in such a way that reduces repetition, is better organized, and is easier to read and maintain.
• Adhering to web and accessibility standards

Not only is it good practice to develop this way, but it also ensures that your application will work for a wide range of audiences using different web browsers and devices, even those with limited capabilities. Applications built in this fashion are also generally better organized and structured, perform faster, and are less prone to bugs.

In this article, you’ll see how the presentation, style, and behavior layers of your application should be kept separate, with the goal of using no inline CSS or JavaScript event handling. You will also see some examples of obtrusive JavaScript code, and discover the attributes that they have that are considered to be poor programming practice. You will then learn how to correct these issues, writing the same code in an unobtrusive way, with guidelines on some best practices for this style of development. Ajax applications, in particular, are dangerous grounds for unobtrusive code. Just because your application has a rich Ajax interface does not mean that you cannot add this code in a progressively enhancing manner. You will learn how to approach Ajax functions in a way that will provide a fallback for users who cannot take advantage of the fluidity your Ajax features have to offer. Finally, you will see a detailed example of an application that provides dynamic Ajax loading that still works even with JavaScript switched off.

Read the article on IBM developerWorks in English only.

(This article was published on IBM developerWorks in September 2010)

In the early days of the web, maximizing the performance of a web page usually meant avoiding the use of unnecessary HTML markup, keeping the amount of JavaScript code to a minimum, and heavily reducing the file size of any images so that the typical surfer didn’t have to go away and make a cup of coffee while your page loaded.

Advancements in various aspects of the web have meant that we are now faced with a whole new set of performance considerations. Despite the fact that DSL and broadband have made high-speed Internet access far more accessible to many people, our expectations of load time and responsiveness have also evolved to a state where we look for instant results when we perform an action on a page. The emergence of Asynchronous JavaScript and XML (Ajax) allowed developers to deliver a desktop-like experience in web applications, no longer requiring entire pages to load before responding to an event. The advantages of this are obvious, but it also led to the average web user expecting this type of responsiveness from all web applications. With the recent rise of the mobile web there is a new challenge of meeting a modern web user’s expectations, and all of this on a target device with a smaller screen, less power, and slower connectivity.

The focus of this article is on informing you of the considerations you should take to maximize the performance of your JavaScript and Ajax web applications. This article offers a set of guidelines on how to best approach any new code you are writing, whether it be in a new application or an existing one. You will also learn about the various tools and techniques that are out there for measuring the performance of your application. Finally, you will learn about various methods of improving performance that do not require you to change your existing code.

This article is available on IBM developerWorks in English and Japanese.

Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

JavaScript is an object-oriented scripting language that has long been the client-side scripting interface of choice for Web browser applications. JavaScript lets Web developers programmatically work with objects on a Web page, providing a platform for manipulating these objects on-the-fly. When JavaScript was first introduced, it was commonly used to provide trivial features on Web pages such as clocks and scrolling text in the browser status bar. Another common feature was the “rollover link,” where an image or text color of a link would be changed when the user rolled their mouse over it. In recent times, however, JavaScript has evolved to become far more useful, with the concept of Asynchronous JavaScript and XML (Ajax) bringing a whole new level of interactivity to Web-based programming. Prior to Ajax, any server-side processing or database access would require the entire page to be “refreshed” or a new page to be rendered by the browser. Not only is this slow and frustrating for the user, but it is also a waste of bandwidth and resources.

Read the article at http://www.ibm.com/developerworks/web/library/wa-jsframeworks/