Evan You - Reimagining the Modern Dev Server with Vite

Full Stack Radio


Want to have you on the show. I think had you on like three times or something recently. You a kind of have been working on released early versions of a new. I guess you'd call it like a bill tool slash development server Called so what's gotTa Store I? Yeah Yeah it's funny I was. I was having trouble finding a good term to describe what it is. So essentially it's it's a combination of deaths over plus built step so I don't really know how to define that because I guess like there are some similar projects in the ecosystem like Something some projects are just a death server. Some projects are just a Butler like roll up and some projects are more like all in one parcel but parcel is still like built on top of the concept of a Bundler and so the the core premise is I think bundling should is unnecessary or should be done as little as possible during development and idea actually came up a long time ago like a year ago so before I started working with you three actually I realized Oh you can use style. Type equals model in modern browsers now so we have the ability to use native. Es module imports directly in the browser. So why are we still trying to use a Bundler to analyze these imports statements in trying to stitch all the together when the browser can just parse this and import them as suspect? So the idea. Okay so if you have a local error that when you have a deficit you can intercept all these H. P. requests to the server right. So you get to do anything with them you can even if you get a request for non Jaaz file you can transform into a jazz file and send it back as a jazz file and the Browser is fine with that right. So that leads me to the idea of what if I can compile a view on the server and sent a back plane J s so that led to a project view Dev server which is now archived but that was essentially the first proof of concept? For what later on turning to so that was actually Working version a native. Es Import based Steph server that allows you to just import of in the browser and it will just return the compiled view component directly. And that worked out really well right. And the you know in terms of development experienced nice thing is it's not really any different from starting a static file server so instead of having to wait for a build process a bundling step. I guess if you've worked with WESTPAC kind of used to every time you started server is like waiting to compile four five seconds later in finally the Browser But you know with this approach. The several almost starts instantly like less than two hundred millisecond. Because all you're doing is starting to listen for request to not doing a bunch of work and then Louis. Right quests right so there's literally no work to be done when the service starts and the real work only starts. When the browser starts sending Pete requests an assigned benefit of that approach is We will so. The server will still have to compile these files right but the the import graph crawling is down by the browser. The Browser Analyzes Your Java script and decides what file to fetch next so the only thing the ceremonies to do is to take these requests and decide how to compiled and send them back so there is still compulsion happening but the compilation is happening on the new site. So you can use any no jazz tooling to do the compilation as we can literally support anything and when you sent them back the cool part is the server only needs to compile the files that are actually requested right so imagine if you have a huge project of five thousand files but these five thousand files probably are related to twenty different screens. Yeah and now. You're working only one single screen which only be have a hundred files then. The server only have to compile those one hundred dollars to make the current screen work unlike a Bundler. If you start a bottler in dot project has to actually craw all five thousand files compiled them access? Just has to do the same thing which is compile every single fun. Yeah exactly so. That actually is a pretty convincing scaling argument when you project gets big. So that's essentially the core premise. That let me to sort of push this a bit further so in the beginning. I was only focused on compelling view because I personally really wanted adapt server that conscious work like simple to be server and but allows me to import view files but as I worked on it I realize. Hey this is really nice and It can actually worked for any file format. Not just you files right. So I added support for t s that's CSS Model and turns out. It's pretty straightforward as support for these kinds of things when you have a right architecture so internally the server is a car server and all of these different things are just a color middle. Wears that's injected so each middleware will look at a request. See if it's Oh it's a file than out intercept this one component it back. Yeah that's really CL- yeah. What was sort of the motivation? I guess like was it just because he thought this was an interesting idea and it was like. Why isn't anyone pursuing this or is it? You know I'm running into actual pain points with the current setup and I need to come up with something better. Yeah so. Funding is the roots. I mean I had the idea so I mentioned I had idea last year. But that was of just like Random like what if we can make this work but I didn't push it further because I felt like at that time I had ninety two module replacement and didn't support like resolving dependencies from note modules. So it wasn't really anything close to useful for a real project but this is I was looking at it. I realized hey like this would potentially actually work and if I can make this work. I can reviewed rebelled view. Press on top of this instead. Wet Pack so the the core frustration that drove to all this was when I was working on if you pressed documentation side and it took like five seconds to actually boot up the view press server to me to be able to edit a single mark now file so house like I've had enough with this Like this shouldn't I shouldn't have to wait for five seconds to just to be able to enter the dockside right. It's all static files so and I realized. Oh like veto model is perfect for this. 'cause like when you are working on something like of you press cite. You're always almost only working on a single page right. And that's angle pages is a huge component to. Why would I have to compile all these other pages to for me to be able to work on this page so That kind of kind of clicked? Okay like if I can make this work. Then I can rebuild view press on top of this so it's kind of like it started out as an attempt to rebuild view press but then it kind of turned into his own thing I realized. Oh it's more than just For satisfied generator. It's actually a fully capable deaf setup that can support a lot of use

Coming up next