WhoBuilt

React Native at Scale With Mike Duminy

Nov 30, 2023· 1 h 17 min· 1.7K views·Watch on YouTube

Speakers

Mike Duminy, principal engineer and domain architect at Klarna, discusses building and operating a large React Native app with Callstack’s Kuba and host in Wrocław.

Klarna’s app and scale

Duminy describes Klarna as a shopping and payments company whose app lets customers shop, pay, track deliveries, and use rewards. The company handles more than 2 million purchases a day and has over 150 million customers; its app has about 30 million monthly active users. Duminy says teams use instrumentation and A/B tests to understand behavior and measure changes against KPIs.

Why Klarna uses React Native and Re.Pack

Klarna’s shared monorepo supports its React Native app, web app, internal apps, and browser extension. Duminy says shared UI, logic, types, and tooling make it easier to support multiple platforms and help feature developers work through common abstractions. Re.Pack provides access to Webpack features such as tree shaking and code splitting; the app’s production JavaScript bundle is about 40 to 50 MB, compared with roughly 110 MB in development mode.

Performance, releases, and updates

Duminy recalls a performance push that brought Android startup time from nearly 30 seconds to about 2.5 seconds, while iOS startup is now under a second. He says Re.Pack was one part of a broader effort, so the improvement cannot be attributed to it alone. Klarna releases the public app weekly and uses a custom Re.Pack based process to send smaller JavaScript updates when urgent fixes are needed, targeting updates to specific app versions.

Teams and code ownership

Duminy describes around 70 teams working in the client codebase, with the broader React Native group ranging between 350 and 500 people. Teams own vertical slices of customer problems, including the related client and backend work, and can set their own KPIs. In the monorepo, package.json fields assign ownership through roughly 4,000 workspaces, and a merge checker identifies the teams responsible for changed files.

A shared experience across platforms

Klarna wants customers to move between products and platforms while keeping a cohesive experience. Duminy says the goal is for a feature team to build a Klarna feature that can run across the app, web, browser extension, and other touchpoints. The team is exploring Module Federation to resolve parts of the app at runtime, support independent deployment, and share dependencies.

Takeaways

  • Choose Re.Pack when its specific capabilities address a real need; Duminy says Metro offers a better developer experience for many apps.
  • Measure startup time directly: Duminy says bundle size stopped being a reliable proxy after Klarna adopted Hermes.
  • For urgent JavaScript updates, target specific app versions and account for compatibility with native code.
  • Give teams ownership of customer outcomes across client and backend layers, and make code ownership visible in the repository.
  • Treat cross-platform feature delivery as an organizational and architectural goal that requires shared abstractions and coordination.

Mentioned in this talk

Search inside this talk

What was claimed 23

Show all 23 facts

Related talks