HTML5 Frameworks

Top 5 HTML5 Frameworks’ for Mobile Web Apps

Write once, run everywhere” this is the mantra of HTML5 technology.

HTML5 allow mobile developers to write code only once creating cross-platform mobile applications that can be opened with any mobile browser. An HTML5 mobile app is a web page, or series of web pages, designed to work on a tiny screen and on a widest range of devices and operating systems.

According to a recent IDC research over 80% of all mobile apps will be wholly or in part based upon HTML5 by 2015. Moreover a HTML adoption survey conducted between developers shows that 63% of them are currently using HTML5 and 31% plan on using it in the future.

Compared to native apps, HTML5 apps have some advantages and limitations:

Advantages:HTML5 vs Native Apps

  • Working on all mobile devices and OS
  • Offline support
  • Contents contained in the app can be found by search engines
  • Updates and bugs fixing are immediately available to all users
  • Distribution and support is much easier
  • No dependency on app stores
  • Faster and cheaper to develop

Limitations:

  • Limited access to native device functionality (camera, contacts, calendar, notifications)
  • Browser fragmentation
  • No secure offline storage
  • Difficult to discover as it is not listed in any app store.
  • No guarantee of safety and security of the app
  • Performance can be slower than native apps

Nowadays a lot of softwares give the possibility to developers to easily build mobile web apps based on HTML5. MobPartner has selected and review for you the top 5 HTML5 frameworks:

1. Sencha Touch

sencha-largeSencha Touch is a high-performance HTML5 mobile application framework. Built for enabling world-class user experiences, Sencha Touch enables developers to build powerful apps that work on iOS, Android, BlackBerry, Windows Phone, and more.

  • Pricing: Available for free use, but powered from paid license version. You can buy support packs starting from 299$.  More details
  • Pros: 50 built-in components, themes for every popular mobile platform, model–view–controller system.
  • Cons: Sometimes slow on Android and not working properly on Blackberry. It’s very hard to debug and fix errors.

sencha

 

2. jQuery Mobile

jquery mobileInstead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphones, tablets and desktop platforms.

  • Pricing: jQuery Mobile is completely free and open source.
  • Pros: If you know basic HTML it’s super easy to use. Drag-and-drop UI builder. Compatible with almost every device.
  • Cons: Sites may looks similar due the limited options of themes customization.

jQuery mobile

 

3. The-M-Project

m-project-logoThe-M-Project is a Mobile HTML5 JavaScript Framework that helps you build great mobile apps, easy and fast. The framework follows the popular model-view-controller (MVC) software architecture pattern, a huge selling point for many developers. It support all devices: smartphones, tablets and even desktops.

  • Pricing: The-M-Project is fully Open Source, MIT licensed and free to use.
  • Pros: it comes with a build tool called Espresso!, offline support, excellent demos
  • Cons: It’s a new project at its alpha stage so some things are not yet implemented.

the-m-project

 4. DaVinci Studio

davinci studio logoDaVinci Studio will become your steady side-kick in the world of HTML5. This  app framework enables you to drop and drag different elements with a WYSIWYG (What You See Is What You Get) authoring environment.

  • Pricing: Free
  • Pros: Compatible with open source frameworks, emulator to simulate N-screen environments, extensive functions & widgets.
  • Cons: It’s very new on the market so some bugs has still to be fixed.

davinci studio

 

 5. Wink

wink_header_logoWink stands for Webapp INnovation Kit and is a toolkit which will help you build great mobile web apps for iOS (iPod, iPhone, iPad), Android, BlackBerry, Bada and now Windows Phone 7. Moreover it is adapted for Firefox mobile and Opera mobile.

  • Pricing: Wink is an Open Source project of the Dojo Foundation, distributed under the modified BSD License.
  • Pros: it keeps the file size minimum, big library of widgets as 3D wall, sliding panels, flip page, coverflow, progress bar and much more.
  • Cons: the documentation looks a bit poor and cold.

wink illustration

Beyond native apps, mobile sites and HTML5 web apps, another option for mobile developers are hybrid apps that provide web view where its possible and platform-specific native components where it’s not.

 

Reviews of HTML5 Frameworks

Choosing the right HTML5 framework can be a daunting task. Mobile compatibility, scalability, TV, embedded devices, browser, and extensibility are just a few things to consider. Start with jQuery and do your research. You CAN go wrong, so choose carefully. Let’s examine some of the choices.

jQuery — Possibly the most popular JavaScript library in use today, jQuery provides concise, elegant syntax for DOM element querying, traversal and modification; CSS manipulation; event handling; effects and animations; and Ajax. It also serves as an extensible host for a vast and growing array of third-party plugins.

jQuery UI — jQuery UI builds on jQuery to provide user interface behaviors (including drag and drop, resizing, selection and sorting); animations and transitions; advanced effects; and high-level, themeable user interface controls (e.g.: accordion, auto-complete, date picker, tabs, etc.).

jQuery Mobile — jQuery Mobile is a cross-platform, cross-device, cross-browser user interface framework with strong industry backing from tech titans such as Adobe, Mozilla, Nokia, and BlackBerry. Through progressive enhancement (using CSS3 and JavaScript) it enhances basic HTML content and form elements into a unified set of touch-optimized, accessible, platform agnostic, theme-able controls. Built on jQuery and jQuery UI, it adds Ajax-based page loading and navigation; touch and gestures events; mouse vs. touch event abstraction via virtual mouse events; and integrates well with PhoneGap. It supports all major desktop browsers and mobile browsers alike.

jQTouch — jQTouch is a jQuery plugin from Sencha Labs targeting mobile web development and offering native animations, navigation and history management, and user interface themes for mobile WebKit browsers such as the iPhone, Nexus One, and Palm Pre. While jQTouch is well documented and easy to use, development has all but stopped and initial sample applications show that it is a bit buggy and even the sample applications have some performance issues.

Sencha/Ext Core — Ext Core is a cross-browser JavaScript library with capabilities similar to jQuery, such as DOM element query, traversal and modification; event handling; animation and effects; and Ajax.

Sencha/Ext JS — Ext JS is a cross-browser JavaScript library which enables developers to use an MVC architecture when building their app while also providing some very helpful features and widgets that can accelerate development timelines. Ext JS enables apps to leverage features like infinite scrolling and widgets for high performance grids, trees and menus.

Sencha Touch — Sencha Touch, the mobile counterpart to Ext JS, is a web application framework intended for developing applications that look and feel like native applications on supported mobile devices. Its approach differs significantly from jQTouch and jQuery Mobile: instead of enhancing pre-existing HTML, it generates its own DOM, based on objects created in JavaScript. It provides an extensive library of custom user interface components, optimized for touch input; transition effects; touch and gesture events; application data interchange (AJAX, JSONP, YQL); data bindings; and offline storage. Like jQuery Mobile, Sencha Touch integrates well with PhoneGap.

KnockoutJS — Knockout simplifies the development of complex web application user interfaces by applying the Model-View-View Model pattern. It offers declarative bindings in the DOM; automatic wiring of these bindings to their backing view models; automatic UI refresh based on observable and dependent observable model properties; easy extensibility through custom bindings; and the ability to generate sophisticated nested UIs from templates dynamically based on model data. Knockout integrates with many popular web frameworks, supports all mainstream browsers, and allows developers to use their choice of template engines.

Backbone.js — Backbone.js is a prescriptive web application framework that defines a structure consisting of JavaScript-based models, collections, and views. It offers models with key-value binding and custom events; collections with a rich API of enumerable functions and change notifications; views with declarative event handling; history management via a client-side URL router built on the HTML5 History API; and an implicit API for client-server data interchange via RESTful JSON. It has minimal dependencies and optionally integrates with jQuery or Zepto. It has been used to power the new LinkedIn Mobile app, and an increasing number of web applications such as MetaLab’s Flow, FourSquare, Groupon Now!, Basecamp Mobile, the new Pandora website, TileMill, and more.

Angular — Angular is a web application framework similar to KnockoutJS. It provides declarative UI templates; two-way data binding; implements the MVC pattern; integrates with RESTful JSON services; and offers dependency injection. Developed by Google, its ambitious goal is to reimagine HTML markup as if it had been originally designed with dynamic applications in mind. Like KnockoutJS (and unlike Sencha Touch), it does not provide a library of user interface controls, but instead focuses on generating and updating HTML from templates driven by application data.

GWT — Google Web Toolkit (GWT) is a web development toolkit for developing and debugging complex web applications in Java and cross-compiling that code to JavaScript for deployment. Its stated goal is “…to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript.” Google has used GWT internally to develop their own products, including Google Wave and the new AdWords. GWT is particularly well suited for use with Google App Engine, Google’s cloud computing platform as a service (PaaS) for hosting web applications.

Node — Node.js is a command-line and server-side JavaScript runtime environment based on the Google V8 JavaScript engine. It is used for developing JavaScript based command-line applications (such as the Less.js and CoffeeScript compilers) and highly scalable network applications. Node.js allows developers to write server-side code using JavaScript and leverages that language’s event-driven nature to deliver efficient, low-latency, collaborative, concurrent applications while requiring fewer hardware resources. Node includes an extensive API including HTTP and file I/O operations and has spawned a large ecosystem of related JavaScript-based third-party utilities and libraries.

Move on to HTML5 for the Enterprise, Part 4: Mobile HTML5