Enabling the mobile Web for a Dojo component

My experience with Dojo, Mobile and … Béziers Started working with / contributing to Dojo in 2010, committer since 2011, leading IBM WebSphere Dojo contributors team. For Dojo 1.7, I enabled mobile deployment of Dojo charting which is the story behind this presentation For Dojo 1.8, I’m working on Dojo calendar & treemap components that are also working both on mobile & desktop. Last but not least I spend my summer vacations near Béziers between the beach and the grapes and wanted to check how Béziers was during spring 2 © 2012 IBM Corporation

What will this presentation be about / Why should you be interested? This presentation is about updating a Dojo (visual) component (taking the example of Dojo charting) to support mobile Web deployment. Even if it focuses on Dojo that presentation exposes principles that are worth applying with any JavaScript toolkit when developing for mobile. This presentation also introduces the dojox/mobile package meant to create Dojo mobile Web UI with mobile native look and feel.3 © 2012 IBM Corporation

Agenda What are we looking for? dojox/charting introduction dojox/mobile introduction The tests Fixing bugs! Making it works with the device interaction Making it works with dojox/mobile Improving loading time Improving rendering time Conclusion4 © 2012 IBM Corporation

What are we looking for? We are looking at making a Dojo visual component (charting) works on mobile. This means: – Do not crash – Get a reasonable level of functionalities if possible in par with Desktop – Integrates well with dojox/mobile – Works with device interaction mechanism (touch) – Perform reasonably well both in terms of loading and rendering time5 © 2012 IBM Corporation

dojox/charting introduction dojox/charting is a Dojo-based library to display and interact with charts (mostly 2D) It is based on dojox/gfx a vector graphics layer abstracting SVG, Canvas & VML It provides all typical plot types Actions: – Tooltips – Zoom/Pan – Highlight – Shake – Move With dozens of themes6 © 2012 IBM Corporation

dojox/charting introduction<div data-dojo-type="dojox.charting.widget.Chart" id="chart" style="width: 300px; height: 300px;"> <div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div> <div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true" font="italic normal normal 8pt Tahoma"></div> <div class="plot" name="default" type="Areas"></div> <div class="plot" name="grid" type="Grid"></div> <div class="series" name="Run A" data="1, 2, 0.5, 1.5, 1, 2.8, 0.4"></div></div>Or programmatically:require([“dojox/charting/Chart”, “dojox/charting/plot2d/Areas”, …], function(Chart, Areas, …){ var chart = new Chart(“chart”).addPlot(“default”, { type: Areas …}); // … chart.render();});7 © 2012 IBM Corporation

dojox/mobile introduction dojox/mobile is a simple & lightweight framework that allows you to build native-looking mobile Web application It comes with three themes (CSS stylesheets) for iOS, Android and BlackBerry: But the code of the application stays the same across devices It provides views, simple widgets (buttons, lists, sliders…) and transition between views To achieve lightness it only relies on a few Dijit classes as a simple widget framework and a limited set of dojo core classes and comes with is own compact markup parser (<100 LOC)9 © 2012 IBM Corporation

dojox/mobile introduction<div id="view1" data-dojo-type="dojox.mobile.View" selected="true"> <h1 data-dojo-type="dojox.mobile.Heading">View 1</h1> <ul data-dojo-type="dojox.mobile.RoundRectList"> <li data-dojo-type="dojox.mobile.ListItem" icon="images/i-icon-1.png" moveTo="view2" transition="slide">Go To View 2</li> <li data-dojo-type="dojox.mobile.ListItem" icon="images/i-icon-2.png" moveTo="view3" transition="slide">Go To View 3</li> </ul></div><div id="view2" data-dojo-type="dojox.mobile.View"> <h1 data-dojo-type="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1></div><div id="view3" data-dojo-type="dojox.mobile.View"> <h1 data-dojo-type="dojox.mobile.Heading" back="View 1" moveTo="view1">View 3</h1></div>10 © 2012 IBM Corporation

The tests Before starting we need to assess the current status of the component. For that we need to pass some existing tests on mobile and create new test cases to monitor potentially mobile specific issues: – Run some basic test cases on Dojo supported mobile platforms (Android, iOS, BlackBerry) – Create dojox/mobile integration test cases – Create loading time test cases – Create rendering time test cases (overall + by elements) Debugging is not easy, even logging is not always possible. For example not so old BlackBerry devices don’t even provide a console.12 © 2012 IBM Corporation

Fixing bugs! The mobile platform we target (iOS, Android, recent BlackBerry) being Webkit-based and Dojo already being supported on Webkit-based browsers the probability something does not run at all is pretty low. This was proven true, indeed charting was already “working” on mobile devices without any modification. However “working” is not enough, mobile has some specifics we will describe in the rest of this presentation and that are required to get a satisfying user experience on the device.13 © 2012 IBM Corporation

Making it works with the device interaction Interacting with a mobile device is drastically different than with a desktop, gestures are touch based instead of being mouse and keyboard based. Some devices do expose to DOM/JavaScript only single touch events, some others do expose multi-touch versions (iOS, Android 3+) which means: – You must redesign your interaction for touch gestures (i.e. zooming with pinch instead of mouse wheel for example) – Your interaction design must take into account the fact some devices do not support multi-touch (use for example double tap to zoom in this case) How Dojo is helping here: – dojo/touch: gives you access to DOM touch event in a consistent manner – dojox/gesture: provides you with a high-level abstraction for more complex gesture like tap, double tap etc… If your component is drawn using vector graphics (Canvas, SVG) not HTML/CSS, then GFX provides you with an abstraction layer that also overcomes the fact that Canvas does not support event on drawings (SVG is not supported on Android 2.x)14 © 2012 IBM Corporation

Making it works with dojox/mobile dojox/mobile deals with any Dijit, so your component must be a Dijit For mobile a Dijit should ideally follow dojox/mobile best practices: – Extend dijit/_WidgetBase (not _Widget) – Do not extend dijit/_TemplatedMixin (for lightness) – Works with dojox/mobile/parser (for example do not use method definition inside markup) In charting we had to get rid of the templating aspect, but as charting is GFX based not HTML-based that was not an issue. Example with charting:<div data-dojo-type="dojox.mobile.RoundRect" id="container"> <div data-dojo-type="dojox.charting.widget.Chart" margins="{ l: 0, r: 0, t: 10, b: 0 }" theme=“myTheme" id="stockChart"> <! --- axis, plot … definition --> </div></div>15 © 2012 IBM Corporation

Improving loading time Obviously loading through wireless network is still slower than with wired computers. So you need to make sure to load the minimal set of code needed by your component and application. Work on a minimal set of dependencies for your code using AMD baseless modules: Instead of require([“dojo”, function(dojo){ return dojo.declare(…); }); Use require([“dojo/_base/declare”], function(declare){ return declare(…); }); That would bring all base modules (lang, array, connect, Color…) instead of just declare which is the only one I need here. Do not force inclusion of desktop only features like Tooltips, let’s require them dynamically when a Tooltip is displayed16 © 2012 IBM Corporation

Improving loading time Let the user of your component pick the modules he needs to, do not force all of them in: – dojox.charting.Chart2D used to require all charting plots require[“dojox/charting/Chart2D”], function(Chart2D){ new Chart().addPlot(“default”, { type : “Pie” }); }); – dojox.charting.Chart let the application developer explicitly imports the plots he need require[“dojox/charting/Chart”, “dojox/charting/plot2d/Pie”], function(Chart, Pie){ new Chart().addPlot(“default”, { type : Pie }); }); Prepare your code to the build by branching feature specific code into has() blocks: require([“dojo/has”], function(has){ if(has(“touch”){ // code specific to devices that support touch }else{ // for other devices } });17 © 2012 IBM Corporation

Improving loading time The same applies at application level, to make sure to only package what is needed by your application. For that you can use the Dojo build system which will: – from your application discover all AMD modules required and include the .js files into a single layer .js file for your application. – remove has() branches that are not needed on your targeted devices (for example IE code for a mobile application, non touch code…) by using in your build script: var profile = { // … staticHasFeatures: { touch: 1, ie: 0 } }18 © 2012 IBM Corporation

Improving rendering time Loading the code faster is good, but mobile devices CPU/memory is also limited even if growing rapidly. You need to save CPU and memory. Here the techniques are very different depending on which kind of component you are working on however there are some that apply in most cases: 1. You should not create objects you don’t need 2. You should make sure to re-use JavaScript / DOM objects when possible. 3. Prevent un-needed renderings. For charting module: 1. Line plot was creating line segments even for data outside of the visible data window. This has been fixed to avoid creating unnecessary objects. 2. Column (& other) plot was re-creating a GFX rectangle on each drawing request for each column. To run faster on mobile the GFX columns are now cached from one rendering to another one. 3. Use delayedRender to not force rendering on each touch interactions You might want to make caching optional to not penalize cases where you have static display and do not intend to refresh it (enableCache on chart plots).19 © 2012 IBM Corporation

Conclusion Dojo provides you with dojox/mobile a simple & lightweight framework to build native-like mobile Web applications Making a Dojo component works on mobile is a given, making it performs & integrates well demands a bit more fine tuning but Dojo helps with: – AMD – has branching & build system – dojo/touch – dojox/gesture This was the last Dojo talk of this conference, I hope you enjoyed learning more about Dojo! Dojo 1.8 will bring you even more mobile features, stay tuned, I hope to be able to show you more next year!21 © 2012 IBM Corporation

Enabling the mobile Web for a Dojo component

by cjolif

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 8

Statistics