Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

745: Modern JS Toolchains (Biome, Oxc + More)

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.

Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:37">01:37</a> Syntax is on <a href= "www.youtube.com/@syntaxfm">YouTube</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:09">02:09</a> Do we really need tooling?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=04:02">04:02</a> Popular tools are predominantly plug and play.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=06:15">06:15</a> What can tooling do for us?</li> <li class="has-line-data" data-line-start="9" data-line-end="16"> <a href="#t=07:16">07:16</a> The tools in today’s workflow. <ul> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=07:21">07:21</a> Linters.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=11:29">11:29</a> Compilers and transpilers.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=13:30">13:30</a> Formatters.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=16:18">16:18</a> Tokenizers and Parsers.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=16:46">16:46</a> Bundlers.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=17:59">17:59</a> Macros.</li> </ul> </li> <li class="has-line-data" data-line-start="16" data-line-end="25"> <a href="#t=20:26">20:26</a> The new tools in the space. <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=20:47">20:47</a> <a href= "https://biomejs.dev/">Biome</a>, one toolchain for your web project.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=28:27">28:27</a> <a href= "https://oxc-project.github.io/">Oxc</a>, the JavaScript oxidation compiler.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=33:01">33:01</a> <a href= "https://docs.deno.com/runtime/manual/tools/formatter">Deno</a>, code formatting.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=34:13">34:13</a> <a href= "https://esbuild.github.io/">ESBuild</a>, an extremely fast bundler for the web.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=34:37">34:37</a> <a href= "https://github.com/rolldown/rolldown">Rolldown</a>, fast Rust-based bundler for JavaScript.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=38:34">38:34</a> <a href= "https://github.com/kaleidawave/ezno">Ezno</a>, TypeScript type checker.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=40:24">40:24</a> <a href= "https://unjs.io/">UnJS</a>, Unleash JavaScript’s Potential.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=41:45">41:45</a> <a href= "https://lightningcss.dev/">Lightning CSS</a>, CSS parser, transformer, bundler, and minifier.</li> </ul> </li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=42:31">42:31</a> Is JavaScript good enough to handle these tools?</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <a href="#t=43:26">43:26</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="28" data-line-end="29"> <a id="Sick_Picks_28"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> Scott: <a href= "https://www.youtube.com/watch?v=fcq0pwr0IKg">Shinobi-Geddon: The 1980s Ninja Craze</a></li> <li class="has-line-data" data-line-start="31" data-line-end="33"> Wes: <a href="https://bachans.com/collections/all-products">Bachans Japanese Barbecue Sauce</a></li> </ul> <h3 class="code-line" data-line-start="33" data-line-end="34"> <a id="Shameless_Plugs_33"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="35" data-line-end="37"> Scott: <a href="www.youtube.com/@syntaxfm">Syntax on YouTube</a></li> </ul> <h3 class="code-line" data-line-start="37" data-line-end="38"> <a id="Hit_us_up_on_Socials_37"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers.
 Show Notes  00:00 Welcome to Syntax!
 01:37 Syntax is on YouTube.
 02:09 Do we really need tooling?
 04:02 Popular tools are predominantly plug and play.
 06:15 What can tooling do for us?
 07:16 The tools in today’s workflow. 07:21 Linters.
 11:29 Compilers and transpilers.
 13:30 Formatters.
 16:18 Tokenizers and Parsers.
 16:46 Bundlers.
 17:59 Macros.

 20:26 The new tools in the space. 20:47 Biome, one toolchain for your web project.
 28:27 Oxc, the JavaScript oxidation compiler.
 33:01 Deno, code formatting.
 34:13 ESBuild, an extremely fast bundler for the web.
 34:37 Rolldown, fast Rust-based bundler for JavaScript.
 38:34 Ezno, TypeScript type checker.
 40:24 UnJS, Unleash JavaScript’s Potential.
 41:45 Lightning CSS, CSS parser, transformer, bundler, and minifier.

 42:31 Is JavaScript good enough to handle these tools?
 43:26 Sick Picks + Shameless Plugs.
  Sick Picks  Scott: Shinobi-Geddon: The 1980s Ninja Craze

 Wes: Bachans Japanese Barbecue Sauce

  Shameless Plugs  Scott: Syntax on YouTube

  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott:X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

745: Modern JS Toolchains (Biome, Oxc + More)

Poslechněte si podcast