Cross-Platform Mobile Website Development – a Tool Comparison

Posted by Udayan Banerjee on December 13, 2011 · 12 Comments 

Gartner says, in 3 years, mobile application development projects will outnumber PC projects by 4-1 ratio and in 4 years, 50% of the people will primarily access their emails from a mobile device. So, the necessity of establishing a mobile channel for your customer is – well a no-brainer. However, should you just build a mobile website or should you also invest in building native application is not easy to decide. There can be no doubt that you need to have a website optimized for mobile devices.  What is the best way to build and maintain that website is not a simple decision.

There are many tools of different type available in the market but it is not strictly necessary to use any of them as each mobile platform comes with its own tool-set.

The cross-platform tolls can broadly be classified into five categories. They are:

(1) Mobile Web (JavaScript-CSS library),

(2) Visual Tool (Hosted – limited access to Code),

(3) App Generator (Native application for multiple platform),

(4) Hybrid App (Leverages embedded browser control) and

(5) Game Builder

[Here is an overview of the five categories of tool]

Should you use any tool to create mobile website for smartphones? Why can’t you directly code in HTML5 – after all most mobile browsers now support HTML5.

Well, there are 6 things you can expect from a tool:

1. UI component and widget library to give you a head start with AJAX features.
2. Style-sheet and skin to make the site look like a native application.
3. Simplified touch event handling.
4. Provide simplified mechanism for data manipulation, local storage and caching.
5. Create an abstract layer for client-server interaction.
6. Visual design and debugging tool.

You can, off course, decide to write the framework yourself, but that will require effort.

How to decide which tool is right for you?

There are many tools available and there is no clear market leader. Each tool has its own strength and weakness – you need to match them with what is important for you and what you can live without.

Here are some criteria that you need to consider:

1. Do you want a toolkit which has already established itself as an RIA tool or are you looking for a tool which is optimized for mobile?
2. Are you willing to consider an evolving product which looks promising?
3. Do you want a lightweight tool or a tool with comprehensive features?
4. Do you require full documentation?
5. Are you planning to modify / extend the library?
6. To you, how important is an active user base?
7. Do you require only UI library or do you need a complete framework?

Here are 10 tools – the ordering is alphabetic.

1. DHTMLX Touch

• Home page: Link
• Genesis: From AJAX tool – full feature
• Version: 1.0 Released on 14 Nov 2011
• Licensing: GNUv2 or Commercial
• Download: Link on home page
• Documentation: Available
• Sample application: Available
• Implementation: No reference
• Wikipedia: Yes
• Additional: Skin builder and visual designer (sluggish)
• Article on how to use: How to build a login screen  on netmagazine.com

2. iUI

• Home page: Link
• Genesis: From iPhone specific framework – UI only
• Version: 0.40-alpha1
• Licensing: new BSD / MIT – also available in Google Code
• Download: Here
• Documentation: Available
• Sample application: Available
• Implementation: Available
• Wikipedia: Yes
• Additional: Guide for hosting in Google App Engine
• Article on how to use: Build an iPhone-Optimized Website on webmonkey.com and Instant mobile site on Un-ideal

3. jQTouch

• Home page: Link
• Genesis: Started as a JQuery plugin – now a part of Sencha Labs
• Version: Beta 3
• Licensing: MIT – also available in Google Code and GitHub
• Download: Here
• Documentation: Not Available
• Sample application: Here
• Implementation: No reference
• Wikipedia: Yes
• Article on how to use: A mobile WebKit JavaScript framework on ajaxian and A weekend with jQTouch by David Vielmetter
• Book: Working with jqTouch to Build Websites on Top of jQuery

4. jQuery Mobile Framework

• Home page: Link
• Genesis: From web reporting tool – primarily UI
• Version: 1.0 Released on 16 Nov 2011
• Licensing: GPL or MIT – also available on GitHub
• Download: Here
• Documentation: Available – details of device supported
• Sample application: jQuery Mobile Gallery
• Implementation: Here and Here
• Wikipedia: Yes
• Additional: Theme Builder
• Article on how to use: How to Build an RSS Reader on net-tuts+ and Creating a Website on MiamiCoder (many more can be found under jQuery Mobile Gallery)
• Book on how to use: jQuery Mobile
• Community: http://www.jquery4u.com

5. Sencha Touch

• Home page: Link
• Genesis: From AJAX tool – full feature
• Version: 1.1.1 or 2.0.0 developer preview
• Licensing: GPLv3 or Commercial
• Download: Here
• Documentation: Available
• Sample application: Available
• Tutorial: Here
• Implementation: Available
• Wikipedia: Yes
• Article on how to use: The HTML5 Mobile App Framework on mobile-tuts+ and Developing the mobile portfolio tracker on Learn Some Things

6. Sproutcore

• Home page: Link
• Genesis: Targeted for all HTML5 site – uses a Ruby engine
• Version: 1.6
• Licensing: MIT – also available of GitHub
• Download: Here
• Documentation: Available
• Sample application: Not Available
• Tutorial: Here
• Implementation: No reference
• Wikipedia: Yes
• Article on how to use: Build mobile applications by IBM

7. WebApp.net

• Home page: Link
• Genesis: Mobile only framework – full feature
• Version: 0.5.2
• Licensing: Beta
• Download: Link on home page
• Documentation: Available
• Sample application: Here
• Implementation: No reference
• Wikipedia: Yes

8. Wink Toolkit

• Home page: Link
• Genesis: Started in France Telecom – Orange Labs 3 years ago – now part of Dojo Foundation – full feature
• Version: 1.4
• Licensing: BSD
• Download: Link on home page
• Documentation: Available
• Sample application: Here
• Tutorial: Here
• Implementation: http://guidetv.m.orange.fr/, http://www.oxxone.com and http://m.ineditcaen.fr/
• Wikipedia: Yes
• User Forum: Yes

9. XUI

• Home page: Link
• Genesis: Started in 2008 to complement PhoneGap – primarily a DOM library – does not have components for UI
• Version: 2.3.2
• Licensing: MIT – also available in Google Code
• Download: Here
• Documentation: Available
• Sample application: Here
• Implementation: No reference
• Wikipedia: Not available

10. Zepto.js

• Home page: Link
• Genesis: Mobile only – lightweight – full feature
• Version: 0.8
• Licensing: MIT – also available on GitHub
• Download: Link on home page
• Documentation: Minimal on GitHub
• Sample application: No reference
• Implementation: No reference
• Wikipedia: Not available

Do let me know if there are any errors or omissions in the details I have provided.

[Update: Here is one more from Dojo]

Link to homepage

<<Previous (Mobile cross-platform tool classification)

Next>> (Mobile Visual Tools)

Udayan Banerjee on Google+

Filed under Mobile · Tagged with DHTMLX Touch, Dojo, iUI, JavaScript, jQTouch, jQuery Touch, Mobile application development, Sencha Touch, Sproutcore, WebApp.net, Wink Toolkit, XUI, Zepto.js