The future is HTML5

HTML5


HTML5 Authors: Elizabeth White, Marcin Warpechowski, Kevin Benedict, Xenia von Wedel, Pat Romanski

Related Topics: Cloud Computing, Virtualization Magazine, Web 2.0 Magazine, SOA & WOA Magazine, Java Developer Magazine, Open Source Journal, HTML5

Cloud Computing: Article

Cross-Platform Mobile Website Development – a Tool Comparison

There are many tools of different types available in the market

Gartner says, in three years, mobile application development projects will outnumber PC projects by 4-1 ratio and in four 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 applications 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 types available in the market but it's not strictly necessary to use any of them as each mobile platform comes with its own toolset.

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

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

(2) Visual Tool (No 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 different types of tools].

 

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 six 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

3. jQTouch

4. jQuery Mobile Framework

5. Sencha Touch

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

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 platform - from Dojo]

Next >> Mobile Visual Development Tools

<< Previous - Mobile Cross-platform Tool Classification

More Stories By Udayan Banerjee

Udayan Banerjee is CTO at NIIT Technologies Ltd, an IT industry veteran with more than 30 years' experience. He blogs at http://setandbma.wordpress.com.
The blog focuses on emerging technologies like cloud computing, mobile computing, social media aka web 2.0 etc. It also contains stuff about agile methodology and trends in architecture. It is a world view seen through the lens of a software service provider based out of Bangalore and serving clients across the world. The focus is mostly on...

  • Keep the hype out and project a realistic picture
  • Uncover trends not very apparent
  • Draw conclusion from real life experience
  • Point out fallacy & discrepancy when I see them
  • Talk about trends which I find interesting
Google