1/27/2024 0 Comments Parcel minifyHere’s a link to the original repo, and a link to my repo with the four versions of Snap Shot, each using a different build tool. The project I went with was Snap Shot by Yogita Verma. I took one of the the example apps from the React docs and rebuilt it with each tool covered in this article. Instead, esbuild processes code extremely fast by avoiding expensive transformations, leveraging parallelization and using the Go language. It doesn’t side-step bundling the way the other tools do. You’ll notice esbuild missing from this picture. This speeds things up a lot as there’s less work in the process of pushing to a dev server. Only after this request is made will the tool apply transforms to the requested module and any leaf nodes in the module’s import tree, then serve these to the browser. Instead, they wait until the browser finds an import statement and makes an HTTP request for the module. Snowpack, Vite, and wmr development servers don’t follow this model. This all takes work, and can slow development servers to a crawl in larger codebases, even after all the work that’s gone into caching and optimizing. Whether we use webpack, Rollup, or Parcel for a development server, the tool bundles our entire codebase from our source code and a node_modules folder, runs these through build processes - like Babel, TypeScript, or PostCSS - then pushes the bundled code to our browser. How are these different from existing tools? We’re still finding out what possibilities native JavaScript modules unlock today in 2021. Node.js also shipped with native JavaScript modules in November 2019. Since then, all major browser engines have supported native JavaScript modules. Back in 2018, Firefox 60 was released with ECMAScript 2015 modules enabled by default. Snowpack, Vite, and wmr have all been enabled by native JavaScript modules in the browser. They come batteries-included without the dependency list, and are part of a trend of collapsing layers in the JavaScript ecosystem. They also fill a missing middle ground between writing a single vanilla JavaScript file, and having to download 200 megabytes of tooling dependencies before you’ve written a line of your own code. In part, I think these tools are arriving as a reaction to JavaScript tooling fatigue - something captured nicely in this article about learning JavaScript back in 2016. Something that stands out from these episodes is that a huge amount of work has gone into building these tools to modernize our developer environments. There are a couple of ShopTalk Show episodes I’d recommend for more context: Episode 454 discusses Vite and Episode 448 features the creators of wmr and Snowpack. There have been a whole lot of great articles, streams, and podcasts about these new developer tools. I’m more familiar with these frameworks libraries, but we’ll look at their support for other front-end frameworks too. Of course, all of this will be colored by my experience using React and Preact. This way, we see what options are out there and how they stack up, so we can make the best choices when we need them. Our goal is more to get a better view of the landscape of developer tools that run tasks to make our jobs easier. In fact, Snowpack and Vite actually use esbuild under the hood for certain tasks. Again, it’s not like any of the things we’re looking at in this article are direct competitors. I realize that comparisons aren’t always fair. Specifically, I’d like to evaluate each one, outlining what they do, why we need them, and their use cases. How are these different from existing tools?.Despite their differences, these tools do share a common goal: improve the developer experience. These new tools aren’t designed to perform the exact same function, and each has different things they’re trying to achieve and features to get there. A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |