Vite - The Next Generation Frontend Tooling

So, first of all, I'd like to thank react Advance London for having me. So what is VIT? VIT is a French word, it means fast. It is a build tool created by Evan Niu, the creator of VJS. But VIT is a framework agnostic tool. And I want you to think of VIT as these two things here. You can see a server and a bundler. So here, this build tool, this VIT build, VIT has two major parts. Dev server here and a build commander you can also call as a pre-configured bundler. So the dev server provides rich feature enhancements over native ES modules, extremely fast hat module replacement, for instance, while the build or the command bundles your code with ES build in development and rollup in production. And what else I can say about ES build? It does dependency pre-bundling while rollup does some pre-configuration to output highly optimized static assets for production. So the problem that VIT is trying to solve is the feedback loop speed during development. If you've used react, especially in a large project, you probably noticed that hat module replacement takes sometimes two, three, four, five, depending on your machine. And you have to change your webpack config, JS, or enable caching, et cetera. Just editing single file, you may have to wait a few seconds for four things to update on the screen. This problem is due to the need for bundling. There's no way for the browser to actually support modularized code. That's the reason we have browserify, webpack, Parcel, et cetera, so that modularized code can become, say, one single file that can be run in the browser. Now that most modern browsers natively support ES modules, this means that during development, there's a large chunk of work that we no longer need to do because the browser can now handle them natively. In VIT, you're going to write your code as native ES modules, and VIT will take these ES modules and then parse the file and look for your import statements and then send HTTP requests for each module to the dev server. So the dev server just serves these modules as a very fast parsing. Yeah, so what else? So index html here is the entry point in VIT projects, not main.js that you'll often see in webpack projects. So think of VIT again as a dev server. Okay. So putting this all together, VIT provides you with an extremely fast and lean development experience. Talking about plugins, VIT can be extended using plugins, which are based on Rollup's plugin interface. You'll see more about plugins in a bit. So to start VIT, you can use npm yarn, pnpm. Here's the commands you can use. You can choose react, vue, Preact, or vanilla VIT. Unfortunately, we don't have angular here yet. Probably next year, because angular has this very unique configuration, their build tool. Okay, let's do a demo here. So we're going to try vanilla VIT, then vanilla VIT to react. And if we have more time, we can do a migrating from CRI to react VIT. So yeah, we can try it here. Say VIT demo. Okay, let's close this. Now maybe we can run npm init and start adding the VIT package. So yeah, here. npm install dashdev save VIT. So while waiting for that, we can create an index file here. That's the entry point. And check out, say, here. Yeah, see here, VIT 2.6.2. Let's remove this sample script here. Let's change it to, say, dev. This is GitHub Copilot helping me and build or building the VIT project. Probably here, preview or VIT preview. So what are these? Dev to run your VIT project on a dev environment here. VIT build for building. That will create this. So dev, by the way, will run the application on port 3000. And then we can preview the build using this preview command here, which will run on port 5000. So basically, this is letting you preview your project in production. So you can compare the dev and the production environment of your application or version of your application. And let's check out the node modules here. See here, we have this VIT build. Roll up VIT of PostCSS. So here, PostCSS, so as you can see, PostCSS will work here on the box. So maybe we can create a javascript file here that just say console.log, say catchphrase. Don't have anything in mind, so maybe we can here say hello VIT. Then we can import here the javascript file. So here this is a ES module on native ESM. So we need to declare here by type, the type module, can import here the javascript or we can use an inline here, import. Then we can run this now. Here. That is so fast. Okay, connecting. So this is the hot module, our replacement client. This VIT connecting, VIT connected, and then you can see our javascript is working. Okay, so what about css? Let's add css here, style.css. Maybe we can say, I don't know, let's say, yeah, that one. And of course, we need to import it here and say, oh, say link styles. Here you go. Let's edit here, the color, crimson, say blue, which will update the file here, style.css. Really fast, right? So yeah, what if we try a SAS? We can convert this to SAS. Okay, but we have to convert this also. Edit the name, install the SAS only without installing the node SAS. This should work. Run dev. Maybe we can do some SAS here. Primary color. We can just cut this here and then. There you go, it worked. So yeah, SAS is working. Works easily. And what if let's try to convert this to react. Now we need our react and react DOM, right? So here you would need to import react, react, and react DOM also. Here it is. JSX file. Here it says, okay, just return low react bit. Let's export that. And then probably we can remove this now. Or let's convert it to proper html. Then paste this. It should be here. And we would need a div here, right? We can put an ID. Let me give it a name, root. So let's root. Let's go back here, convert it to JSX. And react DOM. Root. Just need to import this. There you go. That should do it. Right? And make sure that this is JSX. Run dev. Let's see. And it worked. The react fit. So it works also. JSX out of the box. Yeah. So requirement here is that it has to be JSX. You can force yourself to use JS only, but I think you need to add a plugin because JSX because it's the text JSX and under the hood, this is more performant than just forcing yourself to use JS. It has something to do with their AST. Okay. So what about typescript? Let's convert it to typescript. JSX. JSX. And then just make sure that this is JSX as well. There you go. typescript works out of the box. Right? And we can, let's say, add props here. Now just testing. Probably here at the edit list. Yeah. Should work. Yeah. So there you go. There you go. With Vanilla and then we managed to convert it to react and react typescript. So yeah. And maybe I can show you something about a project, a large project. It's using here. Oh, yeah. It's already. It's a big CRA project and converted to VIT, but it's just a copy. So I had to do some editing because I don't want to see the whole application. So I just made here, what I call this, position absolute left 8,000. So technically or basically the UI moved to a few meters to the left and you can only see VIT, hello, react.js. So before it takes three to four seconds to see the changes in CRA and then once you move it to, after moving it to VIT, it's like instant, less than a sec. Okay. So requirement. Of course, you need to install the VIT package and then add necessary plugin. I mean, not necessary, sorry. Just have to add tsconfig path because I'm using base URL or base source here. So you can see tsconfig.json to the base URL here. So I need that plugin to work here. You can, if you encounter any errors, you can just Google it and see. It will end up in a documentation where it teaches you how to fix it using plugin and react.js X here so that you don't need to explicitly write import react. What else? Technically, this is a react typescript, so I'm adding global.ts here, reference type to a VIT client. Or you don't have to do this if you have this types VIT client here. So yeah. There you go. So one thing here I'd like to share that if you have a large react project and the files are in javascript, not in JSX, you don't have to manually convert them one by one. You can write a Python. You can run a Python script and then this script will just convert all the JS file into JSX in a few seconds. One, two, done. So that's it. A quick migration from CRA to VIT. So let's head back to our slides. So yeah. PostCSS, you don't need to install PostCSS itself. It comes with PostCSS support out of the box. Say a lot about css modules. All you need to do is make sure this file ends in the.module.css suffix. Server-side rendering. So ssr support is still experimental. So in ssr, the idea is you want your code to run in node.js, but you're writing code that's using ESM. If you're not using the latest version of node.js with native ES module support, your code will not run because previous versions of node.js expect common JS. So yeah. The idea in ssr is you can use VIT as a middleware inside an existing node.js server. So if you're doing server-side rendering, you need to control your server, let's say an express server, then run VIT as a middleware inside of it and then invoke a method called VIT, as you can see here, ssr load module, and pass your server entry file path. Now your server entry runs in node.js and it can use the same ES import syntax to load the rest of your application. How is VIT different from X? Comparison with other no-bundler solutions. For example, here's Snowpack. Snowpack is also a no-bundle native ESM dev server that is very similar in scope to VIT. Snowpack doesn't handle the bundling part. So one of the upsides of going unbundled, first is you can use different end bundlers to handle those files. But the downside is you can't afford to be as opinionated in certain areas like VIT. So VIT sticks with one single bundler. So you know the rollup. VIT team was able to do something that's very specific, but get you the most performance possible, for example, development time improvement. What about the community? Awesome. Yeah. This is where you can find a ton of different VIT plugins. You know, just go to awesome VIT, see a lot, most of them integration. So yeah, very helpful. And what else? VIT land on Discord. So a lot of smart and helpful developers are here. You can ask questions, start channels for help, discussions, contributing, translations, typescript, css, ssr, plugins, Preact, react, svelte, vue, integrations, fastify, et cetera. OK. So if you want to know more about VIT.js or want to see the documentation, here's the website. So yeah, that's all I got. Thank you very much for listening.