Joe Lennon

The second part of my IBM developerWorks series on getting started with Dojo development was published yesterday. This part focuses on Dojo’s class-based object-orientation features, which help make JavaScript OO a little more bearable for traditional class-based OO developers with backgrounds in the likes of Java and C++.

The Dojo toolkit enables web application developers to create Rich Internet Applications by offering a wide variety of features that save development time and effort. From DOM helpers and Asynchronous JavaScript and XML (Ajax) to a full-blown widget library and object-orientation features, Dojo includes virtually everything you need to build large-scale Ajax-powered web applications. If the functions you are looking for are not included in Dojo itself, it’s likely that you can find them in DojoX, a repository of extensions and experimental features that are not included in the Base or Core modules of the toolkit. In Part 2 of this three-part series on developing rich web-based applications using the Dojo toolkit, you will learn about JavaScript’s object-orientation features, and how they differ from a traditional class-based object-oriented programming language. You will then see how Dojo bridges this gap by offering a class-based system of its own.

Object-oriented programming (OOP) is a software development paradigm that is based on the definition of data structures called objects, which consist of data properties and functions. These properties (member variables) and functions (or methods) define the potential interaction that a piece of software can perform with that object. The primary benefit of OOP is that it helps with code re-use and maintenance by making it easier to organize your code.

Read the full article on IBM developerWorks: http://www.ibm.com/developerworks/library/wa-ground2/

My latest developerWorks was published earlier this week. This is the first of a 3 part series on the Dojo JavaScript framework. Part 1 of the series is titled “Dojo from the ground up, Part 1: Getting started with Dojo development” and covers the basics of working with the Dojo toolkit. Part 2 covers Dojo’s excellent object-orientation features, and Part 3 covers the Dijit user interface component library. Parts 2 and 3 will be available in the coming weeks.

The Dojo toolkit enables web application developers to create Rich Internet Applications by offering a wide variety of features that save development time and effort. From DOM helpers and Asynchronous JavaScript and XML (Ajax) to a full-blown widget library and object-orientation features, Dojo includes virtually everything you need to build large-scale Ajax-powered web applications. If the functions you are looking for are not included in Dojo itself, it’s highly likely that you can find them in DojoX, a repository of extensions and experimental features that are not included in the Base or Core modules of the toolkit. In this article series, learn how to develop Dojo-powered applications from the ground up, covering the basics, Dojo’s great object-orientation features, and the Dijit user interface library. By the end of this series, you will be well prepared to develop Dojo applications of your own.

Dojo was created in 2004 to make the process of developing DHTML and JavaScript web applications easier, hiding much of the cross-browser inconsistencies that are prevalent in modern web browsers. This enabled the focus to be placed on implementing functions rather than tweaking code to make it work on every browser. Dojo is owned by the Dojo foundation, which was founded in 2005 by Alex Russell and Dylan Schiemann. Dojo is open source software (OSS) and is available under a dual-license (you can pick which one you want to adhere to) with both the Academic Free License (AFL) and a modified BSD license available.

Read the full article at IBM developerWorks: http://www.ibm.com/developerworks/web/library/wa-ground/index.html

Ext JS is a comprehensive JavaScript framework that includes a vast collection of features, including cross-browser-compatible JavaScript helper utilities for DOM traversal and manipulation and data object stores. It also handles Ajax and direct web remoting, has an impressive collection of UI controls and widgets, charts and graphs, a powerful data grid control, and much, much more.

When developing applications using Ext JS, or indeed any JavaScript library or framework, you can be sure that you are going to need functionality that isn’t included out-of-the-box, or is present but doesn’t work quite the way you want it to. Thankfully, Ext JS includes a powerful class and component ecosystem that makes it easy to extend existing features or build new components entirely. In this article, we will explore this extensibility, specifically looking at the concepts of extensions and plug-ins. You will learn what each of these concepts means and what is different between the two. You will then see how to build your own extensions and plug-ins and how to source existing plug-ins built by other developers for use in your own applications, saving you from reinventing the wheel.

Read this article on IBM developerWorks at http://www.ibm.com/developerworks/library/wa-extjs/

(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 October 2010)

The concept of Ajax has allowed web applications to evolve from being slow, unresponsive, and counter-intuitive to behaving more like desktop applications, delivering instant feedback, removing the need for page refreshes, and facilitating a much better user experience all around. The problem with Ajax is that it adds an additional layer of complexity to application development. In an event-driven application, you might perform an action when a user clicks on a button. In traditional application development, you can put all of your logic for what this action should do right in the event handler, but with Ajax it’s not that easy. You probably do some client-side validation, and if that is passed, you prepare your data and create a new Ajax request. You then define functions to handle a successful response and a failure. Then you must create the server-side code that will handle the Ajax requests and return a suitable response. This will probably need to be in a certain data format, such as JavaScript Object Notation (JSON) or XML, and you must provide it in such a way that the client side is expecting to receive it.

In short, Ajax development requires that a web application developer maintain a set of code both on the client side and on the server side, and there can be huge differences in how both work, making it difficult to debug and maintain. It would be great if developers had a way of calling server-side actions on the client-side, minimizing their exposure to all of the Ajax request and response handling. That’s where Ext.Direct comes in.

At first, Ext.Direct may seem like an overzealous solution to a small problem, but by investing your time and effort in it at the start, you’ll start to reap dividends later on. The initial hurdle of getting the building blocks of Ext.Direct working may seem complicated, but it typically only needs to be done once, and after that the changes needed to add new classes and methods are very straightforward. In this article, you learn how to get started and put the building blocks in place, and how to actually use Ext.Direct to call remote PHP methods from JavaScript. You then learn some of the more advanced features that Ext.Direct has to offer, and how to take full advantage of them in your own applications.

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