Herding Code 218: React Native for Windows with Matt Podwysocki and Eric Rozell

The guys talk to Matt Podwysocki and Eric Rozell about React Native for Windows.

Download / Listen: Herding Code 218: React Native for Windows with Matt Podwysocki and Eric Rozell

Show Notes:

Hello and Quick Update on Reactive Extensions
- (00:15) Matt Podwysocki and Eric Rozell both talk about their work on the Microsoft Partner Catalyst Team.
- (01:00) Jon asks Matt what’s new with Reactive Extensions for JavaScript (RxJS). Matt talks about how RxJS took on a life of it’s own, as it’s being used by Netflix and Google with Angular 2. Matt’s still a core team member but there are plenty of other people contributing, which is nice. On Reactive Extensions for .NET (RX.NET), they’re working towards the .NET Foundation so it’ll get increased community support. Reactive Extensions are used a lot at Github and Facebook uses it for it’s Nuclide IDE.
React and React Native Overview
- (02:55) Jon asks Matt to overview React. Matt explains how React handles views, components, and unidirectional databinding. Matt says it’s nice that it moves us towards the component model in the HTML world – moving away from the jQuery direct DOM manipulation approach to a more holistic approach.
- (05:40) Jon says that he thinks that components introduce some problems of their own and asks Matt how React avoids that complexity. Matt says that’s why Flux and Redux were introduced.
- (06:35) Jon asks what React Native is. Eric explains that React Native allows you to take the same concepts and tool used for building React web applications and use them to build native applications. It started at Facebook and has picked up a lot open source momentum.
How React Native compares to Cordova, Xamarin, etc.

(07:33) Jon says there’s always heated discussion when you talk about building native applications using web technology. What’s the overhead? Is this similar to Cordova? Eric explains the differences.
(08:50) Kevin asks you’d build a native application with React when there are lots of great native development tools out there. Eric talks about some of the advantages of building your application’s UI in JavaScript. Also, shipping updates as JavaScript files using CodePush can be a lot simpler than shipping a new binary for every update. Matt says you can also focus your development team on building the same application for all platforms using React skills rather than separate focus and development skills for each platform.
(11:22) Jon asks where React Native fits in on the scale from Cordova to more native tools like Xamarin.

Technical Implementation: How React Native creates Windows UWP applications

(13:35) Jon asks how UWP fits into React Native and how they implemented it technically. Eric says they took a look at how React Android was built and used that as a guide. He discusses how they handled the runtime, and how the application JavaScript is handled by Chakra.
(15:50) Jon asks about the application is hosted. Eric explains that they first create and navigate to a XAML page, then there’s an initial call to start the JavaScript engine with the application name, then sends back over the bridge a bunch of operations against the UI Manager. The UI Manager will then create subviews and construct the UI tree. In the React view, you have a virtual DOM that represents your UI; that gets translated to operations that are sent over the bridge to create a native UI tree.
(17:30) Jon asks about how elements are styled, since from his experience that’s all done using CSS styles. Eric says they use a subset of CSS called Flexbox using a library by a developer from Facebook. Matt says when they ported over the F8 app to Windows, they leveraged the same styles and platform specific style pattern that had been used for iOS and Android.
(19:23) Jon asks what was most difficult in moving the F8 application to Windows. Eric says the styling part was pretty easy. The hardest part was in handling platform specific support. Matt describes an issue with linear gradient support.

Nuts and bolts: Data, Extensibility, X-Plat Dev, Building and Publishing, Scaffolding, Tools, Testing, etc.

(21:00) Jon asks how they handle data flow. Eric says they use Relay, which runs on top of GraphQL. It all just moved directly over. Matt says that’s the beauty of this – if there’s something written directly in JavaScript it just works.
(21:55) Jon asks about any other platform specific issues. Eric says that it’s conceptually similar to Xamarin in that are you need to keep in mind that you’re writing to a native front end experience. He explains that it’s a happy medium between web front-end (Cordova) and native in that the simple UI components like text are easily shared, but you can target more platform specific controls as needed. He talks about some differences in things like menus, split views and carousels.
(23:50) Jon asks about the cross-platform development experience? Do you use a lot of emulators? Eric says he mostly works on Windows using the Visual Studio Android Emulator. He says when he’s adding a new feature to React Native for Windows, he’ll pop open the Android emulator and use the UI explorer. Matt says he also uses Android Studio and Xcode.
(25:44) Jon asks if there’s a long build step, or if there’s a quick feedback cycle. Eric says that React is built to make the developer experience really fast, and explains how hot module reloading makes it possible to see application code changes without reloading or even losing current running state. Matt says that you also get the full Chrome debugging experience.
(27:15) Jon asks how you package your application for publishing. Matt talks about the publishing steps.

(28:10) Jon asks about the rnpm (React Native Package Manager) command-line tool. Eric explains how rnpm helps you include dependencies in your React Native applications. It’s extensible, so Eric and Matt used that to implement the Windows scaffolding experience.
(29:52) Jon says that in the scaffolded application he got when he ran rnpm, there are OS specific files for each view and asks if it’s possible to use a consolidated view for all platforms when appropriate. Eric says you’ll generally need a platform-specific entry point for each OS, but once you get past that you can do quite a bit with the core React Native elements.
(31:15) Jon asks if it’s possible to create additional platform-specific controls. Matt talks about support for native modules (e.g. dialogs) and native components (e.g. ImageView).
(33:20) Jon asks how he actually runs the application as he’s developing it. Matt says they just read in from the command-line to start the packager and build and run the application using Visual Studio. The docs currently say Visual Studio is required, although that isn’t necessarily the case if you kick off your build using msbuild.
(34:30) Jon asks if it could be possible to create a React Native Windows application on Mac or Linux, or if you’ll always need Windows due to the SDK. Matt says you’ll always need the SDKs, but Eric points out that there is a web-based React Native Playground (rnplay.org), and they’d like to reach out to them to get Windows support added.
(35:33) Jon asks if anyone is using it beyond the F8 application. Matt says not yet, they’re still working on the dev experience before they start heavily onboarding people. Jon asks who’s using React Native in general and Matt points out the React Native Showcase.
(36:50) Since part of the idea of UWP is that it runs on multiple Windows platforms, Jon asks if they’ve done anything with that. Eric talks about how part of their F8 demonstration included showing the application on Xbox, mobile devices with Continuum and desktop. They’re interested in looking into HoloLens and IoT as well.
(38:00) Jon asks if it’d be possible to leverage React web code in a React Native application. Eric says that at F8 he saw a talk on the possibility of bringing React Native to web. There are definite sharing points in code between web applications and React Native apps, although you should expect to write native views, and points out that there is work going on to bring React Native to Tizen and macOS.
(39:35) Jon asks if React Native for Windows is a science project or an ongoing project. Eric and Matt say they’ll be watching for community interest. They expect to keep up with React Native releases, and are hoping for community contributions. Eric says there are hundreds of React Native community modules, and they can’t scale to supporting all of them without some community involvement.
(41:15) Jon asks about Visual Studio Code support. Matt says that they’re working closely with the VS Code Team. They’ve already got a plugin for React Native that supports deployment to iOS and Android, and Matt’s hoping to get UWP deployment added to that list. Eric points out that you can also set VS Code as your remote debugger, so you can set breakpoints, step through your running code, view stack traces, etc.
(42:18) Kevin asks about the testing story – can you write unit tests and integration tests for React Native? Eric says it’s similar to building large cross-stack applications with tests for services and clients – where you write integration tests between your JavaScript libraries and native code, unit tests for native modules, and tools like Jest for your pure JavaScript components.

Getting Started

(43:44) Jon asks for other resources for people getting started. Eric points to the excellent documentation for React and React Native. For React Native for Windows specific docs, there’s additional documentation in that repo. Matt recommends following the @reactwindows Twitter account.