Más contenido relacionado
La actualidad más candente (19)
Similar a Enabling the mobile Web for a Dojo component (20)
Enabling the mobile Web for a Dojo component
- 1. 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
- 2. 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
- 3. 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
- 4. 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
4 © 2012 IBM Corporation
- 5. 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
5 © 2012 IBM Corporation
- 6. 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
6 © 2012 IBM Corporation
- 7. 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
- 9. 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
- 10. 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
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. 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
16 © 2012 IBM Corporation
- 17. 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
- 18. 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
- 19. 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
- 21. 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
- 22. Questions?
christophe.jolif@fr.ibm.com
@cjolif
22 © 2012 IBM Corporation