You’ve heard this mantra before—the IBM i is a secure, stable, scalable platform for deploying modern web applications. And it’s true! There are many proven server-side coding tools for writing IBM i-hosted web applications. But in order to produce the most productive and powerful apps you also need to be conversant with the latest client-side technologies.
In the last couple of years alone, several emerging technologies have become mainstream, thanks to improved browsers, new devices such as tablets, and a better understanding in the software development community of the significance of highly responsive user interface patterns (think: Facebook).
In this article, I’ll introduce you to the following five important technologies, which can be used alongside any server-side language, and explain why you need to know them:
● jQuery mobile
HTML5 is very different from earlier versions of HTML. For example, HTML 4 was really just an incremental improvement to earlier incarnations. HTML5 has a whole host of new capabilities that can make your web applications more powerful. HTML5 is supported to varying degrees by most modern browsers, including Safari and Chrome on mobile platforms like iOS (iPhone and iPad) and Android. If you are in a position where you can predict or control which browser your end-users are using then you may be able to take advantage of HTML5’s advanced features. See www.html5test.com to determine what level of support your preferred browser provides.
HTML5 includes the following key features (this is by no means a comprehensive list):
· Native video support (eliminating the need for Flash)
· Native graphics support using the canvas element
· Improved audio support
· Advanced offline storage (essentially like a mini-database)
· Advanced form controls including new input types (date, email, color, number, etc.)
· Native drag and drop
One example of the power of HTML5 is the new contenteditable keyword. It makes any piece of display-only HTML editable by clicking on it. (See http://html5demos.com/contenteditable for an example). If you combine this with AJAX (which I’ll explain later), you can let your users update small sections of a page with instantaneous feedback, like performing a status update on Facebook.
jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.
When you use jQuery Mobile to construct your user interface, you develop a single code base for all supported devices and platforms (and there are many). jQuery Mobile happens to use HTML5 to achieve this. The user interfaces you can construct are professional and modern looking, allowing you to run mobile apps in browsers that look almost identical to their native cousins. Learning jQuery Mobile is easy. They even have a GUI drag and drop interface directly on their homepage to show you what you can produce.
JSON is not really a technology per se - it’s a convention for describing data and sharing it with servers and clients. It’s a lightweight alternative to XML. The real advantage of JSON is it provides a simple, consistent way to send data, in simple or complex structures, back and forth between client code (jQuery) and server code.
JSON is much more compact than XML and most programmers find it easier to read than XML documents (depending on the complexity of the structures). It is also more lightweight than XML so it improves your application’s performance as less data is sent back and forth over the network.
AJAX has been around for quite a while now (it became ‘mainstream’ in 2005) but uses for it are still emerging. AJAX provides a way for you to accept input or update pieces of a page without having to refresh an entire page. Again, think of Facebook - when you click the thumb icon to ‘like,’ something you get an instant response (the ‘like’ count goes up). Facebook doesn’t have to reload the entire page. That’s because clicking the icon sends an AJAX request to the server. Essentially, it calls a program on the server with a parameter of your user id and some key to the thing you are ‘liking.’ The server simply retrieves the ‘like’ counter from a table, increments it by 1, and returns the data to the page, at which point a callback function updates the count HTML element on the page.
These kinds of interactions happen all over the place in Facebook and other highly responsive applications without us even thinking about it. Imagine how this sort of functionality can improve your own business apps—a client adds an item to a shopping cart, they immediately see a message confirming it was added, and the running order total is updated - all without having to reload the page.
The easiest way to accomplish this is to use jQuery, JSON, and AJAX together, along with whatever server-side language you are using: RPG, Java, or PHP.
Using these technologies will help you deliver better, more productive web applications—desktop or mobile—to your users. All five technologies are easy to learn and there are many online resources with example code to help you get started.