Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Autonomous Web Applications with Ember.js and O...

Autonomous Web Applications with Ember.js and Orbit.js

Introduction to Orbit.js and the integration library Ember-Orbit. Presented at Wicked Good Ember 2014.

Dan Gebhardt

June 17, 2014
Tweet

More Decks by Dan Gebhardt

Other Decks in Programming

Transcript

  1. 1 2 3 4 5 6 7 ??? P P

    = Promise SYNCHRONOUS EVENT HANDLING
  2. PROMISE-AWARE EVENTS 1 2 3 4 5 6 7 8

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

    P = Promise P P Async Non-Blocking
  4. REQUEST FLOW << assistFind >>! _find()! << rescueFind >>! <<

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

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

    didFind /didNotFind >> source.find(“planet”, “1”)
  7. Orbit.Document Complete implementation of JSON Patch (RFC 6902): { }

    add remove replace move copy test ———— transform retrieve
  8. 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"}}! !
  9. 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
  10. { } MEMORY JSON API LOCAL STORAGE + MORE +

    ORBIT COMMON LIB 
 SOURCES
  11. 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
  12. • Extends EO.Source • Maintains an identity map of model

    instances. • Familiar interfaces to access and request data. EO.Store
  13. EO.Store all filter retrieve ! find add remove patch findLink

    addLink removeLink { } { } Synchronous Asynchronous
  14. • Defines schema with attributes and relationships • Backed directly

    by data in the source • Familiar interfaces to access and request data EO.Model
  15. 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
  16. 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
  17. 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
  18. STATUS • orbit.js • Released January 9, 2014 • v0.2.0

    • ember-orbit • Released June 17, 2014 (!!!) • v0.1.0
  19. TODOS • orbit.js • More sources • More synchronization strategies

    • ember-orbit • Fully encapsulate Orbit’s API • Improve ergonomics, esp. serialization & normalization
  20. COMING SOON orbitjs.com API docs and guides for Orbit and

    Ember-Orbit ! Follow progress: Twitter: @orbitjs Github: https://github.com/orbitjs