Developing Offline Capable    Mobile Web Apps
Motivation    Instant Updates   Full customizability   Real-time feedback
Goals • Remedy poor connectivity   – Make web not connected to ‘the web’ • Increase performance   – Make web as close as p...
Technologies • HTML5   – App Cache / Manifest   – Local Storage   – WebSQL (deprecated)   – IndexDB (still not fully spec’...
Demo Time
Build it! • LocalStorage + Manifest + Robust API  • Cache Manifest stores as few items as possible     • The single page a...
Tools Used •   Backbone.js (MVC-like JS architecture) •   Zepto (JS Framework) •   Handlebars.js (Templating) •   CoffeeSc...
Techniques • Architecture: Single Page App   – Reduce round-trips to server as much as possible      • Inline, compressed ...
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 wo...
Still inProgress • Node.js + Socket.IO + Redis stack   – For real-time updates, interactive features • Offline usage   – S...
Upcoming SlideShare
Loading in …5
×

Bijan Vaez -Developing Offline Capable Mobile Web Apps

1,483 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,483
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Bijan Vaez -Developing Offline Capable Mobile Web Apps

  1. 1. Developing Offline Capable Mobile Web Apps
  2. 2. Motivation Instant Updates Full customizability Real-time feedback
  3. 3. Goals • Remedy poor connectivity – Make web not connected to ‘the web’ • Increase performance – Make web as close as possible to native
  4. 4. Technologies • HTML5 – App Cache / Manifest – Local Storage – WebSQL (deprecated) – IndexDB (still not fully spec’ed) • New clientside Javascript possibilities
  5. 5. Demo Time
  6. 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. 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. 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. 9. Improvements • Clients are the SLOW part of the web – Lazy Load everything (got us 90%+ performance improvement)
  10. 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. 11. Still inProgress • 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?)

×