The speaker connects slow shipping in a large app to communication overhead, shared resources, onboarding conflicts, and unclear ownership. They propose improving infrastructure and decentralizing ownership and deployments, drawing parallels with microservices and web micro frontends.
Federated super apps: how to build them with Re.Pack to solve scalability problems
An unidentified Callstack speaker explains how Re.Pack and webpack Module Federation can help large React Native teams deliver app features independently, in a Callstack presentation.
The speaker says dynamic feature delivery can reduce the code users need to download, but Android feature delivery has limits and WebViews can lose the native feel. React Native offers a way to load JavaScript at runtime, while Metro does not officially support dynamic code loading. The presentation introduces webpack and its Module Federation feature as an alternative.
Module Federation allows separate builds for one app, with teams sharing code without relying on npm packages to connect them. With Re.Pack, teams can build mini apps in isolation, use separate repositories or a monorepo, and deploy at their own pace. The host app selects which versions to load, and Re.Pack signs remote JavaScript bundles.
The approach needs a server to select and serve bundle versions, deployment automation, and runtime setup for Module Federation. The speaker points to an open source showcase with the wiring needed to try a federated super app. Re.Pack is described as a flexible toolkit of webpack plugins and loaders.
The speaker says this architecture is intended for large teams, noting they rarely see a need for it below 30 frontend engineers working on one app. An infrastructure team is needed to manage deployments, dependencies, and upgrades. Only JavaScript bundles load dynamically; native modules must ship in the host app, and Apple may be cautious about features delivered outside the normal release process.
Takeaways
- Consider team coordination and ownership alongside technical causes when a large app ships slowly.
- Use independently built mini apps when multiple teams need to release features at different times.
- Choose a monorepo or separate repositories based on how teams work; the speaker says both are supported.
- Plan bundle versioning, delivery infrastructure, signing, and runtime setup before adopting Module Federation.
- Check whether the team is large enough to justify the added infrastructure, and account for native modules in host app releases.
Mentioned in this talk
Search inside this talk
What was claimed 7
- integrates withRe.Pack integrates with Module Federation
“it also enables Module Federation”
1:15inHow to build super apps with React Native and Re.Pack?YouTube Verified4 sources· Talk
- featureModule Federation: Supports separate builds for one app, independent team deployments, and code sharing without npm
“It introduces separate builds for the same app, allowing for more independent teams and deployments, and sharing code between apps without ever attaching npm”
YouTube Unverified1 source· Talk
- role atPavel Trisya is author at Re.Pack
“Pavel Trisya, who is an author of Re.Pack”
YouTube Unverified1 source· Talk
- featureRe.Pack: Signs remote JavaScript bundles
“Re.Pack signs all the remote JavaScript bundles”
YouTube Verified2 sources· Talk
- featureRe.Pack: Bare-bones toolkit for webpack plugins and loaders
“Since Re.Pack is a bare-bones toolkit for webpack plugins and loaders”
YouTube Unverified1 source· Talk
- metricFederated super apps: Usually suited to apps with 30 or more frontend engineers
“We rarely see teams smaller than 30 frontend engineers working on the same app who would need this kind of architecture”
YouTube Unverified1 source· Talk
- featureFederated super apps: Dynamically deliver JavaScript features while native modules remain bundled with the host application
“There's also no lazy loading for native code; we only load the JavaScript bundles”
YouTube Unverified1 source· Talk
