http://guide13.jazoon.com/#/submissions/121

1. Mobile web technologies
- an overview
Martin Naumann

2. Hi there!
|

3. There’s only one web
|

4. Let’s talk about performance
|

5. DOM Performance
Repeat after me:
The DOM isn’t slow
|

6. DOM Performance
•Beware of layout thrashing!
•Read first, Write second
•Batch up writes
•Test test test!
|

7. Reflow, Paint & the browser
Reflow
•If dimensions or positions changed
•reconstruction of the render tree
Examples:
elem.style.display = “none”;
elem.addChild(childElem);
|

8. Reflow, Paint & the browser
Repaint
•If there was a reflow or appearance changed
•repainting the screen content, tile- and layer-based*
Examples:
elem.style.backgroundColor = “red”;
elem.style.visibility = “hidden”;
|

9. 3 nice ’n’ hackety hacks!
•Use canvas (> 256px width or height) for complicated graphic elements
•Use translateZ(0) to bring elements on their own layer
•Use CSS 3D Transitions for HW acceleration
•Using FastDOM (https://github.com/wilsonpage/fastdom)
|

10. And now...
Let’s go hybrid!
|

11. What’s hybrid?
|

12. What technology can I use?
MoSync
PhoneGap
Calatrava
M Project Titanium RhoMobile
Sencha Trigger.io
AppFramework Steroids.js
|

13. What technology can I use?
MoSync
PhoneGap
Calatrava
M Project Titanium RhoMobile
Sencha Trigger.io
AppFramework Steroids.js
|

14. Woah! Wait - what?
|

15. The rest of the stack
•Javascript MV* Libraries / Frameworks
○ Backbone
○ Ember
○ Knockout
○ Angular
•UI Frameworks
○ Lungo
○ TopCoat
○ jQTouch
○ jQuery mobile
|

16. Find a combo that works together
●
●
Our toolset:
○ Phonegap: Fully agnostic container
○ Angular: Fully agnostic MV*-Framework
○ Lungo: Pretty agnostic UI Framework
Other potential candidates:
○ Knockout + Phonegap + Lungo
○ Angular 1.2 + Phonegap + TopCoat
|

17. Case study: The C-App
●
●
●
Internal app to do the various admin tasks
Users are on iOS, Android, Blackberry and the web
Prototype rapidly, iterate quickly, roll out often
|

18. Thanks for the attention!
Follow @olivertupman
martin.naumann@centralway.com | @avgp |
engine.centralway.com
www.centralway.com