GitHub Open Source Friday, 16 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Next generation frontend tooling with ViteJS - Open Source Friday

Description

Watch Evan You (creator of Vue) and @bdougie share a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

0:00 - Start
1:21 - What is Vite?
4:54 - Why is Vite needed at this time?
6:38 - Vite getting started (demo)
13:25 - Index.html as the entry point and the module graph
23:47 - Vite compared to the vue-cli
23:28 - Is Vite extendable to other frameworks?
27:01 - Tailwind CSS + Vite setup
35:44 - Vite + React (JSX) setup
41:26 - ESBuild + vite --force explanation
47:44 - DX experience
52:16 - Server Side Rendering with Vite
1:09:55 - chat.vitejs.dev

Join @bdougie and friends live for Open Source Fridays at https://www.meetup.com/GitHub-Virtual-Meetup/

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

All right, everybody welcome, you have made it. um This is. This is uh open source friday, uh it's a fridays where we talk to open source maintainers about the projects they work on. Sometimes we actually contribute projects. Sometimes we build projects and I'm super stoked to have evan you here. Evan hello, welcome uh just about beyond his your your head. You've got the view. Logo and uh yeah creator view maintainer one of the maintainers of you as well, and uh why don't you go ahead and introduce yourself and tell us why you're here today.

B

Sure my name is evan yu and uh I'm I I wrote pjs, I'm the lead team lead of ujs, but uh in the past few months I've also been working on a project called feet, which is what I'm going to be talking about today. So um yeah uh veet was initially created, somewhat related to vue, but uh now it kind of evolved into its own thing uh and uh I'm kind of hoping that it can uh benefit developers, especially front-end developers, not just few users like all front dev developers.

A

Excellent yeah and uh it's funny because I've definitely, I know we chatted what was it last week um for a completely different project, but I'd never heard veet said out loud yeah and I always called invite yeah.

B

Recently, a lot of people uh discovered that I I don't know like I picked. uh I picked the name, it's actually a french word uh in french. It means fast or quickly.

B

So um I thought it's cool too, to stick to its original pronunciation, but we are now kind of in uh in a dilemma because uh some people are like if vt is pronounced in the french way, then why isn't view pronounced in the french way?

B

Because view is actually a french word as well? So um to that my only explanation is uh just stick to whatever the the author prefers. I guess.

A

Yeah and uh sorry I was just messing with the screens because I did see that somewhere. Oh here we go yeah.

B

French word.

A

For fast, so all the all the the tips on how to speak. French is right here in the readme as well, so appreciate, y'all doing that excellent. So I I guess, what's the the over the high level of what what veed is um like fast is one of the key words but like how would you describe it.

B

Yeah, it's actually a little hard, which is uh why every time people ask me to explain what it is like. There's no really concise. One sentence, description of it, uh but if you want to make a comparison like if you've been using, I think the closest thing in existence is parcel like the in terms of what it does and what it kind of affords you but um uh paso bundler, um google's, not helping me today. Yeah.

A

B

uh Obviously, like the differences in how it's implemented and uh uh in terms of how the dev server works, it's fundamentally different, um but in terms of what it does you can think of it as something that takes some of your code and serve it yeah. I think it's really interesting, because it's a dev server and a pre-configured bundler all in the same thing so like we can call it a front-end build tool, but that's so generic people, just kind of it, doesn't really explain anything in itself.

B

So I'm I'm kind of struggling to come up with a you know, really concise way to describe what it is, which is why, like I kind of want to do this live stream, because I think it's actually easier to just show people like what it does and how it works. So you get a very direct understanding of oh. This is what it does like. This is what beat is.

A

Yeah and um I think we're actually so I do a lot of front end myself. uh I come from like a react background. I've kind of some view projects too uh on github as well, and I feel like we're going through our evolution that we're sort of seeing. I think we saw this five years ago, probably longer than that with uh like webpack and how folks have sort of adopted that type of bundler uh and I'm not trying to keep bundlers.

A

You know as a one-to-one comparison, because I know you're having trouble describing what this is, um but I think we are looking through an evolution. I think we're now seeing even some of the hosting providers who are now adding all these bells and whistles and new features um like there's we're ready for our next, the next wave and that's why the the stream is called next, the next frontier or actually, what is the stream called?

A

I accept the title and I don't even know what it's called, but um the next front end tool, tooling system generation, that's what it was yep, but yeah excellent. So what why? Why veet at this point in time.

B

uh So I think vt is essentially a um like a vet alongside you know, snowpack wmr web dev server. I think we all come at a time where native es modules has finally somewhat reached it's close to being universally available. Finally, uh all right, uh if we disregard ie11, then the latest version of all these major browsers, all support native vs modules, it's now usable in node.js as well, so the ecosystem is finally now starting to to do this sort of huge migration where everyone is.

B

Finally, okay, we have a standard module system now and it runs natively in the browser. So uh all the a lot of the assumptions about tooling, uh especially like if a tool, if you assume that all the code is going to be standard es modules, um you can link up a lot of stuff. You can delegate a lot of stuff to browsers or some tools that just handle specific parts of the workflow faster than existing tools, and I think that's where this next generation of tools is going to be focused on. Is um you know?

B

Finally, we have this native standard module system. That's going to be somewhat universal, and how can we sort of reimagine, the tooling and just kind of take this opportunity to rethink how what a clean slate or a faster version of what we are doing today could be like.

A

Yeah, so speaking of fast, I know we prepared to share some screens too as well. I don't know if we want to jump in and give like a high level of what what to do with vt and how to sort of getting get installed or involved with the project.

B

uh Sure yeah, so I think I'm just gonna start sharing my screen right now, because I think that's going to be the all right, so yep yep. So this is my screen and um uh if you go to get started, uh it's going to ask you to use node.js and like use this uh init vjs app, but this is really for you know for people who don't want to go through like menu stuff, but like today, we're not going to do that.

B

So what I want to do today is just like here is a uh fresh demo like I have an empty demo. Folder there's nothing here, so I'm just going to do yarn and beat uh you're going to add the beat probably going to make this bigger.

B

So I just installed it. uh It doesn't scroll to the end why okay so uh installed pretty fast, uh so vt is: uh let's take a look at the note modules. It's 18 megabytes, so uh it's also very small amount of modules that's actually being installed because we pre-bundle most of them uh to just make sure the install is faster.

B

um This is why, um compared to something like maybe create react, app, you're, probably gonna, have you're, probably gonna, see a noticeable difference in terms just installing this thing itself like how how faster how much faster it is. So now we have this thing here.

B

uh Yes, so I have these: let's just ignore all of the existing stuff, I'm just going to.

A

Create a new: can you explain what we're looking at too as well? Oh, these are the node modules.

B

Yeah, so this is just after you run npm installer yarn ad. This is just what it creates. Just doesn't really matter. So I'm just going to create an index.html file and uh say hello, and then I'm going to so you can do mpxvid.

B

A little bit: okay, let's just move it here, then.

B

Okay or I'm going to just going here at a script, so I'm going to say, dev feeds and then oh move this up, yarn dev.

B

So I started the dev server um notice that I didn't um didn't do anything other than just running this right, so you can kind of think so at the bare minimum. Think of it as a static file. Server right, um you probably use something like serv or like http, static, server or whatever, like whatever static file. Server you use to locally serve a directory of static files right just the veed command. Does that right uh at the bare minimum? So you see hello and that's the index html being served. So this.

A

B

A

Like the uh so I use a lot of like mpx serve as a serve npm file. Are you familiar with that package? Yeah.

B

A

Okay, so so far out of the box, I can get a very similar command to serve the static files yeah right so.

B

It's a static file server, but it's not. Obviously it's not meant for serving it in production right because it does all these development stuff. So I edit and save- and just we get like page reload out of the box uh and with native modules uh with native esm, you can do script type of module right, so you can do uh you can either do import here in line? Let's just do that actually main.js.

B

So it tells you it failed to resolve my js because it doesn't exist. So I'm going to create that here and.

B

So reload the page so make sure the console actually locks hello. So you also see this vconnect thing, which is our hot module replacement. Client that's been been run.

B

So if you added your file here, it also reloads page, and you can see this main.js file has been updated and reloaded.

B

So this is not real hot module replacement going on, because this is just simply reloading the page, but it tracks all the things. That's being imported from your index. Html. To know that if you edit this file, I need to reload the page. If you add other things, I I don't need to care about it, um and then some of the common stuff that uh we may want to do is um like link to css files. um So, let's just um say, style.css h1, color red.

B

You can obviously just use a link right so um style.css so notice. Here I can uh because it's a actual http server. You can use like absolute paths here, it's just like what you'd expect. So we got this thing showing red on the screen and if I, edit.

A

It so you're you're mentioned about the absolute pass someone's actually in the chat, how to use vt from another folder than just root, how to use it from another folder yeah. So I guess, if you had like your css in like a styles folder or like, I guess you could still do relative paths too. Yeah.

B

You can do relative paths, you can even alias stuff. uh It also follows all the npm node modules resolve algorithm, okay, which we'll show in a bit, um but, as you can see like, even via the simple uh link here and notice, how, when I edit this thing, the page actually didn't reload, it's hot updating the css in place.

A

So what it what's making that work is this.

B

Running server magic, oh yeah, so so we just doing the work of recording the relationship. So uh one thing we- I kind of want to point out- is like when we, when a lot of users coming from webpack um they're so used to thinking of this main js as their entry point of application and html being the afterthought. So in v, it's kind of think of it as a server.

B

So your html is actually your entry point and veed actually parses everything here to consider it a model graph entry, so style css, is considered part of the module graph. This thing is turned into an inline module and which imports this main.js, which is another module so notice. How like index.html is actually the entry point to your application and it's kind of from there. We construct the whole module graph of your application instead of like we're going from here, then going backwards and figure out what the html should be right.

B

um So that's kind of a thing, a lot of people kind of have to uh sort of flip a switch in order to to get into v. I think uh parasol does this too right. So parcel is kind of the pioneer of this concept of html being your entry and being part of the module graph, and I think, that's kind of the uh for web development in particular. uh This is just uh for me. It's a more natural sort of mental model to work with, but either way right. So what v does under the hood?

B

Is um we actually record these all these import relationships between the html and the css files? uh So so we can uh we get to actually just update this link css in place, and uh so that's right. This is not too much different from say, a static file server. So some of the things we also do out of the box is: um let's say we have style.module.css, I'm going to say: uh what's the uh the module keyword, I've actually not seen that before right. So this is a convention right.

B

So if you've worked with css modules, um it's kind of a convention to name your files with this module.css postfix um and in vp this is also a convention. So if you see we see a file named like this and I'm gonna say uh text color red and then I'm going to comment out this one and I'm going to say import classes from style, dot, module, dot, css, let's just log this and as you can see it gives you this object with text in it.

B

So this is a class name. So I'm going to say.

B

Document.Queryselectorh1.Classname equals classes, dot text, and now we get red here. So if we edit this thing here, it also reloads. uh So this is not not much replacement, but but you get the idea right. So we have a lot these uh big conventions here. So imagine, if you are, you previously had a project with plain webpack, and now you say I want to work with css modules.

B

uh You probably have to go through a guide to teach you what css loader is what style. Loader is what I've.

A

Definitely been down that path.

B

A

Then you need to.

B

Look at all the post, css configurations for css loader, add those loaders to your webpack config, and you get what I mean right so uh so the idea of veet is it's pretty opinionated. It has a lot of these kind of things things built in and to sort of minimize the the hoops you need to jump through to get certain things working.

B

um Similarly, if you want to have custom post css configs, so you just add a post user's config thing: you export oppose us config. So this is. um This is similar to how you get uh tailwind css working, because tailwind itself is really a post, css plugin right. So if you configure you want to configure tailwind with feet, uh let's see, how can we get that working? I probably need to go to tailwind css uh and I'm gonna look for feet. I think there is a guide with feet here. Yes,.

A

So why are you looking for that? There's some some question that came in uh the chat.

B

A

There so someone like create react app. Is there like an eject feature or is you just get beat and that's it so.

B

Here's the thing like there's, there's really no need to eject soviet has its own configuration format, but it's not based on webpack. The idea is css. Module is something that just works in vt, there's really like.

B

uh If you want to configure it, yes, you can you just create a read config.js and you can say, export default, css modules. Then these options will be passed on to the post css modules uh plugin. So you can configure like locals convention to be camel case only if you want like, if you use css modules you you know what this does but like most of these built-in stuff is also configurable, but the thing is um my personal opinion is because I've worked. um We we maintained view cri for view right.

B

Ucr is built on top of webpack and we ship a lot of these stuff out of the box in fuse in view cri as well. So we have in subway.

B

uh If you use feed with vue, you almost get identical feature set with vue cli in terms of what you can do with source code, but we have to maintain a pretty complicated web pack config internally and when people want to configure that it's typically quite involved and the idea with veet is um we essentially extracted a lot of these things that we know like users, will need this in a typical project and also uh because over time it kind of in view ci.

B

We've come to these conclusions like this is kind of the sensible default. Most people will want this. So that's how we're going to present it in vit by default as well, and if there are certain things that you we know that users will want to customize. We expose them via an option and the plug-in system of each is also uh pretty flexible, um but I don't think we want to dig into that just as yet.

A

So I guess understanding these conventions, like as I was talking about the the bundlers and how we've sort of advanced and now, where everybody's got like new things, they're looking forward like the next generation yeah, I love the fact that there are strong opinions happening now in front end. The javascript world, because I, when you talk about like the webpack like I'm, triggered where I've definitely got to the point where I want to use this new thing like tailwinds.

B

A

The time and but I don't know how to get it like in my webpack config and there's sometimes there's.

B

A

Some hoops I have to jump through sometimes two different plug-ins that are competing against each other for.

B

A

Space and sometimes I need both of them and uh like I, I'm I've sort of been burnt out enough about that situation. But it sounds like with v a lot of the stuff's just working on the box.

B

Yeah, I think um it's so being more strongly opinionated. Doesn't I think it's just the the different value proposition and different sort of uh where how how, at which level the tool wants to live at yeah webpack itself, I think, is still kind of very low level.

B

uh The downside is when you have such a low level abstraction, and you want to allow all the higher level features to be configurable in user space, the complexity just explodes yeah, whereas if you, if the tool comes in and say hey, I just want to be opinionated, so I can manage much more for the user and because the tool gets to manage all these things together together.

B

So the tool gets gets to sort of work all these systems in uh somewhat smoother, because you have more control at the tooling layer, instead of forcing the user to figure out all these, how to get plugging feature a to be compatible with feature b and all that right, yeah, um and I think um it's not necessarily saying like.

B

I think it's actually a miracle that you can make all these things work with webpack, just like looking at all the plugins and loaders that you put together, uh but but you know like if, if the over time, I think we come to the conclusion that most users don't really want to deal with that.

B

uh So if the tool can sort of already handle most of these stuff in an opinionated way for them, they are happy to sort of just follow along and- uh and I think that takes time too, because like we, we as an ecosystem as as the community, we we need, we needed something to pave the way like webpack right. Then we try to put all these things together on top of webpack, then we realize okay.

B

We finally come to this sort of almost a shared convention like how we deal with css how we deal with certain types of features right. So if you look at things across like create react, app or view cli or next.js, a lot of stuff is shared right, we're doing a lot of similar stuff on top of webpack. So uh I think we finally reached a time where most users almost take some of these as sort of granted. They think.

B

Oh, it's natural, that I'm able to import css, it's natural that I'm able to just use post css out of the box, uh so I think feet it's just in some way. It's like okay! If that's what people are used to already, then we can sort of uh just go directly to provide it out of the box right.

A

Yeah and so question um so we just saw you do a bunch of commands with veet uh how about like? How do we compare this with the vue cli? Are they gonna be working together eventually, or do they work together? Today,.

B

uh They don't work together today, because vcli is still webpack based, so in the in the long term we probably want to eventually migrate vci to be uh to be based, um so vue cli in terms of scope is a little bit higher level than these, because it also includes you know, scaffolding yeah. It has more uh built-in scaffolding.

B

It has uh this like its own plugin system, which um I don't know if we want to keep if we eventually migrate to v, but uh vci lives at a higher level, where it's view specific, has more scaffolding and also gives you more opinionated integration with like test runners and all the stuff. So it's more an even more complete solution. So it's interesting yeah, so vt is like higher level than webpack but lower level than vue cli somewhere in between.

A

Got it and um yeah I mean I I'm looking forward to seeing things like that being integrated with ucli, because I, like I, like the opinions you get with the cli, because I don't want. I spent a lot of time working through different frameworks and different projects that I don't. I have to contact switch quite a bit, especially in my role at github, because I just we just ship a lot of random stuff and then move on to the next thing.

A

I think it's like a devrel thing really, um and I imagine folks who do um like they do a lot of production sites and like agencies. So my question is: is veet um extendable in other different frameworks and uh within the javascript ecosystem?.

B

Yeah yeah definitely um so we have so there's several different ways to look at this. So first of all, vt is framework agnostic, so you can use it to work with almost any like front-end framework of choice and then vt itself uh exposes a pretty uh pretty well-defined javascript api, so you can use vt inside a higher level tool. So um an example is veetpress, which is a static site generator that is built on top of it.

B

It actually wraps feed internally and does a bunch of opinionated stuff on top of it, which I can probably uh show around showcase a bit. uh Do you have something? That's true, not really, but it's it's pretty cool because um it doesn't really need like I, I really like this live stream that I can just show how it works instead of talking about it. Actually, yeah yeah.

A

I personally, like we talked about this before we were live, but I love that the fact that I know a lot of folks are in the stream who haven't been here before on open source friday. But it's an opportunity for us to have conversations about projects open up the web browser and talk, as opposed to like a podcast, where you have to talk high level and sort of walk through different patterns without getting to actually show it. And then I don't know how many people read the show notes. But uh it's nice to see.

A

You just give us the examples right here and like right in front of us. Yep.

B

All right, so uh I'm going to just like quickly get tailwind going, because so this is just uh installing a bunch of stuff. So I'm going to use yarn and d with all these tailwind stuff right. So these are just like standard dependencies that tailwind wants you to install and once you install that I'm going to tailwind.

B

What is that tailwind css and the p.

B

So if you're wondering why I I I was able to run that without the npm mpx prefix, because uh I configured my path to include the the node modules in the current directory, so I can always run the bins in the current node modules in the current directory without any prefix. Okay, that's just your personal development.

A

B

Yeah, that's just a thing that I do.

A

Okay, I mean I love the other thing I love about this is I get to learn from other people who how to write code? It's like I'm pair programming,.

B

A

You, but I'm I'm really, this sort of in the passenger seat, watching you code and yeah, but yeah. I love this cool so.

B

As well just a heads up, so I just created this uh tailwind config yep, this post css config. So there is really nothing special to do here other than oh. This thing I mean this is kind of um some of you specific. So we'll ignore this, because this is like a tailwind specifics thing, but this is the source code. You want to actually just copy and put it here and just re re-enable this and then okay, so pages actually already reloaded. So I think I should have tailwind css in there. So I want to.

B

uh ah I don't use tailwind css and just like tough enough, I think something like class equals 3xl. No.

A

No I'm actually, if anybody is a tailwind expert, if you want to drop uh whatever the uh oh, it's text dash three yeah.

B

A

See this is the other thing, the the mob programming with the with twitch. So it doesn't really work wondering why uh it's not working. Let's see yeah, there's some other wreck. I don't know if you have the chat open, but text dash, xs, um yeah, everybody's now searching the docs for you too, as well yeah.

B

Wait: it's not actually updating the index.html. Does it need to be? uh Oh.

A

B

I'm actually overwriting it here. Okay, I got it yeah, so now, text to esl is in still isn't really working so style.css, so the cool thing about so another thing I want to showcase here is when you're debugging with something like v, because we don't concatenate everything so easiest way to debug stuff is just looking at the network tab, because every module is actually a individual request here. So I'm just going to look at this and it's not really doing anything yeah. I think this is because I didn't restart the server. Is that yeah? This.

A

Importing the uh the tailwind library do you have to get.

B

Out of the file, oh there you go. Okay,.

A

Something changed.

B

Yeah, so I restarted server because it didn't load the post, css config. Previously it cached uh before I restart, I added the post, css config and the server was like. um I didn't notice it's already here. So.

A

Yeah well that just goes to show that even even you needs to debug. Sometimes you can't just live code on on whim, yeah, okay and then just looking at the uh index.html we're not importing the css. Oh.

B

We are line two got it. We're using this link here got it so so it works as you can see. Post css also works over these normal links right because this is treated as a dependency in vtlan as well. So if you have like nested ad imports inside the css file, we also trace all of that. We also kind of record the module graph the dependency chain. So when you edit, like nested ad imported css files, we also do hot module replacement and all that uh okay, so that's it.

B

I think we're gonna wrap it up here for css, actually, um maybe also showcase something like um I'm going to yarn. Add the sass, so I'm just installing sass itself and I'm going to create a new file called style.scss uh and then color red is that the syntax.

B

So I wrote some scss and I'm going to just link it like this.

B

So yeah, so you install sass and then you can use sass or scss, and it just works like this. Of course, you can also do it like this. If you want works, the same way.

B

Or you can do um something like this.

B

uh Also works right so most of the conventional stuff that you expect that should work. It probably will work. Okay,.

B

And this is because we didn't do anything here, so I'm just going to change this to style.scss and reloads the page.

A

Nice and then real quick going back to the veep config. We didn't do much to set this up. We did uh create some postgres. That was the config that we had before. So we didn't really do anything to um yeah.

B

A

B

Yeah we didn't really like this is actually unnecessary right now, because I was just showing how you can customize css modules, yeah, okay, excellent yeah, so technically, like anything, you don't need just like remove them and it doesn't affect anything like like if you just want sass like this, is all you need to work with sass like uh so really like it's more like.

B

uh If you want to go the super super minimal route, like you, just have your html css in javascript, optionally, with post css or a preprocessor like this is not much from a static file. Server except it magically knows some of the stuff that you want to use. um Okay, so um so this is for people who want to just like have a you know, a smarter server yeah, but we can do more than this. Obviously. So.

A

The one use case that I have and because I've been doing so much twitch streaming this year and we just had a live stream last week me and michelle uh from michelle from australia, I was gonna.

A

I don't know I was making that distinction, but um we we built a twitch bot and the one thing I've noticed with things like obs, so like right now, we're leveraging obs to get everything on the screen at the moment is that it has a javascript runtime and I've been messing around with using like denno and js time inside of obs.

A

I haven't really published anything that works yet, but I'm curious of things like we talked about typescript, but what about things like deno? Will that be compatible.

B

um Probably so dental is a whole different story, because zeno is its own thing, so vt is currently built on top of node.js apis. So it's not going to be triple to get it running in deno, okay,.

A

Well, that's good to know.

B

All right so, uh let's see what we can do next, um I'm going to add a dependency now. So let's say I want to use react right all right, so I added react and react dom and uh so inside main js. We probably want to change this to jsx because we're going to use some jsx.

B

So I'm going to say imporiant from react, uh import yeah, dom from random. I think that's how it works. So forgive me because I'm actually uh react dom dot render we all.

A

Came to watch evan, you write, react yeah.

B

Get element by the app, maybe so that means we need to have something here. So I'm going to say div tab, and um so the the main thing I'm actually showcasing here is not really like uh react, but we need a app right, so function, app return, um h1, hello!

B

So let's see no, of course, uh because we changed it to main jsx yeah. So I'm going to change it here all right, so we got hello underwear, so this is rendered by by react uh and, as you can see, jsx just kind of worked out of the box as well. You didn't need to configure anything.

B

It kind of just worked um so same for uh like so. If, if you use tsx.

B

And let's just like export function, app like this so remember, you need react because we are using the vs16 transform and instead of that, I'm going to say imports app from app and it works the same way all right. So um so typescript jsx tsx works out of the box. You can just import them and they just work.

B

uh You didn't even need to install typescript itself. The assumption here is, you will likely be doing uh type check and run so when you're developing your ide probably knows something right so uh say you can add a ts config here and your id will start linking these ts files and give you errors and warnings. So feat itself doesn't care about any of the type checks. All it does is transform the syntax into actual javascript that the browser can understand, uh and it does that using es build.

B

So this is where we start to actually already leverage ds, building two places up to this point. The first is uh yes build. Is transforming these jsx and tsx files into playing js for us. So, uh for those who don't know what es build, is uh it's a javascript build tool, transpile tool, that's written in go so it's written, it's compiled to native binaries and it's extremely extremely fast, and that was shipped pretty recently. Wasn't it uh it's actually been around for a while.

A

Okay, yeah, maybe just.

B

Made the newsletters recently: okay yeah it- I mean it takes a time for these kind of projects to mature, because it's covering so much features but um but the basic idea here is um uh v. When you install vh, we already installed es build for you, so you don't. You didn't, need to install anything extra to get these trans violations, and this is at least 20 to 30 times faster than vanilla tsc.

B

um So psc will probably take like 30 40 milliseconds to transpile a tsx file, but with es build, it's like one millisecond most of the time um and feed leverages that so imagine if you have a project with like 100 ts files, uh so that kind of adds up right. Another aspect of this is when we started server here notice. This thing here says new dependency found react and random.

B

If you are used to using react with like create react, app or webpack, uh you're kind of used to like doing like import react from react like this, and it just works, and sometimes we may even do things like you know named exports like this yeah right. um But if you actually look at what the files react, is shipping?

B

Let's going to react here and look at the package json here uh it says main index.js, so nfcs it says: module.exports equals require blah blah blah and this is actually commonjs. So react. Doesn't ship native vs modules, it ships, common js um ships common.js, but we are able to just import it like an actual es module here. So there's, obviously something going on in the background uh webpack roll up. You know if you use this with roll up, you will need something like roller plug in common js, yeah.

A

B

Does a lot of the interrupt behind the behind the scene, but um how do we get to make react actually work in the browser? So let's take a look at the network here.

B

uh Oh god, how do I I can't get to grab this part uh anyway? So here's the react so um notice that we are getting this require react. So this all this code is actually generated by uh es bill. So um when we restart the server, if I say uh feed force, there is a thing here says: what's the uh the force command, the force means uh ignore the dependency cache and reforce process all the dependencies? Okay, interesting yeah.

B

So uh if you don't, if you don't do that it won't, it will check some hash and if the hash matches you won't need to do anything when you restart the server. But if you've passed the force it will.

B

You know you just said past the force yeah, um so it will detect it. So what v it is doing here is it will look at your source code notice. You are relying on reaction via dom and then it will check, react and rear, dom and notice. They are not actually es modules, uh which means we need to do something about them. So we will use es, build to process them, pre-bundle them into something that actually works in the browser.

B

As native vs modules- and we have some also smart interrupts so that you can use named exports even though technically a common js model transform to yes module, like only has a single default export but like we kind of make that work um with some some runtime interrupt, um and the benefit of this is kind of twofold. The first is uh you make common js modules work as native es modules.

B

uh Another benefit of this is say: you have something like low dash es. uh Low.Gs has like 600 internal modules when you import es uh without any optimization. You are loading all those six 600 modules here. So if you look at the network tab when you load- maybe I can just do that. You know yarn, add low dash, yes and I'm gonna say uh import from low dash.

B

Yes, uh well, that didn't actually result in a lot of requests, because our server, the veed server, smartly detected loads, yes and chunked into a single file on the fly.

B

So uh if, if we didn't do that you'll this will, you will see like 600 requests here and it's gonna jam the browser, even though it's it's relatively fast, it's like there's still a lot of overhead when you process the http request right, so, ideally, even during dev, we still want to reduce number of requests, but veed kind of does this for you, so that, even if you import a dependency with even a thousand internal modules, we still kind of chunk it into a single file yeah, and because we do that with es build, it's so fast like how how much time it did this within like a second right less than a second.

B

But if you do this with say uh something so this this comes into play like because um even with huge dependencies, maybe like uh you're at material ui core. So this is going to be pretty intense right uh from material ui core.

B

So we finished that uh we imported materia core uh and still it takes less than a second granted. This is I'm running on an m1 arm mac, which is insanely fast, but still like uh the same thing. If you process it with say webpack or rollup, you probably have to wait a few seconds, uh and so this so this is where es build, really makes this process just like insanely fast and some of the noticeable differences like I've tested.

B

This is tested this on a real world, app using react and material, ui and bunch of other dependencies, and I tried to pre-bundle with roll-up and took me 28 seconds on an m1 mac and we've got a curiosity. Are you on amazon mac right now? Yes,.

A

Yeah yeah there's speculation.

B

A

The chat right now.

B

Yeah so after we switched v to us, use yes build for this process. It took 1.5 seconds, uh so that's like 20 times faster startup time and because every time you detect a new import or you add new dependencies, the cache will likely invalidate so you kind of have to do this uh relatively frequently so having es build handle. This is just like lifesaver, because it's like cut down the time so much most of the time with with m1 plus yes, phil, like I'm, I'm just I'll start getting patient.

B

Whenever I start a project, and I have to wait more than one second uh you're right, yeah, I'm spoiled honestly uh and also note like yes bill. uh Currently, yes, bill still only ships the uh intel binary, uh it doesn't have uh apple silicon native binary of es built. Yet I think the latest version of go does support it. But, yes, build hasn't, really started shipping, the arm native binaries. Yet so we are actually running es field on ml mac through rosetta 2..

B

So imagine it can be another like 20 to 30 percent faster. Once we have native arm mac, yes build binaries, so yeah. So this is part of the where the uh this this feed the fastness, comes into play when you, when you notice the difference when you have um not just for a simple demo project when you have a real project with like hundreds of dependencies. This is start to be a very, very significant, very, very significant difference in terms of the dx right.

B

So if you have to wait like half a minute or a whole minute before every time you spin up the dev server, I'm going to be really reluctant to even think about working on that project right and um this kind of helps me with debugging too, because now, like every time, someone reports a new thing, I clone the reproduction- it almost always starts instantly. I don't have to like wait, so uh it just makes debugging feed itself also much more pleasant, yep.

A

Yeah I mean I've got some projects that do actually bw live. My regular site actually takes quite some time to to build, so I won't drop any uh frameworks any names down, but uh it's got some issues. uh I do have some.

B

Questions from.

A

The chat, though, um what about a production and is v ready for production? I know there's a beta flag on the 2.0 right now on the yeah, the repo.

B

So we are actually pretty stable for the past few weeks, no major bugs left really. So there are a few small edge cases.

B

If you have some particularly tricky dependencies where it's like a mix of es modules in common gs, there might be small issues, um but for the most part we already have close to 30 000 downloads per week, and uh the latest field versions has been pretty stable. So I think we're going out of beta pretty soon and.

B

Yeah one thing I kind of want to talk about is the production story is like when you want to shift to production. uh Let's add a script here: build feed, build.

B

So that is literally it you just run your own build, so anything that you can have working in depth. Theoretically, uh we guarantee that we we we guarantee that it will work uh in build as well. So if it doesn't work as expected, then it's a bug, we'll fix it, but you know uh the idea is uh anything that so we build it and we also give you a neat command called feed preview.

B

Which will just serve this directory that we just built, which is the this directory and it'll, serve it in production? So this is the production bill.

B

We do a lot of interesting stuff in production, for the production build and so in the features section or docs. Here there is a dedicated section here says: uh build optimizations um the native target. The default target build target for vt is browsers that support native vs modules. So by default it doesn't support ie11. So this is something to keep in mind. uh Veet is modern by default, but we do have opt-in support for legacy browsers, which I'll talk about in a bit, but if you're targeting modern.

B

Only obviously you don't need to do expensive, uh babel battle, preset m transformations, which makes the build faster as well. We automatically polyfill dynamic import so that it works. uh There is actually a support discrepancy between native es modules and native es modules, dynamic import, so we powder fill that to just make it even um we have css code splitting. So if you all the code, splitting in a v project can be done with just yes, module dynamic import. So we because we treat css as part of the module graph as well.

B

We can code split css. So if you have an async chunk a lazy route, all the css imported by that route is split into a separate file, and uh we also when you when that chunk is being requested. We fetch the javascript and the css in parallel.

B

Yeah then ensure the css is loaded before the javascript module is evaluated, so you don't get the flash of unstyled content stuff. So this is all done for you out of the box. You don't need to configure anything uh if you want to get the same working with webpack you it's another story like you have to look into: css mini css, distract plugging all this stuff.

A

The question that's come up quite a few times in the chat and I wasn't sure if it was relevant but um server side rendering without the.

B

A

This does this: I can imagine surface side, rendering being a really good story for v.

B

So v has currently experimental server-side rendering. uh So, yes, I can um setting up it from scratch can be a bit involved because uh because the idea here is um but but the idea here so let's take a step back and think about what servers are rendering, what we need with a bundler to get server side, rendering to work right.

B

The idea is, you want your code to be running in node.js as well, but we are writing we're writing code, that's using esm and um if you are not using like the latest latest version of node module latest version of node.js, with native es module support.

B

um This code won't run right because uh previous versions of node.js expects commonjs, uh and um what we're doing here is we provide a programmatic api called uh ssr load module. So this is inspired by some of the work that rich harris is doing in spell kit, uh and uh the idea here is: you can use feet as a middleware inside an existing node.js server.

B

So if you're doing server side, rendering you'll likely want to control the server yourself right, so you can use say express server, run feed as a middleware inside of it and then uh use this method called feed.ssr load, module.

B

And load it your server load, your server entry like this and that's pretty much it your server entry runs in node.js and it can use the same es, import syntax to load rest of your application. Obviously you need to make sure you write your code that is node compatible, but um you can use es module. Syntax and veet will transform these syntax on the fly into something that's compatible to commonjs, so it can run in node.js and um and what we typically do in a webpack based ssr setup.

B

Is we actually do a whole ssr bundle uh as you develop, so it uses webpack to bundle your whole application and output it as common.js, so that it runs in node.js. The the downside of this is obviously every time you edit a file. You are rebundling the whole uh application for commonjs and that is slow right uh with vt when you load this. All these modules are similarly cached individually, like just like in the browser right.

B

One of the reasons we want to leverage native esm is because each module is now cached individually, so we do hot module replacement. We're only invalidating the specific modules. That's being edited, similarly for the server side, rendering story, we cache all these modules, that's specifically instantiated for ssr in our internal module graph and when you edit a file. We only invalidate the certain modules that's affected by this specific edit, so kind of you can kind of think of it as hot module replacement for server side, rendering during development.

B

So you never rebundle your whole app also feet. Will smartly externalize dependencies that ships uh common.js, for example, uh if you use fuel or react right, uh react is already common js right.

B

So if you use react during service rendering you just require it, you don't want to say like bundle it process, it that's unnecessary because react shifts, as comes as common genes, so v12 detect all these dependencies automatically externalize them and uh when you import react it just it's actually just calling require react under the hood, so you don't pay the cost of like processing right as part of your bundle uh on every change, um and a lot of this is done automatically and we have this guide for server side rendering.

B

So um if you go to our github repo, we also have. uh Actually. I can probably show here.

A

So what you were just explaining does that also fall in line with the context of incremental builds.

B

uh It's different from incremental builds, so adults are still full because uh incremental bills are a lot more uh difficult. This is mostly focused on the development experience like when you're developing, okay, gotcha.

A

Yeah and then real quick uh time check. I know we only booked uh this this time for an hour, but okay, I'm good to keep going if you want to keep going. If you want to finish some thoughts, um it seems like the chat is really loving this so far getting the sort of hands-on experience and looking over your shoulder so cool.

B

So uh yeah, so if you're interested in server-side, rendering with these check out the the github repo, so we have this pretty comprehensive playground directory in the source code where it has these demo playground of all the major features, and these are two fully working server-side, rendering examples with vue and react.

B

uh So if you want to try them out just use these as references um cool. So, um okay, so of all this, I uh there's one thing I still haven't really mentioned up to this point, which is hot module replacement. So um I'm going to just create a new one say: cva is my local alias for create veed, app.

B

Feed view demo so our create. So when you run npm edit, add feed js, slash app. This is also the what you'll you'll see, so it will run the vjs create app application on the fly, and you can pick some of these existing templates that you can go with right. So I'm going to just go with the basic view. Template here uh see each view demo, I'm going to just use my locally linked feed, install the dependencies and I get so. This is a v3 app that's running on vt.

B

um Let me open this in code.

B

So this is very standard if you've worked with uci before this won't feel right at home. Right most of the stuff is the same. um So I obviously, if I edit something I'm going to hit the counter just to show that the hmr doesn't actually blow the state away right and hmr is really really fast. So the idea here is, um if you're working on a large application right reloading the page on every edit is obviously not optimal, especially say you have some page state where you're like.

B

I want to see how this drop down look like uh when I'm tweaking the logic or tweaking the style. You don't want to have the whole application reload, and then you have to reopen the drop down every time, so hot module replacement is uh one thing I believe that sort of um it decouples the feedback, speed from the size of your application, which is again like this whole idea of making things faster is because personally, as a as a developer myself, whenever I'm working on something.

B

If, if I know something is going to take a long time, I will be reluctant to do it. It just creates this friction just makes you less likely to do something it makes it makes you enjoy your work less right. So if everything is snappy and fast, you're, just you're a happier developer and happier developers are more productive developers.

B

That's what I believe right so um and how to make developers happy make their tools fast, um so uh so that that's the whole premise right so um here, if we take a higher level, look at what feed is uh trying to do here? uh Why don't we just use yes build for everything. If it's so fast, the the thing is, even if es build is really fast.

B

uh You probably don't want to rebundle your whole thing on every single edit right, uh because even it's fast, if it's going to get slower, slower the size of your application grows, the idea is, I want to decouple the added feedback from the total seizure application, which is why we need hot hot module replacement, but the the the downside, the the challenge that we've had in the past is like say with webpack.

B

I don't know why, but in practice, we've noticed that webpack's hot module replacement performance just degrades as the size of your application grows. Right technically I mean theoretically it shouldn't, but that's what's happening and um say in a large web pack, application you even with hot module replacement. It's not uncommon to wait a few seconds before it. The thing actually finally updates, but uh the premise of beat- or uh you know, other native esm, hot module replacement over native esm.

B

The premise is because each module is now cached individually when you edit a file, we simply invalidate the cache for that specific module and uh maybe the uh a chain an important chain up to other way where we can say this is a this is a reload boundary where we can re-import this model from here um so say when you are editing a view file.

B

The only thing that's being invalidated is this: is this file itself um so we're not doing any of the extra work saying like now: let's recreate a whole bundle so that then we reload the page right, there's nothing like that. All we're doing is say. uh In fact, if we look at the network tab.

B

Here, god, this is too.

B

Can I clear no not this one? This is.

A

Anyway, uncharted territory. For me, I've never seen such an active network tab.

B

Yeah so right, uh I think the cool thing is like everything is imported individually, and uh so here, uh okay, this one. So this is the only new network request that we made every time we edit we're just fetching an updated version of this specific file, and then we apply the update precisely so we don't reload the whole application. We don't need to do any bundling work and it just it's it's as precise as it can be. Did you mentioned.

A

uh Things like tree shaking does this um veep? Does it grab stuff, that's not being used or actively being leveraged.

B

Tree shaking is a more like a production concern, because during development you do you don't really worry about loading, a few extra kilobytes of code right in production. You do want to leverage cheat sheeting, but that's kind of what the bundlers do right so for production feeds still uses. Bundlers vit is built on top of rollup for production and uh in fact, uh v pluggings are a super set of roller pluggings.

B

So uh if you know how to write a roller plug-in, you already kind of know how to write a v-plugging okay, uh a lot of the the concept like resolve id transform load- they are exactly the same uh features, extends rollups interface to provide a few feed specific uh these specific properties or hooks, um so to make it uh easier cool. So um I think that's um that's pretty much it. I don't know if there's anything I kind of want to talk about.

B

We already talked about like built-in framework support, and I know there are a bunch of um spelt users working on a svelte integration for veed as well. In fact, um I know a fork of roll-up plug-ins fell. Just worked pretty much just works.

A

um There is a question.

B

A

Came up about just what.

B

You just mentioned.

A

About roll up and why not yes, build for production.

B

So the thing here is um yes: build for production still has a bunch of things that so essentially es builds es, build story for bundling and application is still a little bit incomplete. I would say I think, in the future, in the future, where yes, build, gets more robust application, oriented bundling support. Will probably you know it's a it's an open uh possibility that we can switch to it because we already leverage it a lot.

B

uh The thing here is, for example, you want to have more control over the chunk, rendering uh and the into cross imports the hash and then handling assets emitting files and then getting the bundle analyzing. The bundle optimizing, the cross imports and all that stuff with es build. That's sort of um you, don't you pretty much, don't get any control over the chunking processing?

B

Yes build right now, so that's something and I know evan wallace said he is planning to rewrite uh code splitting in es build at some point so, which is why we don't really rely on it. I mean in terms of bundling for apple, bundling applications. Roll up is still a much more.

B

I mean battle test and a more robust choice at this point of time, uh so obviously it's it means the production builder feed is going to be much slower than something that you know you leverage just build all the way through, but the benefit is you get you likely get a more robust and more efficient bundle uh for production.

B

So one thing you can do: is you can use es field as the minifier, so the default minifier is terser, but you can say v2 build dash, dash, midify es build, uh so it we can use es build as the minifier, which already speeds up the build by quite a bit, but um in most cases the bundle will be slightly larger. So it's a trade-off that you can make that make your call yourself. Are you willing to trade? Maybe five to ten percent? Larger bundle in return for faster builds. It's up to you.

A

Okay, excellent yeah and um I think the the last question would be: how can folks stay up to date with veet um check out the releases and are you taking contributions right now, as you're approaching the uh leaving the basement.

B

Yeah we have a lot of contributors already, so the easiest way to stay in touch is go to uh this twitter handle uh at feet underscore js. Unfortunately, the uh no underscore version is already taken.

B

I wonder what that project is yeah and um so vjs, and then uh we have already have a lot of contributors on github uh feel free to. Oh also, we have this uh chat.vjs.dev, that's our discord server. So if you want to join.

A

I didn't realize discord was um allowing uh domains.

B

Oh, this is just a custom. Redirect, oh you redirected. Okay, I wasn't sure.

A

B

Yeah so chat.vjsfeetjs.dev um you get an automatic invite into our discord server and there's a pretty cool community going on there um yeah and uh that's pretty much it.

A

Yeah, well I appreciate your time, evan and walking through this. I think it's a really good uh format and uh hope you definitely pick up on the the live streaming game. um Yeah folks have. If you have enjoyed this, you can definitely find evan. uh He has a twitter or sorry, he has a twitter, but he also has a twitch so um which you mentioned your twitch is different. Is it different than what's on the screen.

B

uh Twitch is the no it's the same answer: okay, gotcha, okay,.

A

So everybody just follow evan on twitch to make sure whenever he goes live, showing some some code. uh You definitely don't want to miss it and uh if you are interested in learning about more projects, uh definitely follow the channel open source friday. We do have a meetup group for notification reasons and uh I also live stream. So my name is here bw. That's who I am. uh I do a lot of github action, work which I didn't actually shout out. My new t-shirt.

A

uh It's in the get up shop at the moment too, so get it before it's sold out and uh with that I think we can go uh and in the stream. So thanks everybody.

A