Introduction to React Native

When the first iPhone was announced, Steve Jobs wanted everyone to “write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone”. However, Safari Mobile was too slow and web apps felt second rate to the user experience of the built in apps. With the rise of fast, polished, native apps, App Stores have become a great success. This has caused the progress made on the mobile web technologies to slow down.

Although native apps have great performance, they are not easy to update regularly. Continuous delivery workflows allow us to update websites hundreds of times a day. On the flip side, if you are an indie developer, you might spend a week deploying an app to your iOS customers.

<em>That's a very short vacation!</em>

This is where React Native comes in. It leverages web and native platforms for their strengths. Developers can iterate and deploy an app frequently like a website. Yet, the resulting user interface is a complete native experience.

Project home: https://facebook.github.io/react-native/

How does it work?

React Native provides a set of JavaScript libraries written on top of ReactJS. These libraries are run inside a WebKit technology called “JavaScriptCore”. The JSC provides a JavaScript environment to execute JavaScript without the need for a browser.

React Native also provides a Native to JavaScript Bridge. The Bridge ferries calls between the native and JSC environment. It also optimises this process by batching calls and adding asynchronous behaviour.

Read more about JavaScriptCore on this NSHipster article.

Developers can write ReactJS style Components that are converted into native UI controls. For example, <Text> will draw a UILabel native component on iOS at runtime. Also, there are polyfills available to communicate with the native networking stack (fetch), timers (setTimeout) etc.

A component in React Native looks like this:

var { View, Text, } = React;
var VaderComponent = React.createClass({
    getInitialState: function() {
        return { relation: “father” };
    },
    render: function() {
        return (
            <View style={styles.container}>
                <Text>{‘Luke, I’m your ‘ + this.state.relation}</Text>
            </View>
        );
    }
});

A React Native app can easily download and execute the latest JavaScript bundle from a server at runtime.

Thoughts on Caching versions

Facebook also takes the opportunity to improve upon existing mobile development concepts. There's an implementation of flexbox for laying out elements, data binding etc.

React Native is an open-sourced effort which you can contribute to. The community has also contributed some fantastic third party React Components to build apps with.

Is this important?

There are few major benefits to Expedia with this technology:

  • Hosting native app elements on a service makes it easy to test-and-learn. React Native doesn’t have to cover the entire app you are working on. It can be a single, discrete view inside an existing app. Coding the most volatile parts of a native app with React Native will allow us to iterate on ideas quickly.
  • Continuous delivery means our customers get the latest improvements as soon as possible.
  • There is potential to have more EWE developers involved in building apps! The same team can be responsible for developing web front-ends, as well as iOS and Android apps.
  • We could introduce an Expedia flavoured component framework (UITK mobile?). Developers from any team can use these components to build Expedia-flavoured, native app solutions easily!

What about that Apple's AppStore policy?

Apple changed it recently.

3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or **JavascriptCore**, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.

What about Android?

Facebook is working on it. It is coming soon according to F8 announcement.

Reference Project: BEST Mobile App

To explore React Native, I’ve decided to kick off a reference project on EWEGithub. It is the best.expedia.com search on a native iOS app!

Repo:

Here’s a quick demo: [[DEMO]]

I’ve learned a great deal writing this small app. I’m hoping anyone interested in the learning React Native can learn from it. Inspect the code and try to add missing functionality.

———

Moving forward, the EPC Mobile Team is keen to test out React Native in an upcoming releases.

@dineth EPC Mobile Team aka Ragemelons