Your SlideShare is downloading. ×
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Look Ma, No Connections! Building Offline-capable Web Apps with HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Look Ma, No Connections! Building Offline-capable Web Apps with HTML5

890

Published on

Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/11HheUJ. …

Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/11HheUJ.

Bijan Vaez discusses building large-scale cross-platform mobile apps with HTML5 including offline support, real-time interactivity, and device APIs (camera, GPS).Filmed at qconnewyork.com.

Bijan Vaez is the CTO and CoFounder at EventMobi, the largest app building platform for events and conferences. Previous to EventMobi, Bijan built an award-winning iOS app, was part of the discrete graphics team at AMD and founded a real-time RFID tracking consultancy. Bijan holds a BASc in Computer Engineering from the University of Toronto and can be found at @bijanv.

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

  • Be the first to like this

No Downloads
Views
Total Views
890
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Bijan Vaez Look Ma’ No Connections! Building Offline-Capable Web Apps with HTML5 @bijanv m.qconnewyork.com
  • 2. InfoQ.com: News & Community Site • 750,000 unique visitors/month • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • News 15-20 / week • Articles 3-4 / week • Presentations (videos) 12-15 / week • Interviews 2-3 / week • Books 1 / month Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations /html5-offline-storage
  • 3. Presented at QCon New York www.qconnewyork.com Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide
  • 4. Instant Updates and Feedback Real-time Audience Response Full customizability Gamification etc The easiest way to build a custom event app
  • 5. Why Offline-Web?
  • 6. Why Offline-Web?
  • 7. High Availability for Client UI BLL DAL View Controller Model View Presenter Model View ViewModel Model 3-Tier Architecture MVC Architecture MVP Architecture MVVM Architecture Dependent on the Server / Backend Services !! Single Point of Failure !!
  • 8. High Availability for Client Server Outage Server Outage + Offline Cache
  • 9. New User Behaviours • Push towards native functionality Source: http://smashinghub.com/
  • 10. Mobile Matters Mobile Performance Trifecta Bandwidth Latency Device Capability
  • 11. Performance Can’t depend on browser cache and caching techniques Need better ways of client-side caching for a faster web
  • 12. Agenda • Demo Time! • ‘Offlining’ Static Resources • ‘Offlining’ Dynamic Content • Techniques & Managing Data Syncs
  • 13. Let’s See it Action • Super Awesome Demo time!
  • 14. Super awesome app • 3 (all client-side, HTML5) parts o HTML5 based camera access o HTML5 based image processing through canvas o HTML5 offline app
  • 15. How can we accomplish this? • App Cache for Static Assets • Client Side Data Stores for Dynamic Content o LocalStorage o WebSQL o IndexedDB o Better yet Polyfills!
  • 16. ‘Offlining’ Static Assets
  • 17. App Cache • Demo: Let’s take an app offline
  • 18. App Cache Must be served with text/cache-manifest mime-type Use * for Network section. Non-cached resources will not load on a cached page
  • 19. Gotcha’s & Pitfalls 1. Files always served from cache even if online 2. Can only update cached files by updating the content of manifest itself 3. Do NOT cache the cache (Expiry headers) 4. Any errors (404’s, dropped packets) break the cache 5. Page that references manifest file is cached implicitly Minimize your dependence http://alistapart.com/article/application-cache-is-a-douchebag FireFox Nightly can help debug
  • 20. Updating The Manifest • App Cache has DOM object window.applicationCache • Cache fires events: cached checking downloading error noupdate obsolete progress updateready
  • 21. Updating The Manifest
  • 22. ‘Offlining’ Dynamic Data
  • 23. LocalStorage • Key Value Pair Datastore o 5 MB (but really only 2.5 MB) o Watch out for performance o Supported cross-browser/device • setItem(“key”, “value”) • getItem(“key”)
  • 24. WebSQL • SQLite implementation o ~50MB limit of data storage
  • 25. IndexedDB • ‘NoSQL’ o Key Value Pair Datastore o “No limit”, can ask user for more space
  • 26. Tools to help • IndexedDB Shim o https://github.com/axemclion/IndexedDBShim • IndexedDB Polyfill o https://github.com/facebook/IndexedDB-polyfill
  • 27. Data Synchronization • Breeze.js • PouchDB • Single Page Application o Poll server for updates when online o Push deltas to app (using XHR / Websockets)
  • 28. Summary • Be careful with App Cache • Polyfills help manage dynamic data storage and keep cross-browser/device compatibility • Performance gain cannot be overlooked
  • 29. Thank You! @bijanv Bijan Vaez

×