Visual Guide to the Modern Frontend Toolchain (Vite)

I talk about Vite, the best toolchain for building frontend apps right now, which combines a number of other tools under the hood with with some extra goodies for a great development experience.

[LachlanMiller]

Sorry for the quality folks, I'll figure out what went wrong and be in 1080p moving forward!

[samfelton]

What an amazing explanation! I’ve never heard someone explain how js compilation works in such a clear way. Thank you!

[FeelingLike]

This is helpful for people like me that love to know what is happening under the hood of these applications. Really appreciate the work done!

[dimis]

oh my god friend you will never believe how useful this video was for me and how many concepts you helped me to grasp ! Thank you very much, i love you i wish you the best <3

[YoussefAdelWahba]

I always love to know what is happening under the hood in the tools and frameworks I use otherwise I feel uncomfortable while using them and this explanation helped me to scratch the surface and figure out what is going on and what are these tools is all about, thank you a lot.

[joshua.hintze]

Nicely done. At first I was skeptical about how deep you would go, but I think this is a great start. I would love to learn more deep into it as well. Thanks

[aissa.bouguern]

This was super informative!
Keep up doing good stuff.

[mujibulhaquetanim]

I would love to see more videos from you on all the topics you covered in this one. It would be awesome if you could make a series out of it. Thank you for your amazing work!

[Kevin-xoul]

I finally found some good frontend content I like. I'll wait for your book.
I'm a frontend developer but also have a lot of love for compilers. One thing that annoys me a lot is (frontend) developers not understanding the tools they work with.
Knowing a little bit about what problem a tool solves and how, will translate into being more productive in the long term. It will also give you independence as you don't need others to help you with a tooling problem. Need your build tool to do something but can't find a plugin that already does that? No problem, just write it yourself!
Also developer UX is a big thing for me. I feel like I can do so much more in less time, just because I know which tools to use and when.
Keep making these videos, I'll keep watching!

[coffeemakir]

Bro!!! This answered so many questions/problems nobody talks about since I looked at react years ago and now I have more questions 😭

[MrBumbo]

Hey man, I really appreciate this videos. I just discovered your channel and I think I'll be going on a binge. The vue vs react video was also great.

[Asvarox]

I think there are couple of inaccuracies though as per Vite docs
1. when you run vite build it doesn't do typechecking and doesn't use tsc - it uses esbuild to get rid of types. You need to do the typechecking yourself or add a plugin
2. when building, by default esbuild is used to minify JS

[aerostorm_]

Amazing video. It took me transitioning a CRA project to Vite while modernizing some of my build processes to even understand half of what goes on when building a React app. I wish I had this video then.

[patricknelson]

Very good! Not sure if visible in this chart, but one really interesting architectural feature of Vite to me was that during “dev”, this transpilation is being performed live on request (asynchronously) whereas the production build phase will pre-build/transform the code and save it to plain .js files. That’s partly why it’s so fast but also might explain some differences between how the dev generated references look (e.g. file paths) when compared to the bundled versions.

[rredington]

Godspeed CRA, my loyal old friend. I'm hooked on Vite for months now.

[peekaboo]

amazing video, never knew vite is doing so much work for us. great content, Keep it up!

[thefreemarketdev]

Thanks for the breakdown. Always good to know what features exist under the hood of frontend toolkits.

[approxahmed]

Very clear and straight to the point, thanks for the explanation!

[marekkamyk]

Increadible content, looking forward to hear more from you. I will watch more of your videos and follow you. Good luck and thanks for awesome learning possibilities

[DoNotMerge]

Great content, Lachlan! Love the explanation. I have issues with making dynamic imports work for me in Vite and your overview helped me to understand where I should investigate