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.
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.
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.
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.