We’re big fans of HTML5 at Macadamian.
Not only does it offer powerful new features and support the latest multimedia, it can speed and enhance development – especially for mobile apps. I’ve found that there are four excellent HTML5 frameworks that can simplify the process of using HTML5 and reduce cross-platform and cross-browser issues. These are:
1. Sencha & Sencha Touch
Sencha is a company that has created some solid web app frameworks. Its frameworks can help you to build HTML5 apps that look and feel “native” and run on any device. Sencha makes big frameworks that include both UI and controller/mode components, and you can use it to write a full MVC (model-view-controller) app.
Sencha for the Desktop
One of its more popular desktop frameworks is Ext JS 4. On modern browsers, Ext JS 4 uses HTML5 features and it defaults back to alternatives on older browsers. Basically, it helps you to build an app that harnesses the power of the web regardless of the browser the end customer might use.
Ext JS 4 also allows you to include nice drag-and-drop functionality into your desktop app. Play around with this live example to see the end result:http://dev.sencha.com/deploy/ext-4.0.1/examples/desktop/desktop.html
I can’t stress enough, though, that Ext JS 4 is for desktop use only – don’t try to run it on a mobile app unless you want it to be unbearably slow. For mobile apps, you should use Sencha Touch.
Sencha Touch for Mobile
As its name implies, Sencha Touch 2 is designed specifically for devices with touch screens – namely mobile devices. It gives you the ability to create the most common and expected mobile experiences such as scrolling and bouncing, and it lets you create header elements and back elements quickly and easily.
Sencha Touch is especially nice if you’re working on an iOS project because its output looks and feels a lot like what you’d see in a typical iOS app. Here are some live examples of what it can do:http://dev.sencha.com/deploy/touch/examples/production/index.html
The code used for Ext JS and Sencha Touch is very similar and easy to recognize. Check out these code examples to see what I mean:http://docs.sencha.com/touch/2-0/#!/guide/first_app http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started After working with it, it won’t take long for you to look at a piece of code and tell whether or not it’s Sencha.
While jQuery is technically a framework, it isn’t as big or “framework-y” as Sencha. It’s more of a UI library that simplifies HTML document traversing, event handling, animating, and Ajax interactions.
Unlike Sencha, jQuery isn’t used to manage models or controllers and it isn’t an all-encompassing framework that tells you how to do everything. Instead, it’s a very plugin-oriented solution that you can use as much (or as little) as you need.
Because of its plugin nature, jQuery plays very nicely with other frameworks so it’s safe to use with Ext JS 4 and Sencha Touch. What you don’t want to do, though, is mix two mobile frameworks. jQuery has a mobile version called jQuery Mobile that is good for mobile development unless you’re using a mobile framework like Sencha Touch. jQuery Mobile and Sencha Touch have conflicting functionality and will give you a ton of headaches if you try to combine them.
To confuse things, there’s a product out there called jqMobi which is actually different from jQuery Mobile but performs many of the same functions. I’ve never used it personally, but it can also be used for mobile HTML5 app development.
Lastly, you may have heard of an old version called jQuery Touch. I would not recommend this as it was one of the very first solutions for mobile app development and is quite old and obsolete.
Backbone.js is an MVC library like Sencha, but it doesn’t include widgets for creating fancy UI elements. What it does give you is a lot of really neat model control and excellent documentation. It pairs well with jQuery and jQuery Mobile because you can use their plugins to develop UI elements while taking advantage of the MVC elements present in Backbone.
Here is a nice example of a checklist created with Backbone:http://documentcloud.github.com/backbone/examples/todos/index.html
While it’s very similar to Sencha, I find the documentation and explanations provided by Backbone to be more helpful than those created by Sencha. While they are both large frameworks, Backbone’s documentation is much more readable and not as overwhelming as Sencha’s.
You probably haven’t heard of Cordova because up until a few weeks ago it was called PhoneGap. Keep that in mind if you go looking for Cordova tutorials because you may need to look for both Cordova and PhoneGap resources until people standardize on the new name.