React Native: Why You Should Care About Facebook’s New Open-Source Mobile Development Framework

Facebook recently announced a new mobile development methodology called React Native based on its popular React framework. React Native utilizes the power of ReactJS to control and manipulate native (read: iOS and Android) user interface elements and APIs using only JavaScript. The React Native codebase was open sourced in March 2015 and has been gaining traction in the web community ever since. After using React Native to write a native iOS app, I’m definitely a believer in the power and performance of the framework. Though there is certainly a learning curve to React’s “declarative” structure, it didn’t stop me from building a working app with live data on my phone in less than an hour. React Native significantly improved my iOS development experience and allowed me to use the language I use daily for building web applications: JavaScript. I think all mobile and web developers should give it a try, and here’s why:

How does React Native create a better mobile development experience?

• Real Native Controls – No more HTML elements masquerading as iOS or Android components! At this point in time, web components still never feel as slick or polished as the newest iOS buttons or the latest Android animations. React Native distinguishes itself from Cordova/PhoneGap and other HTML-based mobile frameworks by letting you control actual native components via JavaScript. Download one of Facebook’s production apps at the bottom of this post to see for yourself what a difference this makes.

It’s React!

• Virtual DOM & Speed – One of the biggest selling points of using the React framework on both web and native mobile is the concept of the Virtual DOM. This is one of React’s golden nuggets. Every time data within the application changes, React stores the resulting user interface (UI) hierarchy in a JavaScript object and diffs it with the real UI. This enables the application to effectively re-render the entire page on any change to the data model but only touch the specific interface components that need modification. The Virtual DOM concept allows React and React Native to make data binding and view re-rendering incredibly fast.

• Componentized UI – React makes every piece of your application a “component.” In the web environment, the base level components React provides are wrappers for actual HTML elements (div, h1, span, etc.). With React Native, the base level components are native UI elements (like buttons, sliders, or navigation bars). To develop an application, you create reusable “composite” components that are self-contained collections of native controls for use in any part of the UI. Each component receives “props” from its parent component, and can maintain an internal “state.” That’s all there is to it! This means you can reuse a component from one system to another and immediately access all the functionality necessary to render that component.

• Flexbox Styling – Styling native applications in React Native is as simple as writing CSS rules with the additional power of Flexbox. The Flexbox model allows for fluid, responsive interfaces that use as much or as little of the screen as needed to fill it up and keep it balanced. Learn more about React Native styling and Flexbox here.

• Superb Error Communication – React lends itself well to very informative error messaging. React Native utilizes this system to show code line numbers and potential causes for errors full screen right in the iOS simulator. In my experience, this error communication speeds up the development experience significantly. React’s error messages inform you immediately about what went wrong and where to find the source of the error.

Instant Reload – This feature gets +1000 points for developer experience. Since React Native applications are written completely in JavaScript, reloading the app after making a change is as simple as Cmd + R in the iOS simulator. So long Stop/Build/Link/Deploy in Xcode. Once your application is running in the simulator, just refresh the page and the app is locked and loaded with your new code change.

![ReactNativeReload1

JavaScript Is Asynchronous and Batched – React Native runs application JavaScript in an asynchronous background thread so rendering and animations are never blocked by script execution. This eliminates many of the performance problems associated with running JavaScript+HTML5 apps in WebViews.

What are the downsides?

• JSX? – When React came out, the web community somewhat revolted against Facebook for creating a new JavaScript syntax for writing HTML/XML style code inside of JavaScript. The “JSX” format turned many people off the framework before trying it out. The React docs still encourage developers that JSX is optional and React code can most certainly be written in plain vanilla JavaScript. However, JSX is a very powerful and expressive way to write React code that makes building the UI tree very intuitive. Check out this great article that gives a good perspective on JSX.

• No “Cascading” in Stylesheets – While coding in React and React Native, I found myself longing for the “cascading” properties of cascading style sheets (CSS). With React, all styling is done “inline” inside the React JavaScript file. Christopher Chedeau (one of the React team members) gave a great talk on the rationale behind these decisions called “CSS in JS.” Even still, the community is still working on solutions for problems like media queries and active/hover states in the styles. There are some popular community solutions for style reuse (like react-style and Radium), but I’ll be waiting to see where React leans for styling in future releases.

• Not “Write Once, Run Anywhere” – The React team advertises a different slogan than many other mobile frameworks: “Learn once, write anywhere.” This concept proposes the idea that once developers learn React, they can move from web applications to iOS to Android (maybe even desktop applications eventually) as the bindings are developed for different systems all while lessening the “context switching” typically involved with the different programming languages and environments.

• Abstractions Leak – React Native is definitely a major abstraction over native code.  APIs and abstractions tend to leak, which means that while React Native attempts to provide comprehensive components and API methods, they may miss certain parameters or not allow access to all possible permutations of an object. The good news is that the framework makes it easy to write your own native components and connect them to your React Native interface as well as extend existing components and API methods.

FAQ:

Isn’t it slow? These apps must not feel native.

• No, it’s actually pretty slick. As I described above, the JavaScript runs in an asynchronous thread and the native view rendering system takes over transitions and animations as well as native component state (like with iOS sliders). Check out this video to see a demo of React Native code in action.

JavaScript wasn’t made for this—is React Native reliable?

• The JavaScript landscape has come a long way in recent years, and new frameworks are being released every day. This has left a bad taste for many people as the next big thing might be outdated in two months. However, I encourage you to take this framework for what it is. It works right now, and it works very well. Facebook is using it on a number of apps in production today, and it’s helping them keep their code maintainable and reliable.

I still have to write separate code for Android and iOS… why not just use the platform-specific tools?

• The beauty of React Native is that it allows you to write view logic with a common strategy and common syntax across multiple platforms. However, iOS and Android will always have different features and hardware capabilities. The theory is that the React team will take care of abstracting what is common between them as well as give developers access to platform-specific features in React-style JavaScript APIs. This allows the same team of engineers to build both the iOS and Android versions of an application without much of the context switching.

Facebook Production Apps Using React Native

• Facebook Groups (hybrid of normal React and React Native)

• Facebook Ads Manager (all React Native)

Stay tuned for the next installment of this series: “Building a Native iOS App With React Native.” If you have questions about React Native or mobile development in general, please don’t hesitate to reach out to Credera Mobile.

• Facebook
• API
• Javascript
• Android
• Mobile Development
• IOS
• React Native
• JSX
• Abstractions