Next generation frontend tooling with ViteJS - Open Source Friday

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 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 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 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 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 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 yeah and uh sorry i was just messing with the screens because i did see that somewhere oh here we go yeah french word 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 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 but 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 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 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 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 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 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 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 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 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 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 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 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 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 uh yes so i have these let's just ignore all of the existing stuff i'm just going to create a new can you explain what we're looking at too as well oh these are the node modules 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 a little bit okay let's just move it here then 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 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 is kind of like the uh so i use a lot of like mpx serve as a serve npm file are you familiar with that package yeah yeah okay so so far out of the box i can get a very similar command to serve the static files yeah right so 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 so it tells you it failed to resolve my js because it doesn't exist so i'm going to create that here and [Music] 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 so if you added your file here it also reloads page and you can see this main.js file has been updated and reloaded 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 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 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 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 so what it what's making that work is this 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 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 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 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 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 so this is a class name so i'm going to say [Music] 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 uh you probably have to go through a guide to teach you what css loader is what style loader is what i've definitely been down that path uh then you need to 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 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 so why are you looking for that there's some some question that came in uh the chat is there so someone like create react app is there like an eject feature or is you just get beat and that's it so 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 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 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 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 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 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 at the time and but i don't know how to get it like in my webpack config and there's sometimes there's some some hoops i have to jump through sometimes two different plug-ins that are competing against each other for for 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 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 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 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 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 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 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 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 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 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 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 um 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 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 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 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 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 you just give us the examples right here and like right in front of us yep 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 what is that tailwind css and the p 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 environment yeah that's just a thing that i do 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 with 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 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 uh ah i don't use tailwind css and just like tough enough i think something like class equals 3xl no 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 excel 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 wait it's not actually updating the index.html does it need to be uh oh because 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 importing the uh the tailwind library do you have to get out of the file oh there you go okay something changed 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 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 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 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 so i wrote some scss and i'm going to just link it like this 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 or you can do um something like this uh also works right so most of the conventional stuff that you expect that should work it probably will work okay um and this is because we didn't do anything here so i'm just going to change this to [Music] style.scss and reloads the page 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 make this work 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 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 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 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 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 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 well that's good to know 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 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 came to watch evan you write react yeah 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 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 it kind of just worked um so same for uh like so if if you use tsx 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 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 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 okay yeah maybe just 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 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 [Music] 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 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 webpack 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 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 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 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 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 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 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 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 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 [Music] from material ui core 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 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 yeah yeah there's speculation in the the chat right now 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 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. 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 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 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 questions from 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 so we are actually pretty stable for the past few weeks no major bugs left really so there are a few small edge cases 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 um 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 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 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 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 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 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 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 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 speed that this does this i can imagine surface side rendering being a really good story for v 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 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 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 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 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 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 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 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 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 so um if you go to our github repo we also have uh actually i can probably show here so what you were just explaining does that also fall in line with the context of incremental builds 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 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 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 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 [Applause] 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 um let me open this in code 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 [Music] 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 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 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 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 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 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 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 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 here god this is too can i clear no not this one this is anyway uncharted territory for me i've never seen such an active network tab 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 uh things like tree shaking does this um veep does it grab stuff that's not being used or actively being leveraged uh 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 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 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 um there is a question that came up about just what you just mentioned about roll up and why not yes build for production 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 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 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 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 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 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 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 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 i didn't realize discord was um allowing uh domains oh this is just a custom redirect oh you redirected okay i wasn't sure okay 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 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 uh twitch is the no it's the same answer okay gotcha okay 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 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 thank you

Channel: GitHub

Views: 14,414

Keywords: git, github, collaboration, programming, version control, open source, software development, octocat, innersource, enterprise software, vuejs, vite, vitejs, build, npm, yarn, rollup, webpack, bundler, bdougie, youyuxi

Id: UJypSr8IhKY

Length: 69min 57sec (4197 seconds)

Published: Tue Feb 16 2021