<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt;Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance.&lt;/p&gt; &lt;h3 class="code-line" data-line-start="2" data-line-end="3"&gt;&lt;a id= "Show_Notes_2"&gt;&lt;/a&gt;Show Notes&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="4" data-line-end="5"&gt; &lt;strong&gt;&lt;a href="#t=00:00"&gt;00:00&lt;/a&gt;&lt;/strong&gt; Welcome to Syntax!&lt;/li&gt; &lt;li class="has-line-data" data-line-start="5" data-line-end="6"&gt; &lt;strong&gt;&lt;a href="#t=00:48"&gt;00:48&lt;/a&gt;&lt;/strong&gt; Zach background and role at ByteDance&lt;/li&gt; &lt;li class="has-line-data" data-line-start="6" data-line-end="13"&gt; &lt;strong&gt;&lt;a href="#t=03:10"&gt;03:10&lt;/a&gt;&lt;/strong&gt; ByteDance’s web and native apps &lt;ul&gt; &lt;li class="has-line-data" data-line-start="7" data-line-end="8"&gt; &lt;a href= "https://hbr.org/2022/02/how-bytedance-became-the-worlds-most-valuable-startup"&gt; How ByteDance Became the World’s Most Valuable Startup&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;a href="https://github.com/bytedance/lynx-llm"&gt;Lynx&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="9" data-line-end="10"&gt; &lt;a href="https://github.com/bytedance"&gt;ByteDance GitHub&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;a href="https://www.coze.com/"&gt;Coze&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;a href="https://www.larksuite.com/"&gt;Lark&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="12" data-line-end="13"&gt; &lt;a href="https://www.marscode.com/"&gt;MarsCode&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="15"&gt; &lt;strong&gt;&lt;a href="#t=06:48"&gt;06:48&lt;/a&gt;&lt;/strong&gt; What is Module Federation? &lt;ul&gt; &lt;li class="has-line-data" data-line-start="14" data-line-end="15"&gt; &lt;a href="https://www.zephyr-cloud.io/"&gt;Zephyr Cloud&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;strong&gt;&lt;a href="#t=15:49"&gt;15:49&lt;/a&gt;&lt;/strong&gt; Evolution from V1 to V2 of Module Federation&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="17"&gt; &lt;strong&gt;&lt;a href="#t=24:47"&gt;24:47&lt;/a&gt;&lt;/strong&gt; When to consider Module Federation&lt;/li&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;strong&gt;&lt;a href="#t=29:46"&gt;29:46&lt;/a&gt;&lt;/strong&gt; How would you publish a utils package in Module Federation?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="18" data-line-end="19"&gt; &lt;strong&gt;&lt;a href="#t=32:59"&gt;32:59&lt;/a&gt;&lt;/strong&gt; How would you do a major upgrade?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="20"&gt; &lt;strong&gt;&lt;a href="#t=36:36"&gt;36:36&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://sentry.io"&gt;Sentry.io&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="21"&gt; &lt;strong&gt;&lt;a href="#t=37:01"&gt;37:01&lt;/a&gt;&lt;/strong&gt; Who owns the update process?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="22"&gt; &lt;strong&gt;&lt;a href="#t=39:40"&gt;39:40&lt;/a&gt;&lt;/strong&gt; Handling multiple frameworks&lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="25"&gt; &lt;strong&gt;&lt;a href="#t=42:10"&gt;42:10&lt;/a&gt;&lt;/strong&gt; ModernJS and Meta frameworks &lt;ul&gt; &lt;li class="has-line-data" data-line-start="23" data-line-end="24"&gt; &lt;a href="https://modernjs.dev/"&gt;ModernJS&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;a href="https://rspress.dev/"&gt;Rspress&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="27"&gt; &lt;strong&gt;&lt;a href="#t=47:20"&gt;47:20&lt;/a&gt;&lt;/strong&gt; Does ByteDance have its own JavaScript runtime? &lt;ul&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="27"&gt; &lt;a href="https://nodejs.org/api/n-api.html"&gt;NAPI&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="27" data-line-end="30"&gt; &lt;strong&gt;&lt;a href="#t=50:02"&gt;50:02&lt;/a&gt;&lt;/strong&gt; Why Zack built Rspack &lt;ul&gt; &lt;li class="has-line-data" data-line-start="28" data-line-end="29"&gt; &lt;a href="https://rspack.dev/"&gt;Rspack&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="29" data-line-end="30"&gt; &lt;a href="https://rsbuild.dev/"&gt;Rsbuild&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="30" data-line-end="32"&gt; &lt;strong&gt;&lt;a href="#t=58:15"&gt;58:15&lt;/a&gt;&lt;/strong&gt; The future of Rspack and custom bundlers &lt;ul&gt; &lt;li class="has-line-data" data-line-start="31" data-line-end="32"&gt; &lt;a href="https://github.com/hardfist/unpack"&gt;Unpack&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="32" data-line-end="33"&gt; &lt;strong&gt;&lt;a href="#t=01:04:24"&gt;01:04:24&lt;/a&gt;&lt;/strong&gt; Module Federation’s major features&lt;/li&gt; &lt;li class="has-line-data" data-line-start="33" data-line-end="35"&gt; &lt;strong&gt;&lt;a href="#t=01:07:29"&gt;01:07:29&lt;/a&gt;&lt;/strong&gt; Sick Picks &amp; Shameless Plugs&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="35" data-line-end="36"&gt; &lt;a id="Shameless_Plugs_35"&gt;&lt;/a&gt;Shameless Plugs&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="37" data-line-end="41"&gt; Zack: &lt;ul&gt; &lt;li class="has-line-data" data-line-start="38" data-line-end="39"&gt; &lt;a href="https://www.zephyr-cloud.io/"&gt;Zephyr Cloud&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="39" data-line-end="41"&gt; &lt;a href="https://midscenejs.com/"&gt;Midscene.js&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="41" data-line-end="42"&gt; &lt;a id="Hit_us_up_on_Socials_41"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="43" data-line-end="44"&gt; Syntax: &lt;a href="https://twitter.com/syntaxfm"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/syntax_fm/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@syntaxfm"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/"&gt;LinkedIn&lt;/a&gt; &lt;a href="https://www.threads.net/@syntax_fm"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="45" data-line-end="46"&gt; Wes: &lt;a href="https://twitter.com/wesbos"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/wesbos/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@wesbos"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/wesbos/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@wesbos"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="47" data-line-end="48"&gt; Scott: &lt;a href="https://twitter.com/stolinski"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/stolinski/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@stolinski"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/stolinski/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@stolinski"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="49" data-line-end="50"&gt; Randy: &lt;a href="https://twitter.com/randyrektor"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/randyrektor/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.youtube.com/@randyrektor"&gt;YouTube&lt;/a&gt; &lt;a href= "https://www.threads.net/@randyrektor"&gt;Threads&lt;/a&gt;&lt;/p&gt;</description>

Syntax - Tasty Web Development Treats

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

DEC 13, 202470 MIN
Syntax - Tasty Web Development Treats

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

DEC 13, 202470 MIN

Description

Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance.

Show Notes Shameless Plugs 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