Tag Archives: dojo

WebSphere to Application developers: use HTML5 to build once, deploy anywhere

There’s a lot of talk these days in the enterprise space around mobile development.

In a series of short interviews, watch the infectiously energetic Jerry Cuomo (WebSphere CTO) explain that for many customers mobile is not an option. They need to have a roadmap to mobile deployment, and they need it now. Drawing parallels to the growth of the web over a decade ago, Jerry talks of the current ‘frenzied excitement’ which he believes will lead to an environment of better choice, architecture and the design moving forward.

And choice is something we’re not short of in the mobile development space. Should you develop web-based mobile apps? Should you develop native apps to cover the whole gamut of platforms (which still includes Blackberry if you’re talking B2B development).

Whilst now developers are faced with a number of mobile architectures on which to develop, the Holy Grail is to leverage existing skills, whether they be around the web, open standards, Java, etc. to write an application once and deploy to many devices.

(See the whole series)

WebSphere Application Server has taken this approach for its mobile strategy with the launch of the Web 2.0 and Mobile Feature Pack. Built on the popular Dojo Toolkit, the Feature Pack gives developers access to HTML5 mobile themes (to develop web apps that look like native applications), mobile widgets, diagrams and improved gauges and charting. 

As IBM’s Chris Mitchell explains in this video, for the clear majority of developers of enterprise applications, the user interface (UI) is simple enough to not require all the full-blown features of a native app. Displaying an XML feed of first-quarter product sales is a substantially different proposition to rendering a realistic 3D racing game. Having said that, mobile frameworks like Dojo are becoming richer and really stretching the paradigm of what can be displayed on the web.

For instance, Eric Durocher over on the Web 2.0 and Mobile Development Blog shows how a complex diagram like an organizational chart can be rendered for a mobile device:

 

What are the best practices for developing these applications?

Chris Mitchell suggests an architecture that decouples the server from the client. Data from the server side can be exposed using REST or web services. These can be accessed from the client side, whether the client be a web application or a mobile one. In this way you only build one core application with only minimal work on the front-end to cover any web-enabled device.

If you want to take this a step further and offer native apps (say, if there is a requirement for the app to appear in an App store like Apple’s or Android’s), you can create a hybrid application with a tool like PhoneGap. You effectively build a web-based mobile app and let PhoneGap provide a wrapper so from a user perspective it looks and runs like a native app.

Ready to get started with mobile app development? The Web 2.0 and Mobile Feature Pack is a no-charge product extension to WebSphere Application Server (version 8.0 now available for download)

Creating rich internet applications using the Dojo Toolkit

IBM has embraced the Dojo Ajax toolkit for the development of web-based user interfaces (UIs). In this presentation towards the end of IBM Impact, Chris Mtichell from IBM’s Websphere group explains what the Dojo toolkit is and how it can be used by developers.

Chris points out that more and more of us are using browsers to interact with more and more complex applications. This calls for more advanced UIs, and here is where Ajax can play a big part. Rather than having to refresh the whole page when some new information is required from the server, Ajax allows for the update of a single element (whether it be a number, an image, a piece of html etc.). Add DHTML to the equation and you can build rich interfaces approximating those found in software applications.

Toolkits such as Dojo have emerged to simplify code for common functions and to deal with issues such as cross-browser compatibility. The service-based nature of Ajax and these toolkits provides a great fit for SOA. The Dojo Toolkit itself is a set of common Javascript libraries used for creating Ajax and DHTML web applications. It has been around for almost 5 years.

Key features of this open source toolkit include a large collection of widgets (called ‘Dijit’), a data abstraction layer (useful for dealing with data coming from different sources, eg. Amazon, Yahoo or other APIs), event management handling and a debugging interface all in an extensible modular architecture. This means it only pulls in what it needs when it needs it, making it smaller and faster than just about any other toolkit out there.

The toolkit is divided up into base and core components:

dojo_structure1

Beyond that there is a widget/plugin approach for additional functionality:

dojo_widgets

Dojo ‘base’ features

It is worth looking at the rich feature-set provided as the base functions that are always available to developers (the lightweight dojo.js which weighs in at under 60kb):

  • Cookie functions
  • Lang utils and array extras (compatibility between IE6 and Firefox)
  • JSON serialization
  • Fast CSS manipulation
  • Events (simple connect)
  • Fast CSS style manipulation (for positioning elements)
  • Browser detection
  • URL functions
  • Doc load, unload hooks
  • Animation and effects (fade, slide, css colors)

Loading the Dojo Toolkit is as simple as referencing the Javascript in your HTML page and setting a few configuration options:

dojo_load

Most Dojo functions are tied to the dojo.addOnLoad event. Furthermore, a set of actions can be chained together. A key use of the Dojo Toolkit is to add styling to data pulled from an Ajax call. For instance, if a figure in a table has been updated, you might want to highlight this via CSS and then fade back to the normal state. You also have direct access to the DOM, with the potential to remove or add nodes (or HTML fragments).

When it comes to making an Ajax call, the dojo.xhr mechanism is simple and easy to use. It is based on XMLHTTPRequest and follows the standard REST conventions (get, put, post delete). Here’s an example of grabbing a subscription using JSON, and displaying the output:

dojo_ajax

Dojo ‘core’ libraries

The libraries contain modules that are extremely useful, but not always needed. They are not loaded by default (for performance reasons) but can be accessed using dojo.require().

Some examples:

  • Extended animation
  • Date parsers
  • Drag ‘N Drop
  • Regular expressions
  • Extended I/O

Widgets and plugins

In the Dojo world, core widgets are handled by a system called Dijit. As well as being a set of pre-packaged skinnable, template-driven widgets, Dijit also contains a powerful, flexible architecture for building your own widgets.

Dijit in action:

dojo_dijit

DojoX, another set of widgets could be termed the ‘Las Vegas of widgets': it contains everything under the sun. Extended animation effects, date parsers, presentation tools including graphs and charts, 3d vector graphics and even an offline mode incorporating Google Gears.

DojoX also handles all cross-browser compatibility issues around displaying images:

dojo_dojox

Best practice for Dojo development

When it comes to actual development, Chris had a few pointers:

  • Firebug, the Firefox plugin is great for debugging Dojo
  • Make sure you test in Internet Explorer upfront: don’t wait until the last moment
  • Initialize Javascript code only once
  • Understand the DOM methods
  • Learn RegExp and CSS Selectors

Helpful resources

Dojo community: http://dojotoolkit.org/community/, http://dojotoolkit.org/forum
Blogs, tutorials and more: http://dojotoolkit.org/key-links
Documentation: http://dojocampus.org, http://docs.dojocampus.org

More from IBM on Dojo