News

Microsoft Open Sources React Native-Based Cross-Platform Library

• By David Ramel
• April 11, 2017

Despite many incorrect characterizations from media and industry pundits, the developers of React and React Native at Facebook never positioned their creations as pure cross-platform tools.

Instead, the original React for the Web (sometimes referred to as React.js, ReactJS or React JS) and the follow-on React Native for mobile development introduced a new "learn once, write anywhere" approach. It applied the same JavaScript-based technology to create different projects for targeting -- in the case of React Native -- iOS and Android platforms. While many components could be used in both projects, this approach differed from the classic cross-platform approach in which one code base is meant to work on multiple OSes.

Microsoft's Skype team is seeking to change that.

The Skype developers have open sourced their homegrown tooling for advancing the cross-platform capabilities of React and React Native, naming it ReactXP.

"ReactXP is designed with cross-platform development in mind," its site says, though it promises it will only let developers "share most of your code" among platforms. "With React and React Native, your Web app can share most its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform. We have taken this a step further and developed a thin cross-platform layer we call ReactXP."

Developer Eric Traut provided more information in a blog post. "It builds upon React JS and React Native, allowing you to create apps that span both Web and native with a single code base," he said. Although it's built on both implementations, an FAQ indicates it borrows more heavily from React Native.

ReactXP is described as a thin abstraction layer built upon and bridging React JS and React Native. To keep it as lightweight as possible, it includes only about a dozen "core" foundational components and APIs to provide general-purpose functionality required in nearly all apps.

Those core components include basics such as buttons, images, links, views and so on. Current APIs provide functionality for clipboards, popups, storage, alerts and more. Developers can use those basic building blocks to build more complex components, and can write extensions to implement more specialized cross-platform functionality when needed.

The Skype team has already written about 20 of those extensions -- some of which are targeted for open sourcing themselves -- and with the ReactXP code now on GitHub, community developers are free to write their own. "Extensions allow us to expand ReactXP without increasing its footprint or complexity," Traut said.

Traut, a Microsoft Technical Fellow, explained how the Skype team created ReactXP when it sought to revamp its many platform-specific apps about a year ago. He explained further:

We wanted to move away from implementing each new feature multiple times in different code bases. We wanted to minimize duplication of effort. We explored a number of available options. Web wrappers like Cordova (PhoneGap) didn't provide the performance or "native feel" we were looking for. Xamarin, which is a great solution for cross-platform mobile development, didn't help us on the Web. We ultimately decided to build our new client on top of React JS and React Native. ReactXP was our attempt to unify the behaviors and interfaces across React JS and the various React Native implementations. (We initially referred to it as ReactX, hence the references to this term within the sources.)

While working on the project, Traut said, the Skype team also gave back to the community, fixing some bugs it found, improving some performance aspects and removing some differences in behavior exhibited by the separate React JS and React Native implementations. "The biggest contribution was a major rework of the React Native layout engine," he said. "The original implementation loosely followed the W3C flexbox standard, but it differed from the standard in some important ways. The updated layout engine now reliably produces the same layout as all compliant Web browsers."

Although ReactXP now works for the Web, iOS and Android, the Windows UWP implementation still needs some more work to bring it up to par with its brethren. Over at Hacker News, some developers voiced their hope that Linux and MacOS support will be added. For now, developers can target other platforms -- including Windows 7, Windows 8, MacOS and Linux -- by using a Web wrapper solution such as Electron, Microsoft said.

The most recent release of ReactXP, version 0.42.0_rc.1, was updated last week to use the 15.5.3 version of React JS and the 0.42.3 version of React Native.

Traut said the Skype team plans on continuing to maintain and improve ReactXP, aiming for monthly releases similar to the monthly React Native release cadence.

Developers seeking more information can consult extensive documentation. Developer Nader Dabit also published a "ReactXP -- First Look" video tutorial explaining the new technology.