The speaker frames micro frontends as the architecture behind super apps. Module Federation lets separate teams build and deploy frontends independently, then compose them into one product. On the web, this grew from splitting a single application into cached chunks to connecting separately built applications.
Building Universal Super Apps With React & React Native
An unnamed Callstack founder and early React Native contributor discusses building modular super apps with React, React Native, Module Federation, and Re.Pack at the Codeaholics Meetup.
React Native traditionally used Metro, which lacked bundle splitting and Module Federation for much of its history. Re.Pack provides a Webpack-based alternative, letting teams share build infrastructure across web and mobile. The speaker also previews work to bring federation support to Metro with Zephyr Cloud.
Each module can expose screens and run on its own or inside a host application. The example combines booking and e-commerce modules, with users entering a module from the main app while its team develops it separately. React lazy imports and Suspense load modules asynchronously and show a fallback while they arrive.
A host can provide third-party developers with an SDK instead of implementing every integration around their APIs. React context can supply user data, payments, permissions, and methods at runtime, while hooks give modules access to those services. The same approach can provide shared UI components that work across web, iOS, and Android.
Federated modules need deployment and review processes, including a way to upload, approve, release, and roll back code. The speaker describes Zephyr Cloud as one provider and points to a Vietnamese mini-app portal with a manual submission and review workflow. Because modules may share a JavaScript context, teams should consider security audits and separate engine instances to isolate mini apps.
Takeaways
- Use Module Federation when separate teams need to build and deploy features independently, then combine them in one app.
- Keep modules runnable on their own so teams can develop and test them outside the host application.
- Define an SDK that supplies runtime services and shared UI, so module teams can integrate without owning host infrastructure.
- Plan module submission, review, deployment, and rollback as part of the architecture.
- Assess shared JavaScript context risks and consider separate engine instances when modules need isolation.
Mentioned in this talk
Search inside this talk
What was claimed 9
- integrates with
“Re.Pack is a toolkit for React Native applications that works with Webpack.”
0:18inWhat is Re.Pack?YouTube Verified7 sources· Talk
- feature
Callstack: Core contributor to React Native“We’re core contributors to React Native.”
YouTube Unverified1 source· Talk
- built
“We develop a bunch of libraries such as Re.Pack”
5:01inAdding React Native to iOS and Android Apps Has Never Been EasierYouTube Verified3 sources· Talk
- featureModule Federation: Lets independently developed applications be composed into a final application
“You develop multiple applications separately and connect them into the final application layer.”
YouTube Unverified1 source· Talk
- featureMetro: Historically lacked bundle splitting and module federation support
“For a very long time, it didn't have bundle splitting, module federation, or any of that.”
YouTube Unverified1 source· Talk
- uses
Uber uses Module Federation“It's the same app, and this is how they manage that experience.”
YouTube Unverified1 source· Talk
- featureReact Navigation: Defines screens by mapping screen names to components and options
“React Navigation is a React Native library that lets you say that a screen named “Uber Eats” points to a given component.”
YouTube Unverified1 source· Talk
- featureZephyr Cloud: Provides infrastructure to upload, review, release, and roll back externally developed code
“There's a third-party provider called Zephyr Cloud that does just that.”
YouTube Unverified1 source· Talk
- featureModule Federation: Can let separate teams ship independently and unblock teams that depend on one another
“Federated modules can help by unblocking teams that depend on one another.”
YouTube Unverified1 source· Talk
