Our Reaction to React Native (Or: Why JavaScript Will Rule the Mobile World)

React Native

Recently Facebook announced React Native, a JavaScript library for building native mobile apps. Our reaction? Welcome to the club! In all seriousness, we’re glad to see a mobile-first success story like Facebook embrace the powers of JavaScript for native cross-platform development.

In his introduction of React Native, team lead Tom Occhino had this to say:

“We’ve tried in the past to just build web apps that we could wrap in thin native wrappers, but it doesn’t work. […] Anytime somebody tries to reimplement a native widget using HTML, CSS and JavaScript it always feels like shit.”

True. While web and hybrid apps have their place (we support both), there’s nothing like native to deliver the app experiences mobile users have come to expect. As the first outfit to give developers a means of using JavaScript to build fully native, cross-platform apps, we know the ins and outs of native as well as anyone.

To take one recent example, consider our Movies app. Movies is an internal app we built to demonstrate how with Appcelerator you can use JavaScript to deliver beautiful, high-performance native apps entirely indistinguishable from those built in Java or Objective-C (or Swift):

Now, React’s mantra is “Learn once, write everywhere” — or, as our own Kevin Whinnery put it four years ago, “Write once, adapt everywhere.” In other words, writing from a single JavaScript code base doesn’t mean glossing over each mobile platform’s strengths and particularities.

For example, iOS and Android share many UI components and navigation patterns, but with different APIs. With Appcelerator, you can develop cross-platform UI quickly while still leveraging the strengths particular to each mobile OS. In Movies, we use a UINavigationController on iOS and a View hierarchy on Android for the main app navigation. This type of platform-specific functionality is achieved with minimal branching of code, and put into effect at build time.

For the home screen’s parallax effect, Movies uses the iOS CoreMotion API. The following code snippet shows how we leverage this iOS-specific capability, while still preserving a single JavaScript code base:


/**
 * Pre-processor will include this code branch only for iOS builds
 */
if (OS_IOS) {

  /**
   * Load the CoreMotion module if on iOS
   */
  var CoreMotion = require("ti.coremotion");


  /**
   * Called from window.open event for example
   */
  function registerForMotionUpdates() {

    /**
     * Make sure that CoreMotion is available (iOS 7+)
     */
    if (CoreMotion.isDeviceMotionAvailable()) {

      /*
       * Set our Update Interval for receiving events from CoreMotion
       */
      CoreMotion.setDeviceMotionUpdateInterval(50);

      /**
       * Start the motion updates, passing in our callback function
       */
      CoreMotion.startDeviceMotionUpdates(function(e) {

        /**
         * e = Object which is passed by the CoreMotion Framework
         *     event for motion updates. exposes device current pitch,
         *     yaw and roll as well as success / fail properties.
         */
        if (e.success) {

          /**
           * Calculate the Adjusted top and left parameters of the cell images, +/-15dp. _imageTop and _imageLeft are defined elsewhere
           */
          var imageTop = _imageTop + (15 * e.attitude.pitch);
          var imageLeft = _imageLeft + (15 * e.attitude.roll);

          /**
           * Iterate through each cell and update the image top / left properties
           */
          _.each(cells, function(cell){
            cell.updateViews({
              "#image": {
                top: imageTop,
                left: imageLeft
              }
            });
          });
        }
      });
    }
  }
}

But with Appcelerator, JavaScript isn’t confined to client-side development. The Appcelerator Platform provides for full-stack JavaScript, meaning that developers can use a single, simple, powerful language for both client and server logic. In Movies, we use the Platform’s MBaaS capabilities (built on Node.js) to abstract the original data sources from the client, cache data on the cloud and ensure payloads are optimized for the mobile device. JavaScript Everywhere…

(For a more in-depth look at how Appcelerator and React Native compare, see here.)

13 COMMENTS

    • I am extremely curious on how in the “Now Playing” window the NavBar fades on scrolling downwards? Been looking for this for quite some time now.

  1. I also would dearly love to see the source code for this please:) The way you handle the navigation on (iOS)is pretty much what I would like to achieve but I’m struggling to work out how:/

  2. HAL, Hyperloop has more potential to open the door for many innovation for native development in Javascript. While I appreciated Facebook engineers for an attempt, I was not convinced on Virtual DOM and React JS fit for native apps.

    To me, React JS native tries to put too many complex stuffs and assumptions into one cross platform basket. Having worked on Lua based SDK for cross platform, SDK building for multiple OSes is not fun at all if we don’t get it right. I strongly believe, Appcelerator is in right direction, make HAL fast.

  3. It’s not just bringing in the javascript controller but you also have to bring in UI and Style..that’s where Alloy comes in. Who want’s to make views and styles with only Javascript? 🙂

  4. Please post the full source. And it would be great if that happened BEFORE the webcast so that we have a chance to look over it and have a really interesting and informed webcast.

Comments are closed.