Microsoft owns an exciting open-source project to port React Native to Windows and macOS desktop platforms. With this project, React Native developers can now deploy native versions of their applications to desktop environments. Microsoft has already built consumer-facing applications with React Native for Windows, the most famous one being Xbox for PC. Kiki Saintonge, program manager at Microsoft for the React Native for Windows and macOS project, came on the show to talk about her project, how it works, and how you can get involved. You can watch the recording of the React Wednesday – React Native for WIndows and macOS show on YouTube.
Getting started – Building my first desktop app
This morning, I built my very first React Native Windows app. The process was much easier than I thought. I started with a machine that had no prior configuration for mobile development. Setting up the development environment and project was straightforward. Be sure to follow the guidelines for development dependencies. The documentation was clear and free of any dark alleys or dead ends. It took about 1 hour to complete, and I needed to reboot once for Visual Studio to take hold.
Here’s my app. It won’t win any beauty awards, but that’s all my fault as I haven’t done much but change a bit of text to promote React Wednesday. The React Native for Windows team maintains a GitHub repo with samples that you can use to learn how to use the project.
The state of desktop apps with web tech
A key benefit of using React Native over Electron is the React Native platform uses the advantages and optimizations of the native device controls. These advantages include better memory management, access to native threads or multithreading, native APIs, and visual compatibility with other native apps on the host operating system. Using the React Native for Windows and macOS project gives the React Native developer an avenue to use their existing desktop apps skills while also ensuring the resulting apps are performant and feel at home on the native device.
We touched on this topic a few times in the broadcast, most notably after penguid_warl0rd asked, “can you speak to any of the technicals of why the Microsoft Store app for Xbox is so much faster?” The discussion starting at 47:03 covers some of the engineering details behind the two platforms and why their performance metrics are different.
Why did Microsoft choose React Native?
At 2:34, I asked Kiki to explain why Microsoft chose React Native for this project. A version of this question came up in the chat when Richard Gunther asked why Microsoft would use React Native when they already had Xamarin for mobile development.
Kiki explained that her group at Microsoft went on an evaluation to decide what platform to use for internal purposes. They looked at several criteria like technical maturity, developer ecosystem quality and size, and ability to hire skilled developers. Microsoft is in the business of building and supporting numerous apps and wants to be efficient and relevant with their technology choices. The team evaluated the significant platforms and even discussed whether it made sense to start a new project from scratch. The evaluators chose to use React Native as it had a considerable head start, a large developer community and the React Native core team vision was compatible with the Microsoft team vision.
One application example is the Xbox app for PC. The original architecture of this application was Electron. The Xbox app for PC team rewrote the application with the React Native for Windows platform and got substantial performance benefits.
“…React Native provides a leaner, native experience on Windows. The upshot is decreased memory usage, cut by over 50 percent on our PCs, with significant performance enhancements as a result. The app installation size has also shrunk, from nearly 300MB down to 60MB.”
We discussed the importance of performance in application design, especially on platforms with limited physical resources. Not all desktop environments have 32GB RAM and unlimited hard drive space. Kiki explained that the Xbox environment suspends applications as the console user moves from one section to another- say from a live game to the Xbox settings menu. App suspension time is a function of resource utilization, so getting good memory and disk performance is a contributing factor to Xbox gameplay usability.
There is a lot of benefit for the React and React Native communities from Microsoft investing in the React Native for Windows and macOS project. Equally important, Microsoft is developing and shipping applications on the platform. Kiki mentioned the Xbox app and also some elements of the office application suite as early users of the project. She also alluded to others inside Microsoft as evaluators of the technology. I think this is an excellent thing because not only will Kiki’s team get essential feedback from real technical product owners, but it demonstrates this is a real project with serious intent, not just a vanity project. This factor should reassure the community that React Native for Windows and macOS will have the support and resources it needs to thrive.
Cross-Platform Styling with Windows and macOS
Pete Dilillo, from the Digital Primates team, at 8:23 asked about how cross-platform styling works on the desktop platforms. Kiki discussed her team’s approach to styling and how they plan to harmonize the native Windows XML based styling. Co-host Jalen Massey, also from the Digital Primates team, brought up a question about how the React Native CSS/stylesheet approach will work once the new desktop platforms come online. Windows applications styling and theming are much more involved than I thought. Kiki will have lots of fun making order out of the complexity involved in designing and implement a thoughtful styling model for the desktop platforms.
What parts of React will work on React Native for Windows and macOS
Feature prioritization and vision
At 43:35, we started talking about how the team manages their project. Kiki mentioned an effort called LeanCore, a strategy advocated by the React team to slim down the supported library. Frankly, this strategy makes a lot of sense. Given my many years of dealing with open source projects, it’s one that helps ensure both vibrant community contributions and long-term support. The community is enabled to build specific solutions, while the project owners ensure the underlying technology is robust and supported. This approach fosters an environment where many different solutions emerge in an ecosystem of improvement. Contrast this to the “everything comes out of the box” model where the project eventually becomes unwieldy and expensive to maintain.
Kiki’s team follows the LeanCore model and is making it easy for the community to build additional UI components and libraries that work well with the core project.
The React Native for Windows and macOS project actively welcomes contributions from the open-source community. Kiki let us know her team reads all pull requests, tickets, ideas, and feedback. While they can’t always respond immediately, they are pleased to get contributions and ideas. You can stay up with project news by following the React Native at Microsoft Twitter account and also following along with their team blog.