Autonomous Web Applications with Ember.js and Orbit.js

Slide 1

Slide 1 text

Dan Gebhardt @dgeb Wicked Good Ember 2014 AUTONOMOUS WEB APPLICATIONS WITH

Slide 2

Slide 2 text

Dan Gebhardt @dgeb Wicked Good Ember 2014 AUTONOMOUS WEB APPLICATIONS WITH

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

WHAT'S NEXT FOR AMBITIOUS WEB APPLICATIONS?

Slide 5

Slide 5 text

AUTONOMY

Slide 6

Slide 6 text

AUTONOMY ?

Slide 7

Slide 7 text

AUTONOMY?

Slide 8

Slide 8 text

AUTONOMY

Slide 9

Slide 9 text

OFFLINE SUPPORT

Slide 10

Slide 10 text

NON-BLOCKING INTERFACES

Slide 11

Slide 11 text

DATA SYNCHRONIZATION

Slide 12

Slide 12 text

TRANSACTIONAL CONTEXTS

Slide 13

Slide 13 text

UNDO / REDO

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

PLAIN OLE’ ==

Slide 16

Slide 16 text

PRIMITIVES { } EVENTS

Slide 17

Slide 17 text

PRIMITIVES { } EVENTS

Slide 18

Slide 18 text

PRIMITIVES { } EVENTS TRANSFORMS

Slide 19

Slide 19 text

SYNCHRONOUS EVENT HANDLING 1 2 3 4 5 6

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

PRIMARY INTERFACES { } REQUESTABLE TRANSFORMABLE

Slide 24

Slide 24 text

REQUESTABLE ﬁnd add remove update patch ﬁndLink addLink removeLink

Slide 25

Slide 25 text

TRANSFORMABLE transform(operation)

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 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 34

Slide 34 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 35

Slide 35 text

COMMON LIBRARY

Slide 36

Slide 36 text

ORBIT COMMON LIB   SOURCES { } MEMORY

Slide 37

Slide 37 text

{ } MEMORY LOCAL STORAGE ORBIT COMMON LIB   SOURCES

Slide 38

Slide 38 text

{ } MEMORY JSON API LOCAL STORAGE ORBIT COMMON LIB   SOURCES

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

{ } MODELS ORBIT COMMON LIB   SCHEMA

Slide 41

Slide 41 text

{ } MODELS RELATIONSHIPS ORBIT COMMON LIB   SCHEMA

Slide 42

Slide 42 text

{ } MODELS ID FIELDS RELATIONSHIPS ORBIT COMMON LIB   SCHEMA

Slide 43

Slide 43 text

{ } MODELS ID FIELDS RELATIONSHIPS + MORE + ORBIT COMMON LIB   SCHEMA

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 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

Slide 50

Slide 50 text

Slide 51

Slide 51 text

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

Slide 52

Slide 52 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

Slide 53

Slide 53 text

URLS DRIVE APPLICATION STATE

Slide 54

Slide 54 text

SOURCES DRIVE MODEL STATE

Slide 55

Slide 55 text

AUTONOMOUS WEB APPLICATIONS WITH

Slide 56

Slide 56 text

PLUGGABLE SOURCES IndexedDB LocalStorage

Slide 57

Slide 57 text

EDITING CONTEXTS

Slide 58

Slide 58 text

UNDO / REDO

Slide 59

Slide 59 text

DATA SYNCHRONIZATION

Slide 60

Slide 60 text

STATUS • orbit.js • Released January 9, 2014 • v0.2.0 • ember-orbit • Released June 17, 2014 (!!!) • v0.1.0

Slide 61

Slide 61 text

TODOS • orbit.js • More sources • More synchronization strategies • ember-orbit • Fully encapsulate Orbit’s API • Improve ergonomics, esp. serialization & normalization

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Wicked Good Ember 2014 THANKS! @dgeb