Mobile Web Development

For several months, I’ve been tracking the evolution of mobile browsers as the next client platform for Web applications. When explaining the technologies involved, I find I keep answering the same questions repeatedly. Understanding how the pieces fit together is not obvious, so I’ve written it up.

Important terms defined

HTML5 – Hyper Text Markup Language has been updated with new APIs (Application Programming Interfaces) – for the DOM (Documement Object Model). Updates include:

• The canvas element for immediate mode 2D drawing.
• Video and audio playback
• Offline storage database
• Caching

CSS3 – Cascading Style Sheets now enable you to make your pages more whiz bang than the blink tag ever could. CSS3 enables:

• Animations (flipping, sliding, rotating)
• Drop shadows
• 2 and 3d rotation
• Transparency

WebKit is an open source HTML Web browser engine. It is the engine that Apple uses for Safari, and Google uses for Chrome.

Ruby is a programming language. Rails is a Web framework using the Ruby language for used with a Web server to serve web pages. Some frameworks allow you to use Ruby on the client side, but 90% of the time Ruby is for server side programming.

jQuery is a javascript library for dynamically manipulating the HTML DOM after it is received by the Web browser.

Sencha is a javascript code library and set of CSS themes (previously called ExtJS) for building HTML and javascript apps that have the look and feel of a native mobile application. jQuery Mobile and jQTouch are other javascript libraries that compete with Sencha.

iPhone and Android phones grant their WebKit Web browsers access to some features but not others. For example, on the iPhone, GPS and the Accelerometer can be accessed from HTML and javascript, but the address book and camera cannot be.

PhoneGap is a packaging tool and framework (set of code libraries) that allows you to host an HTML and javascript application in Webkit inside a native application. PhoneGap provides both javascript and native libraries that allow you to access all of the native features from javascript in a Web page. It produces a native application that wraps WebKit so you can code in Javascript.

Appcelerator does the same thing, but with a more robust set of libraries. They recently purchased the Aptana IDE (integrated developement environment). Apcelerator will replace their existing Titanium IDE.

Quick questions

What provides the neato animations?

These are primarily provided by CSS3. Javascript libraries like Sencha and jQuery Mobile provide code wrappers on top of the low level CSS3 animations to make produce what looks like native UI effects (flipping panes, , etc.)

How do I get access to native features?

Any web page has access to the user’s location, but to get access to the address book and camera, you need to compile a native application and distribute it through the app store.

What is the most platform independent?

The safest choice is to stick with Web page delivered to a web browser. PhoneGap and Appcelerator offer the promise of compiling the same app for multiple platforms, but in practice they all look and behave differently. If you need need access to the camera, address book, or smooth animations (like in a game) go native.

Which is the fastest platform to develop on?

For teams with Web skills, it is fastest to develop a web page targeting phones. PhoneGap and Appcelerator make developing native apps approachable for Web devs, but still require extra compilation and distribution time (for now).