React Advanced

React Advanced Conference 2021

The talk will cover all the possibilities Babel Macro opens up and also gives an overview of Abstract Syntax Tree. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Magic with Babel Macro

A very good morning, a very good afternoon and good evening based on wherever you're joining. My name is Suresh and today I'm going to give a talk on magic with Babel macros. So before we dig in into the topic, I want to also talk about why this topic, right? So I think Babel macros was introduced back in 2017, 2018 and it seemed to be a really fascinating thing because of the things you can do just by that, right? A lot of patterns emerged because of that. And yeah, but nowadays not a lot of folks talk about it. So I thought, you know, why not give it a shot and see if you folks are interested. So the aim of this talk is to give you an introduction about Babel macros so that you can go ahead and write your own plugin perhaps or build your own macros. Yeah. So my name is Suresh. I'm from India. I work at a startup called Organize. I majorly handle the front-end side of things. We are also actively hiring. If anyone is looking out, please reach out to me. I also run a YouTube channel called the Junior Developer and I host a podcast in that called the Junior Developer Podcast. If you are interested in front-end technologies or tech in general, or maybe if you're interested in how to have an impactful development career, you should perhaps check out the channel and you might find some of the videos quite interesting. Also on Twitter, you can find me as the underscore junior underscore dev. So that's essentially my introduction. Let's get to the talk. So AST, right? AST is an amazing thing. It stands for abstract syntax T. It's an amazing thing and I feel that every developer should essentially learn about it because it's essentially one of the building blocks of the transpilers which use your plugins to transpile your code, right? And without knowing it, you might not be able to understand how your code is being transpiled. So when I heard about this term, AST, right, I got really curious and I, of course, boosted up my laptop and tried Googling what is an AST. And the first thing was of Wikipedia. And this was the definition which was thrown at me. It says in computer science, an abstract syntax tree or just syntax tree is a tree representation of the abstract syntactic structure of text written in a formal language. So this did not really this was a pretty complex definition for me and it did not really hit me what exactly AST is. And as we know, a lot of folks who are into coding don't necessarily are from the computer science background. So to them, this does not really make sense. So I tried to find a better definition which is much simpler in understanding. And I stumbled upon this definition. It says an abstract syntax tree or AST is a tree representation of the source code of a computer program that conveys the structure of source code. So what it means by that is essentially you can look at the AST and you can derive what code you're writing. But as I mean, it's of course not as readable as the human code which we write. But it's the representation is purely for machine to understand how exactly the code is structured. And you can get almost yeah, you can get everything about the code just by looking at the AST. That is one point. The second point is all the transpilers actually use this and based on the AST, they transpile the code and we are also going to try out some of those transformations here in the video live to figure out how exactly it looks. So yeah, I mean, let's explore AST. Reading about AST, you know, the theoretical definition of something might not purely make sense. But when we go ahead and explore AST, that's when it starts making sense to us, right? So, you can go to this link called the AST Explorer. And let's write some dummy code here. I don't know. So, my talk is on magic with Babel micros. And since we have a let here, maybe we should also define a const to figure out how different does it look in AST. So, we can just do sorry. Get speaker name. And we can have one argument as doc name. And we can just do doc name equal to base doc. We'll also figure out how a statement works out in AST. Then I can just return my name. And I can just go ahead and return null. So, yeah. Now that we have this, I can just do speaker name. I can do get speaker sorry. Get speaker name. And I can pass this. So, as you can see, as I'm typing it out, right, the right-hand side of things is being populated. So, that's how we know. So, for example, right now in here, we have four variables. I think let's get rid of this. This is of no use to us. So, we have three variable declarations in here. So, we have, of course, the const. We have let. And we also have got an arrow function. We have this function is returning something. Once a string and sometimes a null. And we have got an if statement where we are comparing the left-hand side and the right-hand side, right? So, let's kind of go ahead and explore each of the variable declarations to see how it looks. So, if you go with the first one, you can see the information available is the start and the end of this particular piece of code. And then inside declarations, it has got a start from 44, I'm assuming, from here to here. Yeah. And yeah. And inside this, we have an image block which talks about with what value it was initialized. And you can see the kind as let in here, right? So, I can also go and do something else. React advanced. And then if you see, this becomes an expression statement because it's not necessarily a variable declaration, right? Variable declaration is when init is being populated. Init is basically this part of things which we saw here. Expression statement is you're trying to update something, right? And it has got an operator equal to the operator. And we have got the left side of things which should be the variable name. And right side of things, which is what do we want to basically the value of it, right? And likewise, if you go ahead and explore the second variable declaration. Let me just close this one. Yeah. We can just explore this. And it has also got something similar. But as you can see, the kind here is const. And the kind here was left. And we can just go ahead and check the arrow inside the init function. It explicitly mentions that it's an arrow function. Let's see how it looks if it's a normal function. So, I can just quickly convert this to a normal function. And yeah. Boom. So, this is a normal function. Yeah. There's a normal function. So, in this, if you say it purely says function declaration. So, it does not talk about what you call arrow function. It does not mention that. It only says function declaration. And inside the body, we have the block statement. In fact, we can explore that. Let me quickly remove this. And inside here, we can quickly see inside the body of the arrow function, we can see it has a block statement. And block statement, we have got an if statement specifically. And we have got a return statement. Let's explore the if statement first. Inside the if statement, we can see the consequent. It's also a block statement with another return type altogether. This will essentially be the string which I'm returning here. And inside the if statement, inside the test, we can see the identifier here. Just like how we saw in this particular case, in that, the identifier was 1 equal to. In this case, we have triple equal to. The left-hand side would be the doc name. So, doc name, it's not the value, right? It's the variable name. And that is the reason it says name here. And on the right-hand side of things, we can see the, again, another variable with which we are trying to, you know, compare. And here you can see, as mentioned earlier, the type is const. And inside this, it's one and the same thing. But it's a call expression. Call expression comes in when it seems that you're trying to call a particular function. And it also talks about the argument. And inside the argument, also, it's giving the name. Because this variable is pointing to this string. We are not directly passing this string, right? So, and inside the calling, whatever the name of the function we are trying to call. So, this is how an AST looks like. And as I mentioned earlier, right, just by looking at the AST structure, you can derive the code. But of course, it will take a lot of time to do that. Because this is more human readable than the AST itself. So, this is not just the only presentation of AST. You can also try out the JSON part, which throws in everything at once. This was the previous presentation. And we also have something called join.js. So, let me just copy paste this. I can just do show AST. And it will showcase everything you need to know. And this is also a good presentation. It gives you a verbose explanation of what all nodes you have, what all tokens you have. It lists down the keywords, identifiers, punctuators, and everything you need, basically. I can just go to the PNG version of it. And this is also another tree structure, but I feel that this is a bit verbose and it's more human readable, you know, because it has got, like, it has got everything you can just read it through and understand this by looking at it. So, that's what AST is. Let's talk a bit about Babel now. Babel started out as a transpiler. But, I mean, it lets you write the updated version of whatever ECMAScript specification is, even to the browsers where that particular updated expressions or whatever, those things are not supported. You can do that using Babel. But it ended up becoming, you know, something more than that. And, in fact, we can quickly take a look and, you know, take a look at how we can transform something in Babel live in action. So, yeah. So, I can go you can sort of go to AST Explorer and I can just select the Babel parser here. And let me just close this out. I can copy paste. Yeah. I can copy paste this here. And this is, again, the AST which we explored earlier. And I can so, we can try we can try one thing which is we can try out to reverse the variable theme so that it after transformation. So, this is where the transformation is located. This is the code which we wrote. And this is where you can write all the specifications which you want to. And this is the tree version side of things. I mean the AST output. So, inside the identifier, I can quickly console log path. And I can perhaps increase and inside the node path, we have got a node. And we have got the name. We have got the loc location, the end position, the start position. File name is not populated for obvious reasons. I believe this is pointing to this. So, if we are trying to update the name here, then I think we can do something of this sort equal to node.path.name. We can split it. We can reverse this. And we can just go ahead and join this. Oops. It will be path.node. Yeah. So, now I think you can see here this is supposed to be through base talk. This is supposed to be get speaker name. And this is how the, you know, transformation plays out. Let's talk a bit about Babel macros. So, Babel macros are essentially, it's a way to apply code transformation without having to install a lot of plugging in each transformation. And the best thing is it's supported across, you know, CRA, Gatsby, Next.js and almost all the other React based frameworks. So, why Babel macros? The issue with regular Babel plugins is, of course, it's great, but it has got a few downsides. For example, it might be difficult for users to set it up and configure, especially when in tools like CRA or Gatsby. Of course, also, it might you might end up getting into a conflict or in a scenario where you're having to debug certain things because of the way it's I mean, when we set up plugins, right, the order of plugins matter a lot. So, you have to if the order if you mess up the order, it's really difficult to debug it as per se. So, we use something called Babel plugin macros to write this and Babel plugin macros is a plugin. I think we can explore a few of them. One of one of this, which is one of my favorites. I like it. It's a track translation. You can just put in the string here and it gets transformed to whatever the value is. I believe this is high in Vietnamese. And we also have CSS to React Native macros. Here you can write normal CSS. It will get converted to React Native style sheets. The output will be this sort. And folks from Angular background, if you're missing NGF, you can try to figure out you can try exploring this as well, where TGF becomes this sort. But there are a few caveats which one needs to keep in mind. One is Babel sorry, macros are synchronous. So, if you're trying to write one, right, you have to make sure that it runs in the node environment or whatever machine the macro is being run at. And macros are evaluated at compile time as well. So, you also have to keep that in mind while building one. So, yeah, I think that's all the time I have today, folks. Thanks for listening to my talk. We've got a lot of talks lined up today. Stay tight. And thanks a lot for listening to me. Have a great day.
