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.)
Life is good!
Links Top Chef
Master Chef
Snowpack
Webpack
Parcel
SWC
Vite
esbuild
Rollup
SvelteKit
Strapi
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets