The programming world is made up of virtual city-states that tend to keep to themselves. The device driver authors rarely share much code or ideas with the server app creators. The Windows hackers don't talk with the Mac programmers. It's as if some emperor decreed that Java City will always be at war with C-ville.
That reality is changing rapidly as one language, JavaScript, breaks out of its once simple life of popping up alert boxes to tell people that they needed to fill out every form field marked with a red asterisk. This is most apparent in the mobile world where more and more developers are building mobile apps with JavaScript, CSS, and HTML, then bundling them with a thin, native wrapper. Sure, the JavaScript code isn't always as responsive as the pure native code, but it runs on all of the major mobile platforms -- and in your desktop browser. It's the fastest way to create cross-platform apps.
JavaScript is making these inroads because tablets and phones are growing incredibly powerful, at least compared to their anemic predecessors. The fifth generation of the iPad may actually be 70 times faster than the first generation at some tasks. The new tablets and phones have so much horsepower that they don't always need the speed and simplicity of native code. If the workload isn't too heavy, they can do a good job with HTML5. Why not get all of the cross-platform simplicity if it works well enough? (For more information on what happens afterward, see our review of PhoneGap and related tools.)
But smartphone programmers aren't the only ones interested. For many people, the smartphone is their main way for accessing the Internet. A larger and larger percentage of the mail I get comes with a little disclaimer at the bottom asking me to disregard any typos because it was written on an iPhone or an Android phone. (The BlackBerry keyboards never seemed to need this, for some reason.) If regular websites want to follow the crowd, they need to generate pages that look good on the tiny screen. They can't assume that everyone is reading the information on a desktop box. That means the Web designers are interested in many of the same techniques as the mobile app designers.
All of this makes it a good time to look at a few of the most prominent frameworks for building complicated applications out of just HTML, JavaScript, and CSS. These tools -- jQuery Mobile, Sencha Touch, Telerik's Kendo UI, and Intel App Framework -- are designed to present information in a beautiful way on the small and not-so-small screen. They marry the convenience of HTML with a smartphone- and tablet-centric design. They're the quickest way to get working apps on the new devices.
jQuery Mobile
In a world where jQuery rules, it helps to wear the royal name: jQuery Mobile. The framework is more of a brand extension than a real extension to jQuery because the goal is to provide a good framework for creating Web apps for mobile browsers. While jQuery is required, most of the work is done in HTML and CSS.
This focus on HTML is by design. The jQuery Mobile developers clearly feel the content should be marked up in HTML -- which is what you'll spend much of your time doing. Creating a Web app with N pages is done by building one Web page with N DIVs. The links between the DIVs are just anchor tags with the ID marked with a hashtag. jQuery Mobile takes over and shuffles the DIVs on and off the screen using many of the transitions that are now standard. While the other approaches are largely writing code in JavaScript, jQuery Mobile is more HTML with occasional calls to JavaScript.
CSS is also a big part of the equation. If you're going to build out your user interface, you start adding DIVs and giving them CSS class names that, in turn, give the DIVs the style you choose. Using the built-in CSS definitions ensures a consistent look. Departing from them can get tricky if you don't understand how some of the floats work. The standard styles, though, are quite plain. I'm sure some will even call them boring.
There are all of the usual widgets, and they end up emulating most of what people can do with the native tools. The nice drawer feature that hides a panel of buttons behind everything is implemented and ready. All you need to do is create a DIV with the data display attribute set to "reveal." The code does the rest. A substantial amount of the code is created simply by adding these attributes. jQuery Mobile embraces the "data-" nomenclature from HTML5.
The adequate documentation is saved by a rich collection of examples. The trickiest part I found was figuring out how all the DIVs need to be nested. If you plunk a DIV down in the wrong place, it will start inheriting weird behavior thanks to the interplacement of the HTML and the CSS. While it doesn't take much knowledge of CSS to knock off some basic designs, you have to start thinking about it if you want to create something more elaborate. Most people don't think of CSS as a programming language per se, but I did after monkeying with these pages for a bit.
jQuery Mobile is an open source project with a generous MIT license.
Sencha Touch
Sencha began by building frameworks for full-featured apps that live in your browser, then extended its expertise to produce Sencha Touch for tablets and smartphones. Sencha's Ext JS is the foundation of a line of products that includes compilers and IDEs. Sencha Touch is part of this product line.
Sencha Touch, the core used to create mobile apps, is free for both open source and proprietary development as long as your code won't run as an embedded part of a product that ships more than 5,000 units. This is Sencha's free carrot to get people interested in its tool. The company also sells support and courses to anyone who needs a bit of help.
I've been experimenting with Sencha Touch for some time, and it has always offered a smooth collection of routines that handle the touch events without glitching. The applications are laid out in JavaScript -- or to be more precise, in a big JavaScript data structure that can include custom bits of code. You don't build an app so much as create a tree structure out of JSON filled with snippets of HTML stored as strings. Then you pass this structure to a Sencha Touch routine and step back. Sencha Touch will swap these structures in and out of view and handle all the buttons to get them where they need to go.
Sencha Touch is an increasingly small part of a bigger landscape. Sencha sells a Sencha Touch Bundle that includes a number of extras such as Architect, a visual editor for creating apps, and Charts, a collection of charting routines that makes everything looker nicer. The Bundle is $695 for one developer, and there are volume price breaks for five and 20 developers. A more expensive Sencha Complete bundle tosses in the licenses to tackle desktop jobs.
Kendo UI
Another way to turn HTML and JavaScript into nice sites is to build it upon the Kendo UI libraries. This proprietary framework comes from Telerik, a company that uses Kendo UI as one of the main frameworks for its app development tool, Icenium. Kendo UI is the part of the Telerik stack responsible for determining how the data appears on the screen, but you don't need to use it with Telerik's other code. You can create an app and ship it separately.
Creating pages with Kendo UI is a mixture of JavaScript and HTML. Some of the widgets are built by handing Kendo UI a JSON data structure and letting it create the HTML elements, and some of the widgets are crafted out of pure HTML. If you have a static item, you can start off with HTML. If you'll be doing a bunch of interactive scrambling of the screen, you'll probably want to start off with JavaScript. A list, for instance, might be marked up with <li> tags if it's not going to change, but it might start with data if it's going to be updated with AJAX calls.
There are more built-in options for styling with Kendo UI, and you can create your own with one of the several tools. There's a UI Mobile Theme builder that lets you change the color and fonts for the interface by dragging and dropping the colors in a browser window filled with five different mobile options. You can test the look on an iPhone, Android, BlackBerry, and Nokia in one glance. The basic themes echo the standard look and feel for each platform so that the tool will seem like a native app, complete with the native look and feel. Kendo UI also offers a more universal theme to create an app that appears the same on all platforms, should you want a more consistent brand.
The widget collection emulates the standard collection of nav bars, lists, buttons, and whatnot found in the native code. All are touch-enabled and able to be bundled into pages that work together as an application. The framework is sensitive to the size of the screen, so you can offer split screens and layouts more appropriate for larger tables. There's also a nicely crafted collection of the basic graphs (bar, bubble, donut, and so on) and dials that make a decent dashboard. All are generally knitted together as DIVs.
The Kendo UI framework is part of a bigger strategy for Telerik. Not only is it the preferred framework for the company's Icenium toolkit, but it's also part of a collection of server-side tools for developers building more traditional PHP, .Net, or JSP-based apps. So you can carry over some of your basic Kendo UI design over to a Web app. The design philosophy maps neatly but not the code. You'll be rewriting much of the Kendo UI code in either PHP, .Net, or JSP, but you'll rely on the same basic structure.
Kendo is a commercial product with prices that begin as low as $199 per developer for the mobile libraries. Prices go up from there to $999 per developer for the tools for using it with the server-side libraries for PHP, .Net, or JSP. These include support and free updates for one year.
App Framework
Intel may still be known for creating the chips that power the desktops of the world, but the company has been trying to expand into the world of software for many years. The App Framework is one of its latest projects. A collection of JavaScript and CSS that can emulate all the native features of the major phones (iOS, Android, Windows 8, and BlackBerry), App Framework offers much of the same functionality as the other frameworks, but also includes a large collection of tools for building and testing your apps.
One of the more notable differences is a smaller library for manipulating the DOM that offers the most important features of jQuery without the slower functions. Intel claims its library is the fastest and most robust answer to the mobile Web, though I didn't notice much practical difference in my tests. The functionality and structure is pretty much the same as jQuery, and if you need perfect jQuery compatibility you can install a plug-in that runs jQuery alongside.
The best part may be the larger collection of tools that include a website and a Java-based client for building and testing your applications. There's also a newer Windows executable for those who want everything running locally.
You can drag and drop the DIVs into the right place and try the results in your browser. The tool works well, at least for the basic construction. While I wished it could handle a few more features like uploading any image -- I had to suffer through the tedium of copying the images myself -- it popped out a basic app pretty quickly. Intel also offers a Web-based style builder for editing the standard elements of a mobile Web app that will spit out a CSS file when you're happy with the results.
All of the structure is marked up in HTML, and the JavaScript does the work. Any styling is done by CSS, and the transitions and widgets are fairly standard. Some of the less commonly used widgets like the carousel are kept separate as plug-ins you can add as needed. This keeps the resulting code smaller and thus easier to deploy through the Web instead of as an app.
The source code for the App Framework is released under the very accommodating MIT X11 license. The terms of use for some of the Web-based tools say they're for "personal, non-commercial use," but I'm not sure if they really mean it. At this point App Framework feels more like a project "sponsored by Intel" than a commercial venture.
Websites like native apps
The results from these four solutions have much the same feel. All four are trying to emulate the collection of native widgets offered by the various platforms, so it's no surprise they end up producing similar results, at least for basic, static apps filled with pages, buttons, and text.