jazoon'13 - martin naumann - mobile web technologies - an overview
DESCRIPTION
http://guide13.jazoon.com/#/submissions/121TRANSCRIPT
Mobile web technologies- an overviewMartin Naumann
Hi there!
|
There’s only one web
|
|
Let’s talk about performance
Repeat after me:
The DOM isn’t slow
|
DOM Performance
|
DOM Performance
•Beware of layout thrashing!
•Read first, Write second
•Batch up writes
•Test test test!
|
Reflow, Paint & the browser
Reflow
•If dimensions or positions changed
•reconstruction of the render tree
Examples:
elem.style.display = “none”;
elem.addChild(childElem);
|
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”;
|
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)
Let’s go hybrid!
|
And now...
|
What’s hybrid?
|
What technology can I use?
PhoneGap
SenchaTitanium
Calatrava
Trigger.ioRhoMobileM Project
MoSync
AppFramework Steroids.js
|
What technology can I use?
PhoneGap
SenchaTitanium
Calatrava
Trigger.ioRhoMobileM Project
MoSync
AppFramework Steroids.js
|
Woah! Wait - what?
|
The rest of the stack
•Javascript MV* Libraries / Frameworks○ Backbone○ Ember○ Knockout○ Angular
•UI Frameworks○ Lungo○ TopCoat○ jQTouch○ jQuery mobile
|
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
|
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
Thanks for the attention!
Follow @olivertupman
[email protected] | @avgp | engine.centralway.com
www.centralway.com