際際滷

際際滷Share a Scribd company logo

The Ember.js Run Loop

R
Rizwan Reza

The Ember.js run loop is a mechanism that coordinates events, notifications, and timers within an Ember application. It implements listeners for queues including sync, actions, render, afterRender, and destroy. Code in one queue can trigger events that affect subsequent or preceding queues. The run loop is not infinite; it processes each queue and then exits. Common uses of the queues include propagating data changes in sync, running promises and initialization in actions, manipulating the DOM in render, initializing plugins in afterRender, and garbage collecting in destroy. The Ember run method can execute code immediately or schedule for the next loop, and scheduleOnce adds code to a single future queue.

1 of 30
Downloaded 21 times
The Ember.js Run Loop
Coalescing Modularity Performance
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
Queues in the Run Loop Sync Actions Render AfterRender Destroy
Ember implements listeners for each of these queues Sync Actions Render AfterRender Destroy
QUEUE ! ! !! ! ! UPDATE EVENTS PREVIOUS QUEUE NEXT QUEUE Run Loop
Processing each queue can emit events to the proceeding/ preceding queues
Its not an infinite loop
Sync Queue: Propagates bound data Sync Actions Render AfterRender Destroy
Actions Queue: Runs Promises Runs Initialization Events Sync Actions Render AfterRender Destroy
All custom events go to the Actions queue Sync Actions Render AfterRender Destroy
RenderActionsSync AfterRender Destroy Render Queue: Manipulates DOM Re-renders views
AfterRender Queue: Handles extra DOM events ActionsSync DestroyAfterRenderRender
ActionsSync DestroyAfterRenderRender AfterRender queue is a good place to initialize jQuery plugins on elements added by the Render queue
Destroy Queue: Garbage-collects views ActionsSync AfterRender DestroyRender
Sync Actions Render AfterRender Destroy
Sync Actions Render AfterRender Destroy { 3 isCompleted Events 3 checked events 3 remainingFormatted 3 markAllDone updates
{3 checkboxes 1 change to status 1 change to Mark all as done RenderActionsSync AfterRender Destroy
Executing code in the Ember Run Loop
$.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
Ember.run.next(function () { this.set(flash, Hello world); }) Executes code in the next available run loop
Ember.run.later(function () { this.set(flash, Hello world); }, 1000) Executes code in the next available run loop after 1s
Ember.run.schedule('afterRender', this, function () { this.$().tooltip(); }); Schedules in the afterRender queue
Schedules once in the afterRender queue Ember.run.scheduleOnce('afterRender', this, function () { this.$().tooltip(); });
Resources
The Ember.js Run Loop
The Ember.js Run Loop
https://github.com/eoinkelly/ ember-runloop-handbook Ember runloop handbook
Q&A
Thanks! @rizwanreza

More Related Content

The Ember.js Run Loop