Top 10 Mobile Web Development JavaScript Frameworks

Aug 14 2011 by Jacob Gube | 34 Comments

Top 10 Mobile Web Development JavaScript Frameworks

Creating web apps and sites for the Mobile Web has its own sets of challenges and techniques. From UIs optimized for fingers instead of mouse cursors to the bandwidth limitations that most portable personal devices have, developing for mobile devices requires a paradigm shift for those of us who’ve traditionally created products aimed at desktops.

To help you rapidly deploy cross-platform mobile apps and websites, there’s a wide range of JavaScript frameworks you can take advantage of.

Some common characteristics of JavaScript mobile web development frameworks:

  • Optimized for touchscreen devices: Fingers as input devices instead of mouse cursors provide an extra set of challenges in user interface design. Mobile web development frameworks provide standard UI elements and event-handling specifically for mobile device platforms.
  • Cross-platform: Support for multiple mobile device platforms such iOS and Android allows you to get your app to a wide range of users.
  • Lightweight: Because of current bandwidth limitations, a stronger emphasis on lowering file weight is placed into mobile web development frameworks.
  • Uses HTML5 and CSS3 standards: Most mainstream mobile devices have web browsers that support HTML5 and CSS3, and so mobile web development frameworks take advantage of new features available in these upcoming W3C specifications for a better user experience.

In this article, you’ll find my top picks of JavaScript mobile web development frameworks you should consider using to build your next mobile web app or website.

1. jQuery Mobile

jQuery Mobile

jQuery Mobile, a framework that will help you rapidly and confidently develop mobile app user interfaces across popular mobile device platforms like iOS and Android, is perhaps the most popular project out there.

The framework boasts a lightweight code base (weighing in at 20KB when minified and gzipped) and a huge bevy of standard user interface elements that mobile device users are accustomed to, such as switches and sliders.

See jQuery Mobile in action by going to its demo page (it doubles as the framework’s official documentation).

If jQuery isn’t your thing, check out MooTools Mobile, a MooTools plugin by MooTools core developer Christoph Pojer and Dojo Mobile, which leverages the Dojo API to help developers rapidly build apps for mobile platforms.

2. Titanium Mobile

Titanium Mobile

This powerful and robust mobile web development framework allows you to use your existing HTML, CSS and JavaScript knowledge to make native-like mobile apps for iOS and Android.

As one of the bigger mobile web development frameworks out there — with over 300 APIs and an active developer community — you know you’ll often find help and support from peer developers.

Titanium Mobile supports native UI elements for iOS and Android like table views, tabs, switches and popovers. It also has features that enable you to interact with the mobile devices’ camera and native file storage system.

3. The-M-Project

The-M-Project

The-M-Project is another solid JavaScript framework that takes advantage of new HTML5 features for easier and better mobile app development.

The framework follows the popular model-view-controller (MVC) software architecture pattern, which is a huge selling point for many developers.

It has offline support so that your users can continue working without an Internet connection (they can then sync up to the server next time they’re online) and excellent documentation (the project has a Getting Started guide for new users of the project).

To witness The-M-Project in action, check out their showcase, which includes items like the ToDo App and KitchenSink (a showcase of all the UI elements included in the framework).

4. Jo

Jo

Jo is a framework aimed at developers working on HTML5-capable mobile devices such as those the use the iOS, webOS, Android and Chrome OS platforms.

It has standard, native-like UI elements such as the web form widget for your login screens and the popup widget that you can use for providing extra information when a user clicks on an interface element.

See the demo page on their site, which includes a screencast displaying Jo in action on multiple devices and mobile platforms.

5. xui.js

xui.js

If you need something super lightweight and you only need features for standard client-side development tasks such as DOM manipulation, event-handling, Ajax and a few animation effects, check out xui.js. xui.js packs a punch in such a tiny package (4.2 KB when gzipped).

xui.js provides targeted builds for specific mobile browsers such as WebKit and IE mobile for when you’re developing apps strictly towards a particular mobile device operating system.

6. EmbedJS

EmbedJS

EmbedJS is a JavaScript framework for embedded devices (which includes mobile phones, TVs, tablets and so forth).

What’s great about EmbedJS is that it has multiple builds for specific platforms and browsers such as iOS, Firefox, Android, etc., which translates to an optimal user experience and less code to serve to your users. And if you’d like to customize your build, the creators provide you with the EmbedJS Build tool.

EmbedJS is based on Dojo, so if you’re familiar with the Dojo API syntax, you’ll be able to use EmbedJS right away.

7. zepto.js

zepto.js

zepto.js is a mobile JavaScript framework built specifically for mobile WebKit browsers (e.g. Safari and Chrome). It prides itself in its minimalist development philosophy, which translates to simplicity for helping developers get stuff done quickly. What’s more is that this JS framework is ultra-lightweight at only 5KB.

The zepto.js syntax borrows from, and is compatible with, jQuery — a welcome plus for many developers.

To learn more about this framework, see developer Thomas Fuchs’ presentation of zepto.js.

8. DHTMLX Touch

DHTMLX Touch

DHTMLX Touch, a free HTML5/JavaScript framework optimized for touchscreen devices, brings you the ability to craft beautiful mobile web apps quickly.

The DHTMLX Touch UI Designer is a visual editor for building mobile user interfaces, and it’ll help you construct top-notch UIs with minimal coding.

Check out samples of DHTMLX Touch in action, which includes a menu app for the iPad (perfect for restaurants) and Book Shop (a proof-of-concept demo for an e-store offering books).

9. Mobilize.js

Mobilize.js

Mobilize.js is a JavaScript framework for porting your existing website to a mobile-friendly version. It’s easy to integrate into your site because it does everything on the client-side, and has facilities for detecting mobile browsers so that you can serve them the mobile version of the site.

WordPress users might want to check out the Mobilize.js WordPress plugin.

10. ChocolateChip Mobile

ChocolateChip Mobile

ChocolateChip Mobile is a JavaScript framework developed towards future-forward web browsers. It shares syntax similar to jQuery or Prototype.

The resemblance to jQuery doesn’t stop at the syntax — for example, like jQuery, it can handle events through binding and delegation, and has methods such as .css and .toggleClass.

You can grab ChocolateChip Mobile’s source code off GitHub.

Other JavaScript Libraries for Mobile Web Development

  • jQTouch: a jQuery plugin specifically for Android and iOS devices.
  • jqpad: a web development framework built and optimized for iPad development.
  • iUI: a user interface framework for making iPhone-like web apps.
  • Sencha: an HTML5 mobile web development framework (suggested by Steven Roussey)

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

34 Comments

Jeff

August 14th, 2011

“Titanium Mobile: As one of the bigger mobile web development frameworks out there — with over 300 APIs and an active developer community — you know you’ll often find help and support from peer developers.”

This is so, so wrong. Talk to any developer who’s actually _used_ Appcelerator Titanium, and they’ll tell you how it’s nearly impossible to find help from anyone else.

The forums are filled by support questions with very little interaction by either fellow developers or Appcelerator. The SDK changes too frequently to be used by anything considered “production-ready”, and their online documentation is weak and often wrong.

9 times out of 10, you’re stuck trying to figure it out yourself.

Jérémie Anderlin

August 14th, 2011

Sencha Touch is also an attractive option (http://www.sencha.com/products/touch/)

Vincent Roman

August 14th, 2011

Pardon me but I think you need to add Sencha Touch (http://www.sencha.com/products/touch/) to the list :)

Steven Roussey

August 14th, 2011

You’re kidding right? Sencha Touch would be #1 and it isn’t even on the list. Most of these I haven’t even heard of…

Jacob Gube

August 14th, 2011

@Steven Roussey: I added Sencha Touch and referenced your comment. Just a friendly suggestion: There are better ways to voice your opinion.

Asinox

August 14th, 2011

Please update this… Sencha Touch need to be #1

Christian

August 14th, 2011

Sencha Touch is head and shoulders better than all 10 on the list. To have it as an “other available libraries” mention is laughable.

Ignacio

August 14th, 2011

Isnt TITANIUM working with JS style sheets now?,
I think It doesn’t use CSS anymore as a native option, unless you wrap it

Alan Richey

August 14th, 2011

Surprised you omitted NSBasic App Studio. For those of us used to Visual Basic it is a great ‘front end’ for developing JavaScript Web bases apps for mobile platforms. Well worth checking out.

Al

Jacob Gube

August 15th, 2011

@Asinox and @Christian The list is staying as it is in its current, original form. Feel free to share your opinion here in the comments though.

Here’s a clickable link to @Alan Richey‘s suggestion: NSBasic App Studio.

David Levy

August 15th, 2011

+1 for Sencha Touch to be in the list !

specially because it has a very rich and active forum / documentation

Dan Mullineux

August 15th, 2011

Hi Jacob.

Useful article, thanks, as I had not heard of ChocolateChip Mobile.

Less useful as I think your article implies a ranking which confuses things a bit as these ten frameworks have a wide range of utility.

I get that this is your top ‘pick’ so one must not be too beguiled by the title.

As you discounted a couple of frameworks that the main stream mobile web developer community would expect to see in any top ten. I wonder if your article might carry a bit more weight if you briefly described why those other frameworks did not make it.

Dan
Or perhaps

keithics

August 15th, 2011

Jquery mobile is quite slow in my Android Phone. Maybe it looks and fast in other phones like iPhone. that’s why I really don’t recommend it to my friends.

Which Door

August 15th, 2011

The Mobilize.js looks like a really good framework :)

tommy

August 15th, 2011

I too have to put in my vote for Sencha. I was surprised as well to see it omitted from the list.

Sebastian Fastner

August 15th, 2011

Don’t forget Qooxdoo Mobile (qooxdoo.org) and Unify (unify-project.org). Both are very sophisticated as mobile frameworks (not only UI libraries).

Benjamin Kampmann

August 15th, 2011

I am wondering: did you *actually* use any of those? I mean more than the demo-page, and example-hello-world they provide? Or is this list compiled by the facts you read about the languages only?

Mayjex

August 15th, 2011

Even mobile website has a great web frameworks nowadays. It is great to have a javascript on mobile web, at least it could be look better and attractive.

Hasitha Prabhath

August 16th, 2011

Sencha Touch should be No.1 or No.2 JQuery Mobile & Sencha are incomparable to others.

digizee

August 16th, 2011

Nice to see some other names on the list but as indicated some stalwarts are notably missing. I will again refer to sencha as well as phonegap from nitobi (phonegap.com)

YNhat

August 17th, 2011

When I saw the title, I thought Sencha Touch must be the first one. However, it is even not in your list.

I went through the websites of all the frameworks. I think many of them are not ready for production.

Bostonmerlin

August 17th, 2011

with others. Did you use any of these? I appreciate the list of frameworks out there but your “I’m not changing a thing” attitude is fine if the list was only for you but a serious consideration of webkit based engines should include Sencha Touch or this article is inaccurate and misleading.

zztop

August 17th, 2011

Ah, yeah dude, you forgot the elephant in the room : Sencha Touch.

Steffen Hiller

August 17th, 2011

+1 Sencha Touch for President

Great list though.

Brett

August 19th, 2011

Sencha Touch and JQTouch are “others”? This article should be titled “JQuery Mobile and 9 Other Moderately Useful JS Frameworks”. Sencha should’ve been #1. There has to be a reason that was left off the initial list. You couldn’t possibly really know anything about mobile development without mentioning Sencha on a top 10 list, unless you wanted it left off for a specific reason.

Cobus

August 19th, 2011

I’ve used Adobe Flex and i love it. Never heard of these before. Thanks for the great list

Tony Lukasavage

August 21st, 2011

@Jeff: How long ago did you come up with your assessment of Titanium Mobile? I think if you’ve been in the Q&A forums within in the last month or so you’ll see a MAJOR improvement in responsiveness not just from the community of developers, but also Appcelerator staffers. There’s this perception that because Appcelerator has licensing packages that they don’t care about the community, which flat out isn’t the case.

John Thompson

August 22nd, 2011

+1 for Sencha Touch, which should be #1 on the list.

Bryan

August 23rd, 2011

It’s impossible to take this list seriously when you see that Sencha Touch isn’t mentioned within the Top 3 frameworks. Considering it’s also a _popular_ framework, the author clearly didn’t do his homework.

Vitali

August 23rd, 2011

Anyone has review Web 2.0 Touch? http://web20boom.com/touch

David

August 31st, 2011

Great round up! I’m really liking jQuery Mobile so far.

Joseph Whitman

September 30th, 2011

A newcomer with an unbelievably powerful IDE is Application Craft. http://www.applicationcraft.com

Barton Hammond

November 7th, 2011

I just followed the link from Joseph to http://www.applicationcraft.com and it is truely unbelievable. It has a WYSIWGY IDE, runs in the cloud, is Open Sourced, free, integrates with PhoneGap, has built in emulation, generates and toggles between the UI and javascript code. Quite impressive. I’ve just looked at it for a few hours and am digging in more. Just my 2c

brian

November 18th, 2011

where is suncha-touch ?

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify