devMode.fm // Inside Vite.js 3.0 with core team member Patak

Episode 131 / 2022.07.18

Inside Vite.js 3.0 with core team member Patak

Andrew Welch

#vite #JavaScript #frontend

On this episode, we talk with Vite.js core team member Matias Capeletto aka “Patak” about the next generation frontend tooling Vite 3.0!

We’re joined by guest co-host Michael Thomas, lead dev from Percipio, to talk about what makes Vite.js so loved in the developer community that it’s had a stratospheric rise in popularity.

We delve into all the shiny new things in the newly released Vite 3.0, and get a peek into the massive community behind the scenes that helped make it all happen.

Patak also drops the news that StackBlitz is sponsoring the first Vite Conf, free online October 11 – 12th, and will feature speakers from all facets of the Vite ecosystem.

0 comments

Andrew: Hello welcome to devmo fm a podcast dedicated to the tools techniques and technologies used in modern web development I'm Andrew Welch from and ny studio None and with me I have Michael Thomas the dev lead from percipiio how you doing Michael.

Michael Thomas: So I'm doing great. Thank you.

Andrew: And today we're gathered together to talk about vet all about this thing called viet and we have a very special guest in Matthias Capeetto the ve core team member how you doing Matthias all right? So Matthias.

patak: Fine here. Thanks for the invite happy to you? um.

Andrew: If you were hiking up the side of the cerro chatto volcano in La Fortuna Costa Rica and you're hiking up the side of this volcano and it's it's a 3 hour hike just to get the top of the volcano. You're hot. You're sweaty. You get to the top and it gets even steeper the steeper you get up. You get to the top and you crest the top of the volcano and you look out and you see this beautiful Emerald Lake in front of you but you're dying of thirst because it's so hot and sweaty and you forgot your water bottle. Your guide is with you and the guide says I will give you some water to drink Matthias if you tell me. Tell me what this veat thing is what would you tell.

patak: How much time I have like I am very certain and yeah, that's okay I have to rush the pitch then nice. Yes, wit is a development tool when.

Andrew: You have? well you get to drink after you tell him though, That's right.

patak: You build applications. Normally you are not developing in. Let's say atml Css and Js only but we use some modern patterns. For example, maybe you're using a framework a ui framework like Vue or react and then you're not coding like in ah something that the browser understands. So you you will have like a v file that has some custom sy taskk or like you will have ja ses or you actually want to type your Javascript and you're using typescript like everybody else right now and then you cannot anymore give this to the browser directly. So here comes like um like tooling to help us convert these to something that the browser understand and normally like for a long time webpack was king of of this segment and it still is like around at this point like 20 times they't know lots of it but it is growing a lot and bit is like a development tool like webpack. But that takes advantages of some modern advancement in the browser that lets lets us like cut a lot of corners. That the webpack team had to have to do before and so first is like esm support in the browser we have like a ah full module system that that we can use and what v does is that during development instead of like. Having to compile transpile all your application having to crawl everything that you do and a machine that you have like a complex application that have like none of pages and like or ah Sba that have like very complex roots instead of like having to wait all the time to build that to give to the browser. It will. Directly start a server without waiting absolutely anything and without doing anything. That's why it start fast. It doesn't do anything at at all and then the browser will just start to request the index itml none and from there it will give the modules. And the browser can understand these modules because we have esm support. So that's the none thing that is an unbundled dev environment so that is the.

Andrew: Well, you're you're starting to turn different shades of red you're wavering a little bit on your feet I'm not sure I think you better you better tighten it up and and and quickly finish what you're saying because you want that water real bad. Yes.

patak: Ah.

patak: if I if I have a computer there I will say like TyVDotNew and see how fast this thing is and then give me the water.

Andrew: Ah, all right? So I guess to unpack it a little bit so vet is a build tool or a bundler that allows you to use Modern Frameworks and Technologies and writing in code that the browser might not understand and compiling it down to something that it does understand. And it sounds to me like because Vt is able to leverage the platform. It can be faster than webpack would that be considered one of the big selling points over something like webpack the speed and.

patak: Yes, like it has like 2 parts like during development. The the thing is like it's hard to call it a Bundler because it's not bundling so it is like unbundled environment. We have to even like put the contrast there because we are so used to bundling that we have to say like this is an unbundled but this will be the the natural thing.

Andrew: Ah, right.

patak: Naturally, if youre if you are just called in Attml I guess and Css it will be unbundled like you will just give that to the browser and the browser will crawl and do the imports and the import will give another imports the difference with v is that the dev as you said like because the browser doesn't understand typetri it's actually like ah a very smart. Server that instead of directly handling the file from the file system will transpile it on the fly and remove the typeon tri typescript will like um transpile jsx and like the same with Vue and we'll give something to the browser that can understand so that is the Dev part and the other part.

Andrew: And that is the coolest part so when I first got interested in v was I wrote a little bit of Html and then I did a script source equals app ts and without me doing anything. It worked. Just like you would just type a regular script tag link for a Javascript file I linked to a typescript file I did zero setup I did absolutely nothing and with the dev server running the v dev server running everything just worked I'm like okay. That hooked me like I was I was ready to to find out what this thing was about as soon as I saw that? yeah.

patak: Yeah, yeah, you can see it like some like plug that you put in the browser and now it understand everything So like all like everything of the modern patterns and then you have plugins to actually do the rest and the the other part that is important like in the pitch is that Vts. That for development but during production we of course need to still bundle to get like a very like minify like 3 shake it like the the thing that webpack does and there it is not specifically faster than webpack. Maybe it is like for because we use esv for some parts.

Andrew: Right.

patak: So if you use webpack like raw by default like bitco be but v is using Rolelap there in buildtime and it's a very like battle tested solution that will give you like a really really good production and like banddle to use and this is important because with.

Andrew: Yep.

patak: Actually works because it take care of both things for you like directly out of the box. It will give you like a very good dx during development and like the best like experience for your final users so there is no compromise there that you will have like a good dx. But then you have to compromise.

Andrew: Yeah, so in local development effectively a little proxy server is running and whenever a file is requested. It intercepts the request and it says oh this is typescript. Let me compile it into typescript for you. Oh this is Vue let me compile this view component or.

patak: Users.

Andrew: Template or whatever it ends up being and that's the Dev part and that's what makes it super fast in addition to the fact that it uses this thing called es build right? So wanted to explain just briefly what es build honestly like most people don't really need to know how it really works. But what is what is es build.

patak: Yeah, so e has built is a go Bundler and there like it's really knows how to very very fast transpile jsx transpile types not not type checking but like a strip the types of typescript actually like a convert. Some other syntax to another target like what you you will use like babel for so it knows very fast. How to do this and you can use it as a bundler that that will minify 3 shake or you can use it to just sp a single file and in indeed we use it for optimizing your dependencies that we can talk later about that. We use it for transpiling shia second typescript we use it. Also for minification like in at build time by default. It is es build the one that minifified both Js and Css so we kind of like the Bundler is rolled up but. Yeah, es build is actually like in every piece that is very intensive. Esb is there to actually help us speed up that part.

Andrew: Yeah, and it's nice that we are explaining to people that how this works you really don't need to know any of this when you're using it all. You need to know is that es build is written in go which means that it is going to compile down to essentially native code. There's ah a runtime but whatever so that it's much faster. Then running Babel as javascript that interprets all this stuff. So it's going to be significantly faster than that so we've got this little dev server that we're running locally that allows us to do things quickly. It will grab all these things and transpile them for us so that we can write in languages the. A modern browser understands. But maybe our dev targets don't understand so that's really cool the other really cool thing that got me when I was none trying vet was the amount of config that you need to get this up and running is. It's tiny like I'm I'm someone that has written some very very elaborate webpack configs I know it inside and out. So. It's not well. Okay I know it pretty well I'm not going to say I know it inside and out. That's it seems a little bit too much so it's not that I'm afraid of it but man I loved being able to set up.

Michael Thomas: So.

Andrew: Ah, build setup for vet that didn't require all this chunk like out of the box. It works wonderfully and then you can mix in some other stuff and you don't really have to do anything so that's another type of speed right? Michael is the fact that you're going to spend less time tweaking config. In addition, there's speed of you know compiling and all that kind of stuff but is real nice that you're not spending none of time on config I know that you have been using v you have any thoughts on that.

Michael Thomas: I have started using vt from the beginning. Um roughly I Have to say we we switched over from webpack to vt and everything within our team right now is speedier. Um, it also helps a lot of well. Less experienced developers in our team. They don't have to like like with webpack. Sometimes you don't know what something does. It's like what am I doing over here and right now with with when they see a vi config they're like.

Andrew: Yep.

Michael Thomas: Ah, yeah, this is simple. This is probably ah reading the view bit. Ah this is probably generating a favicom. It's just there. It's It's quite obvious for them and I can definitely say V sped up a lot of things for us or developers are on board. Definitely our local deaf is a lot faster with that or deployments are faster with it. So We are very happy with that.

Andrew: And you and you might say well. Why doesn't webpack just do that. But as Matthias mentioned earlier webpack has a whole lot of history and it was originally developed in a time when browsers couldn't do any of this stuff. And we've reached the point in the platform where it can do esm and es m is ecmeric script modules I must say that again. Esm is Ecma Script Modules and ecma script is the it's an international standards body that implements sorry and. Ecma is an international standards body and ec went is that no, what's okay, what's the standards body that does it ecma script is the name of it. But what is the standards body. Do you remember? Now, there's some standards body hold on.

patak: Yeah, in the chava script is Dc thirty nine I think the.

Andrew: All right? You know what? I'm not going to do it now and and ecre ecma script is the name that Javascript is known by in this standards body that oversees it. So yeah, esm just means Javascript modules like whenever you see it just think of that as natively supported by the browser. So as soon as a platform was ready to do all that then someone like Evan you could come along and say hey you know what? Why don't we leverage the modern features of the browser and make this super fast local dev environment because we can assume a lot of things now we can assume a lot of things are modern in the browser. We don't need a ton of config. The config can be simple and easy to go man. Those are that's those that speed both in terms of the development and also not having to spend all your time doing config. It was like a revelation to me Matthias it was amazing.

patak: Yeah, yeah, there like that that you say iss like 1 like something that's very important and shut out to parcell. Also there because they were kind of like the None pushing this idea. For example, the idea of the index itml be in your.

Andrew: And was so happy to find V and switch over to it.

Michael Thomas: Definitely.

Andrew: Right? so.

patak: Entry point. Um for that is more natural. No like I'm from there ah like going to like as you say like I just add a script tag and like it understand and something that is yeah exactly exactly.

Andrew: I Felt like I was back in I felt like I was back in the the early two thousand s like I can just throw a script tag in and it works in it. Yeah.

Michael Thomas: So yeah, exactly.

patak: And something else apart from the advancement at the technology level like on the standards level. It's also like ah the standards kind of or quasi standard in the community. So like webpack when it started. It had to be like very configurable because everybody was doing something different. Because we have like ah a lot of experimentation ongoing. But after a while we are now like okay we are using Css modules and we are using post css and we know how when we import Css we know what we expect to happen so vt is actually able to have a lot less configuration because. The scope is a lot thinner because we actually we say no to a lot of things we are able to say no more easily maybe than webpack because their rollla plugin system is like so wonderful and it's like very like. Flexible and easy to use. So it is a lot easier to say to somebody look like that feature that you want is I know that it's None linescing core. But if we say yes to 3 lines in core None times that week then this is going to be a mess in the future and.

Andrew: Yep.

patak: Instead of that we can say look I You can directly implement it with a plugin and if you cannot I can try to give you a low-level Primitive So like not only what you want to do is possible but like a lot more that this is what V does with the. Like rollout plugin system that it extended a little bit to actually accommodate to to vt itself and also configure the Dev server and other things.

Andrew: And this is a key part of developing any kind of complex software is building it so that it it is deep not wide in terms of the the code surface that you're working with. And you need to build it sort of like an onion or in a modular way and you do want to keep the core relatively small but still be able to to support those outer rings that kind of need to to grow out of it and use it. Ah, none of all I want to say that some people are probably listening to us and they're saying Matthias Cappaetto I don't know who that is.

Michael Thomas: So.

Andrew: I should have mentioned that you are widely known as patu. So anyone who has seen you you have been amazing and incredibly active in the vet community. It's been fantastic to to have you there So I just wanted to let people know your pseudonym and also shout out for that and then you were mentioning about the.

patak: Yes.

Andrew: Complicated webpack configs I got a confession to make Matthias I have some upcoming consulting work that an agency is having me come in and one of the things that we're doing is sorting out their webpack config and I've looked at it and I've gone over it. And I've done none and none of webpack configs and my confession to you is I'm going to try and push to just get them if we're going to refactor this thing anyway, why don't we look at just switching it over to ve I'm going to give that a shot because I think there are times that it may make sense to do that if you have a huge. Legacy codebase and I'm going to consider this webpack config the way it has sprawled. It's like urban sprawl the way it has kind of grown I'm going to consider that to be tech debt and if we're refactoring it. Maybe we should look at refactoring it on something more modern.

patak: Interesting. Yeah, and again like all this idea that vt implements the modern standard Probably a lot of that config. It is to implement some of the things that we already does So like this is this is what allows people to also migrate.

Andrew: Yep, yeah.

patak: But say and another thing that I think is important to what you say like mention in Evan you like the config is also easy to understand because Evan you and the vue team had none of experience building vuec like so this is not like even you like woke up one morning and say like I will create this config like this they had they actually did view c like using webpack and they had none of experience in dealing with like the rough edges of ah edges of that config. So this is why it. Inform it a lot the development of of bit.

Andrew: I see that's not how I imagine it I imagined that Evan you woke up in the morning at at his now luxury mansion in Singapore he woke up and he he rolled down in he had some nice. Coffee that someone picked the coffee beans right from the Bush outside of his office. He fed his lions and then he said oh this is the way I'm going to I think I'm going to make ve today. That's the way I envision it. That's the way it happens in my brain anyway. So I don't you can tell me whatever you want it. It doesn't matter.

patak: Ah I'm sorry Okay, let's keep that image then.

Andrew: Um, but I want to take ah a step back if I could so why are we not just writing in javascript like regular old javascript linking it in a tag and calling it a day like what is the point of these tools like webpack and.

patak: You know.

Andrew: Gulp and grunt and Vida and you touched on it a little bit that we're writing stuff that the browser doesn't support but like what what does that mean? what? what reasons would I have for using a tool like this for this.

patak: Okay, yeah, 1 1 big one that I think like a lot of people will relate is th strip like we said, but that 1 may not be an issue in the future if types as comments actually actually pass it. There is a proposal right now that is going to say like.

Andrew: So yeah.

patak: Like what is inside of the typescript type like it will count as comment and you are going to be able to send it to the browser without transation but there are other things that never will happen like that like dot vue files for example or react or actually for example, like importing Css modules. And you need like if you want for example to import a css module that you want that css to only apply to the component that you are importing it. You need tooling to do that you need like the browser will not know what to do? The browser will just ah like. If you like add a script at a style tag with the css it will apply it to all the patients. But if we want to work at like a higher level. Let's say because we identify that working with components is a good idea for example because you can't think of. Like pieces and then like building like like like galleo blocks. So all the fra the ur frameworks went there and actually they went a step farther and react said. Okay, look like we can use jsx and this kind of instead of looking like function calls. It looks like atml markup and then you can give this component to someone that doesn't know show script and maybe they can tweak it a bit like actually you need to know a lot of Javascript for react, but more with hooks and everything. But anyways like you you see where this is going and if we want that like None things. We cannot put all that on the browser because every time that you put something in the browser you like crystallize it you solidify it and then you cannot change it anymore. So we need to keep a lot of these.

Andrew: Yep.

patak: On User line and vi and the the kind of tools like Babel webpack and all these tools allow us to actually like go wild on the user side and then like and have the dx that we think is the best for building our applications and then. Keep the browser simple set up but simple is a way to say it is a amazing machine. Very complex.

Andrew: Well, even if you're a luddite and you just want to write in pure javascript. Maybe you're ah you're a vanilla javascript aficionado and you just want to write in vanilla javascript you know for whatever reason that is what you have accepted something that v is kind of wonderful about I think is. That you can take advantage of this thing called hot module replacement where you can be writing stuff in all these javascript files. But when you make a change to one of them. You don't have to do a full browser reload. You don't have to do any of that stuff it instantly patches into the runtime just the changes that you've made. The Javascript so you literally can do hands-off coding where you can have the browser over in None window and your javascript code. You're working on over in the other and you can just type and as soon as you save because vt is so quickly because vt is so quick. It will just inject just the change. It won't reload the whole page and you'll see the results of what you're working on over there. So even if you're not using any of these things like Vue or typescript or jsx or react or any of these things. There's some really cool advantages to having. Be be something that you use I think and hmr is one of them at Michael I don't know if you've been using hmr in your development. But for me, it's been life changing. So.

Michael Thomas: We we use it. We use it all the time and it is definitely a life changer imagine we at percipiial we work a lot with few and we have a lot of Api calls and and and nowadays pina stores and. Anything along the lines and something that I really like about vt what I never really got to work nicely with webpack. Um is vt even hot does does the hot module reloading inside of Pina which makes our Api calls every time you need something different. Or data or anything along the lines. We just make the object change and we see it directly in the browser. Um, we sped up a lot of things simply by that and if I need to compare vts with what webpack used to have vit goes quite instantaneously even in webpack if you made a.

Andrew: Um.

Michael Thomas: A little css change sometimes you still had to wait 10 to 15 seconds before it showed up and just for that feet has been quite a life changer on that front. So.

Andrew: And and part of the reason that's able to happen is what Matthias was saying before webpack assumes everything needs to be bundled so it will bundle everything down. It does some caching and some other smart stuff to try and speed it up but vet doesn't need to do that. And ordered for it to work because you're just working directly with the thing which is is pretty amazing but mattus you made an interesting point about we may be getting types in javascript I view the javascript ecosystem and and really a number of different.

patak: Yeah.

Michael Thomas: No.

Andrew: Ecosystems in frontend development sort of as petri dishes for trying different ideas out you know, seeing what works and seeing what doesn't work and the good ones then end up being adopted by the core platform and then rising tides lift all boats then we all get you know this great new feature set. But without people doing that kind of work that the browser can't do using some kind of tooling. We're never going to arrive at really good standards that should be implemented much better to have people trying things out figuring out what works and then implementing it rather than a committee going. Oh you know I think they really should have x y or z. Fun thing about typescript and I'm I'm a big fan of typed languages. But for anyone who doesn't know the person that created typescript I'm going a butcher's name. So I apologize is Anders Anders Hellsberg and he's someone that was formerly at a company called borlin software any old timers out there will know who that is. Know who that will know what that company is he created turbo pascal. He created Delphi. He created c sharp and in 2012 he started creating typescript so you got someone if you kind of roll your eyes when you hear about typescript you know is this you know, just the hot new fad. It's more than that man. It's a really important technology and None of the coolest things about typescript to me is that if you strip out the types in typescript you're left with Javascript literally a search and replace of the types that are in typescript you are left with Javascript that runs and execute so it's a brilliantly designed language. And that regard. But I also think it may be driving the platform forward I mean it's great if javascript gets types then fantastic. Then we don't need that anymore but tools like vite sorry tools like vet allow us to do things now that we are unable to do with the platform.

Michael Thomas: I Fully agree.

Andrew: And allow us to prove things that are going to be working maybe should be part of the platform and I think that is a critical piece of technology.

patak: Yeah, ah there is kind of a balance like I totally agree with you but kind of like consistent at 1 point when maybe too much into for example, babel and then we were starting to like kind of like need that.

Andrew: Yeah, yep, yeah.

patak: Every time and this is the idea that like makes makes you say I I'm using V and I feel that I'm back to that all time where I kind of just like throw some atml and seed and that's it and and you feel that the tool is kind of disappear on the back and that should be. Like the tool like it's cool to be talking about V but the idea will be that you don't feel it. Yeah, you don't experience it. You know like it's just like it works is there. It's doing what it has to do and and then like so we went to a point where like the normal thing was.

Andrew: Yes, yep.

patak: Ah, spending maybe ten ten seconds on hotdmon replacement. So this is why like it feels so refreshing to go back that is weird but is that that is what they feel refreshing and also this instant feedback loop. It's it allows some qualitative changes. It's not just like about like maybe. Like let's say like a split none against 10 seconds it is about what it what it enables you to do for example, like if you change a color with a slider and you are seeing in your code and you're seeing that that color reflected in your app instantly you you are not just. Doing a change and then later seeing how it looks you're exploring and this exploration is only possible if you have an instant fidal loop like the the idea of grabbing a slider and change it by like exploring and saying like it's not that I picked that color. It's that.

Andrew: Yep.

patak: I I went there and said like this is the one that I want so that that is just amazing.

Andrew: So it's transformative in terms of how developers work right? and it's not just that it's fast and it's good for the developer experience because I mean that is a wonderful thing. But it's also that all of this tooling really is meta work. In a way. It's work that we don't want to do right? It's not a part of what we're actually trying to accomplish so the more that metawork disappears from the equation and you are closer to what you're working on and what it looks like That's where you're spending your time. Where you bring the most value which is what we want to be doing There are very few front-end developers that are like I can't wait to spend the next day doing a webpack config before I can do this project that my client is breathing down my neck to get done. So it's transformative in terms of speed from that perspective too. You know it makes it's just.

Michael Thomas: So exactly.

Andrew: It's just an amazing piece of technology but I want to talk to you a little bit about we've got something coming up called v 3 is that correct and what have we got going on in v 3

patak: Yeah, so like none like why are we releasing a new mayor. So the previous one vibe where like it was I think March March or February of like None on we decided that we are going to release one mayor every year to be able to synchronize with node NOfLife so no not None we support it in vv 2 and now like in at n of air period. None end of life so we are going to take that opportunity do a mayor.

Andrew: Got it.

patak: Ah, stop supporting None and this allow us to better like maintain with with like easily and also it allows us to remove thereations because like all all the things that we accumulated is not that much but is is good to actually not wait. Maybe 5 years and do a very big mayor that then later is going to be extremely costly for like a ecosystem that is already quite cute invid to move on so we are going to take the pill like once a year and maybe like it's going to be like two months of development and then we are going to. Like tried all ecosystem together to move to the next one and keep like vp as clean as possible. Let's say so in in v three like there are like some big features. It is like we are going to distribute it as esm by default and the yeah essr. Build is going to be also esm by default and this is going to allow us to remove some externalizationalistic that we had that for cshas that it was quite complex so we are allowed to simplify there. Ah the biggest change from like. What what? I think like is the most important in v three is that we envi you when you are in depth mode. Your dependencies are optimized by es build this is to try to make. For example, if you have loaddash with 100 files make it a single file that we can give to the browser. Because this unbundled thing is beautiful. But if you have 2000 files the browser needs to load 2000 digital things and that doesn't sound that good. It is solvable because you normally should be code splitting your application and then you normally are not loading that many files. Together. But for your dependencies it can it can happen and yeah esb is there to actually help us very quickly transform that in something that the browser can't consume without choking and also for cshis dependencies esb transforming to Esm something that esm can't consume with some interrupt. So that that was the depth side and the build side we were using plugin command js for transforming csias to esm is a very good plugin. A lot of work from the Rollup team There is an official plugin and very bad to test it so that is awesome, but the problem with v is that it's doing. 2 completely different things with your dependencies in wi andep and that is the worst kind of issues because if you have some slight difference that will actually make build not work in exactly the same way as dev then you are going to Lose. Trust.

patak: Let's say indep mode this is something that we care a lot in wi and in v three what is happening is that by the default plugin commandches is no longer going to be used and in build time your dependencies are going to be optimized exactly the same way by e build that duringep so this remove. None of the biggest differences between the 2 environments and and that is awesome like like we we were able to like close directly a lot of issues that we had just making the None things work in the same way.

Andrew: And if I could just real quick CJs is common js there's also Amd there's also umd these are all just old ways of doing javascript modules and esm now we've got native modules might as well start embracing them everywhere right.

patak: Um, yeah.

patak: Yeah, yeah, and Cshas was the the the way that the node platform was doing models for a long time until like now everybody' is moving to esm but that is a transition that is taking a lot of time and for example, react distributes with yeah esm only sorry with cias only. So.

Andrew: Right.

patak: We need something to transform that you're not thinking about that thing because again webpack take care of that for you or like the tool that you use take care of that for you so that is something that is also quite important then they are like Dev Server cholester improvements like.

Andrew: Right? so.

patak: Some of the things that we did duringn build time actually help us during dev there there isa like a good like thing going on between like the thingss we do in dev and build and how they help each other we have like new Docs like kia from the vue team did some amazing work with a new default team for vithpress. They are about to release the v None version bitpress is like a Docos Soros or some like tool for making documentation using power vi v and vam vue together. It's amazing. Yes, and it is what power the documentation of vi vitess and ah like vue.

Andrew: I use it. It's fantastic I Love it.

patak: For example, a lot of the tools in the ecosystem are using bitpress so we have like new docs it like looks very very good. A lot of like little improvements in important a globe was some worker like all these like features like we are using the mayor to actually do some. Small, clean apps like there is some migration guy that is like a page like it is very like easy to migrate and you will get warnings if you are doing something that you are doing in v 2 and you should be great so it should be pretty easy because again we are making it like once a year and so it should be pretty easy to be great. And then we have some experimental features like something that is pretty interesting is like base support was like for I seen like for like also the kind of stuff that you were doing like depending on how you deploy it. It was kind of tough. You had to do like like some reg ex mashing there to actually be able to modify the path that viid was doing to work for you and what we are getting is like direct configuration to be able to say like I want my assets will be in this cdn.

Andrew: Yep.

patak: I won must my public files I will actually grab the public file that you put in the root of the these and I will put it in a different cdm because that are not hash so I won the different ca strategy. So like all that will be enabled is this experimental because we are the finding the api. Also it is going to be like at 1 point go out.

Andrew: And there's a change in there that is really important to me so I'm going to be really selfish and I'm going to talk about it now. So I find myself ah sometimes working on projects where the front end is not an spa.

patak: Yeah.

Andrew: The frontend is larivell or the frontend is Krafcms or it's some other system where we actually are writing in some other kind of a templating language but vte is still so awesome that we want to use it for its Javascript capabilities or. Doing our view components or whatever you know? Maybe we're not doing a full-p page view app but we're using view components at various places on the page. None of the really cool things that is being added is when you do a build. You get a manifest of every javascript and Css resource that's in there what has been missing in the past is. Assets that you pull in like images that you pull in now if you reference them from javascript. It's great. It's no problem. You can just import blah from blah and you can do whatever you want with it. But let's say you're doing a build and you need some of these assets in Javascript but you also need to access them from your frontend templating system. 1 of the changes that I saw that got merged in there very recently was one where the manifest is now going to list any of the assets that are imported to if you want so all of those files are going to be in there with their hash file names and you can look up any assets just like you could javascript previously and for me. And a lot of the work that I do that is it's huge I realize if if you're in the Javascript world and you're like I don't care I'm writing everything in javascript then it doesn't matter. But it's actually a big deal for situations like that. So.

patak: Yeah, yeah, and and that is amazing because it is like all driving by this very strong community of like backend integration that that there is in in v like the Pr was implemented by like people from these communities like we have. Ah, people like for example, like maximo from vruvi like you know senseive from ah like doing vila ral that now actually share that this official like the core team member of label did that the official plugin now they release it as thing like last week was or like yeah or this week previously this week and.

Andrew: Well and that's that's big news so we're we're talking about how popular vet is becoming Laravell is adopting vet by default right? Yeah yeah.

patak: That is yeah ah as a default it's it's amazing. Yeah I wasn't expecting. They will go for the default I was expecting some kind of like ah opt-in but it looks like they tried they make the plugin I think and experience was. So good compared to previously that they decided that this should be the experience for lve developers so that is huge actually like Laraville was the none community that embraces vue for example, like the the the first very big one like Evan always tells about this that.

Andrew: Yep.

patak: When ty ty tweeted about like hey Vue looks cool. Let's use it and then like Vue like just went to the roof and this is going to be huge for vt also and ecosystem is already like quite like amazing the week like Nas v v 3 that now is they are in Airc. They are using vi by default too as the sl kit that is the official as wed like kind of like knacks or nextq ah equivalent in as well is powered by vivid an astro that they they were the creator of a notepack. They at one point they switch it also to to it and they.

Andrew: Nice, yeah.

patak: Quite involved actually now in the development of it. They have massive amount or amount of experience and it's very valuable to like the development of it too like there is.

Andrew: So what we're trying to say guys is vet is kind of a big deal right.

Michael Thomas: So yeah, definitely.

patak: Yeah, it's very. It's very interesting and also that what what gets very interesting is like because ecosystem is so close to the development of core and a lot of the feature like are driving by the ecosystem. There is so much let's say like work that is. Done at the same time. No like people like you that maybe care about the backin integration gets a lot of feature from that side that myself I don't have much experience with that in particular but it's it's not a problem because we have like very strong like ecosystem contributors. Let's say that like actually like I care about different parts and that is something that in in v development like we care a lot about like Evan when he decided that he will actually create the team and actually made the development of beat like community oriented like I think that.

Andrew: Well that is.

patak: He did a very good move there and unolative. Yeah.

Andrew: Yeah, well, it's going to be. It's going to be much stronger by getting developers that are coming from all different perspectives working on it like I originally was trying to track down an issue in Vt.

Michael Thomas: Um.

Andrew: And I was trying to get the get it up and running locally. So I could actually work on vet and I found it really cumbersome to get it working properly and I've been doing a lot with docker lately docker is something that the Javascript community as a whole is just like what.

Michael Thomas: Yeah, yeah.

Andrew: Like what do you use that for you know, but I instead of just trying to get it up and running locally I built a a docker image that basically allows you to spin up vet so that you can work on vet inside of a docker container and you might say oh that sounds crazy but that lets you pick exactly what version. Of all the stuff that you want to be working on and it can be totally separate from different things like you may be working on a project and it's a legacy project and it requires node None and you just have no choice but you also want to contribute to vet and it's running on this. You know new version. Maybe it's running on node None you can do that by dockerizing this stuff and working on it and I'm bringing it up because that's a perspective that people from the Javascript world probably never would have you know been doing that type of thing. So the fact that there are these people coming from all different perspectives to work on the project I think it's going to make it. much much stronger overall

patak: Totally.

Michael Thomas: Know 100% agree on that from.

Andrew: But you have something that at the time of this recording has not been announced right? but I understand it is something that we are able to announce now. Even though it it hasn't the podcast is going to come out later but this is going to be a ah worldwide. Premier As far as I'm concerned right? just because we're recording it before it's been announced once you tell us what you've got to say there patock I will not tell.

patak: Yeah, yeah, so like you promised not to tell so first like a little bit of context like in February I joined it stacklits that is like working is at the company doing like web containers like to make like. Instant development like you if you go to vdotnew for example, that is like or if you go to our dogs and press the open online. You're going to get like a a stalli playground to play with Vt and basically what it does is run node in the browser that is completely not. But like that you are able to experience v like you will do locally but in your browser so they actually like they hire me to work full-time on v because vt actually make their own experience a lot better because they care a lot. Um and a lot about this idea of like you press a button.

Andrew: Yeah, yeah.

patak: And your coding and they couldn't have this at this point without a tool like like vit. So there is a like like a lot of alignment there and 1 of the none thing that we are starting to discuss with with Eric Simons that is like the the Ceo of the company is like when when we study this like a like. We have like let's let's do a bittconf so this is this is an announcement like there will be a bitconf and actually like from this idea actually now it's it's grow and I cannot say the speakers at this point but there will be a speaker from. All the platforms that and frameworks that we have ah discussed so far so imagine ah a conference that you have a few talks about vidcorp by bitcar team members by Evan Yu like Julia your talk and then some live panels with the team. But then like the main. Thing of the conference is one talk from each framework using bit at this point that at this point is basically all the frameworks except like a very very few ones so it will be quite an interesting experience. I think.

Andrew: Well, that's incredible.

patak: And it's going to be free. It's going to be free online October 1112 say the date.

Andrew: Nice. That's it that is incredible. That ve has grown to the point where it's It's going to have its own conference. That's amazing.

Michael Thomas: That is definitely going to save that date.

patak: Yeah, yeah, yeah, it's and and again it is the ecosystem. It is like the idea of like why it can happen is because when you say like what are the dogs that we can put here. You actually have to say Okay, let's put a community track on the side because we have too many people.

Andrew: So.

patak: That that could do an amazing talk for this conference. So I think that that also it it just speaks a lot about like the the ecosystem grow.

Andrew: And we're not announcing anything but I have my fingers crossed that Evan you is going to be up there and they'll bring his lions with him when he does when he does his presentation. That's what I'm hoping.

Michael Thomas: Definitely. So.

patak: I Will I will talk with him.

Michael Thomas: Just make sure you have more than enough stakes around.

Andrew: But I do think that really speaks to the size and the adoption rate of vet the size of the vet community and the adoption rate that it has taken that you're have enough interest that you're going to be hosting a conference that's that's incredible.

patak: So yeah.

patak: Yeah, yeah, and it's possible also because like again shut out to a staglist because he's a sponsoring like ah it's going to like kind of like host this far conference. Maybe the next? Yeah err will be like another company and other companies will probably join to like make the the burden a little less. But it's like it's it's amazing like it's possible again because we have this strong community and this external system. Ah there are so many people around I I always my mind is like kind of like I am blow away by being able to. Speak daily with like the maintainers of all the tools kind of like my heroes know like so so it's it's just amazing. What what is going on like if you haven't been in Bitlan that like you you are around there I really like advise to join. Ah, wilined because it's like if you go like to chat dot vi chas or Dev you're going to join our discord and there is so much ah going on there like if you like Vacan there is for for that like frontend like there. There is so much going on about like tooling dx how to make like the. The community can do a lot of plugins to make thingss work. Do we want p plaa like okay there are people working on making pdoraa very well. So there is a lot of moving there.

Andrew: I and I got to tell you they are a genius for hiring you full time to work on vet and you know I'm not saying this is because you're on here but you have been amazing in terms of a in a developer relations or a developer Li is on role in terms of organizing the community.

Michael Thomas: Yeah.

Andrew: Getting answers promoting things like you have been just incredible. So I think the fact that they had the foresight to hire you to do This is is just a very smart move on their part A very savvy move. Yeah yeah.

patak: Yeah, so thanks, a lot.

Andrew: So Michael you've been using ve for a while. Do you have any any questions about veat 3 that's coming out that you are you want to pump meteus firm you want to withhold water and say ah you you know.

Michael Thomas: Well, ah I yeah I kind of what what was interested in the part that you just mentioned about B W A that's that's currently one of the things that I'm still missing in V Two is that progressive web app kind of thing.

patak: Okay.

Michael Thomas: Which is yeah try to get it to the work if I'm not mistaken Andrew also try to get it to work. But yeah it it didn't so what are the actual plans in z 3 progressing with that PwA.

patak: Yeah. Ah, the the plugin system is flexible enough to actually do these without core and the good thing is like when you do it out of core. You're able to move a lot faster because like every change in core has to. Like be very massively well-tested we have like a test infrastructure that will test against the Ci of all the projects in ecosystem. So like development is is lower because we we have like like there is a huge amount of people using V. But when you develop like let's say like up plugin that is only going to care about Pdola a.

Michael Thomas: Um.

patak: You are in your own world and it's going you are going to have a lot of people using. But it's like a lot easier to to work tricings and like do versions that are independent of it and this is one of the very good examples. There is a plugin that is called Vid plugin pw yeah that was started none by Anton Fu that he iss also like None of the court team members of vi and he's also a court member of you and he's like none of the plugins in the ecosystem are from from Anton yeah, he's like amazing from the d yeah like he also starts a v test on. So.

Michael Thomas: And yeah, including vitess.

Andrew: Yeah, yeah.

patak: Ah, he started that and then now there is like Huaqui and like he is actually like work a lot in this plugin. They just re yesterday I think like the new documentugation for the plugin the vchas account like retweeted that if you if you go there, you're going to see it on the like. This plugin allows you to actually like very easily use like worksbox to set up like everything with a very like small config and and then like it takes care of like using the right strategy and like handle everything put in. All the meta that is needed in the head and everything that you need for for this to work correctly. So like or or like copying the manifest like ah everything is it will be like out of the box which just a little config.

Michael Thomas: Ah, interesting.

Michael Thomas: Amazing.

Andrew: And that makes sense from a strategy and that makes sense from a strategic point of view to implement this using the plugin ecosystem rather than it being part of core for sure. Yeah.

patak: Yeah, yeah, I always what it's up about the experimentation. The same thing that we say about the browser this is the same because now this is like if you say to me like what is the best solution I was like playing pire but maybe in 1 year somebody has like some amazing idea that.

Michael Thomas: You? Yeah yeah.

Andrew: So.

patak: Ah creates another plugin and then like the the 2 of them can compete. Maybe people start to use the other one so all of these experimentation is really really hard to do in core we will have to do some experimental features and then like changing the api you broke None the work.

Michael Thomas: And.

patak: So like it it is a lot better to let the plugin ecosystem take care of that.

Michael Thomas: All right? That's very good to know.

Andrew: So I just thought of None other reason why I really love v and it may seem crazy. But for me working on node-based projects when I look in my node modules directory. It's like looking at that. None closet in your house that you just throw all of your junk into and you don't even want to open it because you're scared that everything is going to fall out or all the stuff that's in there. Obviously there are still node modules that are installed when you use vt but man it has so fewer dependencies than a similar webpack. Config in terms of what gets installed in there and it's nice, not just from a Ocd clean point of view. You also then have fewer dependencies which is good. You know fewer things that could potentially break along the way. But it's also faster to do an npm install for instance because you're not bringing in a None packages to do stuff. You know? So I think that kind of clean modern approach to re-implementing something has really paid dividends in that regard as well. Which I think is pretty cool.

patak: Yeah, indeed 3 in bit.

Michael Thomas: Ah, ah yeah I Definitely I Definitely agree with the node modules thing. Ah, we had a few developers who had like lower spec machines and were always struggling with with space and they had to throw away their node modules and since we introduced.

Andrew: Cri Michael

Michael Thomas: I Think our projects are v right now internally since we have that people have extra space to do more stuff on their laptop and they're so happy about it and.

patak: Yeah, yeah, yeah, okay one one of the things that we does is like bundle the dependencies so you don't get all the tree. Let's say of the dependency that we are using but it will like use rolllab.

Andrew: And there's and there's you you go patak.

patak: Bundle it and generate something that is easier to download for your application. Anyways, we try to use less dependencies but that also helps a lot and in B three because like terster that it was like the miniiffier that we used before that is a complex Machine. We are now using Yes, build by Default. So Terser is not going to be installed by default anymore if people want to use it. They will have to install it themselves So not everybody will pay for it because we are already have to build and there are other dependencies like that where that we are going to make like optional so it should be even better in that regard vi 3.

Andrew: Yeah,, that's ah, it's a fantastic thing and it's also an issue when you're using dockerized environments like I tend to use where there can be some overhead for file sharing Stuff. So if you have this directory with a bajillion things in it. It actually can affect the performance of that as Well. Which is important because you want to expose your node Modules. So that you get the full development ah experience with autocomplet and all that kind of good stuff and so it's wonderful from that regard as Well. You just have less junk that that needs to be tossed around. Yeah, it's Fantastic. So.

Michael Thomas: Know definitely I mean like same as Andrew I'm also using docker in sight and and one of the main things besides v being faster andrew has a point that using v in a docker environment and having less clutter all around. Just speeds up the entire deaf environment I'm not just thinking about feet but it has an impact on all the other cogheels that are involved as well. Which is a major feature. So.

Andrew: And for all the Javascript developers that are rolling your eyes I'm making a statement right here and now you are going to be using docker in the future. You may not know that you're going to be. You're using it but some layer of the stuff that you're going to be working with is going to be dockerized because it's just a It's a much better solution than using something like nvm to try and switch between node versions and installing this or installing that on your local machine. So ah, if it's not docker in name it will be in concept in terms of you're essentially shrink wrapping the devops around your project so that. No matter when you approach the project. Maybe it's from five years ago you're still going to be able to use it regardless of the state of the tooling on your current machine and there are just so many gains in it in so many fronts that I think we're going to be using it or a form of that concept everywhere rather than you know insular anyway. Rant ended. So ah so Mateus is there anything else you want to tell us about ve going forward because I think this has been a fantastic interview I appreciate all the information you've told us out about I'm excited about view 3 do we have ah a release date that you're going to. Give us on air and you're gonna stick to no matter what or what's going off.

patak: You are yeah I think you're going to release this when what exactly more or less at the point that with v 3 is going to go out like more or less like it's going to be ten days from from now so around like 10 of July we think like we just like had a a team meeting like with.

Andrew: Nice.

patak: With Evan and the rest of the team and like we kind of like put the last touches. Let's say that what needs to be done so we are really really close. The ecosystem is almost all green in this like vta consistency I like infrastructure that we have so we are we are good. We have. We need a little bit more time but we are okay there and. We gave ah like a lot of shutout to like the ecosystem and the collaborator that we have like I think it also like to the to the team because there is a lot of person like people involved in the team like and like especially like the people that are working on triage like during the v 3.

Andrew: Oh.

patak: It was just amazing something that blew started one of the car members and then like Safi red also pohoho also like they are like sold I so gotti ball like there's so there was so much work and actually in the past two months the repa went from 700 70 issues that they for the trend I saw we were past one k issues like by now and now we are below 400 so it is just like amazing how many and these issues is not like shas closing. It is like they really work it out the details.

Andrew: I Oh wow.

patak: And like if it was like a documentation update or like so there is in bit 3 there will be also a lot of these little small dx improvement that I think is going to mean a lot for a lot of people because if I issue was created it means like somebody didn't had experience that we were describing that like. That out of the box experience. So I'm also very happy for that and really shout out to them because it was like shas amazing like they they were like pumping so many Prs that I was more on the pr review side than in looking at the issues during all this time.

Andrew: And it's a good thing for you to mention too because I think a lot of people that use these tools may not be aware of the amount of work that goes into everything behind the scenes to make this free open source project work. It is an incredible amount of work from a whole bunch of people. That makes this stuff happen. So yeah, I'm I'm real happy that you did that shout out all right? So we have it on record for Anyone. Don't give patock any grief If for some reason is not out by that Date. We All know how software works right? Software is software and release dates. Just.

Michael Thomas: Definitely.

Andrew: They don't really go together that well unfortunately it's just kind of the the way it goes but this has been fantastic mateus. Ah, thank you for coming on that about wraps it up for another episode of the demo dot fm podcast to have every episode sent to your podcast player subscribe to us via Rss or Itunes.

patak: 50

Andrew: Us a review do all that good stuff and Michael thank you so much for coming on and and Mateus for you as well I hope you finally got that thirst quenching drink.

Michael Thomas: And you're very welcome and thank you for having me.

patak: So thanks, a lot. Sex said that yes I was really certain. It was great.

Andrew: Ah, that was great gentlemen. Thank you for coming on and ah Matthias I mean what I said you you have been fantastic in terms of the work that you've been doing in the community. So I just want to say a personal. Thank you to you because you have made my life a whole lot easier.

Michael Thomas: Yeah, same for me, you definitely made my life easier and from a lot of our developers I feel like It'ss It's just interesting how V evolved if I think like I'm an old school developer who used to make websites with nodes bad with just plain html and and some.

patak: No.

Michael Thomas: Attribute styling before Css a even came along and if I didn't think about the simplicity we had back then to always that growing complexity going on top is it with a jquery framework that came that had to moat like crazy or is it with Grant Culp been through them all. For me vi is bringing back the simplicity and that instantaneously coding and developing which is a breeze to work with honestly.

patak: Now set. Thanks Thanks a lot they was ah it was really good and actually like I Really mean that like I'm I'm amazed like I like the position I actually like may accidentally end up being of being able to work with all these people.

Andrew: Yeah I know. Ah yeah, ah.

patak: Like with you too like it's thank you.

Andrew: Mattias is like I can't believe someone's paying me to do this.