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.

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