The Ember.js Run Loop

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

It’s 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 Events3 checked events3 remainingFormatted3 markAllDone updates

{ 3 checkboxes1 change to status1 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

https://github.com/eoinkelly/ember-runloop-handbook

Ember runloop handbook

Q&A

Thanks!

! @rizwanreza