Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Supper Club × Make React 70% Faster! Million.js with 18 Year Old Aiden Bai

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.

In this supper club episode of Syntax, Wes and Scott talk with Aiden Bai about his work on Million.js that aims to make React a lot faster. How does Million.js make React faster? And most importantly: has Aiden ever used a VCR? <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:35">00:35</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:57">00:57</a> Introducing Aiden Bai</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://aidenybai.com/">Aiden Bai</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://github.com/aidenybai">aidenybai on GitHub</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://twitter.com/aidenybai">@aidenybai on Twitter</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://www.youtube.com/@aidenbai">Aiden Bai on YouTube</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://million.dev/">Million.js</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=01:57">01:57</a> What is Million.js?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=03:20">03:20</a> How does React do rendering now?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=04:31">04:31</a> How does Million.js make it faster?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=07:37">07:37</a> What goes into creating a compiler?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=08:24">08:24</a> How do you go from learning JavaScript to writing compilers?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=11:05">11:05</a> Wyze WebRTC stream work</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=13:13">13:13</a> What are you using to benchmark and test?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://www.solidjs.com/">solidjs.com</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://github.com/krausest/js-framework-benchmark">js-framework-benchmark</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://xkcd.com/303/">xkcd: Compiling</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=18:19">18:19</a> What does a slowly rendering site look like?</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=23:54">23:54</a> How do you handle find on page with large amounts of code?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=25:32">25:32</a> What does 70% faster with Million.js mean?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://hyper.is/">Hyper™</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://www.warp.dev/">Warp: Your terminal, reimagined</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=26:44">26:44</a> Why are maps slow?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://syntax.fm/show/643/supper-club-wasm-fastly-edge-and-polyfill-io-with-jake-champion"> Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion — Syntax Podcast 643</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=28:19">28:19</a> Benefits of the Macro API</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=31:12">31:12</a> Does Million.js work across the board?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=33:03">33:03</a> Does it ever break projects? How do you test Million.js?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=35:35">35:35</a> How do you keep up on your GitHub issues?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=37:40">37:40</a> What other areas of tech are you interested in working on?</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://github.com/BuilderIO/partytown">partytown</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=39:32">39:32</a> What was the inspiration for your website?</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=43:52">43:52</a> Supper Club questions</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://github.com/sainnhe/gruvbox-material">Gruvbox with Material Palette</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> <a href="https://iterm2.com/">iTerm2 - macOS Terminal Replacement</a></li> </ul> <h2 class="code-line" data-line-start="39" data-line-end="40"> <a id="_SIIIIICK__PIIIICKS__39"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://letterboxd.com/film/barbie/">Barbie (2023) directed by Greta Gerwig • Reviews, film + cast • Letterboxd</a></li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <a href= "https://letterboxd.com/film/teenage-mutant-ninja-turtles-mutant-mayhem/"> Teenage Mutant Ninja Turtles: Mutant Mayhem (2023) directed by Jeff Rowe • Reviews, film + cast • Letterboxd</a></li> </ul> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="Shameless_Plugs_44"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="46" data-line-end="48"> <a href="https://sink.million.dev/">Million Kitchen Sink</a></li> </ul> <h2 class="code-line" data-line-start="48" data-line-end="49"> <a id="Tweet_us_your_tasty_treats_48"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this supper club episode of Syntax, Wes and Scott talk with Aiden Bai about his work on Million.js that aims to make React a lot faster. How does Million.js make React faster? And most importantly: has Aiden ever used a VCR?
 Show Notes  00:35 Welcome
 00:57 Introducing Aiden Bai
 Aiden Bai

 aidenybai on GitHub

 @aidenybai on Twitter

 Aiden Bai on YouTube

 Million.js

 01:57 What is Million.js?
 03:20 How does React do rendering now?
 04:31 How does Million.js make it faster?
 07:37 What goes into creating a compiler?
 08:24 How do you go from learning JavaScript to writing compilers?
 11:05 Wyze WebRTC stream work
 13:13 What are you using to benchmark and test?
 solidjs.com

 js-framework-benchmark

 xkcd: Compiling

 18:19 What does a slowly rendering site look like?
 23:54 How do you handle find on page with large amounts of code?
 25:32 What does 70% faster with Million.js mean?
 Hyper™

 Warp: Your terminal, reimagined

 26:44 Why are maps slow?
  Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion — Syntax Podcast 643

 28:19 Benefits of the Macro API
 31:12 Does Million.js work across the board?
 33:03 Does it ever break projects? How do you test Million.js?
 35:35 How do you keep up on your GitHub issues?
 37:40 What other areas of tech are you interested in working on?
 partytown

 39:32 What was the inspiration for your website?
 43:52 Supper Club questions
 Gruvbox with Material Palette

 iTerm2 - macOS Terminal Replacement

  ××× SIIIIICK ××× PIIIICKS ×××  Barbie (2023) directed by Greta Gerwig • Reviews, film + cast • Letterboxd

  Teenage Mutant Ninja Turtles: Mutant Mayhem (2023) directed by Jeff Rowe • Reviews, film + cast • Letterboxd

  Shameless Plugs  Million Kitchen Sink

  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
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

Supper Club × Make React 70% Faster! Million.js with 18 Year Old Aiden Bai

Poslechněte si podcast