Experience with Jquery Mobile and Dojo

January 19, 2015



Before i start this , i would simply love to state that this is not a article that pitches each framework over the other, the last thing i want is to spark a common fight "Dojo vs Jquery".

Recently i participated in Mobile App Hackaton, which stated that within 48 hours, we were to come up with a mobile application, now the choice of framework no doubt had to be jQuery as most of the teams really had little or no JavaScript experience, hence we decided to use the jQuery Mobile, the mobile framework for creating mobile apps, to be quite frank it was a bit easy to come up with a Mobile app in jQuery mobile, and partially most of the style uses "Declarative Coding" where each scene and interface is generated from mark-up, and this is my following comparism with Dojo Mobile and jQuery mobile.

Loading Frameworks from CDN

jQuery Mobile and Dojo framework can both be loaded locally or from a Content Delivery Network e,g Google simply by appending the necessary scripts and css in the header section

//Jquery CDN
[script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"][/script][script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"][/script]//Dojo Mobile[script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.xd.js"][/script][

 Document Ready

Traditionally JavaScript developers often defer running certain functions when the page is loaded, the framework allows developers to chain methods to the document ready of the page.

//Jquery
$(document).bind("mobileinit", function(){
  //apply overrides here
});

//Dojo 1.7 AMD
require(["dojo/ready"],function(ready){
ready(function(){
//apply overrides here
});
});

//Dojo 1.7 Using Loader Plugin
require(["dojo/domReady!"],function(){
//apply overrides here
});

//Dojo.17 Pre AMD
dojo.ready(function(){
//apply overrides here
});

Normally Jquery users would expect to insert codes in $(document).ready however the jQuery mobile starts running in the "mobileinit" event, in the case of Dojo it sticks with its tradition way of coding using the ready or loader plugin depending on which style you use.

 Mark up

Jquery and Dojo mobiles allows the ease of building mobile interfaces through the use of declarative mark-ups, they also take advantage of HTML5 Data attributes, a complex interface can be created by simply putting various tags without scripting in Javascript.

//Jquery Page
Page 1
//Dojo Page
//Basic ListView in Jquery //Basic ListView in Dojo
  • List Item 1
  • List Item 2
  • List Item 3

UI Themes and Look and Feel

jQuery mobile comes with a specific themes which renders superbly on all mobile platform, though there is no alternative theme however you can easily customize your appearance, however Dojo Mobile goes the extra mile of rendering the interface according to each's platform, as of Dojo 1.7 it supports the iPhone ,Blackberry and the Android theme, and also provides a custom theme for generic phones however you can still render a specific platform's look and feel on a different phone.

App Structure

Working with jQuery, depending on your style of coding you might get away with packing all functions in a single file, however to JavaScript developers who are familiar with Modular coding, you might "require.js" , however with the Dojo mobile framework you can make use of the normal structure which is similar to jQuery which basically loads all the views in one html, though jQuery mobile allows you to inject html views also, Dojo also has an alternative structure which is the Dojox.mobile.app a simple framework for managing each scene, as a Dojo Mobile Developer this would be a recommended way because because scene has an Assistant JavaScript file which is loaded implicitly and handles the parsing and connection of each scene.

Conclusion

In order to keep the article short both the jQuery Mobile and Dojo Mobile are very nice to use and provide lots of tools to whip up a PhoneGap or Web-works applications however, the Dojo Mobile will require you to get used to the Dojo Concept and also you need to have a bit of intermediate knowledge of JavaScript, however Dojo gives you enough power to handle each connections from viewing to tearing down of the page, jQuery on the hand is really quick and fast to grasp, i whipped up a mobile application in a day, which isn't much of a big deal to me as having Dojo knowledge and JavaScript , jQuery Mobile seems to easy to use, but things are a bit different while in Dojo where you can create Dojo Widgets programmatically, the jQuery Mobile will have you write your markup to the page and refresh to re-parse the page, both mobile frameworks are superb and real fun to work it.

 

 


Post Comment