Review: Mobile Web development frameworks face off
- 30 October, 2013 10:08
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.