Vite - The Next Generation Frontend Tooling

Rate this content
Bookmark

How will we build web apps in the future? Let's learn how esbuild and bundlers like Vite built on top of it work to see how it can speed up our dev workflows.

21 min
25 Oct, 2021

AI Generated Video Summary

VIT is a build tool that solves the problem of slow feedback loop speed by leveraging native support for ES modules in modern browsers. It allows you to write code as native ES modules and handles the parsing and serving of modules for you. VIT supports JavaScript, CSS, SAS, React, TypeScript, and TSX out of the box. It also allows for quick migration from CRA to VIT and can be used as a middleware in an existing Node.js server to enable server-side rendering.

1. Introduction to VIT Build Tool

Short description:

VIT is a build tool created by Evan Mew, the creator of VJS. It has two major parts: a dev server and a build commander. The dev server enhances native ES modules and provides fast modular placement, while the build commander bundles code in ES build during development and roll up in production. VIT solves the problem of slow feedback loop speed by leveraging the native support for ES modules in modern browsers. It allows you to write code as native ES modules and handles the parsing and serving of modules for you. VIT also serves as the entry point for VIT projects and can be extended using plugins.

So first of all, I'd like to thank React Advanced London for having me. So what is VIT? VIT is a French word, it means fast. It is a build tool created by Evan Mew, the creator of VJS. But VIT is a framework agnostic tool. 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, VIT has two major parts. It's a dev server here, and a build commander you can also call as pre-configured bundler.

So the dev server provides rich feature enhancements over native ES modules, extremely fast hat modular placement, for instance, while the command bundles your code in ES build in development and roll up in production. And what else I can say about ES build? While it does dependency pre-bundling while roll up does some pre-configuration to output highly optimized static assets for production.

So the problem that we are trying to solve is the feedback loop speed during development. If you use React, especially in a large project, you probably noticed that hot module placement takes sometimes two, three, four, five, no depending on your machine, and you have to change your Webpack, config, JS, or enable caching, etc., just editing a 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, etc., so that modularized code can become one single file that can be run in the browser. We all know 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 it's 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 it 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 Rollout's plugin interface. You'll see more about plugins in a bit. So to start VIT, can you send PM yarn, PM PM. Here's the commands you can use.

2. VIT Build Tool Demo

Short description:

You can choose React, Vue, Preact, or vanilla VIT. We don't have Angular yet. Let's do a demo with vanilla VIT, then vanilla VIT-to-React. If we have time, we can migrate from CRI to React-Vite. We can try it here, VIT-demo. Install the VIT package and create an index file. Use the dev command to run the application on port 3000 and the preview command to compare the dev and production environment on port 5000. Check out the Node modules, including CS build, roll-up, and post-CSS.

And 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 pipeline, build tool.

Yeah, 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 migrating from CRI to React-Vite. So yeah, we can try it here, say, VIT-demo.

Okay, 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 checkout, say, here. Yeah, see here, VIT 2.6.2. Let's remove the 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 bit preview. So what are these? Dev 2. 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 production environment of your application or version of your application. And yeah, let's check out the Node modules here. See here, we have the CS build, roll-up, bit of post-CSS. So here, post-CSS.

3. Using JavaScript and CSS in VIT

Short description:

We can import a JavaScript file and run it with native ESM. The hot module replacement client allows for fast updates. Adding CSS styles is simple and updates are immediate. We can also try using SAS by installing the SAS package without the node SAS. Let's give it a try.

So you can see, post-CSS will work here on the box. OK, so maybe we can create a JavaScript file here that just say console.log, say catchphrase. I don't have anything in mind. So maybe we can say hello fit, and then we can import here the JavaScript file. So here this is IS module and native ESM. So we need to declare here what type. Let's do the type module. Can import here the JavaScript, or we can use an inline here, import. Then we can run this now. That is so fast. OK. Connecting. So this is the hot module, our replacement client. This bit connected and then we see our JavaScript is working. OK. So what about CSS? Let's add CSS style. Style.CSS. And maybe you can say, I don't know. Let's say, yeah, that one. And, of course, we need to import it here. And let's say link styles. There you go. Let's edit here the color, crimson, and say blue, which will update the file here. Style.CSS. Really fast, right? So what if we try SAS? We can convert this to SAS. 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.

4. Using SAS, React, and TypeScript in VIT

Short description:

SAS is working easily. Let's convert this to React by importing React and ReactDOM. Use JSX and make sure it's JSX. It worked with React Fit. Requirement here is that it has to be JSX. You can force yourself to use JS only, but it's more performant to use JSX. Let's convert it to TypeScript (TSX).

Primary, or we could 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? Yeah, now we need our React and ReactDOM, right? So here we would need to import react-react, and ReactDOM also. Here it is, JSX file. Here, it says, OK, just return the React bit. Let's export that. And then probably we can remove this now. Or let's convert it to a proper HTML. Then paste this. It should be here. And we would need a div here. And we can put an ID, so I'll give it the name root. So it's root. Just 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. Rendev. Let's see. And it worked with React Fit. So it works also. JSX out of the box.

So, yeah, requirement here is that 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, you know, under the hood, this is more performance than just forcing yourself to use JS. It has something to do with their AST. OK, so what about TypeScript? Let's convert it to TypeScript. TSX.

5. Using TSX and React TypeScript in VIT

Short description:

TSX works out of the box. We managed to convert it to React and React TypeScript. If you have a large React project with JavaScript files, you can use a Python script to convert them to JSX in seconds.

TSX and then just make sure that this is TSX as well. There you go. TypeScript works out of the box, right? And we can say, add props here. Now just testing, probably, here at the edit list. Yeah, should work. So, there you go, a bit vanilla, a little bit, and then we manage to convert it to react and react TypeScript.

So, 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 CLA project and converted to bit, but it was 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 8000. So, technically, or basically, the UI moved a few meters to the left and now I see a bit, hello, React.js. So, before it, it takes 3-4 seconds to see the changes in CRA. And then, once you move it to, after moving it to, it's like instant, less than a sec.

Okay, so requirement. Um, of course, you need to install the VIP package and then add necessary plug in. I mean, not necessary, sorry. Um, just, I have to add TSConfigPath 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. Uh, you can, you know, if you encounter any errors, you can just Google it and see, it will end up in a documentation or, you know, teaches you how to fix it using plugin and ReactJS X here so that you don't need to, um, explicitly write import React. Um, what else for this is, uh, technically this is a React TypeScript. So I'm adding global.js here, reference type to a Viet client, or you don't have to do this if you have this type's Viet client here. So yeah.

Um, there you go. So one thing here I'd like to share that if you're, you have a large React, um, yeah, project and files. The files are in JavaScript, not in JSX. You can, 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. Um, yeah.

6. VIT Migration and Server-side Rendering

Short description:

VIT allows for a quick migration from CRA to VIT. PostCSS support is included out of the box, and CSS modules can be used by ensuring the file ends in the .module.css suffix. Server-side rendering (SSR) is still experimental, but VIT can be used as a middleware in an existing Node.js server to enable SSR.

So that's it. A quick, quick migration from, from CRA to, to a 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. What 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, right? 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 Vitt as a middleware inside an existing Node.js server, right? So, if you're doing server-side rendering, you need to control your server, let's say an express server, then run Vitt as a middleware inside of it, and then invoke a method called Vitt, as you can see here, SSRLoadModule, 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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.A brief history of JavaScript package managersThe isolated node_modules structure created pnpmWhat makes pnpm so fastWhat makes pnpm disk space efficientMonorepo supportManaging Node.js versions with pnpm
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Inner Workings of Vite Build
Vite unbundled ESM dev server and fast HMR are game-changing for DX. But Vite also shines when building your production applications.This talk will dive into how the main pieces fit together to bundle and minify your code:Vite build as an opinionated Rollup setup.How esbuild is used as a fast TS and JSX transpile and a minifier.The production plugins pipeline.Modern frameworks (Nuxt, SvelteKit, Astro, among others) have chosen Vite, augmenting the DX and optimizations for their target use case.We'll discover Vite as a polished and extendable toolkit to craft optimized modern apps.
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!
JSNation 2022JSNation 2022
28 min
Yarn 4 - Modern Package Management
Yarn 4 is the next major release of your favourite JavaScript package manager, with a focus on performance, security, and developer experience. All through this talk we'll go over its new features, major changes, and share our long-term plans for the project.If you only heard about Yarn without trying it yet, if you're not sure why people make such a fuss over package managers, if you wonder how your package manager can make your work simpler and safer, this is the perfect talk for you!