Overview of Orbit.js - Speaker Deck

Slide 1

Slide 1 text

@ d g e b B o s t o n E m b e r M e e t u p F e b r u a r y 2 0 1 8

Slide 2

Slide 2 text

U S E C A S E S

Slide 3

Slide 3 text

CLIENT-FIRST DEVELOPMENT

Slide 4

Slide 4 text

PLUGGABLE SOURCES

Slide 5

Slide 5 text

DATA SYNCHRONIZATION

Slide 6

Slide 6 text

EDITING CONTEXTS

Slide 7

Slide 7 text

UNDO / REDO

Slide 8

Slide 8 text

OPTIMISTIC UI

Slide 9

Slide 9 text

OFFLINE (BROWSER CACHE)

Slide 10

Slide 10 text

ISOMORPHIC

Slide 11

Slide 11 text

B A S I C C O N C E P T S

Slide 12

Slide 12 text

DISPARATE SOURCES

Slide 13

Slide 13 text

DISPARATE DATA

Slide 14

Slide 14 text

COMMON INTERFACES

Slide 15

Slide 15 text

NORMALIZED DATA

Slide 16

Slide 16 text

EVENTED CONNECTIONS

Slide 17

Slide 17 text

FLOW CONTROL

Slide 18

Slide 18 text

CHANGE TRACKING

Slide 19

Slide 19 text

IMMUTABLE DATA

Slide 20

Slide 20 text

@ o r b i t p a c k a g e s

Slide 21

Slide 21 text

{ @orbit/core @orbit/data @orbit/coordinator @orbit/utils CORE PACKAGES

Slide 22

Slide 22 text

{ @orbit/store @orbit/jsonapi @orbit/local-storage @orbit/indexeddb SOURCES

Slide 23

Slide 23 text

{ @orbit/local-storage-bucket @orbit/indexeddb-bucket BUCKETS

Slide 24

Slide 24 text

@ o r b i t / d a t a

Slide 25

Slide 25 text

SCHEMA { MODELS RELATIONSHIPS KEYS

Slide 26

Slide 26 text

{ SOURCES SCHEMA TRANSFORM LOG QUEUES (REQUEST + SYNC) OPTIONAL INTERFACES

Slide 27

Slide 27 text

{ PULLABLE PUSHABLE QUERYABLE RESETTABLE SYNCABLE UPDATABLE OPTIONAL SOURCE INTERFACES

Slide 28

Slide 28 text

UPDATING AN "UPDATABLE" SOURCE store.update( transform ); // returns a promise that resolves   // when complete

Slide 29

Slide 29 text

TRANSFORMS Transforms consist of an array of operations: [{"op": "addRecord", "record": { type: 'planet', id: 'p1', attributes: { name: 'Jupiter' }}} {"op": "addRecord", "record": { type: 'moon', id: 'm1', attributes: { name: 'Io' }}}, {"op": "addToRelatedRecords", "record": { type: 'planet', id: 'p1' }, "relationship": "moons", "record": { type: 'moon', id: 'm1' }}]

Slide 30

Slide 30 text

BUILDING TRANSFORMS Transform builders improve ergonomics: store.update(t => [ t.addRecord(jupiter), t.addRecord(io), t.addToRelatedRecords(jupiter, 'moons', io) ]);

Slide 31

Slide 31 text

QUERYING A "QUERYABLE" SOURCE store.query( queryExpression ); // resolves to static results

Slide 32

Slide 32 text

QUERY EXPRESSIONS An example query expression for ﬁnding a sorted collection: { op: 'findRecords', type: 'planet', sort: [{ kind: 'attribute', attribute: 'name', order: 'ascending' }] }

Slide 33

Slide 33 text

QUERY BUILDERS Query builders improve ergonomics of building expressions: store.query(q => q.records('planet') .sort('name'));

Slide 34

Slide 34 text

@ o r b i t / c o o rd i n a t o r

Slide 35

Slide 35 text

COORDINATOR { SOURCES STRATEGIES

Slide 36

Slide 36 text

SYNC'ING CHANGES // Sync all changes to the store with backup coordinator.addStrategy(new SyncStrategy({ source: 'store', target: 'backup', blocking: true }));

Slide 37

Slide 37 text

OPTIMISTIC UPDATES // Push update requests to the server. coordinator.addStrategy(new RequestStrategy({ source: 'store', on: 'beforeUpdate', target: 'remote', action: 'push' }));

Slide 38

Slide 38 text

PESSIMISTIC UPDATES // Push update requests to the server. coordinator.addStrategy(new RequestStrategy({ source: 'store', on: 'beforeUpdate', target: 'remote', action: 'push', blocking: true }));

Slide 39

Slide 39 text

HANDLING FAILURES (1/2) coordinator.addStrategy(new RequestStrategy({ source: 'remote', on: 'pushFail', action(transform, e) { if (e instanceof NetworkError) { // When network errors are encountered, try again in 5s console.log('NetworkError - will try again soon'); setTimeout(() => { remote.requestQueue.retry(); }, 5000); } // Else see Part 2 }, blocking: true }));

Slide 40

Slide 40 text

HANDLING FAILURES (2/2) // When non-network errors occur, notify the user and // reset state. let label = transform.options && transform.options.label; if (label) { alert(`Unable to complete "${label}"`); } else { alert(`Unable to complete operation`); } // Roll back store to position before transform if (store.transformLog.contains(transform.id)) { console.log('Rolling back - transform:', transform.id); store.rollback(transform.id, -1); } return remote.requestQueue.skip();

Slide 41

Slide 41 text

BROWSER STORAGE // Warm the store's cache from backup BEFORE activating // the coordinator backup.pull(qb.records()) .then(transforms => store.sync(transforms)) .then(() => coordinator.activate());

Slide 42

Slide 42 text

+ = ember-orbit

Slide 43

Slide 43 text

import { Model, attr, hasMany } from 'ember-orbit'; Star = Model.extend({ name: attr('string'), planets: hasMany('planet', {inverse: 'sun'}) }); Planet = Model.extend({ name: attr('string'), classification: attr('string'), sun: hasOne('star', {inverse: 'planets'}) }); Model ember-orbit

Slide 44

Slide 44 text

Store cache.query cache.liveQuery query liveQuery update { } { } Synchronous Asynchronous ember-orbit

Slide 45

Slide 45 text

// Given a `model` from a `store` let fork = store.fork(); let forkModel = this.fork.cache.find(model.type, model.id); fork .addRecord({ type: 'phoneNumber' }) .then(phoneNumber => { forkModel.get('phoneNumbers').pushObject(phoneNumber); }); // `merge` coalesces operations to a minimal set before // applying the update store.merge(fork); Store Forking ember-orbit