Macadamian Blog

4 HTML 5 Frameworks you Need to Know About

Didier Thizy

There are 4 excellent HTML5 frameworks that can simplify the process of using HTML5 and reduce cross-platform and cross-browser issues.

4 HTML5 Frameworks

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

Sencha Code

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.

2. jQuery

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.

Use jQuery whenever you need to do something cool with your UI around menus like transitions, slideshows or fancy menus. Here’s an example of a simple drop-down menu created in jQuery: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

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.

3. Backbone 

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.

4. Cordova

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.

Unlike Sencha, jQuery and Backbone, Cordova isn’t a JavaScript library. All of the other frameworks I’ve talked about are written in JavaScript but Cordova isn’t entirely JavaScript – it’s more of a bridge between JavaScript and native device APIs.

What I like about Cordova is that it works with any mobile framework. You can use it with JavaScript, Sencha Touch, JQuery, Backbone and JQuery Mobile – pretty much anything. In fact, it’s good to combine them to maximize functionality and give yourself a powerful framework. Using multiple frameworks with Cordova won’t make it easier to work with, but it can save you from having to develop a lot of functionality yourself.

 

Tags: ,

Author Overview

Didier Thizy

Didier is Macadamian's VP of Sales, running all account management as well as our growing healthcare practice. Responsible for a cross-functional unit of design and development consultants, his areas of focus include consumer and enterprise IoT software, health software, and usability of complex systems. Didier is an active member of HIMSS, MGMA and Health 2.0. When Didier is not on the road, you can find him rocking out to 80s music, and on certain rare mornings, sleeping in because his kids decided to cut him some slack. Didier has been a software professional for 16 years, holding a variety of positions in Software R&D, Product Management and Business Development.