What prompted me to start looking in to React Native?
As a web application developer, my first attempt of mobile application development was about a year ago, when I decided to implement a small-scale app using Ionic Framework. This prompted me to investigate more about hybrid frameworks, which allow me to utilise my web development skills to build a mobile app. Before this point, I’ve never used any native mobile development languages. The fact that we had to use two different languages to build two different apps for Android and iOS to serve the same business purpose was a major concern for me.
While investigating hybrid mobile applications, I stumbled upon React Native and found out that there are numerous advantages of using React Native over a Cordova based hybrid application frameworks. At that I time I have had some experience working with React building web applications, thus making my transition to React Native a simpler one.
What is React Native?
React Native lets you build mobile apps using JavaScript and React. It leverages the advantages of React to build rich mobile UIs utilising a component-based architecture. It uses real native components and APIs to interact with the code. The bridge in between the JavaScript realm and the native realm is responsible for converting the JavaScript code to native code. The bridge translates JavaScript calls and invokes the host platform’s underlying APIs and UI elements. Because React Native doesn’t run on the main UI thread, it can perform these asynchronous calls without impacting the user’s experience.
Isn’t React Native just another hybrid application framework?
React Native is different to previous hybrid frameworks that use “write once, use everywhere” approach. Frameworks such as Meteor and Ionic used Cordova to use JavaScript and build mobile apps. Since what it creates is literally a web app rendering HTML, inside a mobile browser (WebView), there are performance implications in rendering views. Moreover, the device hardware integration is performed via Apache Cordova.
The React Native team deviated from this approach and wrote their own natively written modules that directly communicated with React Native and JSX. It was no longer building a web application which rendered HTML inside of a web-view of a mobile device hence developers were able to write native code alongside React to support any advanced native functionality needed. This was a huge plus in terms of code flexibility and a key stepping stone in hybrid mobile application development. Unlike the other hybrid application development frameworks, React Native compiles to the native code, therefore can directly access the native phone features thus improving the performance of the hardware devices used via the app.
Is this a technology worth investing in?
Thousands of companies including Facebook, Instagram, AirBnB and Skype use apps built by React Native. It’s supported by a solid team backed by Facebook and there are plenty of resources & learning material available. The concept of a single code base to manage both your iOS and Android mobile application works well with time/ schedule and budget constraints. Since there is a single codebase which creates the applications bundles for both iOS and Android platforms, implementing and updating features is relatively quicker than doing the same with separate iOS and Android codebases.
The unit testing becomes a lot simpler because developers need to test only against a single codebase. There has been a steady growth in the developer community and multiple success stories of React Native apps delivering business-critical applications such as the Tesla and Uber Eats mobile apps. Microsoft has started building a framework enabling Microsoft Windows 10 apps to be built with React Native (React Native Windows), thus allowing the code to be exported to the Microsoft platform too. Moreover, the power of npm in its vast number of pre-existing web modules can be used in mobile app development. Live reload and hot reload improves the speed of development hence making React Native ideal for rapid prototyping.
How does it compare to other competing cross-platform technologies?
Flutter
Flutter is Google’s mobile UI cross-platform framework for creating native apps for Android and iOS devices, from a single codebase. Its programming language is Google’s Dart. Its code compiles to the native machine code of the mobile device, so the performance is good. It controls the rendering of widgets down to the pixel level because it uses its own library of widgets, not the native ones, so there is no UI bridging involved. This leads to smooth animations and transitions.
Since it’s still emerging technology, the API may be changing and it’s still in Beta. Developers knowing Dart and resources/learning material are limited. The documentation is still evolving too. Given these factors, it’s early days for Flutter and hence not recommended for a production application. If you’re interested in knowing more about Flutter, this is a great post.
Ionic/Meteor & Apache Cordova
Cordova and the many other technologies mentioned, use WebViews as their UI, so basically, they are HTML pages that have been packaged into an app. WebViews are known for not behaving like native widgets and can feel like interacting with a web page to many users, thus the mobile user experience is compromised. Performance is a major concern in the apps running in a WebView and interaction with device features are primitive. There have been concerns about the security aspects of using web-views in mobile applications too.
On a positive note, web developers will find it easier to build applications in Ionic and Meteor. They will be able to utilise all the web development skills including the full capabilities of CSS and even use CSS preprocessors to promote style reuse among the app components. Because they are building a web app that gets rendered to a mobile app via the WebView, the developer productivity will be higher compared to React Native development, in which they will have to get accustomed to a lot of new concepts.
How does it differ from a web app built with React?
React works with the virtual DOM of the browser, allowing fast UI updates. Instead of rendering to the browser’s DOM, React Native invokes Objective-C/Swift APIs to render iOS components, or Java/Kotlin APIs to render Android components. This sets React Native apart from other cross-platform app development options, which often end up rendering web-based views.
Unlike the web apps, there are no HTML tags (such as divs or unordered lists) in React Native code. It contains React Native tags such as View or Text which maps directly to the actual native iOS or Android UI components that get rendered on the app, so a might become an Android-specific TextView. It uses CSS-like JavaScript-selectors written in camel case for styling, which are passed to components via the style prop. CSS animations no longer work in React Native and we need to rely on Animated API for that purpose.
How does it compare to native mobile?
Experience of developing a mobile app using React Native is similar to working with a web application. The only main difference is that we are using either the iOS or Android simulator to run the application. You will utilise the same codebase to build two application executables for iOS and Android with minor platform-specific tweaks added, whereas, in the native domain, you have to maintain 2 specific code bases. The hot reloading feature of the React Native eases the development effort and helps quick turnaround times.
What is the end user experience?
Since React Native provides near-native components, the end users can be provided with a mobile experience close to the native applications. The UI can be customised based on client requirements to provide a beautiful and responsive mobile experience. Customising app layout based on the branding is easy and flexible due to the use of CSS inspired JavaScript selectors.
Where is React Native best used?
React Native excels in performing data retrieval, making API calls, rendering component hierarchies, and performing CRUD operations. Since these operations can be easily unit tested in the React ecosystem, developers will be able to build well-tested code that will perform well on both iOS and Android platforms.
What are its limitations?
Since React Native follows a hybrid application development approach, there are certain limitations that we need to be aware of. Animations are not a strong point of React Native and even though there are ample amount of libraries and different approaches to implementing animations, if an application needs to be animation/ transition intensive, React Native might not be the best fit. With the integration of Expo, React Native provides a lot of convenient components that can be used for device hardware integration such as the use of the camera, but if a certain application requires complicated usage of the device hardware, it’ll be advised to go with a native app. React Native allows the native components to be used within its codebase and the common practice is to mix these two practices, building in the core application with React Native and using native components invoked via the React Native code, when required.
What is the developer experience?
The main advantage of React Native is that it allows web developers to become mobile developers without mastering any native development languages and utilising their knowledge of JavaScript. A web developer with experience in React can build a React Native application with a little help from the API documentation. The application can be viewed in either the IOS simulator or the android emulator. Developers can utilise any lightweight web development IDE such as VSCode, therefore, it allows the developers build and debug apps faster.
Installing React Native Tools for VSCode helps users to easily debug code, and provides intelliSense to browse objects, functions, and parameters for React Native APIs. Instead of recompiling, they can reload apps instantly thanks to Hot Reloading, and even run new code while retaining the application state. This will allow us to do a small style or text change and reload it in the same scene. Live Reloading, on the other hand, restarts the app from the beginning and is useful if we want to go through the app workflow.
Developer Tooling
React Native application can be built using any Web application IDE and VS Code, Sublime Text, Atom and WebStorm are some examples of these.
We can use create-react-native-app on the command line or Expo Desktop Client to create a new React Native app. There is a number of readily available component libraries such as react-native-elements which provides a large array of readily built UI components, which will help in app development productivity too.
Expo
Expo Desktop Client is used to improve the React Native developer experience to a whole new level. In addition, to React Native components, it provides the expo SDK, a library that enables a wide variety of native APIs on iOS and Android. Expo even helps to manage application assets, take care of push notifications, and build the final native binary for submission to the application store. It consists of a number of inbuilt features such as social authentication, camera integrations, image picker, accelerometer, location and file system integrations and push notifications.
Moreover, it allows developers to open the application using the IOS simulator. If an application needs to be viewed on the Android platform, it uses Genymotion to achieve it. Once Genymotion is installed on a virtual machine, Expo facilitates the application to be opened in the Genymotion Android emulator.
One of the nicest features of Expo is that the application can be opened straight away in any mobile device as long as it has the expo app installed from the app store. It provides a QR code which can be scanned by the device camera to open the app or the link provided can be shared among people to test it in their own devices. This helps to test the code on multiple devices quickly and to find out device and platform specific issues quickly.
Debugging
The debugger can be opened in a browser which allows the user to inspect and debug the code. Thereafter developer tools can be opened and the app can be debugged as if it was a conventional web application. Enabling Pause On Caught Exceptions will deliver a better debugging experience in Chrome. The React Developer Tools will help to inspect the React component hierarchy, their properties, and state of the application. Users can access the developer menu by shaking their device or by selecting “Shake Gesture” inside the Hardware menu in the iOS Simulator. They can also use the ⌘D keyboard shortcut when the app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Then by opening the “Toggle element inspector”, users will be able to inspect the components and their properties in the hierarchy. The Redux Devtools can be used to inspect the application state of the app at any given point of the application lifecycle.
There is an alternative standalone tool for debugging React Native apps called React Native Debugger. Its based on the official remote debugger and provides extended functionality with React and Redux dev tools integrated.
Deployment
React Native builds the standard native app artefacts for their respective platforms, Therefore standard native app deployment procedures can be applied to deploy the artefacts to the respective application stores. Tools such as Xcode and Android Studio can be used to package the React Native code into an app for testing on a simulator, for distributing to test on a device and for distributing through the App Store or Play Store.
What is the development effort relative to native?
In a nutshell, it’s one application versus two native applications. In native environments two separate applications have to be developed, one for IOS with Swift/Objective C and another one for Android using Java/Kotlin. They have to be unit tested separately and UI testing has to be carried out on different simulators /devices too. There will be the added complexity of maintaining two codebases.
With React Native, it will be a single codebase, developed using React/JavaScript which needs to be unit tested once; the development effort is literally halved. There will be some platform-specific tweaks that need to be added, but that can be considered minor, due to the time and cost savings incurred in relying on a single codebase.
How hard is it to learn?
React Native code is written in JavaScript and utilises ECMA Script version 6. Compared to Swift or Java, JavaScript has a simpler programming model thus it’s easier to master. ECMA Script version 6 syntax provides compact code compared to version 5 and provides powerful inbuilt functions, generators, modules and scoping improvements which aid developer productivity. Layout and styling are inspired by CSS-like JavaScript selectors, so some basic knowledge of CSS is required. The transition to the required camel case style selectors is not difficult to master since it follows the same CSS property names.
Application routing in React routing is a bit of a complex topic. There are number of libraries available such as react-native-router-flux and react-navigation. The libraries have rapid change cycles and some changes are not backward compatible, therefore it’s important to follow the official documentation, which is another challenge. It’s important to maintain the compatible library versions of these libraries to avoid conflicts and package locking has to be implemented using package-lock.json or, if present, npm-shrinkwrap.json
Application state management with Redux
In a real production app, one of the major concerns is application state management. Having the state scattered all over the application makes it a nightmare to manage its lifecycle and the best practice is to have the state in a single place. This is where Redux comes in to the picture. Redux creates action creators that will get executed when specific UI interactions take place. These action creators will dispatch particular actions, which flows through application middleware to the reducers. The reducers produce a state that flows into the React application UI.
Action creators by nature are synchronous but most of the time we require action creators to be asynchronous, such as when we retrieve a dataset from a database. In this instance, we utilise Redux Thunk to manage asynchronous action creators. Another alternative is Redux-Saga which utilises ES6 generator functions and avoids a lot of boilerplate code that Redux-Thunk has introduced. Application level state management is of paramount importance for a large scale enterprise level mobile application and therefore can be sidelined for a small scale mobile app, where it makes sense to rely on component state only. These concepts are fairly advanced and can be hard to absorb at first glance for a new web/mobile developer.
What skill sets are required to use React Native?
A person who has a solid understanding of JavaScript and has used the new ECMA Script version 6 syntax will find it easy to absorb the concepts behind React Native. Moreover, it relies on CSS inspired JavaScript selectors passed to the style property of components, therefore some CSS knowledge becomes handy. For component structuring, flexbox layouts are supported, therefore, knowledge of flexbox styling becomes important as well.
Do you need to know iOS or Android?
There is no native knowledge required to develop a pure React Native app since it’s built on JavaScript. The deployment process involves working with platform-specific executables, therefore, the knowledge of native application deployment is required.
React Native works well with components written in native languages such as Objective-C, Java, or Swift. It’s possible to switch to native code if you need to optimize a few aspects of your application or to build part of the app in React Native, and some parts using the native code directly.
A great example of this hybrid approach is how Facebook app is implemented. Knowledge of native code can be important when we try to mix native and React Native components and trying to communicate in between them.Even though React Native has done a commendable job of mapping device functionalities via its native components, there may still be some missing functionalities especially when new hardware emerges. This is when we have to use native languages to develop the missing components and then invoke them from the React Native code.
View on the level of support and uptake
React Native has been available since March 2015 and there is a large number of companies that have adopted it to develop their mobile applications. The amount of documentation and technical support in places such as Stack Overflow is phenomenal. It has the solid backing of Facebook and used by major players such as AirBnB, UberEats, and Instagram. The number of supporting APIs provided by these companies such as the AirBnB Map View has helped the framework’s versatility.
According to Facebook, more than 250,000 have the React tools installed. Samsung Tizen, an HTML5-based platform which powers their Smart TVs and smartwatches has announced their commitment alongside Microsoft to bringing React Native to their respective platforms (Read here). There are more than 14000 forks from React Native github repo and 30,000 odd questions tagged in StackOverFlow, showing the extent to which React Native has gained popularity in the mobile development community.
Summary
Links
- Apps built with React Native – https://facebook.github.io/react-native/showcase.html
- React Native Material Design – https://react-native-material-design.github.io/
- Useful insights in to React Native development – https://rationalappdev.com/
- An in-depth look at React Native debugging – https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
