dotMobimobiThinkingmobiForgemobiReadyDeviceAtlasgoMobi
background image

What does JavaScript bring to the mobile HTML5 and CSS3 party?

Image shows: fireman wearing breathing apparatus.
Posted by OrenFarhi - 07 Sep 2012
Twitter share icon Facebook share icon Google Plus share icon

JavaScript brings the mobile Web to life. It brings interactivity to HTML5 and CSS3 mobile Web apps.
This Q&A with Oren Farhi, front-end architect and JavaScript expert, explores what JavaScript does for mobile sites/apps and when, where, how and why it should be used … and when it shouldn’t.
If you want to learn more, Farhi will be speaking at Apps World, in London on October 2-3, 2012. mobiForge readers can get a 15 percent discount for this event using the code: “MOBI15”.

Image shows: Art created with the DeviantART’s Web app Muro1. What is JavaScript and what does it do for mobile sites and Web apps?
I choose to look at JavaScript as the soul that breathes life to data. This manifests itself in many different ways including user interactions, animations, media and background calculations (e.g. within Web forms). JavaScript is key to making Web applications (both mobile and desktop) reactive to the actions of Website visitors.
JavaScript experiences are often designed for particular devices or platforms, but there are great examples of applications that are written to deliver on multiple platforms, such as DeviantART’s Muro – an excellent HTML5-based tool for creating art, that uses JavaScript’s canvas API.

2. What should mobile developers be using JavaScript for?
In the last couple of years, particularly, JavaScript has made huge strides in the mobile space, with more and more features being added to JavaScript’s mobile portfolio. Using just HTML5 and JavaScript, cross-platform applications can be developed with audio, video and geo-location. Using frameworks such as Phonegap helps developers to deploy Web apps across an array of mobile platforms.

3. What shouldn’t JavaScript be used for in mobile (but is commonly)?
Generally speaking, when JavaScript starts to run it freezes other user interface (UI) interactions. Thus it is best practice to keep use of JavaScript to a minimum. This includes minimizing use of JavaScript for calculations and Document Object Model (DOM) manipulations. Similarly, if animations and visual operations can be done with CSS3, then they should… I repeat should… be done using cascading style sheets. CSS3-based animation is performed using the Graphics Processing Unit (GPU), rather than the processor and also leaves the JavaScript memory cleaner and thin.
As a general rule, any operation that can be suitably accomplished within the native environment (rather than using JavaScript) should be. However, with modern mobile browsers, it is possible to instruct the browser to use the GPU to process animation-related JavaScript operations using “window.requestAnimationFrame”.

Image shows: examples of buttons from jQuery4. How well does JavaScript to work on mobile devices?
The latest mobile operating systems, such as Android 4 and iOS 5, have provided an incredible boost in JavaScript performance within the mobile browser. Also, the latest Chrome beta release for Android 4 and iOS further improves the performance of Web apps – although this is still not as smooth as a native application, it is fast enough to provide an impressive user experience.
The availability of rapidly-expanding mobile-specific JavaScript micro-libraries, such as jQuery mobile and Zepto.js, means that mobile developers can tap into ready-made JavaScript that has been optimized for mobile and excludes irrelevant desktop operations.

5. What proportion of mobile devices, browsers, OSs etc support JavaScript?
JavaScript has been supported in desktop browsers since the mid-1990s, when Microsoft and Netscape started to adopt it as a scripting language for their respective browsers. Since then there has been a race for all browsers for all devices to support the latest JavaScript technologies and features.
JavaScript (as of version 1.5) is supported in most smartphones, 99 percent of desktop browsers and most modern mobile browsers. The more rapidly we move towards the stage where all platforms/devices/browsers will support JavaScript, the more useful a language it becomes for developing UI for all platforms.

6. What about older mobile devices, browsers, OSs? What happens if you are using JavaScript for navigation or other essentials?
There are two common philosophies/methodologies for the creation of Web apps – progressive enhancement and graceful degradation.
Progressive enhancement is particularly useful when it comes to older browsers that have limited or no support for JavaScript. The basic rule is that all Web pages should work in the simplest way possible – i.e. without JavaScript – then add features depending on the capability of the accessing device. So as soon as the app detects JavaScript support, its agenda is initiated and it is allowed to work its magic on the app.
Anyone that is familiar with the typical HTML5 boilerplate, should have spotted the class “no-js” on the HTML tag in index.html.
Graceful degradation is the opposite concept to progressive enhancement. Proponents of this philosophy argue that progressive enhancement isn’t suitable for modern Web applications. Graceful degradation dictates that Web apps should be developed with all the latest features and enhancements that are supported by the most up-to-date browsers. Support for older browsers should be a secondary consideration, refining the settings for the advanced features, where possible, by using polyfills, for example. In practice, it’s common to find developers using a mix of the two approaches.

7. Does JavaScript cause issues with offline access? If so, how do you get round this?
JavaScript can work offline without any connection to a network. However, lack of a Web connection will disable some important JavaScript features, particularly those that rely on AJAX calls to a remote server, including access to Web services.
However, if required and designed correctly, Web apps can get round connectivity issues by using the latest localStorage object to store data in a key-value object:

localStorage.setItem('mySpecialKey', JSON.stringify(jsonData));
At a later time, get the data simply by:
var details = localStorage.getItem('mySpecialKey');
Or:
var details = localStorage['mySpecialKey'];
Alternatively, localStorage can also be replaced with file storage (HTML5’s File System API) and application cache settings.
The app should periodically check for the availability of a Web connection, using this API. It will return true or false depending on the device’s network connection status.
var isOnline = navigator.onLine;

8. What are the most useful frameworks for JavaScript-based Web sites/apps?
The first thing to note is that there is an abundance of frameworks out there, allowing developers to pick and choose the best to suit the task at hand. Some frameworks contains masses of features – which make them more relevant for a full-blown application workflow, while others specialize in achieving specific goals, such as: canvas for game development; event management for achieving subscriber/observer pattern; large data operations; dealing with files; sound; and/or video.
Increasingly the trend in JavaScript development has been towards using some form of MVC-style framework (Model, View, Control). Some well-known frameworks that developers might consider are: Backbone.js, Ember.js and AngularJS (by Google). Each has its own building blocks and MVC style applied with JavaScript. It is almost taken for granted that there with be a jQuery and jQuery-compatible (zepto etc.) library somewhere in the JavaScript environment. For developing cross-platform mobile apps using JavaScript API, the Phonegap framework is becoming a popular choice.

9. What are the pros and cons of using a framework?
Using a well-known framework usually boosts the development process. Most frameworks are open source, which means you can update the code, collaborate with other like-minded developers using a VCS service, such as GitHub and receive the benefit of worldwide support and quality assurance (QA) for a framework.
On the negative side, if developers do not handle or understand the framework correctly, attempting to make changes and updates to the framework can slow down the development process – it’s a steep learning curve.


Posted by OrenFarhi - 07 Sep 2012

OrenFarhi's picture

Web Front-End Architect, Javascript Expert & UI Consultant

I’m an Experienced Front End Architect & JS Consultant. Highly skilled in user interface development for web applications, front end architecture with javascript development & CSS presentation. Support best practices for JS & UI architecture, organized code development, scalability and correct code maintenance.

In my work I focus on Web UI architecture which involves:
Developing & Designing Large Javascript Applications using MVC libraries such as Backbone
Incorporating Usability and UX decisions using CSS3, UI Standards and UI Patterns.

I lead the Javascript Group @ Tikal, speaking at company's meetups & events, and teaching a course on Advanced Javascript Development based on Backbone & Architecture.

Website: http://orizens.com/wp/
Twitter: https://twitter.com/orizens
Linkedin: http://www.linkedin.com/in/orenfarhi
Google+ https://plus.google.com/u/0/114211566626556275801/posts#114211566626556275801/posts

Posted by SuperRoo 2 years ago

Great article. I am originally an ASP.Net AJAX developer & have been looking at different methodologies to (a) build on my skill and (b) provide a good experience for the user. Of course with Ajax and the tools that enable the trapping of client side events (Telerik) you also get good at javascript/DOM/JQuery.

I came across Sencha that uses its own javascript engine to write HTML5. The Touch2 is particularly impressive.

So now I am a javascript convert using REST to connect to a wcf application to pass JSON objects.
Absolutely brilliant, fast, efficient and looks like a native phone app. Am now using PhoneGap to access mobile features (camera, file, etc)....

write once and create native apps for iPhone, Android, Windows and Blackberry....what could be better than that!!!