Autonomous Web Applications with Ember.js and Orbit.js

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.

E01ec1de2f7783812d2235a6a9aaaeea?s=128

Dan Gebhardt

June 17, 2014
Tweet

Transcript

  1. Dan Gebhardt @dgeb Wicked Good Ember 2014 AUTONOMOUS WEB APPLICATIONS

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

    WITH
  3. None
  4. WHAT'S NEXT FOR AMBITIOUS WEB APPLICATIONS?

  5. AUTONOMY

  6. AUTONOMY ?

  7. AUTONOMY?

  8. AUTONOMY

  9. OFFLINE SUPPORT

  10. NON-BLOCKING INTERFACES

  11. DATA SYNCHRONIZATION

  12. TRANSACTIONAL CONTEXTS

  13. UNDO / REDO

  14. None
  15. PLAIN OLE’ ==

  16. PRIMITIVES { } EVENTS

  17. PRIMITIVES { } EVENTS

  18. PRIMITIVES { } EVENTS TRANSFORMS

  19. SYNCHRONOUS EVENT HANDLING 1 2 3 4 5 6

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

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

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

    P = Promise P P Async Non-Blocking
  23. PRIMARY INTERFACES { } REQUESTABLE TRANSFORMABLE

  24. REQUESTABLE find add remove update patch findLink addLink removeLink

  25. TRANSFORMABLE transform(operation)

  26. REQUEST FLOW << assistFind >>! _find()! << rescueFind >>! <<

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

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

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

    >>! << didFind /didNotFind >>
  30. TRANSFORM FLOW source.transform(op) _transform()! << didTransform >>

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

  32. Orbit.Document Complete implementation of JSON Patch (RFC 6902): { }

    add remove replace move copy test ———— transform retrieve
  33. 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"}}! !
  34. 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
  35. COMMON LIBRARY

  36. ORBIT COMMON LIB 
 SOURCES { } MEMORY

  37. { } MEMORY LOCAL STORAGE ORBIT COMMON LIB 
 SOURCES

  38. { } MEMORY JSON API LOCAL STORAGE ORBIT COMMON LIB

    
 SOURCES
  39. { } MEMORY JSON API LOCAL STORAGE + MORE +

    ORBIT COMMON LIB 
 SOURCES
  40. { } MODELS ORBIT COMMON LIB 
 SCHEMA

  41. { } MODELS RELATIONSHIPS ORBIT COMMON LIB 
 SCHEMA

  42. { } MODELS ID FIELDS RELATIONSHIPS ORBIT COMMON LIB 


    SCHEMA
  43. { } MODELS ID FIELDS RELATIONSHIPS + MORE + ORBIT

    COMMON LIB 
 SCHEMA
  44. None
  45. 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
  46. • Extends EO.Source • Maintains an identity map of model

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

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

    by data in the source • Familiar interfaces to access and request data EO.Model
  49. 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
  50. 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
  51. EO.Model get set ! remove patch findLink addLink removeLink {

    } { } Synchronous Asynchronous
  52. 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
  53. URLS DRIVE APPLICATION STATE

  54. SOURCES DRIVE MODEL STATE

  55. AUTONOMOUS WEB APPLICATIONS WITH

  56. PLUGGABLE SOURCES IndexedDB LocalStorage

  57. EDITING CONTEXTS

  58. UNDO / REDO

  59. DATA SYNCHRONIZATION

  60. STATUS • orbit.js • Released January 9, 2014 • v0.2.0

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

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

    Ember-Orbit ! Follow progress: Twitter: @orbitjs Github: https://github.com/orbitjs
  63. Wicked Good Ember 2014 THANKS! @dgeb