talk-webperf-201305

Mobile web app perf

James Burke | github | twitter

Firefox OS | Gaia | RequireJS | volo

http://jrburke.com/talks/vanwebperf

Mobile

• Small, personal computers
• Network
• Different interaction model

Web app

• Single page
• Transitions instead of page reloads
• Limited deep linking, more personal state than shared

Constraints

• Latency
• Modest computing power
• Slow storage
• Battery consumption

Native vs web

• Both local UI. Java, ObjectiveC, or Web
• Access to platform APIs
• Excuse to spend money/attention on experience
• Leverage web and use wrappers, phonegap
• FirefoxOS: platform APIs and web.

Web vs store distribution

• Web: less platform API access, better terms, less user assurance
• Store: better platform API access, worse terms, better user assurance

Decide

• What does it need to do? Platform APIs
• forecast.io
• Financial Times

Specific tech

• Related via work on email app in Gaia/FirefoxOS

Startup performance

• Use local UI
• Use local data
• Bundle, delay loading

Local UI

• AppCache
• Packaged: .zip file, phonegap for others.

AppCache

• Has issues, limit to single page web apps.
• Compared to native wrappers though, not so bad.
• Will have to support multiple versions.
• Some proposals for future
• Events/test app

Local data

• IndexedDB. Funky. IDBWrapper, lawnchair, shim iOS
• localStorage. Profile
• Cookies! Keep API on other domain
• local save + innerHTML: fast restore

Delay loading

• Script parse and execution
• You know I'm going to say modules
• alameda : optimizer : node-madge
• Roll your own

Runtime performance

• Web Workers, help with scroll perf
• Limit DOM
• Use CSS transitions/GPU, transition: transform, translateX
• Cooperatively multitask (setTimeout, setImmediate)

Shameless plug

• Firefox OS
• Web runtime on Android
• Nice SDK/dev tools