Transformation: Visitor Pattern

[00:00:00]
>> Steve Kinney: We'll talk a little bit about transformation. Transformation is breaking apart our source code into, we've turned it into that internal representation but we want to do something with it. Like right now we have an interpreter but we don't have a compiler, right? We don't have a compile target.

[00:00:17]
We want to be able to do that. And so really what that turns into is being able to manipulate the AST and turn it into that tree. Or if that's not your compile target, that's fine too, right? There is like one point like to get like a self hosted language the language is written in itself, right?

[00:00:36]
But that's some next level stuff. Right now we want to get a language. [LAUGH] Then we'll worry about hosting language in itself. And so there's a really a popular pattern for manipulating these trees. You can just write functions where the ability to traverse the tree and the ability to transform it are deeply tied next to each other.

[00:00:58]
Or you can begin to look at this thing called the visitor pattern. And the visitor pattern is not necessarily abstract syntax tree or programming language specific. That is where it is commonly used and it is very popular, but it is not necessarily directly tied to that. We don't necessarily have to use it there.

[00:01:18]
It does come from the Design Patterns book by the gang of four. And it's very cleanly summarized in this diagram. Any questions? Moving on, sound good? [LAUGH] Yeah, it's, it's not actually that bad. Basically the pattern is we do a depth first search of the tree. The big thing is that the visitor pattern tries to separate the mechanism for traversing that tree with the transformations.

[00:01:48]
So we can write, hey, here's how we go up and down the tree and all of that, so we write that logic out. And there will be some tied to our implementation, cuz we do need to know. We know that call expressions have arguments, but the string literals don't, right?

[00:02:04]
So it'll figure out roughly, given the shape of this, the type of apps and the type of language that we're building. Given the shape of that, yeah, we roughly need to like figure out how to get up and down it, but there could be very many different ways that you are trying to actually transpire it.

[00:02:24]
We know that Babel has a tone of features that you can turn on and off that do different transformations. Each one of those does not shift with it's own bespokability to navigate that tree. That is written in and of by itself and the different transformations that you wanna do and kind of be composed together and we go up and down the tree and do those things, right?

[00:02:44]
And so we might chose to write some visitors that will transpile our code to JavaScript, cool. We might try to write some visitors that transpose it to Ruby, fine, or Python or I don't know if closure script would be worth it. But you can do it, right? But we might also choose to, and we're gonna do both today.

[00:03:05]
We're going to choose maybe as a step to transform our own language to add additional syntax, right, that we don't currently have. So we're gonna be able to take a look at that as well. And so the visitor pattern allows us to define different types of actions for each node visited as it walks the tree.

[00:03:22]
And so basically you can define methods on the visitor and it basically looks at the type of that node, calls that method on the visitor and go like, hey, do you know anything about what we should do here? And it either does or it doesn't. All right, there are some tools that you can use like babel has one that is built in, as well.

[00:03:41]
I'll just show it to you real quick, but we're actually going to write our own, which is you can give it an AST and it has this idea of entering and exiting a path. So entering is when it enters that part of the tree and exiting is when it's leaving, right?

[00:03:56]
So you can try to do stuff. And a lot of times, you can actually access the parent and so on and so forth. So this one is, basically what it does is it visits every node in the tree. And it says, you're a VariableDeclaration, neat. In the babel tree for a variable declarations, there are three kinds of var, const, and let, right?

[00:04:19]
And so what this would do is it would break it, once you had broken apart your entire code with the Babel parser, you could theoretically write this to walk the tree, visit every node. And if you see that, you are a VariableDeclaration, cool. And you have the kind of var, well, I'm going to modify you and turn you into a let.

[00:04:39]
And all of a sudden you look like a big hero when you've refracted all the code base without being the hero that tries to do a find and replace and then finds every instance of like V-A-R in some other word and messes up the copy. Right, along the lines.

[00:04:52]
This allows you to programmatically visit everything and figure it out. Again, this is how we do it for our product. We go ahead we take the HTML, we break into an AST. We let the person use it. We change all the information, but we then we have to send an HTML email out the other way.

[00:05:08]
So we go ahead, we pull it out, we do all the stuff, and then we string it all back together. And some of the reasons that we do that, would I prefer that just have a JSON object? Absolutely, right, but given the fact that we have to support every campaign that has ever been sent with the product, right?

[00:05:29]
The safest and most responsible thing to do was to build this translation layer, right? It didn't make sense for us to necessarily go and do all that kind of stuff.