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. 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. RenderActionsSync AfterRender Destroy
Render Queue:
Manipulates DOM
Re-renders views

13. AfterRender Queue:
Handles extra DOM events
ActionsSync DestroyAfterRenderRender

14. ActionsSync DestroyAfterRenderRender
AfterRender queue is a good place to
initialize jQuery plugins on elements
added by the Render queue

15. Destroy Queue:
Garbage-collects views
ActionsSync AfterRender DestroyRender

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