Ambitious Data Flows with Ember.js and Orbit.js

Slide 1

Slide 1 text

Dan Gebhardt @dgeb AMBITIOUS DATA FLOWS WITH EMBER.JS AND ORBIT.JS

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

A standalone library for coordinating access to data sources and keeping their contents synchronized.

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

OFFLINE SUPPORT

Slide 6

Slide 6 text

NON-BLOCKING INTERFACES

Slide 7

Slide 7 text

DATA SYNCHRONIZATION

Slide 8

Slide 8 text

TRANSACTIONAL CONTEXTS

Slide 9

Slide 9 text

UNDO / REDO

Slide 10

Slide 10 text

CORE CONCEPTS

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

COMMON INTERFACES

Slide 14

Slide 14 text

NORMALIZED DATA

Slide 15

Slide 15 text

EVENTED CONNECTIONS

Slide 16

Slide 16 text

PROMISIFIED METHODS doThing

Slide 17

Slide 17 text

CORE CONCEPTS { } COMMON INTERFACES NORMALIZED DATA EVENTED CONNECTIONS PROMISIFIED METHODS !

Slide 18

Slide 18 text

INTERNALS

Slide 19

Slide 19 text

PLAIN OLE’ ==

Slide 20

Slide 20 text

PRIMITIVES { } EVENTS

Slide 21

Slide 21 text

PRIMITIVES { } EVENTS

Slide 22

Slide 22 text

PRIMITIVES { } EVENTS TRANSFORMS

Slide 23

Slide 23 text

SYNCHRONOUS EVENT HANDLING 1 2 3 4 5 6

Slide 24

Slide 24 text

1 2 3 4 5 6 7 ??? P P = Promise SYNCHRONOUS EVENT HANDLING

Slide 25

Slide 25 text

PROMISE-AWARE EVENTS 1 2 3 4 5 6 7 8 P P P P P = Promise Async Blocking

Slide 26

Slide 26 text

PROMISE-AWARE EVENTS 1 2 3 ??? 4 5 6 7 P = Promise P P Async Non-Blocking

Slide 27

Slide 27 text

PRIMARY INTERFACES { } REQUESTABLE TRANSFORMABLE

Slide 28

Slide 28 text

REQUESTABLE find add remove update patch findLink addLink removeLink findLinked

Slide 29

Slide 29 text

TRANSFORMABLE transform(operation)

Slide 30

Slide 30 text

REQUEST FLOW << assistFind >>! _find()! << rescueFind >>! << didFind /didNotFind >> source.find(“planet”, “1”)

Slide 31

Slide 31 text

REQUEST FLOW << assistFind >>! _find()! << rescueFind >>! << didFind /didNotFind >> source.find(“planet”, “1”)

Slide 32

Slide 32 text

REQUEST FLOW << assistFind >>! _find()! << rescueFind >>! << didFind /didNotFind >> source.find(“planet”, “1”)

Slide 33

Slide 33 text

REQUEST FLOW source.find(“planet”, “1”) << assistFind >>! _find()! << rescueFind >>! << didFind /didNotFind >>

Slide 34

Slide 34 text

TRANSFORM FLOW source.transform(op) _transform()! << didTransform >>

Slide 35

Slide 35 text

TRANSFORM FLOW source.transform(op) _transform()! << didTransform >>

Slide 36

Slide 36 text

Orbit.Document Complete implementation of JSON Patch (RFC 6902): { } add remove replace move copy test ———— transform retrieve

Slide 37

Slide 37 text

TRANSFORMATIONS JSON Patch transformations: {"op":"remove","path":["planet","1389295329110.3"]}! {"op":"add","path":["planet","1389295895882.1"],"value": {"name":"Mercury","id":"1389295895882.1"}}! {"op":"remove","path":["planet","1389295895882.1"]}! {"op":"add","path":["planet","1389296188090.2"],"value": {"name":"Mercury","id":"1389296188090.2"}}! {"op":"add","path":["planet","1389296196274.3"],"value": {"name":"Venus","id":"1389296196274.3"}}! {"op":"add","path":["planet","1389296197897.4"],"value": {"name":"Earth","id":"1389296197897.4"}}! {"op":"add","path":["planet","1389296199041.5"],"value": {"name":"Mars","id":"1389296199041.5"}}! !

Slide 38

Slide 38 text

CONNECTORS • TransformConnector for connecting a source and target. • Two connectors are needed for bi-directional syncs. • Connectors can be blocking or not • RequestConnector for coordinating requests to data

Slide 39

Slide 39 text

COMMON LIBRARY

Slide 40

Slide 40 text

ORBIT COMMON LIB   SOURCES { } MEMORY

Slide 41

Slide 41 text

{ } MEMORY LOCAL STORAGE ORBIT COMMON LIB   SOURCES

Slide 42

Slide 42 text

{ } MEMORY JSON API LOCAL STORAGE ORBIT COMMON LIB   SOURCES

Slide 43

Slide 43 text

{ } MEMORY JSON API LOCAL STORAGE + MORE + ORBIT COMMON LIB   SOURCES

Slide 44

Slide 44 text

{ } MODELS ORBIT COMMON LIB   SCHEMA

Slide 45

Slide 45 text

{ } MODELS RELATIONSHIPS ORBIT COMMON LIB   SCHEMA

Slide 46

Slide 46 text

{ } MODELS KEYS RELATIONSHIPS ORBIT COMMON LIB   SCHEMA

Slide 47

Slide 47 text

{ } MODELS KEYS RELATIONSHIPS + MORE + ORBIT COMMON LIB   SCHEMA

Slide 48

Slide 48 text

ember-orbit

Slide 49

Slide 49 text

Provides a loose wrapper around an OC.Source: App.LocalStorageSource = EO.Source.extend({! orbitSourceClass: OC.LocalStorageSource,! orbitSourceOptions: {! namespace: “myApp” // n.s. for localStorage! }! }); EO.Source ember-orbit

Slide 50

Slide 50 text

• Extends EO.Source • Maintains an identity map of model instances. • Familiar interfaces to access and request data. EO.Store ember-orbit

Slide 51

Slide 51 text

EO.Store all filter retrieve ! find add remove patch findLink addLink removeLink { } { } Synchronous Asynchronous ember-orbit

Slide 52

Slide 52 text

• Deﬁnes schema with attributes and relationships • Backed directly by data in the source • Familiar interfaces to access and request data EO.Model ember-orbit

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Slide 55

Slide 55 text

EO.Model get set ! remove patch ﬁndLink addLink removeLink ﬁndLinked { } { } Synchronous Asynchronous ember-orbit

Slide 56

Slide 56 text

store.add(“planet”, {name: “Jupiter”}).then(! function(jupiter) {! jupiter.get(“moons”).pushObject(io);! jupiter.set(“classification”, “gas giant”);! }! );! ! store.then(function() { // all requests resolve! console.log(io.get(“planet.name”)); // Jupiter! });! EO.Model ember-orbit

Slide 57

Slide 57 text

URLS DRIVE APPLICATION STATE

Slide 58

Slide 58 text

SOURCES DRIVE MODEL STATE ember-orbit

Slide 59

Slide 59 text

DEVELOPMENT PATTERNS WITH ember-orbit

Slide 60

Slide 60 text

CLIENT-FIRST DEVELOPMENT ember-orbit

Slide 61

Slide 61 text

ember-orbit // Start development with just a local store! var LocalStore = EO.Store.extend({! orbitSourceClass: OC.LocalStorageSource,! orbitSourceOptions: { namespace: “myApp” }! });! ! App.initializer({! name: 'injectStore',! initialize: function(container, application) {! Orbit.Promise = Ember.RSVP.Promise;! application.register('schema:main', EO.Schema);! application.register('store:main', LocalStore);! application.inject('controller', 'store', 'store:main');! application.inject('route', 'store', 'store:main');! }! });

Slide 62

Slide 62 text

PLUGGABLE SOURCES IndexedDB LocalStorage ember-orbit

Slide 63

Slide 63 text

ember-orbit // Prefer IndexedDB, but default to LocalStorage! function localStoreClass() {! if (window.indexedDB) {! ! return IndexedDBSource; // Coming soon!! } else {! return LocalStorageSource;! }! }! ! App.initializer({! name: 'injectStore',! initialize: function(container, application) {! application.register('store:main', localStoreClass());! }! });

Slide 64

Slide 64 text

DATA SYNCHRONIZATION ember-orbit

Slide 65

Slide 65 text

ember-orbit // Create transform connectors between sources! // Typically performed in the initializer! function connectSources(container) {! var main = container.lookup('store:main').orbitSource;! var api = container.lookup('source:api').orbitSource;! ! new Orbit.TransformConnector(main, api);! new Orbit.TransformConnector(api, main);! }!

Slide 66

Slide 66 text

EDITING CONTEXTS ember-orbit

Slide 67

Slide 67 text

ember-orbit export default Ember.Controller.extend({! // Configure editing context (WIP!!!!!)! beginEditing: function(model) {! var _this = this;! var store = this.get('store');! var storeContext = store.createContext();! ! this.set('model', model);! ! storeContext.find('contact',   this.get('model.id')).then(function(contact) {! _this.set('editableModel', contact);! });! }! ! // Continued . . . WIP!

Slide 68

Slide 68 text

ember-orbit // . . . Continued! ! actions: {! save: function() {! var _this = this;! this.get(‘editableModel.store')! .commitTransaction().then(function() {  _this.transitionToRoute('contact.index');! })! },! ! cancel: function() {! this.transitionToRoute('contact.index');! }! }! }); WIP!

Slide 69

Slide 69 text

UNDO / REDO ember-orbit

Slide 70

Slide 70 text

ember-orbit ! ! // Watch for transforms and track them in an array! var transforms = this.get('transformations');! ! store.orbitSource.on('didTransform', ! function(operation, inverse) {! if (!_this.get('undoing')) {! transforms.pushObject(Transformation.create({! operation: operation,! inverse: inverse! }));! }! }! );! ! // Continued . . .! WIP!

Slide 71

Slide 71 text

ember-orbit ! // . . . Continued! ! undo: function() {! var transformation = this.get('transformations').popObject();! var inverseOps = transformation.inverse;! var orbitSource = this.get('store.orbitSource');! var _this = this;! ! this.set('undoing', true);! orbitSource.transform(inverse).then(function() {! _this.set('undoing', false);! });! }! WIP!

Slide 72

Slide 72 text

STATUS • Initial release January 9, 2014 • Current: 0.5.1 ember-orbit • Initial release June 17, 2014 • Current: 0.3.0

Slide 73

Slide 73 text

RECENT UPDATES • Full class system • Primary + secondary keys • Custom keys per model • Default settings for models • __meta key for source-speciﬁc data • Full JSON API support • Serializers (including JSON API)

Slide 74

Slide 74 text

TODOS ember-orbit • Fully encapsulate Orbit’s API • Improve ergonomics • Add-on for ember-cli • More sources • More synchronization strategies • Coalescing / managing transforms

Slide 75

Slide 75 text

COMING SOON orbitjs.com API docs and guides for Orbit and Ember-Orbit Follow progress: Twitter: @orbitjs  IRC: #orbitjs  Github: https://github.com/orbitjs

Slide 76

Slide 76 text

ALSO COMING SOON Example app using JSON API Backed by Rails app built with JSONAPI::Resources.    http://github.com/cerebris/jsonapi-resources

Slide 77

Slide 77 text

THANKS! @dgeb