meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

Hasty Treat - Vite + Parcel 2

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, Technology, News

4.9 • 1.2K Ratings

🗓️ 12 July 2021

⏱️ 26 minutes

🧾️ Download transcript

Summary

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

Transcript

Click on a timestamp to play from that location

0:00.0

Monday Monday Monday open wide dev fans get ready to stuff your face with Javascript CSS node module barbecue tips get work flows break dancing soft skills web development the hastiest the

0:13.5

Carrazius the tastiest web development treats coming in hot. Here is West

0:19.2

Barakuda boss and Scott L. Toro Lungo to Lenski

0:25.2

Welcome to syntax in this Monday hasty treat. We're going to be talking about some modern build tools and we're going to be talking specifically about parcel and

0:37.2

Vitt white beat all of the above there. We're going to be talking about those and a little bit about some of the comparisons between these modern tools and some of what makes them modern. Now my name is Scott

0:48.5

Tolenski. I'm a developer from Denver, Colorado and with me as always is

0:53.0

West boss. Hey, I'm excited to talk about these tools because they are both amazing and like next level. So yeah,

1:02.7

Stoked that we're getting here in web development. Well speaking of next level modern tools. We have two amazing sponsors today.

1:09.7

We're sponsored by Prismic as well as log rocket. Now log rocket is the perfect place where you can see errors and exceptions happen in a video scribble replay

1:17.5

giving you access to the network tab, the error logs and all of the things that you know and love

1:23.0

in your own local debugging experience. You ever feel like you're debugging in a black box. You can't see anything. West, do you watch top chef?

1:31.2

No, no, I maybe have is that the one with Gordon Ramsey?

1:34.7

No, that's master chef. No, I was Matt. I watched master chef. Yeah. Okay. We watch top chef. We watch master chef too. But in top chef, they had a

1:42.7

challenge where they had to go into a black box room and and like taste some food to debug it and figure out what it was before making it.

1:49.5

Oh, that's fun. Yeah. No, you don't you don't get any of that with log rocket. You're not going to be put into a top chef style,

1:54.7

mass black box and have to figure out what the heck's going on. You can solve yours and exceptions right there with a video replay.

2:00.3

So check it out at log rocket.com forward slash syntax where you will get 14 days for free.

2:06.0

We are also sponsored by Prismic, which is a headless CMS. They just raise a whole bunch of money and are just going to make it really, really awesome.

2:15.0

They already have an awesome product and what it is that you sign up. You create your content types and they're really pushing this approach where instead of creating like a page and then assigning inputs for that specific page and then pulling them in.

2:28.0

They're telling you, no, no, no, go ahead and make slices, meaning that these are just sort of like you have a component and that component has data.

2:35.7

Then you make a slice that sort of mirrors that component and those have the inputs, an image upload, a number input, a text area, a title, things like that.

2:46.5

And then whenever you want to put together a page, you go and click together those slices to make an entire pizza of a website.

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2026.