Introduction

[00:00:00]
>> Hi, my name is Steve Kinney, and I am the head of front and engineering and developer tools at a company called Temporal. And Vite is one of those technologies that I've been using now for two and a half years every day across all of our projects. So the good news is that I've got a lot of experience using it.

[00:00:21]
The bad news is that for two years and five months of that two and a half years, I definitely thought it was pronounced Vite, and so I have rapidly, and internal conversations with my team, called it Vite. So I have been practicing calling it Vite the entire time, and we're gonna see if I slip up at all, and I don't think I will, I think I got this.

[00:00:43]
It started out very simple, I'd love to tell you it was a conscientious choice of evaluating every build tool. For me personally, I don't like fighting with my build tools, and a large portion of my career has been fighting with my build tools. And when we started building the new version of our UI for open source product at Temporal, we choose to use SvelteKit, which was pretty one point at the time, which was a choice, but it by default is built on top of Vite, right?

[00:01:21]
And it was one of those pleasant surprises to recalibrate one's brain to find out that, wow, this is actually pretty great and everything that I wanna do for every weird use case that I have. Well, as we go through stuff, I'll talk about what some of those are.

[00:01:34]
But working on an open source product that also has a cloud piece, has a bunch of weird requirements that I was dreading when some of the requirements came down the line. And solving almost all them in Vite was shockingly easy, sometimes in under half an hour or an hour once comfortable with it.

[00:01:52]
So what we're gonna do is we'll talk a little bit about what Vite is, why it's pretty amazing. And then enough that you will know how to do almost anything, from the very basics to the weird things that are unique to whatever place you work at or will work at the future, and how to kind of bend it to your will in our time together.

[00:02:12]
So let's talk about, let's just clarify what exactly Vite is, cuz it's actually a little more nuanced than we would think. It calls itself the next generation of frontend tooling, which is a good marketing line, and, actually, when we dig in a little bit, true, right? And we'll talk about what that means.

[00:02:32]
I think the unofficial subtitle of this course is all the things that shouldn't be hard but are, maybe they don't have to be, right? And if you've ever spent a portion of your time fighting with a certain built tool that won't go named, then you kinda know what I'm talking about.

[00:02:47]
And it's kind of refreshing to find out that it's both easy, but a lot of times things are easy, you' re like, well, that just means it doesn't do a lot, right? And what I think is pretty incredible is both easy and simple to kind of do the basics, cuz I don't wanna spend, that fear in your heart when you go to start a new project, and then you remember how much boilerplate you're going to have to do to get started.

[00:03:06]
A lot of times I'm like, I don't have time for that, right? And with Vite, you'll actually see in the very beginning how quickly we can get something up and running. And then by the end, you'll see how far we can take it all the way to production use cases.

[00:03:19]
And like I said before, all of our apps, large enough apps usually exist in some kind of ecosystem of a company that's got all sorts of little nuances that are special. And we'll kinda talk about how it's extensible as well, and we'll kinda go through that when we do the overall outline.

[00:03:34]
So I could make a bunch of slides, but I think the Vite homepage and those little six boxes along the bottom there kinda do a pretty good job at giving you the initial value prop, right? This idea of a very fast instant server start, and we'll talk about how that works and why it works, but Vite is I believe French for fast.

[00:03:53]
So it better be fast, otherwise it's immediately lying out the gate, and luckily it is. And that kind of next generation build on modern web technologies allows it to do a lot of these things like the hot module reloading that is way faster than some of the other previous build tools.

[00:04:09]
At the same time, it is built on top of a lot of prior art, literally, which means you get a pretty robust ecosystem of plugins. So that we'll look at how to extend it, we'll look at how to do custom stuff. We'll look at how to do stuff that I've had to do kind of just in some of my unique situations.

[00:04:26]
But the nice part is, is that there's also a very, very, very robust ecosystem of plugins so that maybe you just don't have to. Generally speaking, a good Google search will probably find that somebody has already encountered that problem and solved for it as well. And so I kinda think about this, our time together in four acts.

[00:04:46]
Act one is Vite is simple, right? We will see how quickly and easy it is to get up and running with it, right? And how fast it is to start iterating on whatever idea that you have, so on and so forth. At the same time, we're gonna see that Vite is powerful.

[00:05:02]
And what I mean by that is there's a lot of best practices in our industry that a lot of times we don't do cuz they're hard, right? And that getting that infrastructure in place is a full-time job. And it doesn't have to be cuz a lot of those things, the tooling exists already in Vite, and we just gotta figure out where it's hiding for us and how to use it.

[00:05:25]
And then the next part is that Vite is super flexible, right? And the weird bespoke situations for us, that we can totally solve. And there are a lot of plugins that exist, and when there isn't, Vite is super extensible,. It's using Under the Hood for a lot of the build pieces, Roll Up, which has been around for a very long time and has a very powerful plugin system with a lot of prior art around it.

[00:05:51]
So you can basically bend it to do whatever you need to do. Kind of more specifically across those four acts we're gonna look at getting up and running, and just kinda getting started and understanding how to first fire up a Vite app and what's involved in that. The act of building it, the fun of bringing in CSS, and the various ways that you can do that.

[00:06:13]
We'll be mostly writing JavaScript today, but I would be remiss If I didn't at least recognize that, in my day-to-day life, in a lot of engineers, TypeScript is kind of, in a lot of ways, the lingua franca for a lot of these things. As well as you will probably have one of any number of front-end frameworks.

[00:06:36]
And so we'll look at how to integrate all of those and get up and running super easily with that as well. We're not gonna be focusing on building anything with those frameworks, but we'll kind of say, here's how to bring in, whether it's React, or Svelte, or Vue, or what have you, bringing in any of those frameworks and working with them.

[00:06:52]
Then optimizing static assets, all the other images and stuff that we may work with in our applications. Then we'll look at building libraries for either the browser or for node, it doesn't really matter, the technique is basically the same. That could be anything from a set of utilities, to maybe you're seeking to actually just build a library, or stuff for building a design system.

[00:07:13]
Maybe you share components across the organization, you wanna have a library that you can consume, or serve up to the other applications as well. We'll look at some things that are somewhat popular in some of the other build tools that kinda, as I was talking to a lot of people preparing for this, they were like, well, I need to have module federation.

[00:07:31]
And so we'll talk about both what that is and as well as how to implement it using Vite. And then we'll look at some basic examples of how you can then extend Vite, once we got that foundation, to do whatever you want, right? Whether that's kind of just integrate with into your ecosystem, or maybe you work with a certain file format that you want to be able to parse and use within your application.

[00:07:54]
It's not like, Vite doesn't support that, well. It's actually no, you can easily add all of that. And so we'll kind of look at all those things during our time together, and we'll kind of take a tour of those things. So Vite is kind of interesting because I would say that it effectively stands on the shoulders of giants, right?

[00:08:12]
A lot of times when we think about all of these tools, we're like, well, I could use this tool, but that's good in development cases, but then I need a different tool for when I build for production. The really great part about Vite is that it is built on a bunch of other tools, right?

[00:08:27]
And so you don't necessarily have to make those decisions cuz Vite has already done the work of wiring up a bunch of other different battle-tested solutions and kind of made a suite of them that kind of uses certain tools where they're currently the best, and then other tools where they might also be the best as well.

[00:08:48]
So one of the tools is esbuild, and this is, again, a shot from the website here. The important part here is that top line, right? esbuild is a ASE parser written in Go, right? I think it's hilarious that when I started, almost all of the front end build tools like SASS or whatever were built in Ruby, and then we rewrote them all in JavaScript, and now we're rewriting them all in Go and Rust, cuz they're that much faster.

[00:09:13]
But I think the chart speaks for itself on esbuild now. esbuild is used mostly in development, for the development server. And the nice part is, is that Vite uses esbuild to serve native ECMAScript modules. And ECMAScript modules are pretty cool because that's kind of like the syntax you've used before, like import whatever from, that syntax, is actually somewhat, with the browsers we're all using, supported in the browser, right?

[00:09:43]
As you go back to legacy browsers, not so much, but for most of the browsers that we're using when we develop our applications, we have native supports for these modules. And what's really cool about that is, if you've used something like Webpack, an older version of Webpack or whatever, we don't have those.

[00:10:01]
So what Webpack does is it bundles it and then serves it up in a script tag, right? And that means every time you make a change, we've gotta re-bundle the entire application, figure out what changed through the hot module replacement. And doing stuff takes longer than not doing stuff.

[00:10:17]
So when you're not bundling, and you're just letting the browser actually fetch a bunch of different modules locally and just swapping out just that module and not having to do any bundling in node to serve it up for yourself, turns out that that's very, very, very fast. And there are some other tools, like you can opt in if you're using something like React or something along those lines to some other tool called the Speedy Web Compiler.

[00:10:42]
This one's written in Rust, right? Again, incredibly fast for kind of parsing all your JSX and stuff along those lines. Even though ES modules are supported in most of the evergreen browsers at this point, at the moment, Vite still uses Rollup, which we'll take a look at in a second, for the bundling.

[00:10:58]
Because there's still optimizations one can do to bundle assets that are going to be shipped at the same time always into one bundle. And so when we're in development, we don't really care about how many HTTP requests we're making cuz we're talking to localhost, right? But there are still, I think in this day and age, cases where doing some of the bundling that we've seen from Rollup, from webpack, from a lot of these other things, is, in the year of 2023, 2024, still probably the fastest and most efficient way to serve production assets, right?

[00:11:33]
You get the tree shaking, you get all the stuff you can do at compile time, that give you a super fast production build. And I think, very candidly, the Vite team has said, if that reality changes and using esbuild and just native ES modules turns out a year, two years, three years from now to be kind of the path forward, they're open to switching to it.

[00:11:56]
But right now, using Rollup is, I think, one of the better ways to build for production. And the nice part is that Rollup having, I don't know exactly how old Rollup is, but I know that I have been using it for since 2017, 2018, so that old at least.

[00:12:13]
And that means that the ecosystem around the plugins, the fact that there's probably something already built off the shelf that you can just use is incredibly convenient as well. And it does a lot for you behind the scenes. I also had a logo for post CSS up there in the very beginning, right?

[00:12:30]
And so out of the box, you're getting CSS pre-processing and translation, right? You don't have to opt into any of it, but you will be able to add stuff through post CSS. You get the code splitting, it will go ahead and try to parallelize. If you are dynamically requesting one module and that immediately is gonna request another one, at build time using Rollup it'll figure that out and it'll just bundle all together, makes things as fast as possible.

[00:12:55]
These are things that exist that you don't even have to know what I'm talking about right now because it doesn't matter. It happens, don't think about it, don't worry about it, just understand that it's fast. We are, for the most part, there'll be a little bit of React towards the end, and there's no real expectation that you know React.

[00:13:15]
But it's just to kind of show what it's like to pull in a framework, and that seemed like the easiest kind of obvious choice. But Vite integrates with lots of different frameworks, and when we even show how to pull in one of them, you'll see how easy it is to pull in any of them, right?

[00:13:33]
I use Felt in my day to day, but also React a lot because that's the world that I live in. These are some of the ones that are officially supported with official plugins, but I'll show you where the community ones are for almost anything you could ever want.

[00:13:46]
And in a lot of cases, you're like Vite sounds a lot like Vue, that's because it's got the same creator. So it is the default build tool for all Vue apps. It is the default build tool for all Svelte apps, SvelteKit rather, which is kind of next, but for Svelte, but by the Svelte team.

[00:14:05]
And so it is actually the foundational build tool for at least two of these, but works great with all of them as well. And it's got a lot of features. We're not gonna kinda go too much into these, cuz generally speaking, if you are using some kind of framework, these are done for you.

[00:14:22]
These are kind of those things that are there mostly for library authors, but there is kind of built in support for hot module reloading, for server-side rendering, and all those things. I've got sections written on that, we can kind of explore if we're interested, but for the most part, they are ones that, unless you are writing your own framework, there's probably something you're using that's kind of got that built in.

[00:14:40]
If you're using any of the kind of official plugins and templates, you will get all of this for free and you will never think about it and you will be happy, and life will go on and you'll go back to building your application.