Leveraging hood.ie to build for the offline state

Download Leveraging hood.ie to build for the offline state

Post on 02-Jul-2015




3 download

Embed Size (px)


A talk I gave at Codemotion Madrid on November 21 of 2014 about the JavaScript application framework hood.ie I give a brief introduction to the pain points of "online-only" applications, how to use hoodie and then talk a bit about the architecture of the framework. After that I go into detail about its main features, user management, data storage, events and synchronization. For those of you who are interested in developing offline-first, you should check out the hoodie website at http://hood.ie.


<ul><li> 1. LEVERAGING HOOD.IETO BUILD FOR THE OFFLINE STATE</li></ul> <p> 2. BEING OFFLINE SUCKSNo Wi-Fi No servicePoor connectivity Unavailable 3. CONSEQUENCESData loss InaccessibilityLong loading times Sluggish behavior 4. PAIN POINTSWHY MOST WEB APPS DONT WORK OFFLINE 5. PAIN POINTSEvery action depends on a connectionApps save all user-specific data onlineNo fallback solution when connection fails 6. PAIN POINTSEvery action depends on a connectionWe need offline first solutionsApps save all user-specific data onlineNo fallback solution when connection fails 7. We cant keep building apps withthe desktop mindset of permanent,fast connectivity, where a temporarydisconnection or slow service isregarded as a problem andcommunicated as an error. Jan Lehnardt, hood.ie team 8. We used HTML5 features to make thesite available offline. Users can lookup full information about conferencesthey're attending even if they have nodata connection. Jake Archibald, Lanyrds lead engineer 9. HOOD.IE ARCHITECTUREHOW IT BRIDGES THE OFFLINE PROBLEM 10. FRONTEND BACKENDApphoodie APIlocalStoragecouchDB 11. Angular.JSBackbone.JSEmber.JSKnockout.JSTheNextBigThing.JShoodie API 12. SOME HOOD.IE BASICSQUICK START GUIDE FOR CODING COWBOYS 13. 5-STEPINSTALL$$$$$brew install couchdbnpm install -g hoodie-clihoodie new cowboyappcd cowboyapphoodie start 14. INITIALIZATIONhoodie = new Hoodie(); 15. USER MANAGEMENTBACKEND-LESS AND RELENTLESSLY SIMPLE 16. I really want to implement usersignup, sign in, sign out and thepassword forgotten functionfrom scratch? 17. SIGN UP AS NEW USERhoodie.account.signUp('chuck@norris.com', 'secret');SIGN IN AS THIS USERhoodie.account.signIn('chuck@norris.com', 'secret'); 18. Apphoodie.accounts APIcouchDBsigns up a new cowboy 19. PROMISEShoodie.account.signUp('chuck@norris.com', 'secret').done(function(cowboy) {}.fail(function(cowboy) {}); 20. HOOD.IE STORAGEPLAIN AND ROBUST OFFLINE DATA 21. ADD A NEW OBJECTvar type = 'goldnugget';var attributes = { category: 'raw',value: '$1200' };hoodie.store.add(type, attributes).done(function (goldnugget) { });ALL DATA IS PRIVATE BY DEFAULT, NOT PUBLIC! 22. Appdigs a gold nuggethoodie store APIHoodies API decouples client/server.It can get interrupted or stop at anystage without breaking.couchDBlocalStorage NoSQL storage 23. FINDING ALL OBJECTSvar type = 'goldnugget';hoodie.store.findAll(type).done(function (goldnuggets) { });OTHER FUNCTIONSupdate(type, id, update), find(type, id),remove(type, id), removeAll(type) 24. HOOD.IE EVENTSGET NOTIFIED WHEN STUFF GETS FIRED 25. Account eventsStore eventsEVENT TYPESsignup signinsignout authenticated unauthenticatedadd updateremove change add:bullet 26. IMPLEMENTING EVENTShoodie.account.on('signin', function (user) {});USER HAS SIGNED IN,ALSO FIRES THE AUTHENTICATED EVENThoodie.store.on('add:bullet', function (bullet) {});WITH : WE CAN LISTEN TO CHANGES FOR A SPECIFIC OBJECT TYPE 27. Appcowboy firing bulletshoodie.storecouchDBlocalStorage 28. SYNCHRONIZATIONBLAZING FAST REAL-TIME UPDATES 29. CowboycouchDBhoodie.remote APIlocalStorageAngry dude 30. COUCHDB CHANGES FEED{seq: 12,id: "foo","changes": [{"rev": 1-2320}],hoodie.remote seq: 12,}id: "bar","changes": [{"rev": 1-2320}], 31. IMPLEMENTATIONhoodie.remote.on('add:peng', function (peng) {});GETS CALLED WHEN AN EVENT IS TRIGGERED REMOTELYhoodie.remote.on('change', function (whatever) {});GETS CALLED FOR ANY OF THE EVENTS: ADD, UPDATE, REMOVE 32. Events SynchronizationAccounts StoragePain points Architecture Basics 33. Every action depends on a connectionApps save all user-specific data onlineNo fallback solution when connection fails 34. Actions can be performed without being connectedEvery action depends on a connectionApps save all user-specific data offlineApps save all user-specific data onlineFalls back to localStorage when connection failsNo fallback solution when connection fails 35. CHECK OUT THE ALLNEW HOOD.IE WEBSITE 36. @marcelkalveramweb developer at 37. THANK YOU FOR LISTENINGPLEASE ASK YOUR QUESTIONS NOW </p>


View more >