Bijan delivers lessons from eventmobi in delivering offline capable mobile web applications.

1. Developing Offline Capable
Mobile Web Apps

2. Motivation
Instant Updates
Full customizability
Real-time feedback

3. Goals
• Remedy poor connectivity
– Make web not connected to ‘the web’
• Increase performance
– Make web as close as possible to native

4. Technologies
• HTML5
– App Cache / Manifest
– Local Storage
– WebSQL (deprecated)
– IndexDB (still not fully spec’ed)
• New clientside Javascript possibilities

5. Demo Time

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

7. 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

8. 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

9. Improvements
• Clients are the
SLOW part of
the web
– Lazy Load everything
(got us 90%+
performance
improvement)

10. 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)

11. 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?)