Hasty Treat - Bundlers in 2020

Syntax

In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more! 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 02:39 - What is a bundler? On the one hand, you can write HTML, CSS and JavaScript and open it in the browser On the other hand, your build could be super complex 03:24 - What goes into configuring a bundler? Templating language you use (Jsx, Pug, Vue, etc.) JavaScript you write and compile to: ES6/7/8/9 Typescript CoffeeScript Polyfills Environmental variables CSS loading Image compression Asset Chunking Tree shaking 05:12 - Webpack Hardest to learn, most used currently 07:38 - Rollup Scott’s pick as best option for most features vs ease of use Very powerful Mmmr, tree shaking, plugins, esm 09:52 - Parcel Scott’s simplicity winner pick Easiest to get started with It’s a bundler, but also a dev tool Hot reload Local server Config is done via your package.json Lots of plugins available 12:01 - Npm, Yarn and Yarn 2 It’s a dependency installer rather than a bundler 13:27 - Snowpack Scott’s speed pick of the week Uses ESM by default Like Sonic after a triple shot of espresso HRM Perfect for dev builds, as well as production builds 15:51 - Isobuild / Meteor Scott’s underdog pick of the litter 16:48 - Rome Scott’s mystery pick of the week New tool to do it all Bundler, but also a linter 17:54 - Deno Linter Typescript formatter Bundler (bundle into a single .js file) 20:44 - Let your tool take care of it Gatsby (webpack) Next.js (webpack) Gridsome Create React App Vite (Rollup) Broccoli.js Links Babel Gulp Syntax 212: Pika Pkg Fred Schott Pika Rust Go Software Engineering Daily: Deno and TypeScript with Elio Rivero 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.

In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more!

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

02:39 - What is a bundler?

  • On the one hand, you can write HTML, CSS and JavaScript and open it in the browser
  • On the other hand, your build could be super complex

03:24 - What goes into configuring a bundler?

  • Templating language you use (Jsx, Pug, Vue, etc.)
  • JavaScript you write and compile to:
    • ES6/7/8/9
    • Typescript
    • CoffeeScript
  • Polyfills
  • Environmental variables
  • CSS loading
  • Image compression
  • Asset Chunking
  • Tree shaking

05:12 - Webpack

  • Hardest to learn, most used currently

07:38 - Rollup

  • Scott’s pick as best option for most features vs ease of use
  • Very powerful
  • Mmmr, tree shaking, plugins, esm

09:52 - Parcel

  • Scott’s simplicity winner pick
  • Easiest to get started with
  • It’s a bundler, but also a dev tool
    • Hot reload
    • Local server
  • Config is done via your package.json
  • Lots of plugins available

12:01 - Npm, Yarn and Yarn 2

  • It’s a dependency installer rather than a bundler

13:27 - Snowpack

  • Scott’s speed pick of the week
  • Uses ESM by default
  • Like Sonic after a triple shot of espresso
  • HRM
  • Perfect for dev builds, as well as production builds

15:51 - Isobuild / Meteor

  • Scott’s underdog pick of the litter

16:48 - Rome

  • Scott’s mystery pick of the week
  • New tool to do it all
  • Bundler, but also a linter

17:54 - Deno

  • Linter
  • Typescript formatter
  • Bundler (bundle into a single .js file)

20:44 - Let your tool take care of it

Links Tweet us your tasty treats!

Audio Player

-
--:--
--:--