Appcelerator Blog

The Leading Resource for All Things Mobile

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

176 Flares 176 Flares ×

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.)

176 Flares Twitter 0 Facebook 68 Google+ 9 LinkedIn 99 Email -- 176 Flares ×

13 Comments

  1. Nuno

    Show us the code :) You will share the code?

    • Tobias

      Wonder where cells are comming from :)

    • Please, share all the source code!

  2. Alfredo

    Not the same one, but a similar demo was posted a while ago: https://github.com/EtnaTraining/MoviesDemo

    • Joseph

      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.

  3. ade

    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:/

  4. Bert Grantges

    Source Code is coming soon everyone! Keep watch for it on Twitter!

    • Ayo

      Did I miss the announcement on Twitter?

  5. Gopalakrishnan Subramani

    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.

  6. Zeshan B.

    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? :)

  7. Jon Bailey

    We’ve had lots of interest in the movies app, so we are going to hold a web event on March 12th where Chris will walk through the design and code. If interested, you can register here: http://www.crowdcast.io/e/appceleratorcrowdcast1

  8. 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.

  9. Bert Grantges

    Source code has just been posted!

    http://github.com/appcelerator/movies

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
176 Flares Twitter 0 Facebook 68 Google+ 9 LinkedIn 99 Email -- 176 Flares ×