Micro-Frontends in React-Native! Game Changer for Mobile Apps

Key Concepts

• Module Federation
• Micro Frontends
• React Native
• RS Pack
• Webpack
• Shared Libraries
• Runtime Updates
• Zephyr Cloud
• Remote Modules
• Host Application
• Bundle Sharing
• Asynchronous Loading
• React Lazy
• Suspense
• Version Control
• Git Integration

Cart Application Setup

• Goal: Extract cart functionality from Tennis World into a separate Cart application for sharing.
• Technology: Callstack's Repack is used to initialize a new React Native application named "cart". yarn repack init module cart --template react-native-template-typescript
• Bundler: RS Pack is chosen for its speed, although Webpack is also compatible with Module Federation.
• Code Transfer: The add cart, cart store, and cart list components are copied from the Tennis World application into the new Cart application.
• State Management: Tand is used for shared state management. yarn add @tandemly/state

Module Federation Configuration (Cart Application)

• Objective: Configure the Cart application to expose its components as a shared bundle.
• RS Pack Configuration: The moduleFederation plugin is configured within rs pack.config.js.
• Module Definition:
  • name: "cart" (the name of the module)
  • filename: "cart.bundle.js" (the output file name)
  • exposes: Defines which components to share:
    • ./add-to-cart-button: add to cart button component
    • ./cart-list: cart list component
• Shared Dependencies:
  • Dependencies like react, react-native, and tand are shared to avoid version conflicts and reduce bundle size.
  • The shared property is configured to iterate through the package.json dependencies.
  • Singleton: true ensures only one version of each library is used.
  • Eager: true loads the shared dependencies immediately.
  • requiredVersion specifies the exact version from package.json.
• Error Handling:
  • The module Federation enhanced module is added as a dev dependency to resolve an initial error. yarn add -D @callstack/repack-module-federation
  • The application is configured to run on a specific port (9000) to avoid address conflicts.
• Bundle Generation: Running the bundler creates a module export containing the necessary information for other applications to consume the Cart module.

Hiking World Integration

• Objective: Integrate the Cart module into the Hiking World application.
• RS Pack Configuration (Hiking World):
  • The moduleFederation plugin is used again, but this time to consume a remote module.
  • name: "hiking_world"
  • remotes: Defines the remote module to consume:
    • cart: Points to the URL of the Cart module bundle (initially http://localhost:9000/cart.bundle).
• Shared Dependencies: The same shared dependencies configuration is used as in the Cart application.
• Component Import:
  • The add to cart button is imported into the products page.
  • React.lazy is used for asynchronous loading of the remote component.
  • Suspense is used to handle the loading state of the asynchronous component.
• UI Integration: The add to cart button is added to the product cards.
• Cart Display:
  • The cart list component is also lazily loaded and wrapped in Suspense.
  • useState is used to manage the visibility of the cart.
  • A button is added to toggle the cart's visibility.

Tennis World Integration

• Process: The same integration steps used for Hiking World are applied to Tennis World.
• RS Pack Configuration (Tennis World): The moduleFederation plugin is configured to consume the remote Cart module.
• Code Reuse: The product display and cart integration code from Hiking World are copied and adapted for Tennis World.
• Verification: The add to cart button color is changed in the Cart application to demonstrate live updates across both Hiking World and Tennis World.

Zephyr Cloud Integration

• Objective: Host the Cart module on Zephyr Cloud for production deployment.
• Zephyr Plugin: The Zephyr plugin is installed as a development dependency. yarn add -D @zephyrcloud/plugin-module-federation
• Bundler Configuration: The withZephyr function wraps the RS Pack configuration to connect to Zephyr Cloud.
• Git Integration: Zephyr Cloud requires a Git repository for identification and version control.
• Repository Setup: A new private GitHub repository is created for the Cart application.
• Code Upload: The Cart application code is pushed to the GitHub repository.
• Zephyr Cloud Connection: The bundler is restarted, which opens a browser window for Zephyr Cloud authentication.
• Module Deployment: Zephyr Cloud automatically detects and deploys the Cart module.
• Remote URL Update: The remote URL in Hiking World and Tennis World is updated to point to the Zephyr Cloud URL of the Cart module.
• Version Rollback: Zephyr Cloud's version control features are demonstrated by rolling back to a previous version of the Cart module.

Conclusion

The video demonstrates how to use Module Federation with React Native to share code between multiple applications at runtime. It covers setting up a shared Cart module, integrating it into Hiking World and Tennis World, and deploying it to Zephyr Cloud for production. The key takeaways are the ability to update features independently, reduce bundle sizes, and improve development velocity. Module Federation is presented as a powerful tool for building micro frontend architectures in React Native, with Zephyr Cloud providing a managed hosting solution.