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

martin.naumann@centralway.com | @avgp | engine.centralway.com

www.centralway.com