JavaScript Marathon | Vite Training with Anthony

hello and welcome to javascript marathon a full week of free online courses in some of the leading web development technologies and concepts today's trainer is anthony fu here to teach us about all things veet if you have any questions after today feel free to follow anthony at antfu7 on twitter special thanks to this week's sponsor this dot labs offering personalized training programs to suit your organizational needs ensuring you and your company stay on the leading edge if you find keeping up with constantly evolving technologies a struggle and want to bring your team up to speed on one of the latest technologies contact us today at hi this dot dot co to set up your complimentary needs assessment this.labs is hiring if you're a senior software engineer or an engineering manager send us your info at jobs this dot dot co upcoming events we're wrapping up the year with graphql contributor days on december 7th state of angular ecosystem on december 9th state of react on december 14th and monthly mentoring on december 15th also angular world tour stops in tokyo on december 1st and react world tour stops in mountain view california on the same day december 1st and our next event javascript marathon will return march 14th to 18th another week of free content stay tuned for more information on javascriptmarathon.com and with that i will turn it over to anthony hello everybody and welcome to javascript marathon today we have anthony fou who is oh my gosh anthony i think your core team of you and core team of beach is that correct yeah right that's awesome and today anthony is going to give us a quick little training on veet and i'm so excited uh i was telling anthony before this started that uh one of my friends just uh ripped out the internals of create react app and put everything in veet and he's like will somebody pay me to do this he did it at work but he's like this was a pretty interesting project so i know we're mainly focusing on uh vue but you know veda is a really interesting technology and it is being used you know outside of the view universe which i think is really cool and we're super excited to have you anthony yeah good guys and yeah certainly glad to be here so you can start anytime you like okay yeah so like okay yeah just let me share my screen so like before we talk and maybe i want to like do a quick introduction to it so like so i guess i guess many of you have already heard about that or like maybe maybe his name so like i think the big impression of it is that it's like super fast compared to compared to the the thing we used to have like for for example like webpack or something so uh so like which is actually like not a complex replacement of webpack by like trying to solve a certain uh area of problems like uh the the thing is that we want to build a dev tools like many for like the divers so like we can leverage the uh the the uh the whole the whole tooling system to like improving the developer experience better so uh the the i think there's a few reasons that vid is like pretty fast so the i think the first is that uh it's relying on the the browser's native esm support so like we don't we don't need to bundle the files anymore so like we can serve the files on demand uh like uh so like uh every modules in your files uh in your projects will be served individually and then like we can we can do something like transpiling during the time uh during on on the serving but like we don't need to bundle them anymore so like the server is it is ready immediately and and and that uh i will show you uh with that within like demos uh later so i think uh and also like we we introduced like hot module replacements uh using the native esm and also like uh we we leverage the es build which is a uh a tool uh which is like a babe uh which is like a bundle tools written in gold in native code like uh being like very uh like incredibly fast compared to the the tool we used to uh building inside of javascript so i guess like maybe we can have a quick tour of like how how how it uh experienced in the in the real world i guess so like here like you go to the the guest star page so like first you can see that uh like this or is actually a friends word for quick and it's pronounced as vit and then like if you want to try we can we can use this command like npm init bit so like i will just copy that and then i will just here so uh yeah sorry my connection is a little bit a bit low i guess let me try it okay yeah so it will uh install a package called creative it so i can i can type in my project name like my bit [Music] and then like you can choose the framework you want and maybe i can scale up a bit so like here like we provide some like building a template for that you can use valina view react of course and lan maybe let's go for nina first so for virginia you can choose uh javascript typescript like uh vid has a building support for typescript like you can you can just use the dot ts files and the video will handle them automatically but now like just with ghost velina like just go easy and then like type my vid right and yeah okay i can i can just open up a vs code here okay so here that you can see that the it's actually very simple like one index file so and one main index main.js file and a style file then and that's all so like you can see that in in the dev dependencies like encoded so like i will install it real quick so here uh mi is like for for npm install like okay yeah sorry sorry about my proxy so like you only need to have a one single vid dependency installer and then like we have like a few buildings script setups like you can use so here that's i can i can stop the the server really quick so npm dev sorry npm around that and then like you can see that we have the we have the server ready immediately and then like here that you can see the content of it so um yeah that's uh let me like break break it down a little bit like you can see that we use the uh this this this one is actually kinda like uh if if you do like npms like server so like we can maybe serve server do so it's actually like a file server like you can it's basically like the same as serve so it's it's actually like when you as well when you accessing the page then it will search for the index.html file and solve the content of it yeah i don't try that if if not if it's possible 300 no it's not possible okay here i guess the style is not support yeah like it is just like this so uh so like at the minimum uh stage like vid is just like a dev server like serving you serving the files you want but uh on top of that it provides like you can see that uh sorry npm wrong there so here is the here is the vis server so you can one question somebody has is uh so there's no need to build uh a bundle and v does that mean it's server side rendered or how will we deploy it okay yeah like uh i think vit is served in two different modes one is for dev and one's for build during the dev it is fire up as a dev server that's kind transpiling things along along the way uh on demand and then like for build like you can use like npm like you can check like it's built there's a build command for it and on build command like if you type npm wrong build yeah like it was it will build up a a static uh aesthetic page like you can serve onto your like nitrifier or other other server host and underneath uh underneath of the underneath of that like vtu's draw up to to build to bundle your app so like it's it's basically like the thing that we separated the concept of the during dev and the build so like we can we can leverage uh the full potential to to provide like uh the best experience for both usage yeah so let's get back to to our like demo so you can see that before i if i inspect the page i will do a refresh so like you can see that's the sorry i think it's for all and here like you can see that the index page is served as a s is and our main.js is is also served um basically as is but like the the style.css is actually transpiled into js modules that with the hot module replacement capability so for example like if i if i want to change the if i want to change the the color to red like you can see that the text is changed immediately to red and and actually like the page is actually not refreshed it's it's handled by the automotive replacement so like you can see that here there's it it's actually like uh start with the web socket to communicate with the kind and then like you can see that there there is a there's the event of it uh yeah not sure if you can it's it's big enough but it's basically saying that okay that when when i when i save the file so it will it will uh send out a new event of new events for it so like we can sorry so we can handle we can handle the update and then like for style we can it will try to refresh the the style modules and then like replace the original style com contents of it so like you don't you don't need to worry about uh it like either like like the changes in your files is immediately updated to your app yeah so like so far do you have any questions i think people are just generally really excited like oh my god this is awesome it's a really beautiful experience so yeah and it's the such as people are commenting that it's such a simple solution which is great okay yeah so like this is actually the basic and now like we uh vit provide a like really powerful uh plugin ecosystem like this is built on top of a raw uh plugin api which means like many of the robs plugins are actually you can directly use them uh on vit so like we can let me show you like uh like we can we can start a view template i guess seems like maybe view is more familiar to me so like maybe i can create this one and maybe this time we'll go go typescript i guess so so i can again cd to that project and then i will just i will just use pmpm that's but that that that's just a different pmpm but maybe maybe they'll be a little bit faster for me but not not much different here okay so okay so uh so here that's we have a bit more thing here so like you can see that's on top of the the vague dependencies we now have the vit.js plugin view which which also we provide and a react plugin called like with dot js slash plugin react which like is for react you can try that as well and yeah so here that's uh okay yeah that let me start the dev server okay so here here you can see that this is a viewdab server and then like there's a counter that's you can see that in the source code here i think i think it's here i guess components follower okay yeah so like there's a counter that holder on a rift and zero so uh when we when we click yeah when we click the button that the the contour will be bumped like you can see that and then like e things like vid has the support of a hard module replacement so like uh you you can change anything you want but the the state will be really state will be like retained so like you you can like you can like work on the apps and testing out and then like change the code without losing the state of your in your app which i think is is pretty cool and yeah most importantly like all the things is happening instantly right so uh so this is actually like you can see that's hot uh there's a command for it like had updated and the files we just changed so um so this one uh like bit provide the hot module replacement capabilities which is handled by the vid plugins so like with with plugins nodes uh understand the the the view components uh uh understand the view components and it and it knows like when the update comes it it knows how to update the components without losing their state yeah and any questions not yet like oh yeah like well there's questions for later but some of you want to wait till later yeah like uh i'm not sure like do you have any like directions for me to to talk about or like maybe i can i can showcase you how to like write a vid plugins or something i guess if i can say the plugins was going to be one of my next questions um i know that there's a big big discussion in the ecosystem about plugins and how to write them so that will surely be something that i would love to see it is possible okay okay so um [Music] so i think uh yeah like actually like uh once was mentioned about that is like you can see that things like we create a template using typescript so like this this file is dot ts but it the the app will just work and like for example like maybe maybe i can say that that's uh a dot maybe i just just sorry uh yeah like you could you can see that and i can console.log it right so uh this is actually a typescript file with like typescript specific syntax but now like you can see that on the network pages if i refresh this one is main.js right so like you can see that the the typescript the the file is actually served in javascript and the typescript specific syntax is being ripped off this is powered by like esp we only do the transfiles which we like go through the files and like then i can remove any syntax that types are specific like the type time so like you you so that that would not affect you your runtimes so like we we kind of rely request assuming that the type check is is uh is be done by your editor so like if if you if you pass the wrong type your your vs code will just like telling you that so like we don't need to do the type check anymore so we don't we don't do the chat chat uh we don't need we sorry we don't do the type check at the build at that at that time so like you can you can use them but without like sacrificing the the performance so uh so i guess like maybe i can like show you some [Music] something that uh viet is like a kind um kind of good at i guess so like you can see that the the view plugin is providing the the view functionality is providing the plugin which is the official one and then like we have the vid.config.js which like exporting the config for bit and then like we trying to we import it and install it as a plugin so like we can like even like write our own plugins really um for example like uh here that's uh my cool plugin i guess and yeah also like this this one is sir this this one is in typescript so like we can have the type support so here that uh i use the uh i use a i use an uh and hook called transform which like transform the code uh the transform your source code so for example like uh maybe i want to see that uh maybe i want to show some like uh the build time of of our app so for example like uh when i do here hello world right so i just claim out like so build time so like uh normally like we can use like new data but but that one would be like uh every time every time we refresh the page it will be different but it's not like really really a time that's at the build time so like we can maybe maybe a that just plays a like a magic a magic symbol here and then like if if we want uh we can we can we can use the plugin for that so here we go to here the plugin here and then like we can we can just simply do like the code that replace and for the i just i just type it simple here and then like new date and two to string again okay so here here that you can see that the the source code being like replaced and when i refresh the page the the timer the time will be settled so like it doesn't change so this is actually like a little bit like the loader in in webpack i think but like uh providing in like much much intuitive like uh api which like you can you can do that in in like three lines of code yeah like i can see that hardcore here so yeah yeah i'm sorry about the it's a little bit like unclear to to to see the uh to see the source call of the of the view components but like you got a point like the the the code here is actually being being replaced as a string so like you can you can shape them with along with the build so um does the code i see all codes even the imported packages i'm sorry does it include does the code include like even the imported packages yeah right like you if you like uh doing it in another modules like maybe here i guess so you can you can see that there's another there's another one here so so here that's uh in the in the plugin page like uh there's a code for the first argument and then the second one is the the id of the of the modules like actually like you can you can you can do something like type check uh you can you can do some check like this for example like we i can say that if the id is enabled is the view files and we do that and we we do the replacements but we don't affect other files so like also like you can you can do that by checking if it's under not modules or if if it's on the specific constraints like you want so uh actually like the view sorry just to follow up with that because i think uh the question was being asked was also even more specific than that but i think one of the questions was here you're doing this transform could you reach into the view library itself with this code from your node modules and do this translation or is it only doing this transformation on your own code yeah you can this would this would apply for all the modules like being served by bit so like for example i can i can log the the id here so like if i refresh the page you can see you can see that uh there's a so for example like this this is the fit entry and also like this this one you can see that this one under nodemodules.vietview.js which is the the views core libraries so like you can you can transform that as well if you want hope i have answered your questions yeah that's yeah i think we're all very inspired in the in the chat by that and then also is there any specific documentation uh that can be shared for like any plug-in okay sure yeah of course sorry f almost forget it so like you can you can visit like vhs.dev to to read the the documentations of which and also like uh we we also have a guide to like guys for the the features we have but most specifically like if you if you are talking about the plugin apis uh there is some some some clip of that and like the vid plugin uh the video plugin api is built on top of the raw plugin documentation uh rob plugin api which like uh we support all the all the hooks like uh rob's draw as a portal so like you can you can see that often and we also provide some like more additional like view specific hook so for example like you if you want to access the the the vita uh server instance you can do like config configure server and then like the vid server will be like you can use the v server and middlewares use like you can you can do some like you can register your own middlewares for uh for the view uh for the vdt server and also like you can do something like really uh configure itself yeah so like you can you can get the the whole config uh the whole configure uh object of bits and and like you can you can see that plugins and then like you can you can you can go through all the plugins installed by vit and maybe communicate with them if you want so this these two are actually like which specific uh hooks so and yeah of course like read the documentation for more and yeah just talking about this like you can see that we have a bit plugin inspect which is a plugin like leverage the the power of i guess uh things like vit is actually a death server right so since it's a server we can do like much more than just a bundler so like i can just install it really quick here um to to show you a bit i think yeah sorry mine my network is it's pretty very very recently i don't know why just do it again okay yeah it works so um here that's we we just like import inspect sorry expect and then like we just installed install plugin like like this so uh yeah okay so we just restart the server again so like uh like you can see that this is the the page we used to see and then like for now like there's an another entry called inspect which is uh slash dot inspect you can see so here that's we can see that this is all the modules we have uh currently and then like if you see that maybe we just talked about the the hollow word view right so so here is the source code here and then this one is being uh compiled by the vit plugin the view plugins and then like you can see that this this one is the plugins i just written so like you can see the build time here the the dash dash uh the sorry the underscore build and and now like it's it's being replaced by the by the times we just injecting it so like you can see that every step of it so like every the the same modules being transpired by different plugins each step like you can see that this is in import analyst so this one is actually being but transformed uh the the notice specific uh import into the like you can see that the view being trans being replaced by the the absolute past that's uh being that's broader understand so that one that browser will be will request that modules instead inside of the view which is not clear that's where it's come from so like you can see that our plugin our uh our own plugin is actually applied after the the view one right so like maybe maybe maybe you want to like apply it first so like you can one thing like you can do is of course like moving it up to the up up to before the view yeah so i think here so yeah you can see that so like we we are now like trans transform the view file first and then like the view file being passed into the the uh the view plugin and also like if you don't have access to that or like maybe you you uh me that one like you will need to tell the tell the user of your plugins to like always put your plugins before view but like uh we we also providing a an api call like uh enforce like you can do like pre so like this one will always be uh being applied before other plugins like for example like even if i put my plugins under view but like after after after we resolve it it's still on top of you things like we do the invoice pre but also like you can do like post so like it will be uh always after other plugins so like yeah so like you can see that this uh the inspect plugin is like because of wheat is a dev server we can we can like retrieve the um intermediate state of it and then like serving in serve as a web page like you can you can play with and debug with so like you can see that we also provide a tree mode like you you can see the relationship of each modules and then like checking out the source code of each and if you want to see that yeah this is actually very a very a minimum uh minimum example here so like uh the file doesn't have much but like you can when you when the project grows like you can have a clear state to see that why the modulus is relying on each other or something so yeah so um so i think maybe let's see so on top of of the vids i can't build many um vit plugins so so here that's where i have uh opinions read templates which is which is for view uh like i put uh many plugins i made and also the the tools i kind of enjoying to into a starter template like providing uh like for example like file based routing and component auto importing and and other stuff for view and and for view on bit so like maybe i can show you a little bit so here i will type default npm wrong dev just my my local ls so yeah so yeah as you can see that this one is is the is my template and then like you can you can toggle the dark or something so um so like things like we can do many transformations or like uh kind improving to the to the uh to to sorry two to two uh two applications we can we can do something like for example like component auto importing so for example like uh i'm not very sure like if in react but like in knocks like we we have a not components library select you can you can put components under the components folders and then like you you can use them directly inside of other apps so uh inside our other components so yeah let me check okay here okay yeah i get i guess it's in the in the layout i guess so here that's uh we just import the the footer uh components which you define here uh so like before that before we do the auto importings we may we might want to like doing the script and import fold for the front like this like you you got my points right like folder view and and then like you want redressed export default and components here like like you need to do that in order to have view understand uh you are importing a component from other files so that one that would be like time consuming to to do and also like if you if you change the the file name of each like you need to change all the occurrence of these components every time like for example like i just i just want to import this these components i and actually like type the the name of this component four times duplicated like here here in the import path and in the registrations but now like with the component also importing which is providing by uh unplugging i guess here we should probably provided by these bit plugins like we can we can just just install it and like you can use the components and and also like uh it's being uh the type the type inference is is also like works directly and also i think the other one might be cool is that's my also benefits for react devs is that uh is that the the api auto import so like uh for in view that things like the view introduce the view composition apis we have many like utilities functions for example riff computed watch or something like we need to import from view and similarly like use stage in react hooks so uh instead of like typing each time things like we can like injecting it injecting them during the build time so like we as we just do the transform like we can scan the code and injecting the transform for it so uh you can see here maybe let me find example not here yeah maybe this one like you can see that the the watch effect is not imported but like since it's from view so like we can use directly so like you can see that this also got got its type define pops and user routers is from view routers and you can just use them and uh to the to the vietconfig you can you can see that uh here the components like the components plugin is is installed here and the auto import is installed here so like we can define like we can do auto import from view view routers view itm something like that so uh i think that's uh i think the current state of this template is like uh the thing that i kind really enjoying doing uh using it things like we can we can really like focusing on the the logic of uh our app inciting of the scaffolding code for our templates from our templates or from our view tools yeah something like that um yeah and also like just just just mentioning that this one is actually called unpluggings which is which is used to to be like vid plugins auto import but then like for on plugins we are trying to unify the plugin apis uh between vit and rob and webpack so like you can you can write a plugin once and then like make it work for both feature and webpack so like you can you can you can like we made we made this uh autoimport plugins also work for webpack and uh previously the components auto importing is also working for webpack and view coi yeah any questions so far is that how like how does the out importing of component works is is that is it like based on some uh okay is it like you you assume that the components are in the components directory and you search it or is it like gonna work whenever we place that component in the uh tree structure yeah right good questions so uh so like it's more like a convention like if you put components under certain directory and we use it it's kind of similar to like not a notch js or like nexus 2 like we use files file system as the convention and then like we kind of scan for the components under certain directory like which you can config but like default is the source components and then like uh to see that how we do that we can sorry i'm not sure why oh i didn't i didn't i didn't install the inspect plugin here okay here okay so yeah to to show you like how we do that i can i can do the inspect here so uh for example like uh the file we do is the default layout therefore view and then like you can see that this this template is being compiled into the following code i'll just zoom out a bit yeah so uh so actually the components being resolved as the dot uh the the dash result components uh functions like in this in this plugins we kind of replace it okay sorry where is the code okay yeah sorry let me never the server maybe there's some glitch okay okay yeah here here's the div so like we just like replaced the the result com components functions into a real uh real import here that we kind of injecting the input from the real the real files and the replace as it is select the and that's it for this this plugin to do so this one we can achieve the auto importing functionalities and also like we saved the the wrong time codes for resolving the components during the wrong time we just directly import it so yeah and also like for 40 41 i think maybe me for home not here where did i put pages index okay yeah you can see that for the auto import we kind of scan for the usage of it of each functions and then like we injecting like import this apis from view and import this api from view routers and that's all this is actually like very basic but like huge improvements to the developer experience and does it does the auto imports handle somehow if there are name conflicts yeah like for example f is a very uh general name for something to be to be auto imported so i i've seen that you configure the the packages from which you can auto import yeah right like uh you can you can config the the package that you want to do the auto import here so like if if there is a conflict uh between like two package it will won you and and and and if you choose to ignore it the the later one will be the the later one will be override the previous one yeah like uh in in the in the in the usage like if you if you import it especially like it will like ignore uh the the other importer will ignore that uh for example like if you like import riff from the other modules then like the auto import will not work will ignore it and respect your choice okay wow so um any other questions or like anything you want me to talk about i can ask mark's question mark had a question in chat he said uh can you use veet in react native and expo uh actually i'm not very like familiar with react native so like i don't really sure if i'm i'm good to answer it but like think but yeah i'm not sure like different between react and react native but like iraq it works perfectly and like i see many many projects in the community like moving to the creative career app to the vit for like maybe maybe with within like two hours or like an afternoon of the migrations and the developer experience is huge yeah that's amazing yeah and you can you can you can play with that i think we have the the online the online one which is uh powered by like stackplays here yeah but but my network is not very good but like you you can play with it in inside your browser to like have a have a quick preview of it and and yeah maybe maybe i'm not not the good the good one to like talk about react but you can you can definitely give it a try if you interested have you heard of somebody trying to do like auto importing of some i don't know russ packages using web assembly and doing that automatically on the fly yeah maybe that's a good idea like maybe we can give a shot to to see what it will be i just worry that it would defeat the purpose of it being fast yeah because that requires a lot of work yeah i think i think we do have some some awesome support but yeah like like you can you can directly use import import web assembly modules in bit things like we we can like vid is kind of like specific on the the web development instead of like webpack is trying to like be a bundle like can bundles anything like to any target which pick uh only like the the dev tool or the web that their parts so like we we kind of shipped many uh conventions like being proved by the communities for example like we handle css natively and then like if you import css it will be shipped along with the uh along with the along with the modules and in the build times it will be image as a concrete uh css files like like that's it just like it will just work and also like um it will handle uh set like aesthetic you can you can import a static uh you can import in an image as a euro and also like you can you can specific which type you actually want like if if you want to uh as as a role you can do that or something yeah yeah if you want like you you can definitely like check out the docs oh yeah here is the the the direct app running on it so uh just just just uh just like uh just like the view like this one is i think is it's it's also like uh how the module replacements everywhere so like you can retain the state um yeah and also like if you want pizza very like i also made this plugin called like vlogging pita very like like you can install it and and then join the the pwm view and yeah i think that's pretty much it uh oh yeah right so like uh if you want to check like all the plugins available like we have awesome feeds really close like listing [Music] uh listing the the package and there's also like the templates like built by peoples with some preconfig things like for example electron or something uh here and also like for view 2 for react for the belt and also like here is the plugins for each framework like this one is a framework agnostic plugin that will works for any firmware you use and also like there's a few framework-specific plugins here that you can you can check them out and also raw plugins we have a page that's testing out the compatibility of the raw plugins in vit and i think most of them are just uh compatible and some of them are already handled by which natively like this one is actually covered so like we'd understand html so like you don't need you don't need the html there are plugins for it so some of them might might need to have some uh you need to like working with some like configure for it for example like here that's for the older like you you may want to like have it enforce pre for that but like this one is the the list that we can we check all the uh raw plugins that are being compatible with feed so you can you can check them out and also this one is list here yeah and also like uh there's a lot of i think there's many meta framework built on top of it so for example maybe it's weld kit which is the the new svelte dev tooling which is now built on top of it and also nox is also supporting nox3 is also supporting both webpack and and the vit as they as their as the dev engine like you can switch as you want and i think actual the the static style generator providing pet uh partial hydration is it's not like moving from snowpack to bit and yeah i think also here that we have a few of them list here like you can check out there's one question is would be be helpful still be helpful for using with node or prop or a project where you don't have html and css files yeah like um i guess like vid is choosing this like focusing on web development so like it maybe maybe i guess the the best tool for node.js development might be might still be like a webpack or roll up and like definitely like if you want to do that i think of it also providing some capability of that yeah but like um i will just show you so uh library mode okay library mode so here that's you can you can still use the use feed to like generate some libraries being consumed by like npm or like node so like here you can see here is the config and then like this one you can leverage the the feeds plugins to do that to to handles uh the uh to handle you need yeah but generally like i would i would suggest to like pick whatever uh to pick the tools like maybe better for this job i guess but uh if you want to like build a playground or something like maybe vit will be really good to like importing your source code your library source code directly and handles all handles auto handle hmr for you and you can directly see the change of it but for build i guess maybe go with the bed the bundler i guess when you're using in your experience using veed i mean i know it's it's it's actually remarkably mature for for as young as it is in the grand scheme of things um but you know what what are the edge cases or the rough parts that you bump into most often when using it and then how do you usually work around that is that usually with plug-ins or uh you know like just so for people when they start playing with it they kind of know like what problems they maybe are typical that they'll encounter and how they should look to fix it okay yeah i think uh things like which will have two different modes for like dev and build things like in that like the the whole esm uh interpretation is relying on bothering yeah and like uh there there could be some misalignments between dev and view which maybe you need to uh have an eye on that uh this is more like a province on which 1.0 things like uh at that time we used different plugin systems for dev and view but now like in vis 2.0 which is now uh we kind of normalized the plugin system to use the row up api we should in in that we mock up a plugin containers for blow up and call the hooks uh at the build time for each modules so uh with with v2.0 i think the misalignment is really uh like the the the possibility you face that misalignment is is actually very low but also like uh still like maybe you you're better to get some like a real test testing for it before shipping to the productions as well and also i think i think most of the the bug you make most of the problem you might face uh you can i think i think that's why i built this uh inspector that you can see that what was is actually going on during uh each module transformations maybe you can see that oh this one is not mistransformed so like you can see that which plugin is affecting that and maybe you can check the source code of them and also if you don't need this i think i think things like every module is is served individually like it's it's actually transparent enough to to see that what is going on to the browser and that i think that way is it's far away a better uh debugging experience uh compared to webpack which i don't i don't actually know like how to come how to debug in webpack for each modules yeah but but maybe it's my lack of experience but i think vit is providing like a really great experience to to see that or uh being in a fine grain to see what is going on all right thank you um there's another question it's beat handling tree shaking on production build yeah right uh it's it's the the production is powered by rob and like we have some custom plugins and the setup on top of that but you can leverage the the the hope uh i think i think the the whole benefit of raw up so like of course the tree shaking there's another question which i think i know the answer to but if there's a huge project that's already based on webpack do you recommend switching to beat or should it be used for new projects only um yeah i guess that really depends like how you how how you like doing the trade-off i guess things like um for webpack there's a song like webpack specific logic that's which is intentionally like not going to cover that uh this is like trying to like cover like 99 of the usage that we kind of switched about for the web development but like maybe some of the webpack uh logic or like for load uh webpack uh plugins or modules that that would not be like not really possible to fit so it really depends like how the project you how big the project you are and how well index you want to do the switch and also like i also see that some projects is uh doing something like they use vit for development and then i use webpack for production so like you can keep the webpack productions and then like configure vids to to providing better developer experience i think uh maybe that could be a like progressive progressive way to to go i think and then there's another question is will library support for angular in the future or is that planned at all for a what sorry angular for angular for anger i'm not very very sure about that i think uh i think things like anger will be a little bit tricky things like it it's trying to providing their their own tooling which is not really compatible with it but yeah i'm not sure but i think there are some some people in the community are working on that but uh but i i i i don't i'm not i'm not sure what's the progress and maybe it's not right now sounds like there's some good opportunities for folks yeah right well you know i remember when uh angular switched from angular cli switch i don't remember what they were before but they switched to webpack very early on uh when the cli was still in alpha beta mode and uh you know sean larkin did the conversion so all we need is somebody to basically like just rip out everything yeah right in angular and you know use beat yeah right that that's so easy something too yeah and also like yeah just talking about that um there are some integrations to the back end so like you can you can use ruby on rails with vid and use revival with it something like this like this is a really cool project like you can check them out maybe maybe maybe that could be like it'll be helpful to like build the angular version of the v8 version of angular i guess yeah yeah definitely i think that's the last of the questions in the chat yeah thank you so much for answering all the questions anthony it's uh there are so many i think people got really inspired by the plug-ins especially um and just how simple and easy a tool beet is i think that's amazing and now everybody knows that it's called beach not vite or vitae or but it's good to know the origin that it's from the french word i think that that helps people they also try to like provide the the voice link like you can click in in in our page yes thank you yeah here oh awesome do you have anything else for us yeah i think that's that's kind of for me like yeah i'm happy to answer that if you have any more questions yeah no i think that's all thank you so much everyone for attending anthony where do we find you online um you can find me on github ads ntfu and also like for on twitter is ntfu7 okay great yeah well that's awesome so if we have any questions we can definitely ping you on that and i hope to see more of you folks out there talking about vh and using it and trying it out and maybe the angular folks will get inspired and start building some stuff around that so thank you so much for this training yeah thank you so much

Channel: This Dot Media

Views: 486

Keywords: vite, vite tutorial, vite react, vite svelte, javascript

Id: ecpvIo4NIoY

Length: 67min 6sec (4026 seconds)

Published: Fri Nov 19 2021