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”.
1. 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”.
4. 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:
|
1 |
localStorage.setItem('mySpecialKey', JSON.stringify(jsonData)); |
At a later time, get the data simply by:
|
1 |
var details = localStorage.getItem('mySpecialKey'); |
Or:
|
1 |
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.
|
1 |
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.
