Immutability is for UI, You and I

Transcript

4. Backbone The Frontside Pre-history
5. Model-Centric Applications
6. Reactivity via Property Observation
7. Reactive Models
8. Trouble in Paradise
9. Chained Observers A.name -> B.capitalizedName -> C.fullName trouble in paradise
10. Array Observers Do you even? trouble in paradise
11. Shut Up With the Backbone Already!
12. My Tools Ripe for Disruption trouble in paradise
13. Ohai Ember.Object
14. Ohai Ember.Object • observe(‘deeply.nested.properties’); • observe(‘array.@each.property’); • computed(‘mind.blown’);
15. delete Backbone.Model; Backbone.Model = Ember.Object;
16. Ember.Object was just a gateway drug
17. gateway drug •Powerful view system (for the time) •Crazy Powerful Router •Layered Decoration of Models •Community with shared values
18. I never looked back.
20. Trouble in Paradise
21. My Tools Ripe for Disruption trouble in paradise
22. Om and Omniscient Feeling lots of win here.
23. Should I Stay or Should I Go?
24. • Glimmer • Ember CLI • Addons flourishing • Evolution as a Platform Stay or Go
25. Stay obvs
26. Immutability Is for UI, You and I @cowboyd EmberConf 2016
27. Back to the Story
28. A Form Library
29. A Form Library • progressive field revelation • local and remote validations • checklist validations (e.g. password rules) • validation dependencies • overall progress and percentage completion • dirty checking and wholistic submit button enabling • autobuffering of source objects • integrated with submission process (isSubmitting) ambitious ^ n
30. A Complex Network of Related Objects A Form Library ambitious n ^
31. I Couldn’t Even.
32. Example
33. Asynchrony Ate My Lunch
34. Your Model Something Has Gone Terribly Wrong
35. When did the Bad Happen? Your Model Time
36. When did the Bad Happen? Your Model Time
37. When did the Bad Happen? Your Model Time
38. When did the Bad Happen? Your Model Time
39. Debugging Was a Nightmare
40. console.log(?!?)
41. Computed Properties Were a Burden “validations.@each.rules.@each.isFulfilled”
42. TypeError: Cannot read property '0' of null at firstKey (http://localhost:7357/assets/vendor.js:20674:35) at ChainNodePrototype.chain (http://localhost:7357/assets/vendor.js:20907:15) at ChainNodePrototype.chain (http://localhost:7357/assets/vendor.js:20909:14) at ChainNodePrototype.add (http://localhost:7357/assets/vendor.js:20861:12) at watchPath (http://localhost:7357/assets/vendor.js:29357:27) at watch (http://localhost:7357/assets/vendor.js:29415:9) at addDependentKeys (http://localhost:7357/assets/vendor.js:22657:9) at Descriptor.AliasedProperty.willWatch (http://localhost:7357/assets/vendor.js:19928:7) at watchKey (http://localhost:7357/assets/vendor.js:29249:44) at watch (http://localhost:7357/assets/vendor.js:29413:9) at addObserver (http://localhost:7357/assets/vendor.js:25847:7) at Object.merge.valueFn (http://localhost:7357/assets/vendor.js:49708:13) at Object.Stream.value (http://localhost:7357/assets/vendor.js:27932:36) at read (http://localhost:7357/assets/vendor.js:28171:23) at Object.merge.valueFn (http://localhost:7357/assets/vendor.js:27835:16) Et tu, CP?
43. ambitious ^ n A Form Library That broke the camel’s back
44. If You Can’t Go Through. Go Around.
45. MVC revisited < /> < /> < /> < /> < /> Model View
46. V = f(M)
47. To Change the View, Change the Model. this.set(‘someValue’, ‘totallyNewStuff’);
48. To Change the View, Replace the Model.
49. One Experience. Stream of States.
50. Also Called: Movie
51. Independent Frames
53. Whole Enchiladas
54. Whole Enchilada
55. A Fact Is Forever The Cure, 1917
56. Content and Player a pattern emerges
57. Player + Content = Experience
58. http://bit.ly/1WOo1G0 http://bit.ly/1MshKKr http://bit.ly/1UO3t2C Your App The Movie Feature Presentation
59. Password Form The Movie coming soon to an application near you
60. 1. Extract The Model
61. {{input type="password" action=(action "setPassword")}}
 <ul> 
 <li>{{input type="checkbox" checked=longEnough}} Long Enough?</li>
 <li>Rating: {{rating}}</li>
 </ul> {{input type="password" action=(action "setPassword")}}
 <ul> Password
 <li>{{input type="checkbox" checked=model.longEnough}} Long Enough?</li>
 <li>Rating: {{model.rating}}</li>
 </ul> Extract
62. 2. Replace The Whole Model with Every Change
63. actions: { 
 setPassword(text) {
 this.set('model.password', text);
 }
 } actions: {
 setPassword(text) {
 this.set('model', new PasswordForm({
 password: text
 }));
 }
 } Replace
64. Ask Your Doctor If The new Keyword Is Right For You.
65. { password: “”, longEnough: false, rating: “weak” } Password Form The Movie Opening Summer 2016 <password-form/> { password: “$$/l33t”, longEnough: true, rating: “moderate” } { password: “l33t”, longEnough: true, rating: “weak” }
66. Small Change. Big Benefits
67. Back to Basics unlock the power of the POJO
68. Logging “Just Works” Back to Basics
69. Remember Me? Back to Basics
70. POJO: feels so good Back to Basics
71. POJO: feels so good Back to Basics
72. Bye-Bye Computed Properties Back to Basics
73. Hello ES5 Getters Back to Basics
74. POJO: feels so good Back to Basics class PasswordForm {
 get longEnough() {
 return this.text.length >= 4;
 }
 }
75. The Stack is Back Back to Basics
76. Harmony With The Platform Back to Basics
77. Unambiguous Causality
78. 1 event = 1 state Causality
79. When did the Bad Happen? e1 e4 e3 e2 Causality
80. When did the Bad Happen? e1 e4 e3 e2 Causality
81. A Fact Is Forever The Bug, 2016 Causality
82. Be an Information Creator
83. State A State B Event 1 Preserve Information
84. State B Event 1 Event Scope
85. Clarity
86. Undo/Redo that’ll be zero dollars please.
87. { password: “”, longEnough: false, rating: “weak” } Password Form The Movie Opening Summer 2016 <password-form/> { password: “$$/l33t”, longEnough: true, rating: “moderate” } { password: “l33t”, longEnough: true, rating: “weak” } Undo/Redo
88. http://bit.ly/1WOo1G0 http://bit.ly/1MshKKr http://bit.ly/1UO3t2C Your App The Movie Undo/Redo
89. Sir, would you like a Holy Grail with your fries? Undo/Redo
91. Immutable Tomorrow
92. Immutable Today
93. Content / Player 1. Extract The Model into Its Own Object 2. Replace The entire model with each change Immutable Today
94. Samples • https://github.com/thefrontside/ember-impagination • https://github.com/thefrontside/emberx-xml-http-request
95. we’re hiring!
97. Thank You!