Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Bundlers in 2020

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 02:39 - What is a bundler?</p> <ul> <li class="has-line-data" data-line-start="15" data-line-end="16"> On the one hand, you can write HTML, CSS and JavaScript and open it in the browser</li> <li class="has-line-data" data-line-start="16" data-line-end="18"> On the other hand, your build could be super complex</li> </ul> <p class="has-line-data" data-line-start="18" data-line-end="19"> 03:24 - What goes into configuring a bundler?</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> Templating language you use (Jsx, Pug, Vue, etc.)</li> <li class="has-line-data" data-line-start="20" data-line-end="24"> JavaScript you write and compile to: <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> ES6/7/8/9</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Typescript</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> CoffeeScript</li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Polyfills</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Environmental variables</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> CSS loading</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Image compression</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Asset Chunking</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Tree shaking</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 05:12 - <a href="https://webpack.js.org/">Webpack</a></p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="34"> Hardest to learn, most used currently</li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 07:38 - <a href= "https://rollupjs.org/guide/en/">Rollup</a></p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> Scott’s pick as best option for most features vs ease of use</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Very powerful</li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Mmmr, tree shaking, plugins, esm</li> </ul> <p class="has-line-data" data-line-start="39" data-line-end="40"> 09:52 - <a href="https://parceljs.org/">Parcel</a></p> <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> Scott’s simplicity winner pick</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> Easiest to get started with</li> <li class="has-line-data" data-line-start="42" data-line-end="45"> It’s a bundler, but also a dev tool <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> Hot reload</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Local server</li> </ul> </li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Config is done via your package.json</li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Lots of plugins available</li> </ul> <p class="has-line-data" data-line-start="48" data-line-end="49"> 12:01 - <a href= "https://www.npmjs.com/">Npm</a>, <a href="https://yarnpkg.com/">Yarn and Yarn 2</a></p> <ul> <li class="has-line-data" data-line-start="49" data-line-end="51"> It’s a dependency installer rather than a bundler</li> </ul> <p class="has-line-data" data-line-start="51" data-line-end="52"> 13:27 - <a href="https://www.snowpack.dev/">Snowpack</a></p> <ul> <li class="has-line-data" data-line-start="52" data-line-end="53"> Scott’s speed pick of the week</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> Uses ESM by default</li> <li class="has-line-data" data-line-start="54" data-line-end="55"> Like Sonic after a triple shot of espresso</li> <li class="has-line-data" data-line-start="55" data-line-end="56"> HRM</li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Perfect for dev builds, as well as production builds</li> </ul> <p class="has-line-data" data-line-start="58" data-line-end="59"> 15:51 - <a href="https://www.meteor.com/">Isobuild / Meteor</a></p> <ul> <li class="has-line-data" data-line-start="59" data-line-end="61"> Scott’s underdog pick of the litter</li> </ul> <p class="has-line-data" data-line-start="61" data-line-end="62"> 16:48 - <a href="https://rome.tools/">Rome</a></p> <ul> <li class="has-line-data" data-line-start="62" data-line-end="63"> Scott’s mystery pick of the week</li> <li class="has-line-data" data-line-start="63" data-line-end="64"> New tool to do it all</li> <li class="has-line-data" data-line-start="64" data-line-end="66"> Bundler, but also a linter</li> </ul> <p class="has-line-data" data-line-start="66" data-line-end="67"> 17:54 - <a href="https://deno.land/">Deno</a></p> <ul> <li class="has-line-data" data-line-start="67" data-line-end="68"> Linter</li> <li class="has-line-data" data-line-start="68" data-line-end="69"> Typescript formatter</li> <li class="has-line-data" data-line-start="69" data-line-end="71"> Bundler (bundle into a single .js file)</li> </ul> <p class="has-line-data" data-line-start="71" data-line-end="72"> 20:44 - Let your tool take care of it</p> <ul> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.gatsbyjs.com/">Gatsby</a> (webpack)</li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://nextjs.org/">Next.js</a> (webpack)</li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://gridsome.org/">Gridsome</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href= "https://reactjs.org/docs/create-a-new-react-app.html">Create React App</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://github.com/vitejs">Vite</a> (Rollup)</li> <li class="has-line-data" data-line-start="77" data-line-end="79"> <a href="https://broccoli.build/">Broccoli.js</a></li> </ul> <h2 class="code-line" data-line-start="79" data-line-end="80"> <a id="Links_79" name="Links_79"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://babeljs.io/">Babel</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://gulpjs.com/">Gulp</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://syntax.fm/show/212/pika-pkg">Syntax 212: Pika Pkg</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://twitter.com/FredKSchott">Fred Schott</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://www.pika.dev/">Pika</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://www.rust-lang.org/">Rust</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://golang.org/">Go</a></li> <li class="has-line-data" data-line-start="87" data-line-end="89"> <a href= "https://softwareengineeringdaily.com/2020/09/28/deno-and-typescript-with-elio-rivero/"> Software Engineering Daily: Deno and TypeScript with Elio Rivero</a></li> </ul> <h2 class="code-line" data-line-start="89" data-line-end="90"> <a id="Tweet_us_your_tasty_treats_89" name= "Tweet_us_your_tasty_treats_89"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="96" data-line-end="97"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

Hasty Treat - Bundlers in 2020

Poslechněte si podcast