An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Strong points: Flexible grid system, Rapid prototyping, Mobility.

Check it out

JavaScript is a bit confusing for developers coming from Java or C++, as it’s dynamic and does not provide a class implementation, although the keyword class is a reserved keyword and cannot be used as either a variable name or a property. JavaScript inheritance uses just three key ideas:

• An object’s methods (like all properties) are found by walking up the object’s prototype chain;
• The entries in the prototype chain are references to ordinary objects;
• Object.create() or the new operator creates objects with a longer prototype chain.

Here is a simple Javascript inheritance example to learn from:

var user;

function Person (name) {
  this.name = name;
}

Person.prototype.hello = function() {
  console.log('Hello', this.name);
};

// Student inherits from Person

function Student (name) {
  this.name = name;
}

Student.prototype = new Person;

user = new Student('George');

// This method was defined on Person

user.hello();

If you are interested to read more about prototype chains check here: Inheritance and the prototype chain.

A great collection of templates for print and sketchbooks by Brad Reiken.

Before any tangible designs are made, any experienced designer should know that the first thing you do before any sort of web development project is map out a rough sketch first. Although most sketching is done on blank paper, many developers have now started using sketch templates for their web applications. This is definitely the most productive and organized way to start probably one of the most important phase of the application design process. Below are resources and templates to download or print off for designing your next great project!

Find out more and download you sketching paper

Almost all of the mobile applications that we currently see on the smart-phones rely on a subtle set of UI controls, libraries or frameworks (or toolkits) that not only greatly simplify application development, they also provide a consistent, reliable, and highly interactive User Interface.

Currently, there are a wide varied range of Mobile Frameworks covering varied languages and platforms – in this post I will focus on Javascript Mobile Frameworks.

SixRevisions has point out 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.

Below you find my top picks of Javascript Mobile Frameworks that you should consider using to build you next mobile app.

jQuery Mobile

Touch-Optimized Web Framework for Smart-phones & Tablets

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design. jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smart-phone and tablet platforms.

The devices supported by jQuery Mobile are determined by the project’s Mobile Graded Browser Support Chart which assigns a grade to each browser based on a test suite.  The browsers graded A or B will be fully supported by the framework.

The framework itself will combine jQuery Core and jQuery UI to create a touch framework that works across all devices.  This means that you will be able to use the jQuery you know and love (the selector engine, the DOM manipulation, the animations, etc.) without having to worry about it working across all of these wildly different browsers and devices. Additionally, the jQuery UI project is working to create touch enabled widgets and layouts that not only work across all devices, but look good and fit in with the surrounding environment of the device. If you know how difficult it is to build a cross browser UI framework for 4 or 5 desktop browsers, you can imagine how difficult it is to build and test a cross platform UI framework for more than a dozen mobile browsers, all with major limitations.  Not a task for the feint of heart!

Supported platforms: iOS, Android, Blackberry, webOS, Windows Mobile, Symbian, MeeGo, Bada

Appcelerator — Titanium Mobile

Appcelerator Titanium is an open source mobile application development tool for iPhone and Android which allows you to code apps with HTML, CSS and JavaScript. I tested out the platform this morning. Having developed an iPhone application with Objective C before, I can tell you that Titanium makes the iPhone development process a whole lot easier. Getting the Android SDK working was a bit tricky but development itself is simple. I love being able to compile native applications by writing standard web code!

Things I like about Appcelerator:

• The ability to build desktop and mobile applications using very similar approaches using HTML/CSS/Javascript;
• The ability to use Python, PHP or Ruby;
• The Appcelerator development environment is itself an Appcelerator application;
• Developer tools available for Linux, Mac and Windows like Titanium IDE;
• Access native functionality of both the iPhone and Android handsets, as per PhoneGap;
• Good API documentation.

Things I don’t like about Appcelerator:

• If you want to develop an application for iPhone you need a Mac, XCode and latest iPhone SDK;
• The ability to use Python, PHP and Ruby scripting is limited to desktop applications.

Supported platforms: iOS, Android, Blackberry (alpha)

PhoneGap

Open source development framework for building cross-platform mobile apps

PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript. If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you.

Things I like about Phonegap:

• Phonegap gives you access to native functions of the smart-phone through creating some bridges through a native application container and some special javascript calls. For instance, if you want to access the GPS through your javascript code that’s a relatively simple thing to do;
• Using PhoneGap will still allow you to publish an application to the AppStore (in theory – see below);

Things that I don’t like about Phonegap:

• Apple are rejecting some applications written using PhoneGap. As I understand it this is due to the fact that once you have a PhoneGap application installed, you could reasonably easily extend the capabilities of that application simply by changing some code at an external web location. This means you can change the functionality of the application without having to route the application request through the AppStore. I’m not sure if this is resolved as yet, or whether I have the issue correct, but would be interested to hear more.

Supported platforms: iOS, Android, Blackberry, webOS, Windows Mobile, Symbian

jQTouch

jQuery plugin for mobile web development

JQTouch is a jQuery plugin for mobile web development on the iPhone and other various mobile devices. JQTouch comes with an easy setup, native WebKit animations, image preloading, callback events, flexible themes, swipe detection, sweet extensions, and more!

Things I like about jQTouch:

• It’s really easy to get started, and deploying an application to the iPhone is also easy;
• It is written as a jQuery plugin, and well I love jQuery.

Things I don’t like about jQTouch:

• It’s not an application framework designed for building AppStore deployable applications. I know this is contrary to one of the things I like, but it is something to consider. I’m sure you could fairly simply wrap your application up for AppStore deployment though (maybe – could you?).
• Access to the lower level functions of the device is not provided (except for the GPS, because as mentioned before the new OS permits access to the GPS through the HTML5 geolocation API)

Supported platforms: iPhone or WebKit

Sencha Touch

A Cross Platform HTML5 Mobile Application Framework

Sencha Touch is considered one of the first HTML5 mobile JavaScript framework that allows you to develop mobile web apps that looks and feel native on touchscreen devices. The framework supports touch events: not only simple touch events, but also non-standard events like doubletap, swipe, pinch and rotate. This allows for interactions previously only seen in native applications. It has many of the standard components that you would expect in a mobile application framework either native or otherwise.

Sencha Touch can load data from any data source on the server, including from JSONP sources like Flickr, as well as from your own server or YQL.  You can then bind that data to UI components, as well as make it available offline. Sencha Touch also has frameworks for geolocation, including a standard Google Maps widget.

Supported platforms: iOS, Android, Webkit

DHTMLX Touch

JavaScript Framework for Mobile and Touch Devices

DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices. The framework is compatible with the major web browsers for mobile platforms but it is still in alpha version.

Supported platforms: iPad, iPhone, Android, Webkit

iUI

User Interface Framework for Mobile Web Devices

iUI is an open source user interface framework for iPhone web application (webapp) development created by Joe Hewitt that gives a web application running on Safari the look of a native application built with the iPhone SDK. iUI is a lightweight package consisting of a small JavaScript file, a CSS, and images to complete the appearance.

iUI gives you the ability to create navigations menus, iPhone interfaces from standard HTML, basic web pages, and a true “iPhone-like” experience for users

Supported platforms: iPhone

Zepto.js

The aerogel-weight mobile javascript framework

Zepto.js is a JavaScript framework for mobile apps and sites, with a jQuery-compatible syntax. Their goal is have a 2k library that handles most basic drudge work with a nice API that you might already know so you can concentrate on getting stuff done.

Zepto.js contains a lot of tricks to keep the library size down. Targeting WebKit is one way it keeps a smaller size — if you follow our framework series you’ll know how much work cross-browser support can be. Zepto.js is currently in early beta but still very promising.

Supported platforms: iOS, Android, webOS, Webkit

XUI

A simple javascript framework for building mobile web applications.

XUI is a simple JavaScript framework that helps anyone with some basic JavaScript knowledge build mobile web applications. XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.

Jo

The simple app framework for HTML5

Jo is a lightweight JavaScript framework designed for HTML5 apps, originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap. Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets.

Supported platforms: iOS, Android, webOS, ChromeOS or anything else with HTML5.

Conclusion

We have a long list of Javascript mobile frameworks and I think that there might be also other frameworks that can quality for “mobile” that I missed. So, if you are aware or played with any other framework that is not on the list let me know and I will update the post.

In terms of the “best framework” or the “worst framework” it’s very hard for me to say because I played just with Appcelerator Titanium, jQuery Mobile. So far I like Appcelerator but I would like to dig more into PhoneGap.

I’m looking forward to see you opinion on this framework, things that came up from your experience and applications that you developed.

Last week newmediacampaigns.com released a mobile client for the website Hacker News. After they discovered that an API had been generously built and made public for the site, they decided to take an action to build a quick mobile website against the API. After the web-app launch they wrote a blog post detailing how it was developed, which tools they have used and what was their strategy to build a site quick and easy almost client-side. They promised also to present the part II which will cover the server-side caching approach.

Read more about their approach on the frontend side.