WhoBuilt

Cross-Platform Development With ReactXP

Oct 4, 2019· 25 min· 1.6K views·Watch on YouTube

Speaker

Catalin Miron, a Skype messaging team developer at Microsoft, explains how Skype uses ReactXP for cross-platform development at React Native EU 2019 with Callstack.

Why Skype built ReactXP

ReactXP is an open-source TypeScript library built by Skype on top of React and React Native. It aims to let teams build interfaces with a consistent developer experience across platforms. Miron describes it as React for multiple platforms, including iOS, Android, Windows, and the web.

Shared components, styles, and accessibility

ReactXP provides 11 core components and 16 APIs, with extensions for additional capabilities such as navigation and video. Its styles are cached by default, use typed helper methods, and follow Flexbox with a column default and pixel measurements. Miron also says the built-in components support shared accessibility features such as labels, traits, and VoiceOver announcements.

How Skype organizes cross-platform code

Skype keeps business logic and other reusable code in a common layer, with platform-specific implementations behind ReactXP. Miron estimates that about 85% of Skype's code is reused across platforms. Extensions provide platform-specific behavior, such as separate notification integrations exposed through a unified API.

Building a shared Victory Charts module

Miron demonstrates wrapping Victory Charts in a module with platform entry points: the web version imports Victory, while the native version imports Victory Native. Type definitions connect the two APIs, and a TypeScript path mapping lets the app import the module from a shared location. He shows matching charts on web and mobile, including animated charts driven by D3 interpolation.

Takeaways

  • Keep shared business logic and UI in a common layer, then isolate platform-specific behavior behind clear extensions.
  • A small set of typed primitive components can support a large cross-platform application.
  • Define platform entry points and shared types to adapt libraries with compatible APIs for web and native.
  • Account for styling differences such as default flex direction and pixel-based measurements when targeting multiple platforms.
  • Treat accessibility as part of the shared component layer so platform support is built into everyday UI work.

Mentioned in this talk

Search inside this talk

What was claimed 15

Show all 15 facts

Related talks