Meteor.js Cheat-Sheet: in what order Meteor Blaze is executing your code ?
Why this article ?
A framework like Meteor.js provides a lot a handy tools for faster web-development. These tools hide the complexity for the developer but hence don’t give a simple view on the order of calls execution. Here are the most frequent issues we have encountered without finding an answer on the web:
- When exactly does Meteor executes the onCreated or the onRendered callbacks?
- How are handled nested templates?
- When are the helpers callbacks executed exactly?
- What about the code nested in Meteor.setTimeout?
- etc…
Sometimes you just feel that all is rendered randomly, or in a magical way and it is not so easy to get to understand exactly what’s going on behind the scene.
Before going further
To understand the basics of how your javascript code is handled, watch this awesome 25min video from Philip Roberts. It explains in a simple way how javascript is executing your code, including webAPIs (ex: setTimeout) callback queue, event loop and so on:
Example to illustrate how things work
To illustrate the cheat-sheet, let’s take a very simple example. This example could be made way more complex but it is absolutely unnecessary to do so to understand the main concepts. If you want to play with it, the code is available at this github repo :
https://github.com/yellowsquaresas/blaze-load-order.git
What does it do: a template named Nest0 is loaded, in which there are two helpers and a call to a nested template Nest1, in which there are two helpers and a call to a template Nest2, in which there are two helpers (yeah!):
Each of the above templates are doing the exact same thing:
- The helpers are returning a string (printing themselves).
- The onRendered and onCreated callbacks are made of both synchronous and asynchronous (using Meteor.setTimeout) computations.
- In all of the above, we simulate computations using a function called sleep(delay): this is a synchronous function that takes “delay” ms to run.
- Every step is logged in the console
The javascript code is the following: (where i = 0, 1 or 2):
Loading Template Nest0 (and therefore the nested ones), the console prints the following:
We can illustrate simply in what order your code is executed by analyzing the console log. Easy !
Cheat-Sheet
Now let’s wrap up everything. Don’t forget that this is just a way to understand from your raw code in what order it will be executed. This is not not how things are really done. If you want to understand deeply the mechanics behind the scene, refer to Meteor, Blaze and Spacebars docs.
This is easy, just follow the “html” !
Everything is called basically in the same order of your code. Just go from top to bottom and:
- If a template is found: the onCreated callback is executed
- If a Spacebars helper is found: its callback is executed
- If a sub-template is found: the same process is performed in the nested template, up to reach the end of the nodes, then goes back to the parent template and keep going
- Any asynchronous callback is put to the task queue and will be executed after all templates are finished executing their onRendered callback, hence after the stack is empty.
- The onRendered callbacks are called from deepest child to parent, after all nodes have been treated, in all templates (parent and nested)
Here is a quick illustration using the same kind of view Philip Roberts is using in his video:
Our other articles on the Meteor
We at Yellow Square build digital tools for business uses. We are now hiring in Paris !
