What React Native Means for CTOs

As anyone who has led a development project can tell you, there are dozens, if not hundreds, of ap-proaches to consider. Project owners have to decide what languages, frameworks, technologies, ser-vices, and environments their solutions will utilize and be built with. Although mobile apps are a more recent invention, there are already several established options for mobile app development. These options can typically be broken up into three main categories: platform-specific native, cross-platform hybrid and cross-platform native.

React Native is a newer option that falls into the cross-platform native category. This framework was writ-ten and is maintained by the developers at Facebook and Instagram. It is an extension of their wildly popular ReactJS JavaScript framework. Facebook, and others, have released over a hundred apps using React Native and the results have been quite positive. This article will provide an overview of this emerg-ing technology and discuss why any chief technology officer (CTO) should be aware of and strongly consider React Native on their next mobile app development project.

The Shortcomings of Existing Options

Before discussing what React Native is and the problems it tries to solve, it is important to understand why a new approach is necessary. A common trap that derails many developers and managers is using a new technology simply because it is new. Before hopping on the React Native train, you should under-stand how it differs from the existing options.

Shortcomings of Platform-Specific Native

Platform-specific native is, in many ways, the traditional approach to mobile app development. Apps written in this manner share little or no code between operating systems and are typically written using Objective-C or Swift for iOS and Java for Android. Apps written this way can be highly tuned for performance and are first-class citizens on the device. They can easily interoperate with other apps on the device, can use native UI elements, and access platform specific entities (file systems, databases, compass, etc.) with direct interfaces. The downside of this approach is fairly obvious. If your app needs to be on multiple platforms, developing those independently becomes increasingly expensive.

Shortcomings of Hybrid

In response to the shortcomings of platform-specific native, developers began looking for a more cross-platform approach. One such alternative are hybrid apps. Hybrid apps are typically written using Web development technologies (HTML5, CSS, and Javascript). Common frameworks that take this approach are Cordova, PhoneGap and Ionic (pictured).

Apps built using this approach can be cross-platform, which means you can share most or all of your code between operating systems. The great benefit with Hybrid is it is often much more cost effective. However, hybrid apps have a lengthy list of shortcomings including poorer performance, non-native UI elements, a reliance on third-party (often buggy) packages and some risk of technology abandonment. Hybrid apps can be a great approach, but always make sure you consider more than the initial price tag before kicking off a hybrid app project.

How React Native is Different

React Native, like hybrid apps, is cross-platform, which means code can be shared between operating systems. Unlike hybrid apps, apps written with React Native are actually native. This "best of both worlds" summary is why there is currently a ton of buzz around this framework.

Any seasoned developer, manager or CTO should be somewhat skeptical at this point. Every day, new frameworks are being released that claim to be the new best approach. There are many questions that need to be asked about React Native and this article will explore several of the major ones. Many of these sections, could be their own articles, or perhaps even books. We will do our best to provide succinct answers.

How Does React Native Work?

When developing a React Native project, the majority of your code is written in JavaScript. Any developer who has worked on a ReactJS project would feel almost immediately at home in a React Native codebase. Like ReactJS, React Native code is separated into components, which have their own state and props. Unlike ReactJS, rather than rendering HTML elements to the DOM, React Native renders each platform's native view elements.

Does React Native Feel Native in Terms of UI?

One of the greatest weaknesses of hybrid apps is their non-native user interfaces (UIs). React Native does a great job of eliminating this problem. In the previous section, we discussed how React Native renders native view elements. A component can typically be written once, but function and feel just like a native app would on both iOS and Android. Hybrid apps typically look like one iOS on Android or like a web application. You should not be able to tell if an app is using React Native or not, which is exactly the point.

How Much Code Reuse do you Actually get Between Platforms?

React Native's app logic and component interfacing should almost always be 100 percent shared between platforms. Furthermore, the rendering code can typically be completely shared as well. This is a large reason why the community is finding that they get about 80 percent code reuse between plat-forms.

In the event that you do need to write platform-specific code, you can either use some sort of "If iOS then..." logic in your component or have two component files with similar names (MapScreen.ios.js and MapScreen.android.js for example) that conditionally render based on the platform in use.

In the event that you do need to write some additional platform-specific code, it is exceptionally easy to wrap those native calls so that they can be called from your cross-platform code. This can be useful when working with maps and things like Apple Health Kit. This also means you can use React Native to extend existing native applications.

What is the Learning Curve of React Native?

Compared to many other JavaScript frameworks (AngularJS for example), ReactJS and React Native have a substantially gentler learning curve. Anyone with moderate JavaScript experience should be able to pick it up reasonably quickly. Since React Native can utilize native code, having some Objective-C or Java experience can be beneficial. This knowledge is not required since most of the code will be written in JavaScript and often developers can often learn as they go for those parts. Expert React Native developers will also have a fuller understanding of the platforms and their inner workings, but this is definitely not a requirement to get started.

How Does the Development Cost Compare to Hybrid and Platform-Specific?

Cost is something that can vary significantly between projects. It is always dangerous to say, "doing it this way costs X, this way costs 2X, and that way costs 5X." The reason for this is that some apps would cost the same with all three approaches, whereas others are not even possible using one of the methodologies.

In general, hybrid apps are the cheapest approach, followed by React Native, then platform-specific.

What Does React Native Mean to You?

React Native is an exciting and attractive option for most mobile app development projects. However, it is still new (particularly on Android) and as such is still evolving. Additionally, finding React Native developers might be difficult and it is very likely that they will only have a few React Native apps to show off at this point. That being said, we believe that with the current React Native development team at Facebook, the continued community growth, and the benefits discussed in this article, React Native will be a major player in the mobile development world for quite some time. Any CTO would be remiss to not thoughtfully consider React Native for their next mobile app development project.