The Ember.js Run Loop

Transcript

1. The Ember.js Run Loop
2. Coalescing Modularity Performance
3. “the run loop is a mechanism that Ember.js uses to group, coordinate, and execute events, key-value notifications, and timers within your application.” From Ember.js in Action
4. Queues in the Run Loop Sync Actions Render AfterRender Destroy
5. Ember implements listeners for each of these queues Sync Actions Render AfterRender Destroy
6. QUEUE ! ! ! ! ! ! UPDATE EVENTS PREVIOUS QUEUE NEXT QUEUE Run Loop
7. Processing each queue can emit events to the proceeding/ preceding queues
8. It’s not an infinite loop
9. Sync Queue: Propagates bound data Sync Actions Render AfterRender Destroy
10. Actions Queue: Runs Promises Runs Initialization Events Sync Actions Render AfterRender Destroy
11. All custom events go to the Actions queue Sync Actions Render AfterRender Destroy
12. Render Actions Sync AfterRender Destroy Render Queue: Manipulates DOM Re-renders views
13. AfterRender Queue: Handles extra DOM events Actions Sync Destroy AfterRender Render
14. Actions Sync Destroy AfterRender Render AfterRender queue is a good place to initialize jQuery plugins on elements added by the Render queue
15. Destroy Queue: Garbage-collects views Actions Sync AfterRender Destroy Render
16. Sync Actions Render AfterRender Destroy
17. Sync Actions Render AfterRender Destroy {3 isCompleted Events 3 checked events 3 remainingFormatted 3 markAllDone updates
18. {3 checkboxes 1 change to status 1 change to “Mark all as done” Render Actions Sync AfterRender Destroy
19. Executing code in the Ember Run Loop
20. $.post(‘/post_cc’, success: function(e) {
 Ember.run(function() {
 this.store.createRecord('user', {
 cardId: e.data.customerId,
 planId: 'pro'
 });
 });
 }); Executes code immediately by reusing/starting run loop
21. Ember.run.next(function () {
 this.set(‘flash’, “Hello world”);
 }) Executes code in the next available run loop
22. Ember.run.later(function () {
 this.set(‘flash’, “Hello world”);
 }, 1000) Executes code in the next available run loop after 1s
23. Ember.run.schedule('afterRender', this, function () { this.$().tooltip();
 }); Schedules in the “afterRender” queue
24. Schedules once in the “afterRender” queue Ember.run.scheduleOnce('afterRender', this, function () { this.$().tooltip();
 });
25. Resources
28. https://github.com/eoinkelly/ ember-runloop-handbook Ember runloop handbook
29. Q&A
30. Thanks! @rizwanreza