This discussion dives into the latest in web development with modern bundlers like Vite and Parcel 2. Highlights include their speed, ease of use, and advanced features like hot module reloading. The hosts compare the intricacies of each tool, offering insights into their back-end technologies. They also explore the seamless integration with frameworks such as React, Vue, and Svelte, showcasing how these tools simplify file management and enhance developer workflows. Common use cases and personal experiences add a practical touch to the tech talk.
25:52
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
insights INSIGHT
Next-Gen Bundlers
Modern build tools like Vite and Parcel 2 leverage ECMAScript modules for individual file loading.
Hot module reloading replaces files, enabling quick recompilation and a faster development experience.
insights INSIGHT
Build Tools Under the Hood
Parcel uses SWC (Rust-based), while Vite uses ESBuild (Go-based) for faster builds.
Vite also utilizes Rollup for production builds and plugin compatibility.
volunteer_activism ADVICE
Using Modern Build Tools
Start with an HTML file containing a script tag with type="module" and point your tool at it.
The tool crawls through the application, finding and processing necessary assets.
Get the Snipd Podcast app to discover more snips from this episode
In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.
Prismic - Sponsor
Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor
LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes
03:08 - Next Gen Bundlers are here!
They are easy
They are fast
They are bundlers
They are code splitters
They are dev environments
HMR / Fast Refresh
07:13 - What do they use under the hood?
Parcel uses SWC (Rust)
Vite uses esbuild (Go)
10:29 - How do you use them?
Usually point your app at an HTML file
Your HTML file has an ES module
It then goes and loads everything from there
They have adaptors for different types of files
CSS
Images
Etc.
You can also point it directly at files
14:59 - Common use-cases
React / JSX
OOTB
Vue
Svelte
TypeScript
Both just work
Custom Babel config
Plugins for both
Sass
Vite: Detects it, asks to install it
Parcel: Detects it, installs it for you
PostCSS Processors
20:29 - Custom API
Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.
Example use-case: a really nice WordPress dev package.
20:57 - Which one?
Both are really good!
Parcel 2 has been in dev for 2+ years - unsure when it will launch.
Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.
Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
Syntax - Tasty Web Development Treats