Transcript
Page 1: How we built  offline data access & sync in LoopBack

How we built offline data access & sync in LoopBack

Miroslav Bajtoš

Page 2: How we built  offline data access & sync in LoopBack

What is LoopBack?

Page 3: How we built  offline data access & sync in LoopBack

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) { /*...*/ });

Page 4: How we built  offline data access & sync in LoopBack

REST API

Built-in data-access methodsTodo.find => GET /todos?filter=:filter

Todo.create => POST /todos

Todo.findById => GET /todos/:id

(and so on)

Custom methodsTodo.stats => GET /todos/stats

Page 5: How we built  offline data access & sync in LoopBack

LoopBack on the server

Todomodel

RESTAPI

datasource

Mongo

MySQL

SOAP

Page 6: How we built  offline data access & sync in LoopBack

The trouble with offline mode

Page 7: How we built  offline data access & sync in LoopBack

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);

Page 8: How we built  offline data access & sync in LoopBack

● What has been changed locally?

● What has changed on the server?

● How to detect conflicts?

Synchronization

Page 9: How we built  offline data access & sync in LoopBack

Single API for offline & online

● LoopBack in the browser● LocalStorage as a database● REST server as a database

Synchronization

● Change replication between data-sources

The LoopBack recipe

Page 10: How we built  offline data access & sync in LoopBack

Single API for online & offline

Page 11: How we built  offline data access & sync in LoopBack

Node.js

Browser

Welcome to the browser

Todomodel

datasource

Localstorage

LoopBack server

Page 12: How we built  offline data access & sync in LoopBack

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' }

Page 13: How we built  offline data access & sync in LoopBack

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); }

);

}

Page 14: How we built  offline data access & sync in LoopBack

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); });

}

Page 15: How we built  offline data access & sync in LoopBack

The result

One API to rule them all: ● server● online browser● offline browser

Todo.find({

where: { completed: false },

limit: 10

}, function(err, list) { /*...*/ });

Page 16: How we built  offline data access & sync in LoopBack

Data synchronization

Page 17: How we built  offline data access & sync in LoopBack

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)

Page 18: How we built  offline data access & sync in LoopBack

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

Page 19: How we built  offline data access & sync in LoopBack

Browser

Synchronizing client

localTodo

model

datasource

Localstorage

LoopBack server

change tracking & replication

remoteTodo

model

datasource

Page 20: How we built  offline data access & sync in LoopBack

DEMO!

Page 21: How we built  offline data access & sync in LoopBack

LoopBackhttp://loopback.io

Slideshttp://bit.ly/sync-loopback

Get in touchhttp://twitter.com/bajtoshttp://linkedin.com/in/bajtos

THANK YOU!


Top Related