WhoBuilt

Chopping Expo up into universal modules to take over the world

Sep 14, 2018· 19 min· 2.4K views·Watch on YouTube

Speaker

Stanisław Chmiela, a software engineer at Software Mansion, explains how Expo’s team was breaking Expo SDK into universal modules at a Callstack event.

Why Expo needed smaller modules

Expo SDK bundled interdependent APIs, so apps could carry code they never used and contributors had to build the full runtime to make small changes. The team wanted developers to remove or replace APIs and contribute modules independently.

Decoupling features with interfaces

Chmiela uses Camera and Face Detector to explain the design. Camera depends on interfaces for permissions and face detection, so an app can provide its own implementation or omit face detection; Camera can still compile if an implementation is missing.

How modules work together

Chmiela describes four module types: internal modules implement interfaces, exported modules expose methods to JavaScript, singleton modules live once per native application, and view managers manage views. A Module Registry connects modules to implementations, while a provider tracks module classes and manages singleton instances.

Adapters and tradeoffs

Expo Core holds the registry and module interfaces without depending on a platform. A React Native adapter connects that core to React Native and exposes module methods to JavaScript; Chmiela says the same native modules could also serve Flutter. The approach requires several packages and manual linking, and calls pass through two proxies.

Adoption plans and ecosystem

The team wanted Turtle builds to let developers exclude Expo native code already moved into universal modules and planned tools such as create-expo-library and Expo Modules. Chmiela said 19 APIs had already been extracted from Expo’s monorepo, with Lua among the additional platforms they were considering.

Takeaways

  • Define interfaces in shared packages so feature modules can be replaced or omitted without breaking their consumers.
  • Let components handle a missing implementation so optional modules do not become hard dependencies.
  • Use a registry to connect interfaces to implementations and to distinguish per-app instances from application-wide singletons.
  • Keep platform-specific integration in adapters so core modules can serve more than one framework.
  • Factor package installation and linking into tooling; without it, modularity can add setup work for developers.

Mentioned in this talk

Search inside this talk

What was claimed 13

  • role at
    Stanisław Chmiela is software engineer at Software Mansion
    “I’m a software engineer at Software Mansion”
    YouTube
    Unverified1 source· Talk
  • feature
    Expo: Free and open-source toolkit built around React Native
    “Expo is a free and open-source toolkit built around React Native.”
    YouTube
    Unverified1 source· Talk
  • feature
    GitHub Copilot SDK: React Native library providing access to APIs built into Expo
    “Expo SDK is a React Native library that gives you access to numerous high-quality APIs”
    YouTube
    Unverified1 source· Talk
  • feature
    Snack: Online code editor for React Native examples, prototypes, and bug reproductions
    “Snack, an online code editor available at snack.expo.io”
    YouTube
    Unverified1 source· Talk
  • feature
    Expo Client: Opens React Native and Expo applications, including projects on older Expo versions
    “It lets you quickly open any plain React Native project or an Expo-dependent application.”
    YouTube
    Unverified1 source· Talk
  • feature
    Expo: Supports push notifications and over-the-air updates
    “Expo lets you send push notifications ... and it supports over-the-air updates.”
    YouTube
    Unverified1 source· Talk
  • feature
    universal modules architecture: Allows apps to remove, replace, or add APIs and avoids including unneeded modules
    “You’d be able to remove unneeded APIs, replace them with your own custom ones, or even add your own.”
    YouTube
    Unverified1 source· Talk
  • integrates with
    “one could use our modules not only in React Native applications, but also, for example, in Flutter”
    YouTube
    Unverified1 source· Talk
Show all 13 facts

Related talks