React Native: What, Why, and How?
What is React?
React is a mature, open source JavaScript library developed by Facebook and used to build user interfaces. It utilizes components, application state, and props to enable developers to quickly build applications well-suited to the mobile web.
What is React Native?
While React Native provides access to native device features (UI, notifications, location, etc.), React for the web is only concerned with rendering user interfaces. In other words, instead of using web components to build applications, React Native uses components native (within, or original to) to iOS and Android. The code looks like React, but it is built in a way that can be understood by mobile operating systems instead of web browsers. It’s written in JavaScript and ultimately rendered in native code, constructing full-featured apps available for download from the App Store and Google Play Store.
Where did it come from?
React Native finds its origins in Facebook’s engineering group. Designed as a way to shorten and streamline mobile app development, React Native provides a native experience on both major mobile platforms while providing the rapid development tools of the React JavaScript library for the web.
In 2015 at its Facebook’s F8 Developer Conference, Facebook outlined challenges to native mobile app development. Traditional mobile app development requires developers to compile and recompile code just to review even minor changes to apps. (This is true even in 2020.) Facebook compared the development efficiencies by revealing that they delivered new versions of the Facebook website twice per day. This allowed them to gather results of experiments and A/B tests almost immediately. On mobile, they needed to wait weeks to get the results of experiments and A/B tests before they could deploy improvements and updates. As a result, the mobile apps lagged behind the website and their “move fast” development methodology just wasn’t possible.
The question remained: how to bring mobile app development timelines more in line with web development timelines while retaining the native look-and-feel of the respective mobile platforms? The solution was to “script natively.” React Native provides the correct programming model (declarative > asynchronous > responsive) that allows developers to rapidly develop mobile apps while delivering a native experience to the end user. Facebook Ads Manager for iOS was introduced as the first mobile application written entirely in React Native.
Since its inception in 2015, React Native has evolved to into an almost universal toolkit to develop native apps on iOS and Android. It’s fast, responsive, portable across several platforms, and enables rapid development of mobile applications.
Why should you consider it?
React Native makes developing cross-platform mobile applications a breeze. By default, it contains a core set of platform-agnostic native components that map to the mobile platform’s native user interface. Its components wrap existing native code. This allows developers to build complete applications exclusively using it as well as integrate native components into existing mobile applications built using another framework. Integrating React Native components into an existing app is one way to iteratively migrate an app’s code base from another framework, like Xamarin.
Since it is powered by JavaScript, developers can see their changes immediately without recompiling code. This eliminates time spent waiting and optimizes development time for maximum productivity.
React Native apps can be built for iOS and Android at the same time, using the same components and core codebase. This drastically reduces the need to maintain two versions of the same app for each platform, freeing up developer resources to innovate.
What is it an alternative to?
React Native is one of many cross-platform app development frameworks. These frameworks provide benefits of being cost-effective (most are free), managing a single code base for one or more platforms, and allow for simplified cloud integration.
Xamarin, for example, is a free and open-source platform but requires a Visual Studio license for commercial development. Like React Native, there are many open source libraries that can be leveraged to add a great deal of flexibility to app development. The programming language behind Xamarin is C# and the .NET Framework. Performance is near native speeds.
Apache Cordova is an open source framework that allows developers to build applications using HTML5, CSS, and JavaScript. Cordova relies on HTML5 instead of native APIs for access to device hardware. The framework can be extended with plugin-ins to access parts of the device inaccessible by HTML5. However, this causes Cordova to run more slowly than native applications.
Of course, mobile apps can be developed using native code. Android apps are built using Java while iOS apps are now written primarily in Swift. Native apps will always run fastest on their respective platforms. However, this comes at the cost of maintaining two completely separate code bases and potentially two different development teams.
A few well-known examples of React Native
According to the React Native showcase, many popular mobile apps have been written using React Native. The following apps are built both for iOS and Android: Facebook, Instagram, Pinterest, and Skype. When Uber launched UberEATS, they leveraged their existing technology stack. However, new business requirements like the Restaurant Dashboard needed to be deployed quickly to tablet devices already in place. Initially, the dashboard was deployed as a web application written in React. Uber quickly learned that restaurants required sound and device notifications to fill orders efficiently. React Native was the solution as Uber developers were able to take the existing web application and integrate React Native to rebuild the Restaurant Dashboard into a fast and responsive app complete with all of the device integration required by the UberEATS restaurants.
Is it used to make Progressive Web Apps?
No, React Native apps are native iOS and Android apps that can be distributed through the App and Play Stores, respectively. Traditional React is a separate project, which can be used to develop PWAs and bring React components to web browsers. If you’re looking for more information on PWAs, start here.
Conclusion
React Native provides a solid foundation for the rapid development of cross platform mobile applications. It’s widely used, well-documented, and developer friendly.
While there are many options available to build mobile applications, the popularity and open source nature of React Native allows the development community to create a robust set of resources to aid in the development process. This is a cost-effective solution to the problem of getting apps onto multiple mobile platforms quickly and in a way that is easy for developers to maintain. The framework is scalable and capable of meeting the needs of businesses of all sizes.
