Visual Guide to the Modern Frontend Toolchain (Vite)
Frontend development has come a long way in recent years, with new tools and frameworks constantly emerging to make the job of building websites and web applications more efficient and enjoyable. One such tool that has gained popularity in the frontend community is Vite.
What is Vite?
Vite is a modern frontend build tool that aims to provide a lightning-fast development experience for web developers. It was created by Evan You, the creator of Vue.js, and is designed to be lean and minimalist, focusing on speed and simplicity.
Features of Vite
Vite comes with a range of features that make it a popular choice among frontend developers. Some of its key features include:
- Instant server start: Vite comes with a dev server that starts up in milliseconds, allowing developers to see changes reflected in the browser almost instantly.
- Support for modern JavaScript features: Vite supports ES modules, allowing developers to use modern JavaScript features without the need for complex configuration.
- Plugin-based architecture: Vite is built on a plugin-based architecture, making it easy to extend and customize with plugins for tasks such as TypeScript compilation, CSS preprocessing, and more.
- Hot module replacement: Vite supports hot module replacement, allowing developers to see changes to their code reflected in the browser without needing to manually refresh the page.
Getting Started with Vite
Getting started with Vite is easy. Simply install Vite using npm or yarn, create a new project using the `create-vite` command, and start the dev server using the `npm run dev` or `yarn dev` command. From there, you can start building your web application using Vite’s powerful features.
Conclusion
Vite is a powerful and lightweight frontend build tool that is quickly becoming a popular choice among frontend developers. Its speed, simplicity, and support for modern JavaScript features make it a great choice for building fast and efficient web applications. If you haven’t tried Vite yet, now is a great time to give it a go and see how it can streamline your frontend development workflow.
Sorry for the quality folks, I'll figure out what went wrong and be in 1080p moving forward!
Oh man, gold stuff sir ! I wish you can go deeper, but this stuff is a very great introduction already
damn I would so much love to see this but I only have time after work hours and then I really physically can't look into bright white screens anymore. YT vids are where darkmode just fails…. uff had to scroll up even writing this.
Maybe worth a consideration…
Do you believe we need this level of complexity on the front-end side?
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.
Very informative video
PS: I like your keyboard layouts
Awesome!! Nice explanation.
Keep making such explainer videos ❤
Great. Thanks.
Thanks! Quite informative!
Thanks for the breakdown. Always good to know what features exist under the hood of frontend toolkits.
Good one and to the point❤
This is soooooo helpful for people like me that love to know what is happening under the hood of these applications. Really appreciate the work done!
This video is one of the reasons I hate Javascript. It's so complicated. Add NX on top of this.
I am facing a memory issue with tsc because of too complex types from Graphql objects. Hopefully webpack still compiles the code but then I have to figure out how to fix tsc part. 🤪🔫
Thanks for this informative video.
I've seen you before in some Vue related repos in Github, just wanted to say thank you for your OSS contributions! 🙏
This is a very insightful video. Sometimes I'd like to know more about Vue ecosystem packages' inner workings, and there's not much material around for easy consumption so the more we have, the better.
It was well explained and helpful
Great video! Glad I came across your content, looking forward to the release of your tooling book ✌
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
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!
thank you for the awesome video. can't wait for the book to come out!