Developing Offline Capable Mobile Web Apps

Motivation

Instant UpdatesFull customizabilityReal-time feedback

Goals

• Remedy poor connectivity–Make web not connected to ‘the web’

• Increase performance–Make web as close as possible to native

Technologies

• HTML5– App Cache / Manifest– Local Storage–WebSQL (deprecated)– IndexDB (still not fully spec’ed)

• New clientside Javascript possibilities

Demo Time

Build it!

• LocalStorage + Manifest + Robust API• Cache Manifest stores as few items as possible• The single page app• Images needed for the app (UI)

Tools Used

• Backbone.js (MVC-like JS architecture)

• Zepto (JS Framework)

• Handlebars.js (Templating)

• CoffeeScript (Increase speed of dev, reduce rage)

• Sprockets (Asset Management)

• SASS/SCSS & HAML

Techniques

• Architecture: Single Page App– Reduce round-trips to server as much as possible

• Inline, compressed JS, CSS

– Get to API data collection ASAP• Parse, execute – models, views, templates, at run-time• ‘Stringify’ code and eval later when needed

Improvements• Clients are

the SLOW part of the web

– Lazy Load everything (got us 90%+ performance improvement)

Issues

• Needs A LOT of data on first hit– Could choke at bigger conferences (60K people loading

at once)

• Does not work on IE yet (Zepto to blame but other techniques not well supported on WP7 or IE)

Still in Progress• Node.js + Socket.IO + Redis stack– For real-time updates, interactive features

• Offline usage– Store actions in offline state in queue– Sync with server when online

• Ensure consistency with data across multiple devices (Vector / Lamport clocks?)