Ember.js Meetup - London

Talk at the Ember.js Meetup in London in December 2013.

Transcript

1. London Ember.js User Group Kasper Tidemann on Ember.js and offline mode for the December 2013 meetup.
2. Brief and friendly-notated description of Kasper. { name: “Kasper Tidemann”, profession: “Software developer”, worksFor: “A startup, duh-uh!”, likesTo: “Be nice and drink beer.”, locations: [“Copenhagen”, “San Francisco”], alsoDoes: “Blogging”, websites: [“kaspertidemann.com”] }
3. Looking good! At Casanova’s in San Francisco talking Ember.js, obviously.
4. A platform for creating and sharing meemos with people and organizations everywhere.
5. A bit of perspective on offline mode. Let’s talk about what we’re really dealing with here.
7. That’s essentially it, right there. But trust me, there are many more details to cover. Cache manifest Storage library We’re offline! Server-side Client-side
8. How it looks in the Web Inspector in Chrome when loading a cache manifest. Server-side
9. We’re using Ember Data for finding records and so on… and then what? Client-side Static assets /index.html /scripts/ember.js /scripts/ember-data.js /scripts/handlebars.js /scripts/app.js /public/Logo.png /…/… Dynamic data ✔ Ember Data ! … because yeah, we want to use Ember Data. And then what?
10. The thought process explained. … and then what? 1. When .find()ing a record, we want to save it locally.
 1. Oh, but we also want to check if the record exists locally when .find()ing it.
 1. If the record does exist locally, we want immediately return the local version of the record and then attempt to .reload() it from the server.
 1. If it turns out the record has been deleted server-side, we want to remove the record locally as well, unless there are local changes in which case we want to…
 1. … go get coffee. And use gem “turbolinks”.
11. There must be a library out there that does this already? … Right?
12. No. Just for the sake of repetition: no.
13. Some of the libraries able to work with IndexedDB, WebSQL, or localStorage. But wait a minute! https://github.com/daleharvey/pouchdb https://github.com/axemclion/IndexedDBShim https://github.com/axemclion/jquery-indexeddb https://github.com/aaronpowell/db.js
14. It’s either packing everything offline into an adapter or making a tad more of an effort. So, two strategies to consider Model-controller layer ✔ No reinventing the REST wheel ✔ Separation of concerns ✔ Querying ✔ Filterable ✔ Computed properties ✔ Em.SortableMixin ! ✘ Verbose Ember Data adapter ✔ Custom adapter ✔ Simple wrapping ✔ Silent failing ! ✘ Error handling ✘ Conflict resolution ✘ Querying ✘ Fast
15. How the code for a route could look. In practice: the route App.SomeRoute = Em.Route.extend({ model: function(params) { return this.controllerFor(‘someModel’). findRecord(params.some_id); } });
16. How the code for a controller could look. In practice: the controller App.SomeModelController = Em.ArrayController.extend({ content: [], ! findRecord: function(id) { var self = this; return new Em.RSVP.Promise(function(resolve, reject) { var record = self.get(‘content’).findProperty(‘id’, id); ! if (record) { resolve(record); } else { (new PouchDB(‘someDatabase’)).get(id, function(err, doc) { if (err) { reject(error); } else { resolve(doc); } } } }); } });
17. Essentially, use Ember Data as intended and extend its behavior in a set of controllers. Well, that’s one way of doing it, at least.
18. This shows how I’m using the concept of core controllers alongside model controllers. Core and model controllers
19. Just a quick checklist summing up the most common things to be aware of. Checklist • Load all locally stored records when bootstrapping • Clear all locally stored records when a user logs out • Figure out how you want to handle conflicts - last-write-wins etc. • Be sure to return promises when implementing .findRecord() etc. • Be sure to never use Ember Data directly, but always using the corresponding model controller (that does use it, of course) • Check for changes to a record when finding it, saving it, and so on. • Have the user resolve any conflicts - you cannot possibly automate this all by yourself, neither can any library out there.
20. Offline mode is daunting, yes. ! But amazing. Once it works, it really is quite amazing, almost futuristic-like in terms of the web.
21. Thanks for having me! Thank you!