Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

The Ember.js Run Loop

Alex Matchneer

NYC Ember Meetup - 2/28/2013


                                                                                                                                      
                                                                                                                                      
                                                                                                              `                       
                                                                                                    `                                 
                                                                                                                                      
                                                                                                 `     `..,.,                         
                                                                                                `    `..,````..                       
                          `          `                   ``              ` `                        .. ,```````,   `                  
                                         `           `                          ``           `    `.` ....```````                     
                      `                     `     `        .;''''''''''''';,        `      `     ..  .,....`````,                     
                           ,'''''''',                  ,'''''''';;;;;;;'''''''';`     `         ..   ,......````.   `                 
                         ;,,,:;::::::;'':           :'''';::::::::::::::::::::;''''.          ..    ,.......````.                     
                       `,,,,,,,.:::::::::;',      ;'';::::::::::::::::::::::::::::''':      `.`    ,,.......````.   `                 
                      .,,,,,,,,,,.::::::::::;'''''':::::::::::::::::::::::::::::::::;'',  `..     .,.......`````.   `                 
                      ,..........,,,::::::::::;'':::::::::::::::::::::::::::::::::::::;''.`      `,........`````,                     
                     ,`............,,.:::::::'';::::::::::::::::::::::::::::::::::::::::;':      ,,.......``````,                     
                     ,```............,,.::::''::::::::::::::::::::::::::::::::::::::::::::''    ,,........```````                     
                     ,````............,,,.,''::::::::::::::::::::::::::::::::::::::::::::::''  ..,.......``````.   `                  
                     ,`````............,,,''::::::::::::::::::::::::::::::::::::::::::::::::''`,,,......```````,                      
                     .`````............,,'':::::::;;;;;;;;;;;;;;;;;;;;:::::::::::::::::::::::';,,.......``````.                       
                      ``````...........,,'::::;;;;;;;;;;;;;;;;;;;;;;;;;;;;::::::::::::::::::::',,......```````.                       
                  `   ,`````...........,:':;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;:::::::::::::::::;'.......``````,                        
                      ```````..........,::;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;:::::::::::::::';.....``````.                         
                   `   ,`````...........,;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;::::::::::::::'....```````.   `                     
                        ,````............;;;'''''';;;::;;;;;;;;;;;;;;;;;;;;;;;;;;;;;::::::::::::';...``````,                          
                         .``@@@#;:;#@@@@@@@@######@@@@@@@#':;;;;;;;;;;;;;;;;;;;;;;;;;::::::::::::'`..`````,                           
                     `   ...@++##@##+++++++++++++++++++++#@@@#;;;;;;;;;;;;;;:::::::::::::::::::::',.`````,    `                       
                          `:#++.`,+++++++++++++++++++++++++++#@@#';::;'##@@@@@@@@@@@@@@@@@#':::::;'.````,    `                        
                           ,@#+++++++++#####@@#####++++++++++++##@@@@@@#++++++++++++++++'++#@@@'::'.```,                              
                            @@#+++++###+,``````````.:+##++++++++######+++++++++++++++++++++++++@@@',..,                               
                        `    ;@++++##+```             ``.##+++++++++++++++++++++++++++++++++++++++@@@#@@@@@   `                       
                              +#++##:``                  ``#++++#####+++++++###',.````.,;+#####+++++##++++@                           
                              `@++##``                     `#+++@@@@@@++++#'```          ````'@###+:..:+++@`                          
                               @++##`         ,.           `#++@+;;;;@@+++.`                 ```###+++++++#.                          
                           `   @#+##`        .@+           `#++@;;;;;;@+++``                   ``###++++##@                           
                               '@++#`        @@@`          `++##;;;;;;+#++.                     ``###+##@@    `                       
                                @++#         @@@`          '++@;;;;;;;;@++:           @:         `##+##@                              
                            `   @#+#         @@@           #+#@;;;;;;;;@++#          '@+         `##+#@                               
                                ;#+#.        @@@          :++##;;;;;;;;##+#`         @@@'        `###@:    `                          
                                 @+++        @@;          #+#@;;;;;;;;;'@++`         @@@@         ###@                                
                             `   @#+#         ;          :++#@;;;;;;;;;;@+++         #@@@         ##@,   `                            
                             `  `,@+#,                   #+#@;;;;;;;;;;;@#+#         `@@#        ,##@:                                
                                ..@#+#`                 #++#@;;;;;;;;;;;##++;         @@         ##@+'                                
                            `  ``..@#+#```             #++#@;;;;::::;;;;'@++#                    ##@;'`                               
                               . `.;@++##:.````````,'##++#@@;;;,,,,,,;;;;@#++#                  ##@';;'  `                            
                              .`  ..@@+++++#######++++++##@;;;;,,,,,,:;;;@#+++#                .##@;::'.                              
                          `   .   `..@@##++++++++++++###@@;;;;;,;:,::,;;;;@#+++##'`         ```#+@;;:::'                              
                             .     ...;@@############@@@+;;;;;;;;;,;;;;;;;@@#++++++###':....,+#+#@;::::'                              
                         `  .`      `...,#@@@@@@@@@@+';;;;;;;;;;;;;;;;;;;;;@@###++++++++++++++++@;:::::;'  `                          
                            .        ```........:;;;;;;;;;;;;;;;;;;;;;;;;;;;;#@@@#######++++###@':::::::'                             
                           .         ````````````,;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+@@@@@@@##@@@@@'::::::::',                            
                           .          ````````````,:;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;''#@++';;;::::::::::'  `                         
                          .            ````````````.,;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;'#@@@';;;::;::::::::::'                            
                      `  ``             `````````````,;;;;;;;;;;;;;;;;;;;;;;;;;'+@@@#+##;;;;;;;;:::::::::'.                           
                         .               ```..````````.,;;;;;;;;;;;;;;;;;;;+#@@@##++++@;;;;;;;;;;::::::::;;                           
                        ``               ```,+:.......``,,;;;;;;;;;;;'+@@@@@####+++++@':,,....,:;:::::::::'  `                        
                        .                `````.@@@@#+';;::;'++##@@@@@#',.'####+++++++@.``` ```` `,;:::::::'  `                        
                       `.               `````` `@#++###@@@;::,,.......```:###+++++++@.```````````  ,::::::'                           
                    `  .                `````````@#++++++##....``        ,##+++++++#@````````````   `;::::'                           
                       .                 `````````@+++++++#..            .#++++++++@.````````````    `;:::;`                          
                      ``                 `````````;@++++++#;      .      .#+++++++##`````````````     `:::;.                          
                   `  .                  ````````` @+++++++#      .      .#+++++++@.`````````````      ,::;.                          
                   `  .                  ``````````;#++++++#`     `      .###++++#+``````````````      `::;.                          
                      .                   ````````` @++++++#.      .     .,,'##++@````` ````````        ;:;`                          
                      .                   ``````````@+++++##,      .    `....,+#@#``````````````        ::;                           
                      .                    `````````:@++++',.`     .   ........,@````` ````````         ::'                           
                      .                    ``````` ``@+++',....`   ..`.```````..,``````````````         ::'                           
                      .                     `````````@++#,.........`````````````.`````````````          ;:'  `                        
                      .                     `````````'@#,.......```````````````,``````````````          ;;;  `                        
                   `  .                      `````````@:......`````````````````,`````````````          `:'.                           
                   `  .                       ````````@,....``````````````````.`````````````           .:'                            
                      `.                      ````````:,.`````````````````````,````````````            ,;'                            
                       .                       ````````,.````````````````    `````````````             :'`                            
                    `  .`                       ````` ```.,,........,,.         `````````             `;'                             
                        .                        ```````` ```````````            ``````               ,'`           ````              
                     `  ..                        ````````````` ````      `.     `````                ;'      ,..                     
                         .`                         ```````````````     :;;;;:    ``                  ``     ```.                     
                          .                          `````````````     ;;;;;;;`                       .      ,``.         `           
                       `  `.                           ``````````     ;;;;;;;;;                      .       ,``,   ,..               
                        `  `.                            ````````    ;;;;;;;;;;                     .        .``.  ,````  `           
                            `.                             `````    :;;;;;;;;;;.                   .`   ..  ..``.,.```,   `           
                              ..                                    ;;;;;  ;;;;:                 `.     ``...````````.    `           
                           `   ..                                  :;;;;.  ;;;;;                ..'     .`````````````     `          
                            `    ..                                ;;;;;   ;;;;;              `.,'',    ,```````````,                 
                                   ..                             ,;;;;`   ;;;;;            ...;;'''     ,``.....```.,..,             
                               `    `..                           ;;;;;   .;;;;,         `...;;;;;'''    :.`......``````.             
                                `   ,';..`                        ;;;;:   ;;;;;`      `...:;;;;;;;'''   ,';,......``````.             
                                    ''';;...`                    ,;;;;    ;;;;;    ....```.:;;;;;;;'''`'';:;;..`..```.,`              
                               `   ,''';;;;:...`                 ;;;;;   ,;;;;;   `````````.,;;;;;''''''::::;;;:,,,,.                 
                                   '''';;;;;;..`...``            ;;;;;   ;;;;;:   ``````````..;;;;'';;::::::;;;'                      
                              `   ,''';;;;;;,.``````.........    ;;;;`  `;;;;;    ```````````..;;;::::::::::;;;'        `             
                                  '''';;;;;:.````````````````   ,;;;;   ;;;;;;    ````````````..::::::::::::;;':     `                
                                 `''';:;;;;.`````````````````   ;;;;;  `;;;;;`   ````````````  `.:::::::::::;;'                       
                             `   ''''::::;..`````````````````   ;;;;:  ;;;;;;    ````````       .,:::::::::;;''   `                   
                                 '''';;:::. `````````````````   ;;;;` `;;;;;`   ``````             ,;::::::;;'                        
                  `       `     `      .:.       ````     ``    ;;;;  ;;;;;;                         .:::::      `                    
                `           `            .                      ;;;; .;;;;;                            ::,                            
                                                                ;;;; ;;;;;,                    `.`     `;                 `           
                    ,;;:.         :;;;       .:`      ,;:      .;;;,:;;;;;                  `;;;;;;;    `   ,;;`     ;;               
                  ;;;;;;;;.      .;;;;.    `;;;;     ;;;;;     ,;;;`;;;;;`;;;,             :;;;;;;;;;      `;;;,   ,;;;:              
            `    ;;;;;;;;;;,     ;;;;;.   .;;;;;    ;;;;;;     ;;;;;;;;;;;;;;;;           ;;;;;;;;;;;`     ;;;;:  `;;;;;              
                ;;;;;;;;;;;;     ;;;;;`   ;;;;;;   .;;;;;;     ;;;;;;;;;;;;;;;;;         ;;;;;;;;;;;;;     ;;;;:  ;;;;;;   `          
               ;;;;;;;;;;;;;.    ;;;;;   ;;;;;;;   ;;;;;;;     ;;;;;;;;;;;;;;;;;`       .;;;;;:`;;;;;;     ;;;;: ;;;;;;;   `          
              `;;;;;;   ;;;;;   .;;;;;  .;;;;;;;  ;;;;;;;;     ;;;;;;;;;;;;;;;;;;       ;;;;;.   ;;;;;    ,;;;;:`;;;;;;;              
          `   ;;;;;;    ;;;;;   ;;;;;;  ;;;;;;;; `;;;;;;;;     ;;;;;;;:  `;;;;;;;      ;;;;;;    ;;;;;    ;;;;;,;;;;;;;;       ``     
              ;;;;;     ;;;;:   ;;;;;; ;;;;;;;;: ;;;;;;;;,     ;;;;;;`     ;;;;;;`     ;;;;;`    ;;;;;    ;;;;;.;;;;;;;:          `   
      `  `   :;;;;;     ;;;;    ;;;;;: ;;;;;;;;`:;;;;;;;;.    `;;;;;,      :;;;;;.    :;;;;;     ;;;;.    ;;;;;;;;;;;;;:   `          
             ;;;;;`    :;;;;    ;;;;;.;;;;;;;;; ;;;;;;;;;     .;;;;;        ;;;;;`    ;;;;;,    :;;;;    `;;;;;;;;:;;;;;              
             ;;;;;    ,;;;;`   ,;;;;; ;;;;,;;;;;;;;;;;;;;     :;;;;;        ;;;;;     ;;;;;    `;;;;:    :;;;;;;;; ;;;;;      `;;   ` 
   `         ;;;;;   ;;;;;,    ;;;;;;;;;;`;;;;;;;;;`;;;;;     ;;;;;,        ;;;;;    .;;;;;   .;;;;;     ;;;;;;;;; ;;;;;     ;;;;     
       ;;.   ;;;;;`:;;;;;,     ;;;;;;;;;; ;;;;;;;;; ;;;;;     ;;;;;         ;;;;;    :;;;;;`,;;;;;;      ;;;;;;;;. ,;;;;;;;;;;;;;     
      ;;;;;;;;;;;;;;;;;;`      ;;;;;;;;;. ;;;;;;;;` ;;;;;     ;;;;;        ,;;;;,    ;;;;;;;;;;;;;       ;;;;;;;;   ;;;;;;;;;;;;;   ` 
  `   ;;;;;;;;;;;;;;;;;        ;;;;;;;;;  ;;;;;;;;  ;;;;:     ;;;;;        ;;;;;    ;;;;;;;;;;;;.       :;;;;;;;;   ;;;;;;;;;;;;    ` 
  `   ;;;;;;;;;;;;;;;         ;;;;;;;;;,  ;;;;;;;,  ;;;;,     ;;;;:        ;;;;;  :;;;;;;;;;;;:        ;;;;;;;;;     ;;;;;;;;;:       
        ;;;;;;;;;;;         ;;;;;;;;;;;  .;;;;;;;   ;;;;,    `;;;;.       ;;;;; :;;;;;;;;;;;`        :;;;;;;;;;;     `;;;;;;:         
           ,;;;;;;;       :;;;;;;;;;;;;  ,;;;;;;;   ;;;;;   ,;;;;;`       ;;;;;;;;;;;;;;;;;;`      .;;;;;;;;;;;:       `..            
            .;;;;;;:   .;;;;;;;;;;;;;;   :;;;;;;.   ;;;;;`.;;;;;;;`     `;;;;;;;;;;;;;;;;;;;;;...;;;;;;;;;;;;;;                 `     
     `       ;;;;;;;;;;;;;;;;;;;;;;;;;   ;;;;;;;    ;;;;;;;;;;;;;;;:``.;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;               `       
        `    .;;;;;;;;;;;;;;;;;;;;;;;    ;;;;;;;    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;    ;;;;;;;;;;;;;;;;;;;;;;;,      `      `         
              ;;;;;;;;;;;;;;;,.;;;;;;    :;;;;;.    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;.       ;;;;;;;;;;;;;;; ,;;;;;                        
          `    ;;;;;;;;;;;;;   ;;;;;      ;;;;;     ,;;;;;;;;  :;;;;;;;;;;;;;.           ;;;;;;;;;;;;:   ;;;;,   `                    
                ,;;;;;;;;,     .;;;.       ;;;`      ;;;;;;      ,;;;;;;;,                .;;;;;;;;,     .;;;                         
                   ```                                 `                          `                             `                     
             `                                                                 `                                                      
              `            ` `                                 `            `           `            ` `                              
                `       `      ``` `         `      `     `       `  ` `                   ``    ``      `                            
                                                                                                                                      

OH GOD

The Ember.js Run Loop

What it be?

A mechanism for scheduling / coalescing operations

What's it used for?

The Ember.js Run Loop (cont.)

What it ain't:

It is not a while(true) infinite loop that runs in the "background"

Rather:

It is a discrete operation that runs at very specific times

When?

User mouse/keyboard events, Ember Data ajax responses, etc.

Queues

Run loop computations are grouped into queues

Contained in Ember.run.queues

Basic Algorithm

Loops within loops...

So, why should I care?

It doesn't always run automatically

What if I don't wrap these in a run loop?

Nothing catastrophic, most often minor inefficiencies, some non-deterministic behavior, hard to debug / test

How to wrap

Use Ember.run(), e.g.

Ember.run(object, function(obj) { obj.set('loaded', true); });

This will:

Other uses

Schedule event after all DOM operations:

e.g. Masonry tiles

App.MasonryView = Ember.CollectionView.extend({
  didInsertElement: function() {
    // At this point, no child elements have been rendered, so
    // schedule buildMasonry to run after the child elements
    // have rendered.
    Ember.run.scheduleOnce('afterRender', this, 'buildMasonry');
  },
  buildMasonry: function() {
    this.$().masonry();
  }
}); 

Summary

Ember Run Loop:

But wait, there's more!

Sorry...

We have to talk about Gemified JS libs

Gemified JS Libs

Problem:

Dependency hell from packaging JS libs within Ruby libs

Solution: lightweight wrapper gems around JS libs

Gemfile

Scenario: you're on Ember pre4, you want rc1

How do force all the gems to use the new ember?

# Gemfile
gem 'ember-source', '1.0.0.rc1.2'
# gem 'ember-source', '1.0.0.pre4.2'

Huzzah!

Everyone uses new ember and handlebars, no mismatch errors

THANKS

Twitter: machty

machty.github.com (blog post on gemified js libs)

Use a spacebar or arrow keys to navigate