Technology•Sep 04, 2015
React Native: Why You Should Care About Facebook’s New Open-Source Mobile Development Framework
How does React Native create a better mobile development experience?
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.
What are the downsides?
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.
Isn’t it slow? These apps must not feel native.
I still have to write separate code for Android and iOS… why not just use the platform-specific tools?
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.