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

7,678 views

Published on

** VIDEO RECORDING: https://www.youtube.com/watch?v=upuUTQS2DXw **

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.

  • Yeah, in your dreams! Wasted enough time going after StrongLoop
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • As for the design: we will need to improve the current REST API, provide a more coarse-grained methods suitable for non-isomorphic clients. On the mobile side, you need to re-implement the change-detection/tracking algorithm and also implement a connector/adapter backed by a platform-specific storage.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @anthonyfaucogney I'll put it bluntly, there are no plans to implement sync in our Android and iOS SDKs until there is a paying customer asking for that feature.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Interesting Talk. I'm wondering if there is any plan to implement similar project for Android and IOS client SDK. In any case, how would you design it to fit with your concept ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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 http://loopback.io Slides http://bit.ly/sync-loopback Get in touch http://twitter.com/bajtos http://linkedin.com/in/bajtos

×