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

Hasty Treat - Vite + Parcel 2

Syntax - Tasty Web Development Treats