Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Vite + Parcel 2

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 modern build tools, comparisons between them, and makes them modern and next-level.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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 <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 03:08 - Next Gen Bundlers are here!</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> They are easy</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> They are fast</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> They are bundlers</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> They are code splitters</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> They are dev environments</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> HMR / Fast Refresh</li> </ul> <p class="has-line-data" data-line-start="24" data-line-end="25"> 07:13 - What do they use under the hood?</p> <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> Parcel uses SWC (Rust)</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> Vite uses esbuild (Go)</li> </ul> <p class="has-line-data" data-line-start="28" data-line-end="29"> 10:29 - How do you use them?</p> <ol> <li class="has-line-data" data-line-start="29" data-line-end="30"> Usually point your app at an HTML file</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Your HTML file has an ES module</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> It then goes and loads everything from there</li> <li class="has-line-data" data-line-start="32" data-line-end="36"> They have adaptors for different types of files <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> CSS</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> Images</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> Etc.</li> </ul> </li> </ol> <ul> <li class="has-line-data" data-line-start="36" data-line-end="38"> You can also point it directly at files</li> </ul> <p class="has-line-data" data-line-start="38" data-line-end="39"> 14:59 - Common use-cases</p> <ul> <li class="has-line-data" data-line-start="39" data-line-end="41"> React / JSX <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> OOTB</li> </ul> </li> <li class="has-line-data" data-line-start="41" data-line-end="42"> Vue</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Svelte</li> <li class="has-line-data" data-line-start="43" data-line-end="45"> TypeScript <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> Both just work</li> </ul> </li> <li class="has-line-data" data-line-start="45" data-line-end="47"> Custom Babel config <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Plugins for both</li> </ul> </li> <li class="has-line-data" data-line-start="47" data-line-end="50"> Sass <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Vite: Detects it, asks to install it</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> Parcel: Detects it, installs it for you</li> </ul> </li> <li class="has-line-data" data-line-start="50" data-line-end="52"> PostCSS Processors</li> </ul> <p class="has-line-data" data-line-start="52" data-line-end="53"> 20:29 - Custom API</p> <ul> <li class="has-line-data" data-line-start="53" data-line-end="54"> Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.</li> <li class="has-line-data" data-line-start="54" data-line-end="56"> Example use-case: a really nice WordPress dev package.</li> </ul> <p class="has-line-data" data-line-start="56" data-line-end="57"> 20:57 - Which one?</p> <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> Both are really good!</li> <li class="has-line-data" data-line-start="58" data-line-end="59"> Parcel 2 has been in dev for 2+ years - unsure when it will launch.</li> <li class="has-line-data" data-line-start="60" data-line-end="61"> Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.</li> <li class="has-line-data" data-line-start="61" data-line-end="62"> Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)</li> <li class="has-line-data" data-line-start="62" data-line-end="64"> Life is good!</li> </ul> <h2 class="code-line" data-line-start="64" data-line-end="65"> <a id="Links_64" name="Links_64"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.bravotv.com/top-chef">Top Chef</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.fox.com/masterchef/">Master Chef</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.snowpack.dev/">Snowpack</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://webpack.js.org/">Webpack</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://v2.parceljs.org/">Parcel</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://swc.rs/">SWC</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://vitejs.dev/">Vite</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://esbuild.github.io/">esbuild</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://rollupjs.org/guide/en/">Rollup</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://kit.svelte.dev/">SvelteKit</a></li> <li class="has-line-data" data-line-start="75" data-line-end="77"> <a href="https://strapi.io/">Strapi</a></li> </ul> <h2 class="code-line" data-line-start="77" data-line-end="78"> <a id="Tweet_us_your_tasty_treats_77" name= "Tweet_us_your_tasty_treats_77"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> 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 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

Aplikace Youradio Talk

Hasty Treat - Vite + Parcel 2

Poslechněte si podcast