WhoBuilt

Lifting & Shifting Entire React Ecosystem into New Languages

Sep 25, 2023· 33 min· 772 views·Watch on YouTube

Speaker

Matt Hargett, founder of Rebecca Specialties, describes how he and collaborators brought React and React Native to Lua for a large legacy game platform, in a talk at React Native EU 2023.

Why bring React to other languages

Hargett argues that translating React could extend it to legacy businesses and devices where JavaScript was not already established. He says the goal was to solve product and business problems, not to promote Lua or encourage teams to leave JavaScript and TypeScript. The project reached 150 million active users and, he reports, doubled frame rates while reducing crashes.

Translate in layers and verify each one

The team translated React file by file, starting with dependency-light parts such as Shared and Scheduler, and brought the upstream tests along. Hargett says tests were more useful than types for catching subtle behavioral errors, though they also translated available type definitions. They benchmarked each layer against Node.js in JITless mode and used results to work with the platform’s language team on performance.

Work through runtime and renderer constraints

The team encountered circular dependencies that Luau could not support, functions that could not carry instance fields, and garbage collection pressure from short-lived objects. They worked around some constraints with dependency injection and an object pool, and used React Native’s renderer as the basis for a custom renderer. Hargett recommends first porting the test and no-op renderers, which helped surface subtle Suspense and Hooks bugs.

Deploy gradually and measure the results

The team benchmarked on lower-end devices, measuring time to first paint, time to interactive, and time to fresh data. They built a phased rollout, starting at 0.1% on a platform and ramping up over four to six weeks while monitoring crashes and monetization. Hargett reports that the React port cut total crash volume by 50%; replacing list components later reduced it by another 80%, with fewer than 10 bugs found across QA and production.

Make ports repeatable and extend the ecosystem

After porting Jest and GraphQL manually, the team used a transpiler to speed up the Apollo client port and automate upstream updates. Hargett says 85% of the Jest 27 to Jest 28 upgrade required no human work beyond approving the merge. A colleague also ported FlatList, and Hargett demonstrates React DevTools tests running on Playdate, a Lua-based console.

Takeaways

  • Start at dependency-light layers and carry their tests with the translation.
  • Use tests to check behavior; types alone may miss subtle runtime errors.
  • Benchmark each layer and test performance on the lowest-end target devices.
  • Plan staged deployment and monitoring before replacing a critical runtime.
  • Automate upstream updates so a successful port remains maintainable.

Mentioned in this talk

Search inside this talk

What was claimed 12

Show all 12 facts

Related talks