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.
Vite - The Next Generation Frontend Tooling
FAQ
VIT is a build tool created by Evan Mew, designed to be framework agnostic. It is primarily used for enhancing development workflows by managing and bundling code.
VIT consists of two main components: a development server and a build commander, which is a pre-configured bundler. The dev server enhances feature support for native ES modules and provides fast hot module replacement.
VIT enhances the speed of the feedback loop during development by utilizing a dev server that quickly processes changes and updates the browser view, significantly reducing the time developers wait for updates after editing code.
VIT supports several frameworks including React, Vue, and Preact, as well as vanilla JavaScript. It also supports TypeScript and JSX out of the box, allowing for versatile development across different coding languages and styles.
VIT can be extended using plugins based on Rollup's plugin interface. This allows developers to enhance and customize their VIT environment according to specific project needs.
The entry point in VIT projects is typically the 'index.html' file, unlike many other projects where 'main.js' might be common.
Yes, VIT supports CSS and includes built-in support for PostCSS. It also supports SASS without requiring additional installations like node-sass, streamlining the development process for styling.
VIT's support for server-side rendering is experimental. It can be run as middleware inside an existing Node.js server, using the same ES import syntax to load the application.
Unlike Snowpack, which does not handle bundling, VIT integrates bundling and optimizes it for performance, specifically targeting development time improvement and efficient handling of static assets in production.
Developers can find community support and a variety of plugins for VIT on platforms like Awesome VIT and the VITland Discord server, where topics related to different technologies and integrations are discussed.
Video Summary and Transcription
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
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
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.
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
Comments