Shaping the Future of Super Apps in React Native

In 2023, we introduced the ability to build native mobile super apps powered by the state-of-the-art web micro-frontend technology Module Federation. Fast-forward to 2024, it’s time to take it to the next level of delight and experience thanks to the new wave of tools and services that are gaining more traction, namely Rspack, Module Federation 2, and Zephyr Cloud, all combined with Re.Pack.

Re.Pack and super app development today

At Callstack, we believe that the future of mobile and web app development is React Universe—a tech ecosystem with React at its core. The exact tech that allows us to build cross-platform mobile, TV, and desktop apps today is React Native. It brings web technologies and ideas, like bundlers, APIs, and devtools, into native platform development.

Speaking of bundlers—they allow you to package all JavaScript files developers write into an optimal format for your app. One of such bundlers that you can use with React Native is Re.Pack. It harnesses all the necessary setup to allow hooking Webpack, one of the most popular and powerful web bundlers, into your mobile app development.

Webpack allowed us to bring a web architecture concept, Module Federation, to mobile apps, powering the super app building experience. With the benefits of shipping modular (or federated) features to your users independently of the AppStore or Google PlayStore release schedule. We’ve seen enterprises building on this architecture and successfully deploying it to thousands of users.

With the new possibilities, however, challenges emerge that any app adopting super app architecture must resolve: dev iteration speed, discrepancies between the APIs of Module Federation for the web and for mobile, and version management. The good news is that these challenges won’t stay for long.

Why we’re betting on Rspack

Rspack is a next-gen bundler aiming to be a drop-in replacement for Webpack. It’s built by the Web Infra team at ByteDance and is written in Rust for performance and better scalability. It doesn't just offer a similar configuration interface with Webpack, but it’s also 5x faster. Most importantly, for tooling and library builders, it allows us to build on it, and take care only of the parts specific to React Native. Rspack addressed long-standing issues, most importantly providing reliable Hot Module Replacement across federated bundles.

That’s why in the next major release of Re.Pack 5 we’ll bring full Rspack support while keeping full Webpack support for the time being.

We’re building all future features on top of Rspack, and we can’t wait to share it with the world!

How Module Federation 2 unlocks a unified web and mobile experience 

This year, a major iteration of Module Federation was released—version 2.0. It brings numerous enhancements: 

• Dynamic type generation to understand what props your federated components can accept (a long-standing issue in Re.Pack as well!). 
• Federation runtime, which adds the ability to dynamically add new remotes or declare shared dependencies at runtime. 
• A plugin system for the runtime, allowing developers to customize behaviors when dealing with federated remotes. 

These are just a few, selected features of the new Module Federation - it’s highly recommended to read the official announcement on the brand-new documentation site. 

The best part about Module Federation 2 is the fact that it enabled us to eliminate workarounds we had in place to have MF working in the React Native environment. It makes web and mobile MF experiences consistent, deterministic, and predictable. 

The Re.Pack team has simplified how the federated remotes are imported, removing the need for custom utility functions. Federation Runtime plugins standardized the way to customize the behavior, so we can now provide an official plugin to align the necessary parts of Module Federation for the React Native environment. 

Now, Re.Pack can provide sensible defaults, enabling you to get everything working without the use of its low-level API. All of these changes combined make the development experience with Module Federation and React Native feel much closer to the web.

Partnering with Zephyr Cloud 

We are excited to announce our collaboration with Zephyr Cloud to integrate their platform into the React Native ecosystem. This partnership aims to simplify the deployment pipeline for React Native apps by leveraging Zephyr Cloud’s capabilities and make it as seamless as possible.

Purpose-built to manage and deploy micro-frontend applications, Zephyr Cloud is, as they say, the only sane way to do micro-frontends. As a cloud-agnostic and framework-agnostic tool, Zephyr Cloud makes managing federated apps simpler, faster, and more efficient. They do this without the need of extensive additional configuration. 

It enables you to connect to your chosen cloud provider, such as Cloudflare or Netlify(while adding more integrations in the future), so your data stays within your grasp. On its own, it ensures you retrieve the correct version of your mini app. 

Alternatively, you can use their own managed cloud for a super smooth integration experience. Zephyr integration is available as a plugin for both Rspack and Webpack—thus naturally playing nicely with Re.Pack.

How Zephyr Cloud supports building super apps 

Zephyr Cloud integration could be separated into two parts: deployment to the edge (via the CLI in your terminal) and version management - through online dashboard or a Google Chrome extension.

Deployment

The official Rspack/Webpack plugin wraps your entries configuration and integrates a deployment into every build. Not every asset will be uploaded every time - the plugin can deduce which assets have changed and upload only those, making the deployment process fast. 

Version Management

We are also big fans of the version management side of this integration and how it will be relevant for the super apps. Here are some of the highlights:

• Control which version of a mini app is available for a given host app version by selecting the wanted versions from the list of the available deployments.
• Rollback to a previous version in case of unexpected critical bugs in production environment, without a need of releasing a hotfix
• Visualize your Super App structure - see how federated mini apps connect with each other and what are the relationships between them
• Visualize the project dependencies shared between the apps making it easier to spot incompatibilities and potential issues

After reading that you might get a feeling that this all sounds like a previously missing piece to the Super App puzzle - we think so too!

Building super apps tomorrow: Re.Pack 5 and Zephyr Cloud 

With these improvements in development and deployment workflows, we are optimistic that Super Apps will become an even more viable solution in the React Native ecosystem. By combining enhanced development tools and easy-to-adopt deployment solutions like Zephyr Cloud, we hope to unlock a completely new, delightful experience of delivering high-quality apps that target users across any platform, including web. 

Re.Pack 5 alpha release with Rspack is available to you starting today. Try it now and help us stabilize this version by installing it in new or existing projects:

<rte-code>npx @callstack/repack-init@5.0.0-alpha.0<rte-code>

In the upcoming weeks, we’ll be shipping stable support for Module Federation 2, Zephyr Cloud integration, and Nx integration for you to try and build with. Stay tuned!