Programming the Mobile Web : JavaScript Libraries

The life of a JavaScript programmer has changed radically since 2006, with the appearance of Ajax and hundreds of libraries that help us work better with this language. Many of these libraries modify or add complete new behaviors to the language, creating new languages inside (or over) JavaScript.

If the libraries are based on JavaScript, and mobile browsers support JavaScript, why do we care? The answer is that many of these libraries rely on some not-so-clear things in the standard, and while they have been prepared and tested on well-known desktop browsers (Internet Explorer, Firefox, Safari, Chrome, Opera), they have not been tested on all the mobile browsers. And as we’ve already seen, some DOM features (for example) are missing in many mobile browsers.

That is the first reason why we need to be careful about using big JavaScript libraries. The second (no less important) reason is the impact on download and execution times. As mentioned earlier, these libraries modify the language and the behavior of objects, and even if we don’t use any (or very little) of a library’s code, the library will need to load itself completely, which takes time. This can lead to performance problems in some browsers, so we are going to test the time that typical libraries take to initialize themselves on mobile browsers.

---

Warning:

Some libraries, in their complete form, are larger than 600 KB. We need to be very careful about performance when using that code, as it will increase network traffic, memory consumption, and execution time. If you can, avoid those big libraries, or use only the code you need.

---

Table 1 shows the results for the jQuery, Prototype, Yahoo! UI, and Dojo libraries. Remember that execution time will depend a lot on the hardware and CPU. These tests are just intended to make you aware of the average time that including a library can take.

Table 1. JavaScript libraries average execution/load times in seconds

Browser/platform	jQuery	Prototype	Yahoo! UI	Dojo
Safari	1.8	0.2	0	0.1
Android browser	4	2.5	0.4	4.6
Symbian/S60	1.7	0.9	0.2	0.7
Nokia Series 40	Cannot be calculated
webOS	0.2	0.5	0.1	0.4
BlackBerry	6.2	5	0.8	7
NetFront	8	13.6	3.7	11.1
Internet Explorer	2	3	0.4	2
Motorola Internet Browser	Not compatible
Opera Mobile	1.4	0.3	0.1	0.4
Opera Mini	It can not be calculated, executed on the server

The conclusion is that you should avoid these libraries if you can. If you cannot avoid them, use them only for smartphones, and be aware that some features and plug-ins may not work properly.

1. Mobile Libraries

The good news is that many developers have released alternative libraries that are geared for mobile devices and are lighter than the previous ones. There are also full frameworks for mobile application development (mostly prepared for iPhone) that we will cover later, like jQTouch, iUI, iWebKit, and Webapp.Net. These frameworks will take care of the visualization, events, and interaction of our websites.

There are also other libraries that can replace jQuery and the others on mobile devices. They are very light libraries that provide basic DOM, event, and Ajax support.

1.1. baseJS

baseJS is a lightweight library (8 KB) compatible with mobile Safari and other WebKit-based browsers, available at http://paularmstrongdesigns.com/projects/basejs. It has only been fully tested on Safari, from iOS 1.0 to 3.0.

baseJS provides a selector similar to jQuery’s, $(selector), and some similar methods, like each, addClass, hasClass, removeClass, toggleClass, getXY, fire, and some Ajax methods.

1.2. XUI

XUI is a simple JavaScript framework for building mobile websites that takes up only 6.7 KB compressed. It is available for free from http://xuijs.com and has been fully tested on WebKit-based browsers and Opera Mobile. The developers are working on adding support for IE Mobile and BlackBerry.

XUI is also similar to jQuery, but it is more powerful than baseJS. XUI uses x$ as the main selector object and includes the methods listed in Table 2.

Table 2. XUI common methods for a selector query

Method	Description
html(code) or html(location,code)	Defines the inner HTML (or other location, using the second option) of the elements. The location is a string and can be one of the following: inner, outer, top, bottom, before, after, or remove.
on(event, function)	Registers an event listener. The event name can also be used directly as the method name (e.g., click rather than on('click')). The events compatible are: click, load, touchstart, touchmove, touchend, touchcancel, gesturestart, gesturechange, gestureend, and orientationchange.
setStyle(property, value)	Defines a CSS style.
getStyle(property,optional_callback)	Reads the value of a property. If the selector has multiple elements, the callback will be fired.
addClass(class_name)	Adds a class to the elements.
removeClass(class_name)	Removes a class from the elements.
css(object)	Defines CSS styles using a JSON-style object having properties with values.
tween(object)	Animates one or more CSS properties from one value to another defined in the object.

So, for example, we can capture an onclick for buttons with a class with the following code:

x$('input.button').on('click', function(e){ alert('Ouch!') });

or with code like this, chaining the methods à la jQuery:

x$('input.button').click(function(e){ alert('Ouch!') })
                  .html('Press Me! ').css({color: 'blue'});

For Ajax, XUI provides global xhr and xhrjson functions to create requests with options.