Why Native?

We live in a mobile first world. Smartphones and cheap internet have brought about a change in the way online digital content is consumed. Unfortunately, the way we build software and online content has not adapted perfectly. The transition from Desktop to Mobile has not been smooth. HTML, CSS and JS work well on the browser. But it provides a horrible User experience on mobiles. And an even worse experience for the developer. The only way to ensure a consistent, delightful experience across different mobile devices is to use the Native APIs. This is where the problem starts. Android uses JAVA. iOS uses Objective-C/ Swift. This means that you need to write code twice to support both Operating Systems. While some cross-platform frameworks exist, they do not work well. No cross-platform framework could beat the performance of Native code. Then Facebook open sourced React-Native.

What is React Native?

Enter React-Native. Facebook’s framework for building Native Apps using React(a javascript library for building User Interfaces). The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in many production apps and will continue investing in React Native.

React-Native makes use of JavaScriptCore on iOS & Android (the same engine used by iOS Safari browser).

You might argue that several frameworks exist which use JavaScript. Frameworks like Cordova, Titanium. These frameworks are not really native. They sort of wrap a web app inside a native app using Webviews. This is performance intensive. It sucks a lot of battery and simply cannot match a native app. Moreover, you cannot access the native APIs that are not accessible by a browser. To be honest, these frameworks almost always result in apps with a poor user experience.

Here is what makes React so unique and awesome. Asynchronous Execution. The golden rule for making an app fluid and responsive is this: Never perform long-running operations on the main thread and thus block the UI. This is what causes an app to “Hang”.

All operations between the JavaScript application code and the native platform are performed asynchronously. The native modules can also make use of extra threads. This means we can decode images off of the main thread, save to disk in the background, measure text and compute layouts without blocking the UI, and more. As a result, React Native apps are naturally fluid and responsive.

This is perhaps the most important feature of React-Native.

Getting started

React does not make any assumption about your Technology stack. You do not need to rewrite the entire app if you already have built a native app. React can be used alone or along with native code. This means that you can build a single page of your app in React to try it out. This is important. It makes the switching over to React low risk. In fact, many components of the Facebook app are already built with React.

Facebook has invested a lot of time in React-Native. The documentation is extensive and using React has been made as painless as possible. A simple Hello World app can be setup and deployed to Android and iOS in under 20 minutes.

So what does React offer?

On the web, simply saving and reloading your page is enough to test changes. On the native side, even something minute like a change in font size requires the entire app to be recompiled. This results in a lot of wasted time, especially on large codebases where compilation takes several minutes.

React-Native uses Flexbox as its UI Layout tool. Flexbox is a new layout mode in CSS3. It lays items out in a single row or column. While it can be difficult to learn, most web developers will find it familiar.

React forces you to break your application down into discrete components, each representing a single view. These components make it easier to iterate without breaking another component. It results in more predictable and reliable code.

Is it production ready?

Facebook’s apps have several components that are powered by React. It is extremely scalable. It is improving continuously and it is safe to say that React can comfortably power Production-quality apps. The Facebook Ads Manager app uses React-Native.

Over 1000 libraries and components are already available on the npm registry. You can directly use these components in your application.

So, what does this mean for the industry?

With React-Native, Facebook is rethinking established best practices.**add the tweet by Ben Alman(@cowboy)** A company that required separate teams for iOS, Android and Web can use one single team. Startups usually have to launch on one platform only since they simply do not have enough skills to develop a cross-platform solution. With React-Native you only need to “Learn Once, Write Anywhere”. It has emerged as the only viable cross-platform framework for making truly native apps. It is open-source and Facebook itself is dedicated to continue its maintenance.