Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How we built offline data access & sync in LoopBack


Published on


As more and more users are primarily using their mobile devices to access the web, it’s becoming very important for the web apps to provide good experience even when the device is not connected. The common solution is to store data in a browser local storage and synchronize them with the server when there is network access available.

In this talk, tell the story of how we added support for offline data access to LoopBack, and explain the technology that makes this possible. A spoiler: we use browserify to run the same model code both on the server and in the browser, so users of the LoopBack framework don't have to do a lot of work to support offline sync for the models they define. There's more to it of course, which is outlined in great detail during the talk.

LoopBack is a backend framework built specifically for servicing mobile clients, making it easy to connect your mobile app all the way through to heterogeneous data sources like SQL, NoSQL or even SOAP services.

How we built offline data access & sync in LoopBack

  1. 1. How we built offline data access & sync in LoopBack Miroslav Bajtoš
  2. 2. What is LoopBack?
  3. 3. Data access & ORM ● Own querying language inspired by MongoDB ● Connectors for SQL, NoSQL and more ● In-memory database Todo.find({ where: { completed: false }, limit: 10 }, function(err, list) { /*...*/ });
  4. 4. REST API Built-in data-access methods Todo.find => GET /todos?filter=:filter Todo.create => POST /todos Todo.findById => GET /todos/:id (and so on) Custom methods Todo.stats => GET /todos/stats
  5. 5. LoopBack on the server Todo model REST API data source Mongo MySQL SOAP
  6. 6. The trouble with offline mode
  7. 7. Different tools & APIs Online ● REST/HTTP calls ● full power of back-end & database GET /todos?where= {"completed":false} &limit=10 Offline ● local storage/index db ● key/value store JSON.parse( localStorage.todos ).filter(function(t){ return !t.completed; }).slice(0,10);
  8. 8. Synchronization ● What has been changed locally? ● What has changed on the server? ● How to detect conflicts?
  9. 9. The LoopBack recipe Single API for offline & online ● LoopBack in the browser ● LocalStorage as a database ● REST server as a database Synchronization ● Change replication between data-sources
  10. 10. Single API for online & offline
  11. 11. Welcome to the browser Node.js Todo model Browser data source Local storage LoopBack server
  12. 12. Remoting metadata Todo.find(filter, cb) { … } Todo.remoteMethod('find', { accepts: [{ arg: 'filter', type: 'object' }], returns: [{ arg: 'data', type: 'array', root: true }], http: { verb: 'get', path: '/' } }); Todo.sharedClass.http = { path: '/todos' }
  13. 13. Remoting implementation - server app.get('/todos', function(req, res, next) { Todo.find( req.param['filter'], function(err, data){ if (err) next(err) else res.send(data); } ); }
  14. 14. Remoting implementation - client Todo.find = function(filter, cb) { request.get( { path: '/todos', query: { filter: filter } }, function(err, res) { if (err) cb(err) else cb(null, res.body); }); }
  15. 15. The result One API to rule them all: ● server ● online browser ● offline browser Todo.find({ where: { completed: false }, limit: 10 }, function(err, list) { /*...*/ });
  16. 16. Data synchronization
  17. 17. Change tracking Change tracking record: modelName "Todo" modelId "42" revision "SHA of data" checkpoint 2 ● Updated immediately by loopback writes ● Manual update for external writers (scheduled at a regular interval)
  18. 18. The replication algorithm 1. Find local changes 2. Compare remote and local changes, detect conflicts 3. Resolve conflicts 4. Perform a bulk update 5. Create a new checkpoint
  19. 19. Browser Synchronizing client local Todo model data source Local storage LoopBack server change tracking & replication remote Todo model data source
  20. 20. DEMO!
  21. 21. THANK YOU! LoopBack Slides Get in touch