Monday 26 September 2011

Mobile Applications - Native vs. Web App (Part Three)

Continuing the series on from (Part One) and (Part Two) today I will talk about development of the apps, the tools available and some of the practices that allow a developer to create the advanced and interactive apps we see today.

Javascript - I'm a real boy programming ^ language.


JavaScript has become a powerful tool for developing web applications. There are an increasing number of well-polished applications that deploy JavaScript to a very high standard, Google Mail being a great example. There are several frameworks out there now that make JavaScript development a much more pleasant experience taking it away from a more procedural and messy coding style to a well formatted, OO, patterned approach and it is these frameworks that allow for the power providing in applications on the web today. A JavaScript library helps to make code that bit more manageable offering functionality to be integrated as and when needed, more akin to development in a native app language. JQuery as I’m sure many of you reading this article will know is one of the more popular frameworks and offers a lot of useful functions for a developer that would otherwise take a lot of time to develop and test. Libraries offer the developer a tool to speed up development of their application while maintaining good quality code.

Frameworks on the other hand offer a way to structure a system or component architecturally. There are particular frameworks that allow JavaScript developers to maintain their code and develop using tried and tested design patterns. One in particular I have used is Backbone.js; a lightweight library that helps building applications using MVC. Now I won’t go into too much depth with Backbone or MVC at this point as this is not a tutorial article and is out of scope of the subject, but the structure of Backbone (Model, Collection, View, Controller) allows for a well-formed, easy to maintain application and, as found on Backbones’ website have been utilised in a number of large applications such as LinkedIn Mobile, DocumentCloud and BitTorrent.

The point of this is to highlight that JavaScript is no longer just an option to add a little bit of functionality here and there. It is at the core of web application development and with the addition of libraries/frameworks it is rapidly becoming a technology to compete with native device languages. Another great bonus to tip the balance of development in the direction of JavaScript is that of IDE’s, your browser can be your IDE. When you look at the development tools available to you with browsers such as:

Google Chrome (Developer Tools)



Firefox (Firebug)


The ability to develop and test JavaScript on the fly makes it much easier to get started in developing JavaScript applications. Download and install your browser, you have your JS IDE. There is no fuss with ensuring you have the latest version of Eclipse, or JVM/JDK, no extra space or time to run/debug applications it is all there collectively at your fingertips inside your browser.

CSS3 – Hey there good looking!

CSS3 has made a huge impact into the aesthetics achievable in web development; this coupled with the semantically oriented mark-up of HTML5 has allowed the creation of some wonderful websites such as EllaDesign and HTML5Readiness. CSS3 offers a number of effects that, up until now, designers were forced to use images for (which as you all know increases bandwidth which we are trying to save!). HTML5 also offers us the Canvas API which allows for dynamic drawing on a page. Using JavaScript and CSS with canvas can achieve some stunning effects as demonstrated particularly by Liquid Particles. CSS3 offers tools that allow for modern, crisp and professional looking UI designs without the need for learning the multiple methodologies utilised for native UI design, for example UI design on the Android platform uses the View and ViewGroup nodes using XML which have requirements for how they must be laid out and structured. CSS3 brings together this diversity of knowledge to implement a single technology to allow cross-compatibility across devices. Boston Globe is another great example of all the main principles of web development (particularly responsive web design).

1 comment: