React Native Has Landed

Introduction

On January 28th, Facebook announced React Native, a bridge to its React JS framework and the two leading mobile operating systems, iOS and Android.  Modus Create has taken the last five weeks to dive into React Native to see what it is and how to leverage it and are happy to learn that it’s available for public consumption.

(New to React JS? Check out the videos from the React JS conference here.)

In this article, we’re going to walk you through some of the key features of React Native and why we think it’s a game changer.

First impressions:

Upon opening the proverbial box, React Native felt unlike anything we’ve experienced from a developer perspective.  Writing React JS ES6 implementation and seeing it translated into a native feel was extremely pleasant.  We’ve utilized technology like Appcelerator Titanium, but this felt different.  Perhaps because it’s new? Perhaps because it’s free?

We immediately opened up the UIExplorer project and ran in the iPhone simulator. It was clear from the get-go that speed was at the forefront of the React Native developer team’s mind.  Each interaction felt smooth and fluid. You’d never know that JavaScript was driving!

A quick look under the hood:

React Native works by binding React JS implementation code as native UIKit instances.  To see this in action, we need to do a quick deep dive into the Hello World example known as “SampleApp”

We’ll start with the JSX, then dive into the Objective C code that implements this.

I’ll do a play-by-play rundown of how this works from the 5,000 foot level.  We’ll explain some things about the ES6 / JSX code in case you’re not used to seeing this syntax.   We’ll post essential links that can be leveraged as supplemental reading if you’re new to this tech stack.

• Line #7 requires the React Native library.
• Line #8 is known as a “destructured assignment”. In short, this takes the properties from the React object (AppRegistry, StyleSheet, etc) and makes them lexically scoped references in the program.
• Line #15 Creates asks React JS to generate a new react Component. An anonymous object is passed to createClass(), which you can think of as a generic JavaScript prototypal object.
• This anonymous object simply has a render function, which returns a top-level View, with two child Text components. We’ll jump back to this in a bit.
• Line #31 Describes an instance of a React Native StyleSheet. React JS implements an extremely light version of CSS, to allow us to leverage similar, but commonly known CSS vocabulary.
• Note that the styles defined here are used in the render object above.
• Line #49 causes the SampleApp component that was recently created to get instantiated by the React Native runtime environment.

Here’s what the app looks like running.

To truly grasp what’s going on, we’ll take a quick gander at the AppDelegate.m code.

Below is a truncated version for easier reading.

Here’s the play-by-play:

• Line #11 imports the RCTRootView.h header file.  This includes the React Native Root View code, which is the top-most view for your React Native applications.  This header file also includes the ever-important RCTBridge module, which is what acts as the interface between Objective C and JavaScript.
• We’re planning on doing a deep dive into this in a future blog post, as we’ve found the implementation of this bridge to be the best one, in comparing it to other technologies like PhoneGap! So be sure to follow @ModusCreate on twitter for the news about this article.
• Line #16 declares the NSURL instance variable known as jsCodeLocation.
• Line #17 actually sets the variable to an instance of NSURL, which points to a local host URL. This is actually quite important to discuss.
• For development purposes, React Native relies on a Node JS library known as React Packager.  React Packager is what is responsible for reading your JSX code and bundling it together, along with React JS and the React Native JavaScript library code.
• If you’re curious about what the bundle looks like, check out this gist,  but don’t be scared! This is the un-minified version, including comments, whitespace, and the like.  Your ES6 JSX code is transpiled by React Packager down to ES5.
• Line #20 is another important piece to discuss.  Here is where the instance of RCTRootView is allocated, pointing to the NSURL that was created in line #17.  This is the moment that React Native is aware of your React JS application.
• The rest of the code is where the top-level application UIWindow instance is created, with our RCTRootView instance being added and eventually displayed.

Once fully bootstrapped, React Native code will make a call to the React Packager to obtain the bundled JSX contents, and with the internal binding of React Native, your application code is displayed.

The facebook team has done a fantastic job with the architecture of this framework.  To see changes to your JSX, simply make a change in your editor and hit CMD + R on your keyboard.

This causes a refresh of your application. React Native will destroy all of the views currently loaded in Memory, make a new call to React Packager, which in turn will include all of your new code in the bundle, and an update to your code is display immediately. This feature is powerful, as it does not require you to re-compile your application to look at changes.

A quick note on what we used to test React Native:

We opened this article with a statement that we’ve spent five weeks with React Native. We spent that time by pushing React Native to its limits and testing its extensibility.

We did this by working on a React Native video game music player, where we implemented a few custom React Native Objective C classes.  Some of these were utility classes, such as one to allow us to browse the project’s directory structure, and others were to implement a custom audio player using a C library known as Game Music Emu.  Lastly, we also experimented with including a custom audio visualizer known as EZAudio Plot.

We’ll dive into this in a future article and plan on making this an open-source example, but to give you a preview of the app, we’ve released a few videos.

For a 6 minute deep dive, you can watch this video:

What’s the verdict?:

Application developers who are familiar with web technologies will fall in love with React Native.  It’s extremely useful out of the box, and allows you to leverage well-known technologies to implement native views, affording you the speed of the full device right out of the box instead of being stuck inside of the WebView HTML5 sandbox, that we’ve all grown to love and hate.

Think about it for a moment:  Your View, Model and business logic all is developed inside of JavaScript.  The JavaScript you write ultimately implements native views, allowing you to write fast and responsive applications without the limitations of HTML5.  Organizations can, out of the gate, write applications that are rendered to native views using existing skillsets that lend themselves to the world of HTML5.

React Native won’t be the tool that will completely replace pure Objective C development (or Java for Android, for that matter). But, it gets pretty damn close!  And for a free, truly open source project, we see this as a winner.

What do I need to know to use it?:

Knowledge in ES6, React JS, JSX and some Objective C is required.  The only time you really need to go to Objective C is when you’re looking to do a custom UI component, which React Native lends itself to easily doing.

Closing comments:

In closing, we’re extremely excited to have React Native as an option for our customers.  As programmers, we find ourselves easily understanding the Facebook React ecosphere, which includes React Native.

If you’re interested in React Native, I’d say start by looking at the well-written documentation, specifically the Getting Started guide, then moving on to the Tutorial.