After working on a handful of web applications I can honestly say there always seem to be similar puzzles across them all. 🧩

Associate Staff @ MIT Lincoln Laboratory | Analyst | Architect | Engineer

Enter Vite, a build tool that understands as we build more aspiring apps we must also manage the amount of JavaScript we introduce. One way it does this is by segmenting the difference between dependencies and source code. With dependencies Vite pre-bundles them using esbuild, a bundler application for the web. As for the source code, it gets served as native ECMAScript Modules (ESM), a standard for scripting languages, where it lets the browser take the role of the bundler and needs to only serve the code when it is request. This enables only allowing pages that are in use to access the functionality. ⚡

What I really enjoyed about this deep dive was in a starting template program I was able to add some custom Hypertext Markup Language (HTML) inside of the initial element that would call some code. From there, I used the core HTML Document Object Model (DOM) functions to trigger a counter call that updated the root page with that value. 🤯

Learning about the simplistic nature of Vite definitely gives me an appreciation for what it is trying to do . Can’t wait to see how it works with my latest project! 😊

Some of these consists of keeping everything properly organized, maintaining dependencies and build tools, and integrating all of the different types of processes you would like to run within your application. The common thread here is the ability to have a minimalistic outlook on your web development environment. By doing so, it keeps things refined, streamlined, and flexible to pivot when necessary. 📂