• Meteor
  • Tutorial

Introduction to Rendering

Hi, everyone. I'm going to start talking about the Meteor rendering process so that we can get a little bit more intuition about how HTML elements are added to the DOM, how templates work, and how the underlying spark rendering engine works in Meteor.

I'm also going to experiment in this video with a slightly new format that's going to be less formal and less scripted. So what I'd like you to do is to leave a comment in the comment section and let me know whether this format works better for you or if you prefer the more structured format of previous videos. So let's get started.

To get us started, we're going to look at what happens when the page first loads in Meteor. And to do that, up in the top part of my editor I have my JavaScript. So you can see that the server doesn't do anything, in this case. And on the client, as soon as this script is executed, I'm just going to print this client.js executed string to the console so that I can see that it's been executed.

And then down on the bottom pane I have my HTML. It just has a body that renders the home template. And you could see the home template down here just says the hello message. So this is what we're going to be working with in the browser. And let's trace through what's actually happening at page load time and the functions that Meteor is using to render the page initially.

OK here we are in the browser. And up top I see my Hello, World string printed to the DOM. And down below I have the DOM and all the HTML so that we can look through it and see what's actually being loaded. And so the question right now is how did this HTML get here, this Hello string-- Hello, World string here.

In a normal web application this entire HTML file would have loaded from the server. But with Meteor this Hello, World string was printed, or added to the DOM dynamically. So let's look at how that works.

If I expand the head tag, we can look at all of the-- whoops! I need to turn off the pen. If I expand the head tag I can see first that the style sheet is loaded right here. And then I have a bunch of JavaScript files that are loaded from Meteor. And then I need to scroll down to get to the last two, which is what we're interested in.

So the last JavaScript file to be loaded and executed is this client.js with a special tag at the end. And if we click on that we'll see the JavaScript that we wrote in our application. And so we can see the client.js executed, printed to the console. And so as soon as this JavaScript executes we get this message down at the bottom that says client.js executed.

So let's go back to the elements now and scroll down and look at the JavaScript file right above this one, which is one that Meteor produced. And what we see is something called Meteor.startup and then a bunch of stuff in between. And so we can see that the Meteor.startup you've probably used in your own applications.

And what that does is it says give me a function and I'll call that function once the DOM is ready to be manipulated by JavaScript-- and so basically the equivalent of jQuery on ready, or ready method. So Meteor.startup takes a function. And so the question is what does this function in here do? And let me break out the code a little bit so that we can see each line a little bit more clearly.

OK, now that I've indented the code a little bit we should be able to go through and see what's happening a little bit more clearly. And so inside here I see the function that's getting passed as a parameter to Meteor.startup.

So this is the function that's going to run when the DOM is ready. And then within that function we see a call to document.body.appendChild. So this is the same thing that we would do in any other situation where we're trying to append a document fragment to the document body.

We would just call appendChild. And so we know that inside appendChild we're going to be passing a document fragment. And that's what spark.render returns. And we'll look at spark.render in more detail in another video. But this should give you an idea of what it's doing.

And then spark.render takes, as a parameter, another function that returns a function itself. And that's called Meteor._def_template. And then within that function we can see that we're calling a method on Handlebars-- actually an extension to Handlebars that was written by the Meteor team-- called the [? jsn_ast_to_func. ?]

And so we're going to go through each one of these methods individually over the next couple of videos. But I think that the takeaway for now is just that ultimately we're getting back a document fragment. And that document fragment is getting appended to the DOM.

And that's happening through JavaScript. And so the page initially loads and it's empty. And then when the page is ready, or the DOM is ready to be manipulated through JavaScript, this function runs. And it dynamically adds our HTML to the document.

So next let's look at this deftemplate method to get a better sense of what's happening with Meteor's definition or defining of new templates. So down below, if you remember from the editor, I defined a template called Home. And so here we have, on lines 14 to 17, we're calling a deftemplate, or we should just say Meteor.definetemplate is really what's happening.

And we're giving it a name of Home and then a function as the second parameter. And that function is going to return some HTML-given context object. And so we're going to play with that in a second. So in order to get that function what we're doing is we're calling Handlebars.JsonAST to function and passing in something called an abstract syntax tree, which if you're interested in understanding how that works, let me know.

But in the meantime, we're just going to talk about the function that gets returned. So let's play with this a little bit and get some intuition about what's happening. So to do that, let's start manipulating the [? handlebars.jsn_ast_to_func ?] directly.

Now you normally wouldn't need to do this. But we're just doing this so that we can get a better understanding of what's happening under the covers. So I'm going to create a variable called tmpl, or short for template. And I'm going to assign that to the result of calling [? handlebars.jsn_ast_to_func. ?] And I'm going to pass in the same thing that I see above. So I don't need to worry about the syntax for the abstract syntax tree. I'm just going to duplicate what I see above.

And the interesting thing is that I get back a function. And so what happens when I call that function? I just get back some HTML. And I can see that the function actually takes some parameters like data and some options-- oops, here we go, data and some options-- and then calls the Handlebars.evaluate with the abstract syntax tree that the data and the options. So this should be giving us some clue about how we're able to pass in an object for data and then I have Handlebars replace the HTML or Handlebars Mustache variables with actual values that are passed in.

So as an example, I can call this Handlebars template function with an object. And I could say for example, the name is Hello, World. And if I had had some Mustache helpers inside the template-- which I don't, because remember I just have the string Hello, World inside the template. But if I did have some Mustache helpers it would interpolation those values with the values in the object that's passed in.

So now that we have a little bit of a better understanding of what Handlebars is returning, namely a function, let's look at what Meteor deftemplate is returning. So to do that I'll clear my console. And I'll assign this to Meteor template. And I'll say that is equal to [? Meteor._deftemplate. ?] And I'll pass in the name. We'll just call it test. And as the second parameter I'll pass in the function that I got back from Handlebars.

OK so let me expand this so that we can get a better view and grab my pen. And we can see that what we get back is another function that takes one parameter called Data and then has a ton of stuff inside of it that does all of the Meteor magic. But then ultimately, if we scroll down, we can see what happens here is that HTML gets returned.

So in the next couple of videos we're going to uncover each one of these methods in a little bit more depth and understand, again, how Meteor reactivity works and the spark engine is working. So I changed the format, again, quite a bit in this episode. And we'll see how this experiment goes.

But leave me a comment and let me know if it was annoying to you or actually better, more understandable, than the previous formats. My hope is that if I make the videos a little bit more informal I can get through more content and actually do more of them per week. So let me know what you think. And see you again tomorrow.