O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

1.824 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

  1. 1. Bijan Vaez Look Ma’ No Connections! Building Offline-Capable Web Apps with HTML5 @bijanv m.qconnewyork.com
  2. 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. 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. 4. Instant Updates and Feedback Real-time Audience Response Full customizability Gamification etc The easiest way to build a custom event app
  5. 5. Why Offline-Web?
  6. 6. Why Offline-Web?
  7. 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. 8. High Availability for Client Server Outage Server Outage + Offline Cache
  9. 9. New User Behaviours • Push towards native functionality Source: http://smashinghub.com/
  10. 10. Mobile Matters Mobile Performance Trifecta Bandwidth Latency Device Capability
  11. 11. Performance Can’t depend on browser cache and caching techniques Need better ways of client-side caching for a faster web
  12. 12. Agenda • Demo Time! • ‘Offlining’ Static Resources • ‘Offlining’ Dynamic Content • Techniques & Managing Data Syncs
  13. 13. Let’s See it Action • Super Awesome Demo time!
  14. 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. 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. 16. ‘Offlining’ Static Assets
  17. 17. App Cache • Demo: Let’s take an app offline
  18. 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. 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. 20. Updating The Manifest • App Cache has DOM object window.applicationCache • Cache fires events: cached checking downloading error noupdate obsolete progress updateready
  21. 21. Updating The Manifest
  22. 22. ‘Offlining’ Dynamic Data
  23. 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. 24. WebSQL • SQLite implementation o ~50MB limit of data storage
  25. 25. IndexedDB • ‘NoSQL’ o Key Value Pair Datastore o “No limit”, can ask user for more space
  26. 26. Tools to help • IndexedDB Shim o https://github.com/axemclion/IndexedDBShim • IndexedDB Polyfill o https://github.com/facebook/IndexedDB-polyfill
  27. 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. 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. 29. Thank You! @bijanv Bijan Vaez