Parser & Templates

[00:00:00]
>> Sean Larkin: Who knows what a parser does? Maybe? Parser? So a parser in the broader term takes a string of source code, and converts it into what we call an AST, or an abstract syntax tree. I love showcasing this, because it's probably one of the most valuable parser, if you wanna learn about parsers, maybe you don't, but if you do, go to ASTExplore.net.

[00:00:32]
And like every programming language, not only has one parser, they usually have like a bunch, right? So Webpack uses Acorn as their parser by default. Babel uses Babylon. There's all sorts. Flow uses its own parser because they have different ASTs, right? But the point here is that a parser takes this string right here and it actually converts it into this set of tree and data.

[00:01:01]
And so it's much easier for an application or a utility or a compiler to run through and walk through a tree to read what the code is, right? Now what we do with it is that we take and we create an AST out of that module, right? And you can see here, we can see any type of syntax that's being used.

[00:01:23]
Let's get even crazier like,
>> Sean Larkin: But, lets just say an import segment, right? There's a special token. So we call these lexical tokens, right? So it's a way to identify what kind of syntax it is. So in this case, it's an import and it's a literal import statement.

[00:01:44]
And it's using one specifier, which is like this namespace, and it's a default specifier. This is how we understand exactly what your code looks like and how it works. So back to the slides, so we have a parser class that uses Acorn behind the scenes, takes the source coding, creates an AST out of it.

[00:02:08]
It parses. That's what a parser does. It takes this module object we get from the module factory, turns it into an AST and then it starts walking the graph. Now as it's walking that graph Just as you may have saw in AST explorer. Let's just say, or this is a great example.

[00:02:33]
Literally, it just says, start a program and then it goes, walk. And what walk does it is recursively goes through body. And then it says, okay, are there any items in the body? All right, well, let's start at the first one. And then it goes through each property.

[00:02:48]
And so for us, specifically though, what's important, is what webpack does is as it's walking, if it comes across a statement that represents a dependency, like an important declaration. So when it see something like this, we create and annotate that on the module object. So we find all of those, and then we create these things called dependencies.

[00:03:15]
And that tells webpack, what files does this file depend on, right? So it's like we pass the module to little parser glasses. We look for the requires and imports, even dynamic imports. And then we attach these dependency objects to the module. You can see each of them have, they could be different flavors.

[00:03:37]
They could be different import styles. It could be a common JS style. It could be AMD. But the point is that we attach them to that module, right? And then finally the last tapable instance that's really important is the template, right? We know what templates do, right? It's data binding.

[00:03:56]
It's data binding for your code or your UIs. Well, templates here for us is literally data binding for these module objects, right? So the template, classes and webpack are responsible for the source code that gets generated. So, if you took, and looked at this little diagram, let me make it bigger, sorry.

[00:04:19]
>> Sean Larkin: A chunk is just something that contains modules in an array. It allows us to keep track of it. And so, each of these different types of abstractions. So, a chunk, a module, a dependency, they all have templates. And they're literally called chunk template, module template, main template, which is for the run time code.

[00:04:38]
And so, that's what these little handle bars [LAUGH] are supposed to annotate. So what happens is we call a function called render. And literally what gets generated. Well, even if you look at this. You're like, so each of them generates a little piece of source code and puts it together, right?

[00:04:55]
This kind of looks familiar, doesn't it?
>> Sean Larkin: Holy crap! That's literally the runtime rapper and the iffy with the modules passed into it. That's the bundle that we are used to seeing, that we walked through. Now i'm just hiding the main runtime here, but that's what the main template generates.

[00:05:14]
The chunk template literally just generates the array, the array brackets and that's it. And then the module template create the iffys for each module around the function. And then the dependency templates transform and import into a webpack require or a dynamic import into a webpack require.e or whatever is the appropriate transformation for those.