Gain Performance! Take Your Run Time to Build Time

Hi everyone, so I have this question for you. Won't it be nice if I can write bg and $red and that gets converted into background color and RGB and whatever you want here in your style property of any HTML tag you want? Well, this can be done using a built-in solution, and I'm going to show you how you can build something like this and leverage this in your React applications.

So, hi, my name is Rohit, and I'm a founding engineer at Tria. At Tria, we are working on bringing the world to Web3 using names. You can follow me and DM me on the social platforms. A bit more about me. So I've worked on products like API Weeks, which is a tool to watch, test, and document APIs, somewhat like Postman, and then I built NativeBase V3, which didn't go as planned, and we got stuck with a lot of performance issues, so therefore we built GlueStack Style. We built this to completely change how we are handling styling, and giving utmost importance to performance and how we can calculate most of the essentials statically, and that can be optimized in build time. Using that, we built GlueStack UI, the first successor of NativeBase. Who doesn't know about NativeBase? NativeBase is a component library that runs universally on iOS, Android, and web applications. Now I'm working on building Tria. At Tria, we are trying to solve one of the most challenging problems of Web3, that is transforming onboarding and asset management across blockchains. My main focus here is to provide every user with a match UX and DX when they use our mobile app or mobile SDKs.

So my talk is about how you can gain performance and take your runtime to build time, and let's get started.

So let's begin by making a sense of this upward trend in libraries and why authors are pushing for build time optimizations. So in, if you have seen in recent years, we have seen an increasing number of front-end libraries shifting towards build time optimization and compilers. And this trend underlines the tech industry's growing emphasis on performance and efficiency. And you can clearly see this if you are following the latest React updates. You must be aware that React has announced the launch of the new React compiler. So this is a major development that indicates a significant shift towards build time optimizations, and even within the React ecosystem itself.

So yeah, this is that. And other libraries like Tamagiby, Gluestack, and NativePrint all are prioritizing build time over runtime. And these libraries are incorporating compilers, transpilers in their core structure and demonstrating a clear trend towards this approach. This shift towards build time optimization is reshaping the landscape of front-end development. And as we continue to embrace this modern architectures, we can expect to see further improvements in performance and efficiency.

Let's first understand what build time optimization brings to the table. So first, it significantly improves the performance of the application by offloading heavy computation and tasks to build time. And we can reduce the workload during runtime and resulting in a smoother and faster user experience. Secondly, it allows for earlier error detection, and third, it allows for build time optimization that can lead to smaller bundle size. Even after the minification and reshaping performed by your bundlers, you can also analyze the logic of your code and the input that user gave, and you can strip down the code that is not going to be run based on the user input. And lastly, it allows for more predictable software. So by doing as much as possible during the build time, we can have a better understanding of how our software will behave in production.

So in conclusion, the shift towards build time optimization is a natural progression. And as we try to improve more and more on performance, efficiency, and reliability, in software development, this trend is only going to go up from here. So let's quickly take a look at high level understanding of Babel and its doings so that we can build our Babel plugin to perform the task that I shown you in the initial stages of this talk. So Babel is a free and open source JavaScript transpiler. This has been revolutionary in the development of React and the JSX syntax as we know now. And here are some key benefits of Babel. So it allows you to leverage latest JavaScript features for cleaner and more efficient code and maintain compatibility with a wider range of browsers, and also allows you to move your computationally heavy logic from your runtime to the build time. And this is mainly we are going to focus more. So let's start by understanding how we can build a custom Babel plugin. So let's head to the code and see how we can create a custom Babel plugin. So this is the code that I shown you previously.

So you all know what it is. So let's start by making an understanding of what AST is. So basically, this is a normal JavaScript code for your React. And if you see when I select this, this on the right side is your AST tree. This is basically a tree that contains nodes, different nodes. So if I click on return, it will show me a return statement. This particular thing is this whole thing is a node. Then if I select on a function, then this gets highlighted function declaration. This is another node. Then if I click on H1, then this gets highlighted, this is another node. So basically, it has multiple nodes inside a tree.

And so let's start by understanding how we'll approach building the Babel plugin. So first of all, if we try to do it manually, we'll find out HTML, HTML tag, the opening HTML tag and inside that we'll see if it contains a style prop. Then inside that we'll log in and search for if it contains a alias or even though it doesn't contain any alias, it might contain a property like a token value. Okay, so it can be background color, right and then dollar red. So still we want to convert dollar red into the appropriate token value. Okay. So this is how we'll approach it. And so let's start.

So first of all, we'll try to get the config from the defined file. So for example, we can have the user create a custom.config.js file. And then we'll do a read file operation and get the config. I'm not showing it here, but you can do it. Okay, so this is our config. contents aliases, BGC, tokens, red, okay. And then this is our main function main Babel plugin. So Babel plugin is essentially a function and it returns a visitor pattern object. Okay, so what visitor pattern is, it's like an iterator, and this will keep on iterating over your code nodes, different nodes of your tree. And whenever I pass a property like JSX attribute and it is a function inside that callback function, I get the path, this path, suppose, JSX attribute what JSX attribute is. So if I click here, I will see JSX sorry, this side, I will see this node, JSX attribute.

So, so what we define in visitor, I write down the JSX type of node. So this is the type of node, whatever you want to search, suppose I want to, like, I want to find the path of this h1 opening element tag. So I will write JSX opening element here. And that path will in the callback of that function, I will get the path to that particular node. Okay, so yeah, so this path dot node defines this attribute, okay, this is attribute, and inside dot inside that node dot name, there's another property called name, which signifies that attributes value. So that I mean, sorry, that attributes name. So this is style. So till here will we are able to find any JSX opening element, or just JSX attribute that contains a style name contains a property called name. Okay, so this is, we found this can be defined here, the anywhere will reach to this part of code, okay, then inside that we'll need to check if this style can be defined above okay, even here, an object can be defined, and that can be passed as a style. Our target is not to do handle that right now. So that that is a separate thing you can perform like, if I define this here somewhere here, then you need to check if there is any object, then you have to backtrace all those things can't be shown in this small time. So I will just simply I will consider only this step. So if this is an expression container, so this is a expression container. So I will check that t dot is this t provides you with helper utility functions. So t dot is JSX expression container path dot node dot value path dot node dot value is this thing. This is our path dot node. And this is our value property and I'm checking that if that property value properties of type JSON expression container, then I want to proceed. So we are going inside this and here I'm checking path dot node dot value dot expression. So if you see select this, this is dot expression and then it contains a property called properties, which is an array and contains multiple object property. So this object property if you see here, when I hover on object property 1, it highlights bg colon dollar and object property 2 is c colon dollar one. Right. So these signifies the property in a particular object. So if I if you see here, I'll switch off this. Yeah. So if you see here, so what I do is I loop over these properties and I check that if config dot aliases contains the property dot key dot name. So if I open this property, this is the property dot key dot name. This is bg. So if that is available in this, then I'll rename this value. I'll replace this bg with background color. And like it's coming from the config file that we defined above.

And if property dot value starts with dollar. So if you see this is the property. I collapsed the key and this value dot value is dollar rate. So if this starts with dollar, I know it's a token. So what I will do is I will check again if this token value exist. I will split it and check the second part of that after the dollar. I'll see if that exist in tokens in my config. I'll replace this value with that property that particular value. And that's it.

So what this whole code does is. So bg gets converted into background color. And your dollar rate is converted into the rgb255 that we defined here. And c gets converted into color and dollar 1 is converted into 4. So this is how you can also build your own custom Babel plugins. Maybe your utility is different. So you can make different things with the help of Babel plugins.

And yeah, so coming back to the slides. So these are some helpful resources that you can follow. So to understand more on Babel plugin and how you can build your custom Babel plugins, you can follow this. This is an absolute handy handbook. And you can also see the Babel docs as well. And this is the tool I'm using to build Babel plugins is called astexplorer.net. So you can check that out. And even I'm also building a Babel plugin development toolkit. So follow me on Twitter. I'll be sharing updates on that soon. You can also check out the Webpack docs for understanding how bundlers are working.

Yeah, so that's it for my talk. And thank you for joining. And I hope you learned a lot.