Vue.js Global talk: Introducing Vite & Vitepress

what really the conference talk the pre-recording it's due today holy moly luckily i have a new camera i can do everything right now on this new thing my fancy new setup anyways so um i'm going on holiday tomorrow so this thing has to be done today i'm talking to you about fit.js and fit press i'm giving you a global introduction to this bleeding edge new tools for the fuji as global conference i am not going too deep because i know this stuff is bound to change and you know what avenue who built these things is so much smarter than me i'm probably bound to say something wrong so i'm going to show you the basics and how they work and then you can just give a try yourself to see how well these new tools work don't use them in production yet but it's nonetheless cool to know that they exist and how they work alright let's do it [Music] all right now that i changed camera setup let's let's rock right so as i said in the intro this is a general introduction to feet and feet press but before we dive in because this is actually a conference talk let's talk a little bit about me your presenter so my name is tim benicks i am from amsterdam but i currently live in paris and that's why i'm saying feet the wrong way because the in my language the f and the v are very close together but in french the fee is way harder almost like a w so i have to say vit it's really hard for me so please forgive me when i say it wrong dear french people anyways i am the director of front end at vault-tec based in paris and i'm a media developer expert at cloudanary um so i'm not going to talk about what those jobs are exactly if you want to know more just google them um let's start with vt i hope i say it correctly anyways so um feed origin was here so it was a tweet by avenue in april of this year as i was going to bed i had an idea about a no bundler dev setup using native browser es imports but with the support for few sfcs with hot reload now it's almost 6 00 am and i have a puck working the hot reload is so fast it's near instant so when someone like avenue does a tweet like this the whole front end community kind of goes like this [Music] because front end is progressing cool stuff is happening we're all ready to see what this genius guy has to offer us right so let's talk about what feed actually is so feet is a web dev build tool which serves native es modules during development but it bundles them with roll up for production so fit offers a no bundler setup that allows development with few single page components or a few single file components and this is where it gets a little bit special because we can all build something that just injects all your dependencies as a module script file right then it just works but you also want to sometimes transform because you want to use your few single file component or your jsx type thing you kind of want it to be smart like that you want it to compile things right so the es import syntax is used and served directly to the browser via native script modules but the dev server intercepts and transforms the files if needed and this is where this thing becomes so cool because it kind of does it on demand and it's really fast because of that so because this stuff happens on demand it doesn't have to pre-compile everything and then start your server like webpack would do right if you have a bunch of files and you do npm start or yarn def or whatever with webpack you see it compile everything create the dependency graph and run it with feet this is not the case it just puts everything as a module and then on demand compiles so therefore also hot module replacement is really fast because it only replaces a thing you just touch it doesn't have to recompile everything right so it's true on demand compilation and i went over this really fast now not with much detail so evan sorry if i interpret it's wrong a little bit but this is kind of for the general public i'm assuming this is enough right so the cool thing is that it works with view react but also preact and it has typescript support because of course it bundles view 3 which also has typescript so good stuff the idea is that it kind of covers whatever feature set view cli gives you so when you want to import css file or sas files or you want to do web workers all the kind of all the stuff that view cli has they're supposed to kind of follow that with feet as well which is really cool because we are used to that amazing tool set right so feet kind of almost has the same it's just more opinionated however browser support right so it needs es module support it also uses dynamic imports on production um this is kind of doable in almost all browsers so that's why this is kind of bleeding at right and it will probably never get backwards compatible to all the browsers so it transpiles the files to es2019 by default but it can also go down as low as es2015 i think during the build so of course there is the troll ie 11. it just doesn't have the module support the es syntax and the dynamic loading of files it might be doable but you know what if you think about it this are the people that use ie11 right so you have the one percent of actual users and then you have the 99 of people are basically developers trying to make ie11 work so you know what let's just forget about it in this context this is not a tool for the masses just yet it's quite bleeding edge so how about we do a demo i talked really fast over everything and the purpose of that was to just show you so you can actually tomorrow when you are after this video you can actually start typing it and actually work with it okay let's go it is demo time so as you can see i'm actually in windows powershell normally when i'm on a windows computer i use wsl ubuntu which is like a linux distro on windows then i feel right at home because i'm actually a mac user but it decided to crap out on me today so we're in powershell let's be powerful shall we ok that also means i don't have yarn installed and i didn't want to do all that stuff and mess with settings because i don't really use this site anyways i do have npm so let's initialize a feed app here we go npm init feed app for view js global let's see what it does okay so let's go into it was pretty fast by the way i don't know why that was cool okay npm install let's see what that does it's probably not going to be that long because i cannot imagine that much right we probably have a few three and some other helper things okay so let's open it in code first i'm so happy this all works man it could have been terrible okay let's zoom in a little bit okay um we have code now it only dependency is actually q3 and some view compiler and some other stuff um let's actually run it npm run def whoa that was pretty fast well of course there's not that much code but think how fast that was okay copy open the browser whoa it works well that was pretty easy right of course this this is basically an empty view like view cli setup but if you think about installing view cli and what it means to start up and compiling everything when you see that happen in webpack that actually doesn't happen here this is actually super fast um so let's have a look in the code to see if we can see that counter change or whatever like let's check the hot module reload so of course we have a component hello world and we have a counter how about we set the counter to a start of five and save we go back to the browser oh there it is on five let's start it on one oh you see how fast this is this it's like it's it's near instant awesome saved oh there it is it's i can almost not show you how fast it is let's go like this save you see wow that's just crazy save beam it's basically like well let's go back to the beginning and there it is so it's basically instant and now this is just the normal view app it's view three of course but you can do whatever you want and your whole development environment works let's do a quick build to see what comes out oh and we can also before we do that let's have a look at that index file because okay let's go big again there we go so basically that index file or the main js that it's that's bundled towards is actually a script type module right so that works really well it's very modern okay let's do a build npm run build okay so now it's just the compilation of my one component oh and it also took the logo file and it took the style so this is kind of like how view cli does it right it's kind of a bit of like it kind of uses this webpack thing but it's way faster it's it's the same approach but it it well let's see this is cool so now we have a dist folder and inside the disk folder we have an index file and now it changed the names for obvious cache d busting stuff and there's my style sheet that it extracted from the few files there's the logo and then the index it did whatever it needed to do to make few work with q3 and everything but that was a super quick demo if i can do this you can do this just start using it and see if you can make some plugins and some other stuff because there's actually a whole bunch of stuff that goes way deeper that we didn't talk about like making plugins and i think this thing is going to be the future for a few cli basically anyways on to feed press all right it's time for vit press actually as avenue said feet press is the little brother of view press so this talk is not about what view press is um i'm assuming most people watching this know what viewpress is however if you don't know it's like a super nice and super fast way to build static websites with few and it's not like a gritsum that it's built for like fully fledged projects it's well it works for project but it's really good for let's say documentation using markdown stuff like that when i heard the third that that's it when i heard the term that it's a little brother to few press it made me immediately think of this except one eighth your size breathtaking i shall call him mini-me [Music] man this scene is so epic anyways um so feed press is basically view press without the webpack and it's blazing fast it managed to do this because of course it's based on veet and view 3 and it's also very opinionated and that's the one thing we should keep in mind it's kind of you do it this way and then it works and therefore it's super fast but it's not all as encompassing as few press is maybe yet we shall see right so view press itself is pretty slow to spin up because it has to compile all these pages that it has with webpack and also when you want to change one page the hot module replacement is pretty slow due to webpack let's talk about the differences between view press and feed press so of course feed press uses view three and it has feet under the hood rather than webpack the pages themselves are a bunch lighter because it has few three tree shaking and also it uses roll up roll up for code splitting that's all nice and well but on the other hand it's way less configurable i think by design actually and also it's more opinionated you kind of have to use it the way it was meant to like what it was written where view press can basically get you anywhere you want so those kind of differences they don't really matter and i don't think for now feed press will overtake view press but they probably will just borrow features from each other moving forward so that was a really short overview how about we do a little demo let's set up a feed press website okay are we ready for a feed press demo i am okay let's do something okay let's make a directory called feet [Music] okay minus the press here we go i hope it doesn't take too long for the lovely video you already had to see me typing really poorly well it seems to be okay let's let's go we can wait for this yeah yeah ah wasn't that okay we need a markdown file so let's just open this in code and let's just make a new index.md this is huges global okay we have a markdown file now so npx wow my typing is special today whoa that oh it's already open okay whoa that was easy well let's see if that speed is the same this time right so let's do this is oh boy save let's go back to the browser oh there it is already so you can see that this is well i'm not going to go much further than this because this is basically few press the way you would want to work on that however you cannot do everything the same but the basics are there and because it uses feet it's so fast of course it also uses v3 and the way it was built it's basically now just a few three applications so you can do whatever you want you can do your own theming you can probably do some plug-in stuff like that but that's enough for now so um we're almost done with the talk thank you for watching this talk um i have had the pleasure to speak on a bunch of 50s amsterdam conferences and i've attended them all and they're just amazing so thanks guys for organizing and also for inviting me back yet again and for the people who enjoyed what i had to say you can follow me on twitter at timberx and you can also find me on youtube also at timberx where i make videos such as this one but i also do interviews or i try out new stuff or i do talk about general tech stuff in the front-end community so i would really appreciate it if you liked what you saw that you maybe drop a like or maybe subscribe and overall thank you very much you've been a lovely audience sadly we could not do this in person but on a video like this i still kind of feel connected because we do get some likes on the videos and some new subscribers so we're making a community here anyways thank you and i see you next time