860: Module Federation Microfrontends with ByteDance’s Zack Jackson

Key takeaways

Module Federation allows dynamic linking of components, facilitating collaboration in large teams.
ByteDance utilizes a specialized team structure that fosters high productivity and flexibility in development.
The build process in large organizations presents unique challenges, particularly in maintaining speed and efficiency.
RSPack significantly enhances build processes, leading to faster iterations and lower cloud costs.
Planning for Module Federation can be beneficial as soon as organizations encounter build-related bottlenecks.
Zach encourages a strategy of maintaining strong boundaries in monorepos to ease the future adoption of federated modules.
Future innovations, including RSPack and Unpack, aim to improve developer experience and application performance.

Summary

Introduction to Module Federation

In this episode, Wes and Scott interview Zach Jackson, an infrastructure architect at ByteDance, who delves into the intricacies of Module Federation. This architecture allows dynamic linking of components in applications, catering especially to large, complex team setups, thereby facilitating collaboration across multiple teams. Zach shares his background and involvement with ByteDance products, including TikTok and CapCut, and sets the stage for discussing Module Federation.

Exploring ByteDance’s Development Environment

Zach explains the structure at ByteDance, contrasting its various native and web applications, and introduces their internal system, Links, which serves as in-house React Native. He discusses how ByteDance operates with an architecture calling for specialized teams focusing on microservices, algorithms, and more, alongside the concept of a 'shared services platform' (SSP) to enhance flexibility and compartmentalization.

The Challenges of Build Processes in Large Teams

The conversation moves to the challenges involved in managing builds, particularly in large organizations like ByteDance, where numerous teams need to collaborate without delays. Zach emphasizes the importance of having knowledgeable individuals on-call for build processes and how various complications arise amidst complex structures, particularly with traditional tools like Webpack.

Demystifying Module Federation

Zach simplifies Module Federation, describing it as a way to share code dynamically between various applications without rebuilding. He discusses its evolution from version one to two, highlighting the intricacies of managing shared components, version control, and reducing unnecessary bloat in application packages. Examples illustrate how it significantly improves the speed of deployments and reduces unnecessary load.

When to Implement Module Federation

The timing for integrating Module Federation is discussed, with Zach suggesting that organizations begin exploring its benefits as soon as they face challenges with slow build processes or complicated release cycles, especially in environments demanding continuous integration and deployment.

Transitioning to Major Upgrades and Multiple Frameworks

Zach covers the processes for transitioning to new major versions of frameworks while maintaining system stability and integrity. He emphasizes the importance of balancing overall application performance, mentioning how federated modules can still interact with legacy systems.

Innovations in Build Optimization with RSPACK

With the introduction of RSPack, a new rust-based bundler developed at ByteDance, Zach highlights the drastic improvements in build times and overall performance, with tangible metrics showing an 80% reduction in cloud costs. This segment emphasizes the partnership between RSPack and Module Federation to streamline application building and deployment.

Future Prospects of Bundlers and Frameworks

Zach discusses future developments in build technologies, including RSPack, RSBuild, and an exploratory project named Unpack, focusing on creating more user-friendly experiences while harnessing powerful backend architecture. Each innovation aims to address problems currently faced by developers in managing complex frontend systems.

Show notes

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 00:00 Welcome to Syntax!
00:48 Zach background and role at ByteDance
03:10 ByteDance’s web and native apps How ByteDance Became the World’s Most Valuable Startup

Lynx

ByteDance GitHub

Coze

Lark

MarsCode

06:48 What is Module Federation? Zephyr Cloud

15:49 Evolution from V1 to V2 of Module Federation
24:47 When to consider Module Federation
29:46 How would you publish a utils package in Module Federation?
32:59 How would you do a major upgrade?
36:36 Brought to you by Sentry.io

37:01 Who owns the update process?
39:40 Handling multiple frameworks
42:10 ModernJS and Meta frameworks ModernJS

Rspress

47:20 Does ByteDance have its own JavaScript runtime? NAPI

50:02 Why Zack built Rspack Rspack

Rsbuild

58:15 The future of Rspack and custom bundlers Unpack

01:04:24 Module Federation’s major features
01:07:29 Sick Picks & Shameless Plugs
Shameless Plugs Zack: Zephyr Cloud

Midscene.js

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