Enviar búsqueda
Cargar
Enabling the mobile Web for a Dojo component
•
1 recomendación
•
1,149 vistas
C
cjolif
Seguir
Tecnología
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 22
Recomendados
Dojo mobile web5-2013
Dojo mobile web5-2013
cjolif
Building Multi-Channel Data-Aware Applications
Building Multi-Channel Data-Aware Applications
cjolif
Creating Mobile Content Using Flash
Creating Mobile Content Using Flash
paultrani
Html5 investigation
Html5 investigation
oppokui
CEDEC2012 Starling 開発
CEDEC2012 Starling 開発
Andy Demo
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Simon Guest
Adobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBook
Mihai Corlan
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
JungHyuk Kwon
Recomendados
Dojo mobile web5-2013
Dojo mobile web5-2013
cjolif
Building Multi-Channel Data-Aware Applications
Building Multi-Channel Data-Aware Applications
cjolif
Creating Mobile Content Using Flash
Creating Mobile Content Using Flash
paultrani
Html5 investigation
Html5 investigation
oppokui
CEDEC2012 Starling 開発
CEDEC2012 Starling 開発
Andy Demo
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Simon Guest
Adobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBook
Mihai Corlan
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
JungHyuk Kwon
Jax2010 adobe lcds
Jax2010 adobe lcds
Michael Chaize
Portlet factory 101
Portlet factory 101
Phillip de Ridder
Flex mobile for JUG
Flex mobile for JUG
Michael Chaize
Fatc - Productivity by Design
Fatc - Productivity by Design
Michael Chaize
Jax2001 adobe keynote
Jax2001 adobe keynote
Michael Chaize
Ria2010 workshop dev mobile
Ria2010 workshop dev mobile
Michael Chaize
Adobe flash platform java
Adobe flash platform java
Michael Chaize
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
Michael Chaize
Open social gadgets in ibm connections
Open social gadgets in ibm connections
Vincent Burckhardt
Ria2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'Entreprise
Michael Chaize
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
Michael Chaize
QUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User Guide
ekiglobal
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
dbarkoe
Adobe flex at jax london 2011
Adobe flex at jax london 2011
Michael Chaize
Introduction to j query mobile framework
Introduction to j query mobile framework
Shreerang Patwardhan
Triffort - iOS Application Portfolio
Triffort - iOS Application Portfolio
Mohd Azam
Oop2012 mobile workshops
Oop2012 mobile workshops
Michael Chaize
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
Michael Chaize
Xplatform mobile development
Xplatform mobile development
Michael Chaize
Dojo 1.7 mobile overview dojo conf 2011
Dojo 1.7 mobile overview dojo conf 2011
ccmitchellusa
Real-world Dojo Mobile
Real-world Dojo Mobile
Andrew Ferrier
Complete Dojo
Complete Dojo
Girish Srivastava
Más contenido relacionado
La actualidad más candente
Jax2010 adobe lcds
Jax2010 adobe lcds
Michael Chaize
Portlet factory 101
Portlet factory 101
Phillip de Ridder
Flex mobile for JUG
Flex mobile for JUG
Michael Chaize
Fatc - Productivity by Design
Fatc - Productivity by Design
Michael Chaize
Jax2001 adobe keynote
Jax2001 adobe keynote
Michael Chaize
Ria2010 workshop dev mobile
Ria2010 workshop dev mobile
Michael Chaize
Adobe flash platform java
Adobe flash platform java
Michael Chaize
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
Michael Chaize
Open social gadgets in ibm connections
Open social gadgets in ibm connections
Vincent Burckhardt
Ria2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'Entreprise
Michael Chaize
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
Michael Chaize
QUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User Guide
ekiglobal
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
dbarkoe
Adobe flex at jax london 2011
Adobe flex at jax london 2011
Michael Chaize
Introduction to j query mobile framework
Introduction to j query mobile framework
Shreerang Patwardhan
Triffort - iOS Application Portfolio
Triffort - iOS Application Portfolio
Mohd Azam
Oop2012 mobile workshops
Oop2012 mobile workshops
Michael Chaize
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
Michael Chaize
Xplatform mobile development
Xplatform mobile development
Michael Chaize
La actualidad más candente
(19)
Jax2010 adobe lcds
Jax2010 adobe lcds
Portlet factory 101
Portlet factory 101
Flex mobile for JUG
Flex mobile for JUG
Fatc - Productivity by Design
Fatc - Productivity by Design
Jax2001 adobe keynote
Jax2001 adobe keynote
Ria2010 workshop dev mobile
Ria2010 workshop dev mobile
Adobe flash platform java
Adobe flash platform java
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
Open social gadgets in ibm connections
Open social gadgets in ibm connections
Ria2010 - keynote - Evolution des RIA d'Entreprise
Ria2010 - keynote - Evolution des RIA d'Entreprise
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
QUAL360 Survelytics Mobile User Guide
QUAL360 Survelytics Mobile User Guide
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Adobe flex at jax london 2011
Adobe flex at jax london 2011
Introduction to j query mobile framework
Introduction to j query mobile framework
Triffort - iOS Application Portfolio
Triffort - iOS Application Portfolio
Oop2012 mobile workshops
Oop2012 mobile workshops
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
Xplatform mobile development
Xplatform mobile development
Similar a Enabling the mobile Web for a Dojo component
Dojo 1.7 mobile overview dojo conf 2011
Dojo 1.7 mobile overview dojo conf 2011
ccmitchellusa
Real-world Dojo Mobile
Real-world Dojo Mobile
Andrew Ferrier
Complete Dojo
Complete Dojo
Girish Srivastava
Dojo javascript toolkit
Dojo javascript toolkit
Predhin Sapru
企業應用行動化開發架構
企業應用行動化開發架構
湯米吳 Tommy Wu
Dojo tutorial
Dojo tutorial
Girish Srivastava
Cross-platform mobile dev with Mono
Cross-platform mobile dev with Mono
Craig Dunn
Intro to Windows Azure Mobile Services with iOS
Intro to Windows Azure Mobile Services with iOS
Andri Yadi
BP207 - Easy as pie creating widgets for ibm connections
BP207 - Easy as pie creating widgets for ibm connections
Mikkel Flindt Heisterberg
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component Set
Joseph Labrecque
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Alexander Muse
Dojo Toolkit from a Flex developer's perspective
Dojo Toolkit from a Flex developer's perspective
cjolif
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
Code and Conquer with Globe Labs, October 27, 2012
Code and Conquer with Globe Labs, October 27, 2012
jobandesther
BP207 - Meet the Java Application Server You Already Own – IBM Domino
BP207 - Meet the Java Application Server You Already Own – IBM Domino
Serdar Basegmez
A Site for All Eyes: Considerations for Responsive Design
A Site for All Eyes: Considerations for Responsive Design
Dori Kelner
Android Web app
Android Web app
Sumit Kumar
Flutter vs ReactNative
Flutter vs ReactNative
Sumit Sahoo
Xebia adobe flash mobile applications
Xebia adobe flash mobile applications
Michael Chaize
From Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small Screens
Joseph Labrecque
Similar a Enabling the mobile Web for a Dojo component
(20)
Dojo 1.7 mobile overview dojo conf 2011
Dojo 1.7 mobile overview dojo conf 2011
Real-world Dojo Mobile
Real-world Dojo Mobile
Complete Dojo
Complete Dojo
Dojo javascript toolkit
Dojo javascript toolkit
企業應用行動化開發架構
企業應用行動化開發架構
Dojo tutorial
Dojo tutorial
Cross-platform mobile dev with Mono
Cross-platform mobile dev with Mono
Intro to Windows Azure Mobile Services with iOS
Intro to Windows Azure Mobile Services with iOS
BP207 - Easy as pie creating widgets for ibm connections
BP207 - Easy as pie creating widgets for ibm connections
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component Set
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Dojo Toolkit from a Flex developer's perspective
Dojo Toolkit from a Flex developer's perspective
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Code and Conquer with Globe Labs, October 27, 2012
Code and Conquer with Globe Labs, October 27, 2012
BP207 - Meet the Java Application Server You Already Own – IBM Domino
BP207 - Meet the Java Application Server You Already Own – IBM Domino
A Site for All Eyes: Considerations for Responsive Design
A Site for All Eyes: Considerations for Responsive Design
Android Web app
Android Web app
Flutter vs ReactNative
Flutter vs ReactNative
Xebia adobe flash mobile applications
Xebia adobe flash mobile applications
From Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small Screens
Último
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
Zilliz
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
rafiqahmad00786416
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Architecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
The Digital Insurer
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Nanddeep Nachan
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
The Digital Insurer
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Último
(20)
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Architecting Cloud Native Applications
Architecting Cloud Native Applications
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
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
8.
dojox/charting introduction
Demos 8 © 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
11.
dojox/mobile introduction
Demos 11 © 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
20.
Conclusion
Demos 20 © 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