From the surface, it appears that React Native and Cordova are occupying the same space. However, as with all technologies, there are aspects where one shines, and the other falls short. So, to get a better picture of each technology, and to learn their advantages and pitfalls, we will dive into details of each and compare them across different disciplines.
Differences in Philosophy
It’s important to remember that React Native’s tagline, “Learn once, write anywhere” differs from the usual cross-platform mantra, “Write once, run anywhere.” This leads to two things: Firstly, we can’t just take our existing React codebase from our web project and turn it into a mobile application in just a few clicks. However, React and React Native do share a lot of key concepts with one example being their component systems, and as a result, React Native feels instantly familiar. While React shares a lot of similarities with React Native, there are some core differences, which ranges from the way stylesheets are handled to the type of components we can use.
Secondly, we might find ourselves not able to share React Native code when targeting different platforms. This happens when we would rather have user interface elements behave natively to their specific platform, in turn giving the user a better experience and a more native feel to the app. An obvious example is the drawer side menu in Android apps, which is very uncommon in iOS apps.
Cordova does not share this philosophy. It is not uncommon to start developing a pure web application, later bundle it as a Cordova application, and reuse as much code as possible for all the (mobile) platforms we want to target.
index.html file, we are good to go. One simple example would be the following code snippet:
This example means we can use pretty much anything we desire, such as using a package manager like NPM or Bower, using a transpiler such as Babel, CoffeeScript or TypeScript, a bundler like Webpack or Rollup, or something else entirely. It doesn’t matter, as long as the result is an
The most barebones React Native application would look similar to this example:
To sum up, React Native is a React-centric opinionated approach to mobile development, while Cordova allows us to bundle web technologies inside the WebView shell.
Native Look and Feel
One thing that is important to users is to have a native look and feel of an application. Since Cordova applications are usually simple web applications, there are a few things that might feel strange at first. Problems may range from missing visual feedback on tap areas, to scrolling that doesn’t feel as silky smooth as in native applications, to there being a 300-millisecond delay on tap events. While there are solutions for all of these issues, we should remember that we may need to put in some extra effort if we want our Cordova application to feel as close to native applications as possible. In Cordova, we don’t have access to any native controls. If we want to have a native look and feel, we are left with two options: Either re-create the native controls, such as buttons and input elements, with HTML and CSS, or implement native modules that directly access those native controls. We could do this by ourselves or by using a third-party library such as Ionic or Onsen UI. Note, it’s important to keep them up-to-date with OS updates as they come along. Sometimes, the look of a mobile operating system gets a facelift, as happened when iOS 7 was introduced. Having an app that it isn’t able to adapt will take users out of the experience. We could also resort to including Cordova plugins that connect us to the native side of things. One of the most complete native controls is Microsoft’s Ace library.
With React Native, on the other hand, we have access to native controls and interaction out of the box. Components such as
Slider map to its native counterparts. While some components are available for all platforms, other components only work on specific platforms. The closer we want our application to have a native look and feel, the more we need to use components that are only available for this specific platform and so the more our codebase diverges. Mind touch interactions and gestures are part of React Native as well.
Cordova offers a command-line utility to create new project templates, starting the application in the simulator and building the application for the actual device in a production mode. Most of the time, we are developing the application on a desktop browser and may later bundle it up as a mobile application. With the freedom Cordova offers, we need to tackle the development workflow ourselves. If we want live-reloading on the device, we need to implement it ourselves. To debug Cordova applications, we apply the same principles used to debug a website. In iOS, for example, we would connect our mobile device via USB, open Safari and its developer tools.
React Native offers a similar command-line interface and offers a development workflow familiar to web developers. We get live reloading out of the box. Once we change a React component, our application reloads with the changes we made. One of the most exciting features is hot module replacement, which partially reloads the changes in the component we made, without altering the application’s state. We could even connect to an actual device and see if our changes work as we would expect them to on a real device. Our React Native applications can be debugged remotely with Chrome for Desktop. Error handling is obvious in React Native; if we run into an error, our application displays a red background, and the stack trace is shown. Thanks to sourcemaps, we can see the error’s exact location. When we click on it, our editor of choice opens up at the code’s precise location.
Extensibility and Access to the Native Features
If we were to hypothetically write a Cordova iOS plugin in Objective-C, it might look like the next code snippet. Our plugin will just log the input parameter.
To use the plugin, we just need to call the
React Native binds the module for us with the calls
RCT_EXPORT_METHOD. We can now access it with
NativeModules.Log.log as so:
While we only took a close look at creating a module in iOS using Objective-C, the same principles apply for creating a module for Android using Java.
We need to link native plugins within the project files for each platform. With iOS, for example, this means we must link the compiled native part with our application and add the corresponding header files. This can be a long process, especially if there are a lot of native modules. Fortunately, this is significantly simplified by using a command-line utility called rnpm that has become part of React Native itself.
Conclusion: React Native or Cordova?
React Native and Cordova have different purposes and so cater to different needs. Therefore, it’s hard to say that one technology is better than the other across all disciplines.
By using Cordova, you can quickly turn your existing single page application into a mobile application for different platforms, at the cost of interactions not necessarily have the native feeling to their specific platform.
With React Native, applications have a more native look and feel but at the cost of reimplementing pieces of code for certain target platforms. If you have already dabbled in React and are interested in developing mobile applications, React Native feels like a natural extension.
This content was originally published here.