How Vite Changes the Game for Vue and Web Developers

Hello vue London! I hope you are enjoying the conference. I am Alex Kyriakidis, I am the author of the first book on vue.js called The Majesty of vue.js, which I wrote when vue.js was version 0.something. Over the years I have contributed to vue.js and the ecosystem, and I am the founder and teacher at vue School. I am based in Amsterdam and you can find me on Twitter and GitHub under the username of hootlix. vue School is the first training platform for vue.js, we started back in 2016 and we have over 500 video lessons and since we offer a lot of training material for free, we have all the fundamental courses for free, we have over 120,000 registered users. And these amazing people that you see here, they work with vue School either as instructors and teachers or as contributors. At vue School besides video courses and tutorials, we do workshops, which are either in person or online in our virtual classroom. And workshops is a great form of training for learning something, a new technology or a new topic very quickly, typically in a day or two, and all our workshops are live, intensive and hands-on. And for companies, we help them by providing consulting and development services, and we are particularly good with helping improving the performance and with fixing nasty bugs. So if you need any help with that, feel free to let us know. Now today, I'm going to speak to you about how VIT changes the game for vue and web development. In this talk, I will cover what is VIT, why VIT is so great and why all the fuzz, how to use VIT with vue or even react, what is VITPress, and in the end of the talk, I will answer some of the frequently asked questions, like for example, what's happening with VIT and nuxt.js. If you are interested in the technical insights, check out this excellent talk by Evan Hu from vue Toronto. Here he covers a lot of information on how VIT is built, why it is built this way, why they made it. It's a very interesting talk, I definitely recommend checking it out. So let's get started with what is VIT. VIT is a new front-end build tool that significantly improves the front-end development experience. And what is VIT's goal? It is to make developers more productive. And how do you make developers more productive? By making developers happier. And how do you make developers happier? By making their tools faster. That is a quote from Evan Hu, the creator of VIT. But okay, what is VIT exactly? VIT is a command line tool that consists of two parts. A dev server and a build command that bundles your code with rollup for production. The dev server is the tool that you use while you're developing your application, and as you understand, the build command is what you run when you are ready to ship it. Let's learn more about VIT's dev server. Now while you develop with VIT, your code is served in your browser directly without being bundled. And that's what makes the VIT dev server so fast. It is like opening your local files from your computer in your browser. To understand how VIT's dev server looks like, think of it as vue CLI, but way faster. When we say way faster, we really mean it. The VIT dev server starts in less than 300 milliseconds, and the hot module replacement takes place in less than 100 milliseconds. And VIT achieves that by leveraging the browser's native ES modules feature. In this image, you can see that all the major browsers here, they support ES modules in their latest version. And this is also one of the reasons that we get an awesome tool like VIT today and not like a few years back, because we needed to wait for modern browsers to evolve and support features like this one in order to make our developer experience faster and nicer. Now for features that VIT needs but modern browsers don't support yet, VIT uses a tool called ES Build. And it uses ES Build for supporting bare imports, for implementing the hot module replacement, and for having support for tools like typescript or JSX. I didn't know of ES Build before I looked into the VIT dev server, and I figured that it is written in Go and it compiles to native code, and that it uses parallelism heavily. And I found this benchmark very interesting. And you can see here that ES Build is able to bundle or to compile a large javascript code base in 0.37 seconds. And this is massive if you compare it with the other bundlers, but see that it takes about five times more when ES Build is running with one thread, so without the parallelism. But the next fastest option after ES Build with one thread is rollup with Tercer, and this takes 36 seconds. It's about like 25 times slower than ES Build. And then webpack is a bit slower, 41 seconds, and the slowest solution here would take 120 seconds. And here you might say that, Alex, 40 seconds, one second, why does it matter? Just some seconds. But it does matter because this is how much you would have to wait in order to spin up your development server. So every time you run, I don't know, npm run dev, you need to wait for this, let's say, 41 seconds. But now it will just take half a second. And especially if you're tweaking your dev server, if you're making some like root changes, and you need to stop the server, run it again, stop the server, run it again, then this can be like a pain for the developers. But yeah, with ES Build, it's way, way nicer. And if you think about how many times every day you start your dev server, I think it would be like easy, 10 times a day. So if you think that this is like a one minute step, then this gives you 10 more minutes every day, which is massive. So which dev server solves the common enterprise problem? And the common enterprise problem is that as an application grows, the dev server becomes slower. And that happens based on how the typical bundlers work for development. So let's take this bundle-based dev server as an example. When we are running npm run dev or whatever command, the bundler gets to start from an entry point, for example, your main.js file, and then it will scan for all your routes. And for every route, it will go in, it will see what components and dependencies you are importing, and it will go like all the levels in depth to find the dependencies, load them, transpile them, put them together and make this big bundle, and then it will give the server ready signal, which means that you can visit your application in the browser. And this is like perfectly fine when you have three routes and like 50 components. But if you have a couple of hundreds of routes and a thousand of components, then this can take easily half an hour. And vite is revolutionary in that regard because it has a very different philosophy on how it spins up the dev server, which you could say that it is reversed of how traditional bundling solves this problem. So notice that it starts with the server ready, like this is the first step. First step is like server is ready, you're good to go. While this would be the last step. And then it waits for the HTTP request, and this is your entry point. So if you open your application in the browser in the homepage, the entry point is the homepage. If you open like the user page, then that will be the entry point. And from that entry, it will figure out which route this is. So for example, the homepage, and it will load the components and the dependencies only for that route. So even if you have 1000 routes and like 2000 components, it will still be super fast because it will only open this one route and like 30 components that you use in that place. And then when you click in your dev server on another link, then it will like find the new route and it will load the new dependencies, which is really awesome if you think about it. It's a very smart way to do bundling. Okay, so let's go next to the VIT build command. And this is the command that you will run when your application is ready to go to production. VIT has a bundling process here, and this takes place using the bundler that is called Rollup. If you wonder why Rollup and not something else, that's because Rollup is the best performing javascript based bundler in terms of build speed, tree shaking, and output size. So that's why. VIT build command builds your application for production, and this takes longer than dev because here it needs to take care of more things. And then this needs to make sure that it works not only in modern browsers, but everywhere. But don't worry about this because you only build once. So you have your dev server running all day, every day, multiple times, and once in a while you need to build it and upload it for production. And still, when you build, it is way faster than traditional bundling like webpack and UCLI. And as I mentioned, if you use VIT, it doesn't mean that you can only support modern browsers. You can even support legacy browsers. There is a plugin called Plugin Legacy, which you can install on VIT, and then you will have support for all browsers, including our old pal Internet Explorer. So if that's important for your company, you can even do that in VIT. Okay, let's do a quick summary of what we saw so far. Summary of VIT. VIT has a super fast development experience, and it has a great bundle output using Rollup when building for production, which is also supported by legacy browsers, if needed. So VIT is awesome. One common question is if VIT is made for vue.js, and that's because it is made from the creator of the vue.js framework, M1U, but the answer to that question is no. And to be honest, that would be unfair. Imagine that if you developers had to wait half a second to start a server, but then react developers have to wait 30 seconds or sometimes 20 minutes to work. That would make it a bad monopoly for vue.js. But no, I'm kidding now. That's not the case. VIT is available for all the javascript frameworks. And actually, VIT is framework agnostic, which means that VIT provides a blazing fast development environment for vue.js, react.js, Preact, svelte, and even more. When you're going to create a VIT application, you run this command, npm init vit latest, and then you specify the project name. And then you can choose what framework you want to use, Vanilla, vue, react, Preact, etc. And these are just the official plugins that ship within VIT. There are also many other boilerplates and templates you can use with VIT that are created from the community. I stumbled upon this example, or this comparison on Twitter. This is the CEO of Repl.it. And here they compare the Create react app versus the VIT react dev server. So look at this. I was not from scratch. On the left, we have the Create react app. On the right, we have the VIT react. VIT react starts a bit later, like they click play a bit later. But look at how fast it is. This is like record time. Here we can already see the react application running, while on the left, it takes a while. Actually we need to wait for almost the end of the video, about 40 seconds, to see just the application running. So this is a massive difference. And fun fact, after they made this comparison on Twitter, I think a few months later at Repl.it, they replaced how they do the bundling for react to use VIT react. So now if you make react applications on Repl.it, they are way, way faster. And I think they also use VIT now for most of the javascript apps you can run on their website. So that's a great use case where the dev server could even improve your production performance. But this is a rare use case, of course. Okay. Now, VIT is also capable of server-side rendering and static-side generation, which is really great news. There is also VITPress, which is a static-side generator built on top of VIT. And VITPress is great for creating documentation and blogs. It's really, really fast. And it is like ViewPress, but lighter and faster. And I want to clarify that it is not coupled to VIT projects. So we don't need to have a VIT project to use VIT. Because VITPress can be used in any javascript project. It just uses VIT under the hood. So it can be inside the react app, a vue app, a vue.cli app, whatever. And VITPress is still an early walk-in-progress version, but there are some websites that use VITPress already in production, including the official vue.js blog and the vite.js website. Okay. Let's see some frequently asked questions on VIT. Is VIT ready for production? Yes, it is. VIT 2.0 stable was released on February 2021. Will VIT replace vue.cli? Well, it's most likely that VIT will be used by vue.cli under the hood instead of the current webpack setup in the future. How about NAXT? What happens to our beloved framework? Well, VIT is great news for NAXT. And according to Evan, now NAXT can have a simpler core and focus more on higher-level api design and ecosystem modules. And there is already a way to use VIT in NAXT 2.0. There is an official module called NAXT-VIT. And it's very easy to install it. You add the dependency. You change this setting in the NAXT config file, and that's it. You can enjoy a super-fast NAXT dev experience with VIT. So check this out if you are using NAXT and want to experiment with VIT on that. And according to Sebastian Chopin, the co-author of NAXT, NAXT 3.0 will support VIT by default. This is really exciting. Now do I need to learn vue from scratch? No, VIT doesn't change anything in regards to how you write your vue.js code. So no need to learn anything new there. Do I need to rebuild my vue CLI app from scratch? The answer to that is also no. It's likely that there will be a tool that will allow you to migrate your vue CLI application from webpack to VIT when the time is right. Why do you pronounce VIT and not vite? That's an excellent question. I thought it was called vite when I first saw it. But this VIT, and it means fast or rapid in French. And when I learned this, it immediately clicked to me because when I was a child, my mom used to say vite vite when she wanted me to do something fast. And I doubt she knew that that is fast in French. But the way she said it and the sound of it, it really sounds like vite vite, like be quick, let's go. Yeah, that's it. I'm Alex Chiriakidis from vue School IO. vue School IO is popular for the vue 3 masterclass. This is a video course where you learn vue.js by building a real world application from scratch. We build a complete forum and we teach you vue.js and the best practices in the ecosystem, including how to use state management, permissions, user authentication, bundling, security, and whatnot. So I definitely recommend this course if you are looking to step up your vue.js game. This is an advanced course. But at vue School we have video courses and tutorials for all skill levels. We have fundamentals on vue.js and the ecosystem, on Nuxt, ES6, modern javascript testing, and we also have intermediate and advanced courses for all the skill levels. And lastly, we also offer business services at vue School. So if you need help with development, consulting, or team training, feel free to reach out to team at VueSchool.io. Thank you very much.