Getting Truth Out of the DOM

Transcript

1. Getting Truth Out of the DOM
2. Me
3. jQuery Rails SproutCore
4. Evented jQuery
5. handlers event DOM update Normal jQuery
6. native handlers browser event higher level event Evented Approach
7. native handlers browser event higher level event Evented Approach custom handlers higher level event DOM update
8. Events Reduce Coupling
9. DOM DOM
10. DOM DOM Event Bus Abstract Low-Level Events
11. instead of click DOM update
12. you can do "tab changed" DOM update
13. you can do "tab changed" DOM update low-level browser events "tab changed"
14. Widgets
15. DOM DOM object
16. Encapsulate State of Single View
17. "View" Managing Techniques
18. Data Centric Approach
19. "Reality" Objects Todo DOM "tell me when Todo changes"
20. "Reality" Objects Todo DOM "tell me when Todo changes" isDone=true
21. "Reality" Objects Todo DOM "tell me when Todo changes" isDone=true check off checkbox
22. "Reality" Objects Todo DOM Todo DOM "tell me when DOM changes"
23. "Reality" Objects Todo DOM checkbox checked off Todo DOM "tell me when DOM changes"
24. "Reality" Objects Todo DOM isDone=true checkbox checked off Todo DOM "tell me when DOM changes"
25. This is Better
26. Mix and Match Todo Todo DOM DOM object
27. You: B.set('y', "OMG") A B x y
28. A B x y SC: A.set('x', "OMG")
29. native handlers browser event update data object Data-Centric Approach
30. native handlers browser event update data object data handler data object event DOM update Data-Centric Approach
31. "Models" and "Observers"
32. Implement Remaining Counter
33. Do Something 1 remaining Remaining Counter
34. ✔Do Something 0 remaining Remaining Counter
35. Do Something
36. ✔Do Something
37. ✔Do Something native change handler
38. ✔Do Something native change handler set isDone = true on object
39. ✔Do Something native change handler set isDone = true on object object change handler
40. ✔Do Something native change handler set isDone = true on object object change handler recalculate remaining & update DOM
41. Intermediate State
42. Mark All Done Do Something Something Else More Things Even More!
43. Mark All Done Do Something Something Else More Things Even More! ✔
44. ✔ ✔ Mark All Done Do Something Something Else More Things Even More! ✔ ✔ ✔
45. Implementation list.forEach(function(todo) { todo.set('isDone', value); });
46. ✔Do Something native change handler set isDone = true on object object change handler recalculate remaining & update DOM
47. native change handler set isDone = true on object object change handler recalculate remaining & update DOM set isDone = true on object object change handler recalculate remaining & update DOM set isDone = true on object object change handler recalculate remaining & update DOM set isDone = true on object object change handler recalculate remaining & update DOM
48. native change handler set isDone = true on object object change handler recalculate remaining & update DOM set isDone = true on object object change handler recalculate remaining & update DOM set isDone = true on object object change handler recalculate remaining & update DOM set isDone = true on object object change handler recalculate remaining & update DOM
49. Solution: Flag
50. list.bind('change', function() { if(!list.bulk) { var remaining = list.remaining(); var text = remaining + ' remaining'; $("#stats").html(text); } });
51. Implementation list.bulk = true; list.forEach(function(todo) { todo.data('isDone', value); }); list.bulk = false; list.trigger('change');
52. Common Cases
53. Recurring Calendar Event
54. Batched Saves to the Server
55. Delete All Contacts
56. Gmail: Select All
57. Answer: Batched Operations
58. triggerLater
59. $(todo).bind('changeData', function(e, name) { if (name === 'isDone') { var todo = $(this); var check = todo.data('element'); check.attr(checked, todo.isDone); var ul = check.closest('ul'); var list = ul.data('list'); list.triggerLater('change'); } });
60. "triggerLater" semantics
61. start native handlers "triggerLater" semantics
62. start native handlers triggerLater calls "triggerLater" semantics
63. start native handlers triggerLater calls end native handlers "triggerLater" semantics
64. start native handlers triggerLater calls end native handlers execute triggerLater once "triggerLater" semantics
65. native change handler set isDone = true on object object change handler triggerLater list change set isDone = true on object object change handler triggerLater list change set isDone = true on object object change handler triggerLater list change set isDone = true on object object change handler triggerLater list change
66. native change handler set isDone = true on object object change handler triggerLater list change set isDone = true on object object change handler triggerLater list change set isDone = true on object object change handler triggerLater list change set isDone = true on object object change handler triggerLater list change
67. Batched Commits
68. todo.bind('changeData', function() { store.push(this); store.triggerLater('save'); });
69. 1:1 Model/View Coupling
70. A Data Object "has an element"
71. Another Problem
72. Application State
73. Aggregates: Reverse Engineering This is kind of ok when you have 1:1 model to view
74. Wordpress
75. New Twitter
76. Github Issues
77. Edge Cases It can be easy to forget things in even simple interactions
78. ✔ ✔ Mark All Done Evolving User The Server The Client
79. ✔ ✔ Mark All Done Evolving User The Server The Client
80. ✔ ✔ Mark All Done Evolving User The Server The Client ✔ ✔
81. ✔ ✔ Mark All Done Evolving User The Server The Client Closing ✔
82. ✔ ✔ Mark All Done Evolving User The Server The Client Closing ✔ X
83. ✔ ✔ Mark All Done Evolving User The Server The Client Closing ✔ X
84. ✔ ✔ Mark All Done Evolving User The Server The Client ✔ ✔
85. ✔ ✔ Mark All Done Evolving User The Server The Client ✔ Clear 3 Items
86. ✔ ✔ Mark All Done Evolving User The Server The Client ✔ ✔ Clear 3 Items
87. ✔ ✔ Mark All Done Evolving User The Server The Client ✔ ✔ Clear 3 Items
88. Mark All Done Clear 0 Items
89. state of reality state of the application state of the presentation
90. Model Controller View
91. Mark All Done Clear 0 Items application state
92. Selected Item in an Array
93. MVC Calculations are done on real objects, not by reverse engineering DOM
94. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining
95. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining View
96. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining View
97. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining Controller (App State)
98. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining View
99. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining Unchecked (Controller)
100. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining View
101. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining Checked (Model)
102. ✔ Mark All Done Evolving User The Server What do you want to do? 1 item remaining Title (Model)
103. ✔ ✔ Mark All Done Evolving User The Server The Client ✔ ✔ allAreDone (controller)
104. ArrayController allAreDone Property allAreDone: function(key, value) { if (value !== undefined) { this.setEach('isDone', value); return value; } else { return this.get('length') && this.everyProperty('isDone', true); } }.property()
105. getter allAreDone: function(key, value) { if (value !== undefined) { this.setEach('isDone', value); return value; } else { return this.get('length') && this.everyProperty('isDone', true); } }.property()
106. setter allAreDone: function(key, value) { if (value !== undefined) { this.setEach('isDone', value); return value; } else { return this.get('length') && this.everyProperty('isDone', true); } }.property()
107. SproutCore MVC: Auto Sync Layers
108. Checkbox <label> {{view SC.Checkbox valueBinding="Todos.todoListController.allAreDone"}} Mark All as Done </label>
109. You: Declare Linkage
110. SproutCore: Keep Layers in Sync
111. Buffered Between Layers "Buffered Between Layers" Changes to the model layer for a particular event can all be made before they are propagated to the controller or view.
112. How Does it Work?
113. Properties
114. Properties ArrayController
115. Properties ArrayController allAreDone
116. While Handling Events ArrayController allAreDone dirty? This flag is automatically set by SproutCore if the property or any of its dependencies change.
117. While Handling Events ArrayController allAreDone dirty? ✔ This flag is automatically set by SproutCore if the property or any of its dependencies change.
118. Later... ArrayController allAreDone dirty? DOM
119. Dependencies allAreDone: function(key, value) { if (value !== undefined) { this.setEach('isDone', value); return value; } else { return this.get('length') && this.everyProperty('isDone', true); } }.property('@each.isDone')
120. Templating
121. Mustache.js <h1>Hello {{name}}</h1> <p>You have just won ${{value}}!</p> {{#in_ca}} <p>Well, ${{taxed_value}}, after taxes.</p> {{/in_ca}}
122. Handlebars.js <h1>Hello {{name}}</h1> <p>You have just won ${{value}}!</p> {{#if in_ca}} <p>Well, ${{taxed_value}}, after taxes.</p> {{/if}}
123. So close! Because these template engines limit arbitrary logic, it should be possible to automatically UPDATE if the objects change
124. Requires: Property Observing
125. Requires: Bindings
126. Enter SproutCore!
127. <h1>Todos</h1> {{#view Todos.CreateTodoView}} <input id="new-todo" type="text" placeholder="Wot?" > {{/view}} {{#view Todos.StatsView}} <div class="remaining"> {{#view Todos.ClearCompletedView}} <button>Clear Completed Todos</button> {{/view}} {{displayRemaining}} remaining. </div> {{/view}}
128. <label class='done-label'> {{view SC.Checkbox valueBinding= "Todos.todoListController.allAreDone"}} Mark All as Done </label> {{#each Todos.todoListController itemClassBinding="isDone"}} <label class='done'> {{view SC.Checkbox valueBinding= "parentView.content.isDone"}} <div class="todo-content"> {{content.title}} </div> </label> {{/each}}
129. Declare Bindings in Template
130. Handle Events in SC.View
131. Magic
132. Where does jQuery Fit In?
133. Model Controller View
134. Model Controller jQuery
135. Mark All Done ✔ when allAreDone changes in the controller
136. Mark All Done ✔ later...
137. Mark All Done ✔ DOM DOM Todos.AllDoneView view object is notified
138. SC Views Manipulate DOM With jQuery this.$('input').attr('checked', val);
139. SC Views Manipulate DOM With jQuery SC.Checkbox = SC.View.extend({ value: function(key, value) { if(value !== undefined) { this.$('input').attr('checked', value); } else { value = this.$('input').attr('checked'); } return value; }.property() });
140. Define Properties
141. Define Linkage
142. Define a Value Binding <label> {{view SC.Checkbox valueBinding="Todos.todoListController.allAreDone"}} Mark All as Done </label>
143. There is No Step 3
144. To Recap
145. Automatic Sync of App State
146. Batches Intermediate State SproutCore automatically handles batching changes to avoid the intermediate state problem
147. (buffered sync between layers)
148. Uniform Object Model The SproutCore Object Model wraps all of this up in a consistent, well-defined way to declare object relationships
149. Data Store The SproutCore data store takes advantage of the declarative nature of SproutCore to let you lazily populate Arrays asynchronously. API TO BE IMPROVED
150. sproutcore.js
151. Single File
152. 1MB?
153. 100k?
154. 30k!
155. Runtime Handlebars View Layer
156. http://todos20.strobeapp.com
157. https://github.com/ sproutcore/todos
158. Questions? Yehuda Katz @wycats yehudakatz.com