Enabling the mobile Web for a Dojo component

Christophe Jolif, Senior Software Engineer, IBM Software Group, Dojo Toolkit
6 April 2012

Enabling the mobile Web for a Dojo
Component

Web-5 Conference, 2012
Béziers, France

© 2012 IBM Corporation

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.


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
 Conclusion


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 time


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 themes



<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();
});



Demos


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)



Demos


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.


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.


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)


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>


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 displayed



 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
}
});



 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
}
}


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).


Conclusion

Demos


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!


Questions?
christophe.jolif@fr.ibm.com
@cjolif


Enabling the mobile Web for a Dojo component

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Enabling the mobile Web for a Dojo component

Semelhante a Enabling the mobile Web for a Dojo component (20)

Último

Último (20)

Enabling the mobile Web for a Dojo component