Review: Mobile Web development frameworks face off

jQuery Mobile, Sencha Touch, Kendo UI, and Intel App Framework bring a native look and feel to Web apps for mobile devices

By Peter Wayner, InfoWorld |  Mobile & Wireless, web development

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.

[ The InfoWorld Test Center review: 3 PhoneGap toolkits tame mobile app development | How are your HTML and JavaScript skills? Find out in InfoWorld's JavaScript IQ test and HTML5 IQ test. | Keep up with the latest developer news with InfoWorld's Developer World newsletter. ]

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 MobileIn 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.

jQuery Mobile development can be done in your browser with your browser's debugger.

Sencha TouchSencha 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.

The Sencha Touch documentation includes embedded live examples that you can execute while reading.

Kendo UIAnother 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.

The Kendo UI ThemeBuilder lets you fiddle with the colors and fonts of your themes and see them simulated in all five of the major smartphone platforms.

App FrameworkIntel 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.

App Starter -- a UI prototyper for Intel's App Framework -- lets you drag and drop your widgets into place.

Websites like native appsThe 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.

The differences lie underneath and appear when you start writing your app. If you prefer to write HTML and you think in HTML, then jQuery Mobile, App Framework, and Kendo UI are the better choices. All three of these will accept your app as a stack of DIVs, then parse and and lay them out appropriately. If your app is relatively static with a well-defined map of links between pages, this is a pretty simple way to program. You write HTML and it looks like Objective-C or Java, running natively.

Sencha Touch takes a different approach, asking for the app to be defined as big JSON object. Kendo UI can also work with apps to some extent, but its model and the included examples are generally focused on HTML first. With Sencha Touch, you're writing JavaScript and linking it together with Sencha's JavaScript libraries. I used Sencha Touch with some data-intensive apps that need to create dynamic pages on the fly. The data arrived as a JSON object, and I handed it off to Sencha to parse and display.

I could have done the same with jQuery Mobile, but it would have been trickier. My code would have been responsible for parsing the data structure and creating the elements. It's not that hard to do, but it's nicer to leave it up to the app.

There may be an argument for using the more programmer-centric approach in case the world of HTML changes. If the local app is responsible for changing the JSON into the right mix of HTML, it can evolve and adapt to different platforms. It might use different sets of tags for the different mobile platforms. Or as time passes and new architectures and strategies emerge, the next generation of the local code can adopt them. Your JSON stays the same, but the approach can change.

The argument against this approach is that all of this processing takes some time. It has a cost in terms of memory and time even if it's just a megabyte or a millisecond. However, I haven't noticed any problems with my apps, which use big trees filled with data.

As much as I enjoyed working in the JavaScript layer, I often found it a bit confusing. No matter how well done a framework's API happens to be, it's still entirely new. I understand HTML much better, and that's why I found myself gravitating to it whenever I didn't need all of the power of dynamic JavaScript. HTML is simpler -- and that's a big advantage.

I think many developers will also find success with the simpler frameworks, at least for static constellations of pages. It's possible to build amazing mobile apps using the same skills for building nesting DIVs normally used to create Web pages. This can allow someone who is proficient in Web development to do the work of someone who knows Objective-C and someone else who knows Java, all at the same time. This is quite a feat because it's rare to find a programmer who is up to speed on one, let alone both. HTML, CSS, and a bit of JavaScript are much more common. This produces the leverage that makes these frameworks so attractive.

This article, "Review: Mobile Web development frameworks face off," was originally published at InfoWorld.com. Follow the latest developments in application development and mobile technology at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.

Read more about application development in InfoWorld's Application Development Channel.

Don't miss...


Arg! The 9 hardest things programmers have to do

The developer's guide to future car technology

5 ridiculous tech fees you're still paying

  Sign me up for ITworld's FREE daily newsletter!
Email: 
 


Originally published on InfoWorld |  Click here to read the original story.
Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question
randomness