Editor’s note: This post has been updated on 30 August 2022 to address mobile app development with Vue now that Vue Native has been deprecated, as well as to reflect the most recent version of React Native.
With an increase in the amount of mobile app development frameworks available, the introduction of Vue Native in 2018 gave developers the ability to use Vue.js code to create React Native mobile apps.
However, the Vue Native team announced in November 2021 that Vue Native was being deprecated. Developers using Vue Native needed to decide whether to continue using the React Native ecosystem by migrating their apps to React Native, or to continue using Vue with a different framework.
In this article, we will compare mobile app development with React Native compared to using Vue and Capacitor. We will cover:
Capacitor is a cross-platform tool that was built by the Ionic team. It basically lets you take your web application and turn it into an iOS or Android application.
With Capacitor, you can create mobile applications using your JavaScript code. It then renders the apps using your phone’s native WebView. Using Capacitor’s plugins and APIs, you can access native features like the camera, speaker, and others.
Capacitor is compatible with the different JavaScript frameworks; React, Vue, Angular, and vanilla JS. Learn more about building cross-platform apps with Capacitor and Vue.
React Native is basically React for mobile applications. It enables you to create apps for Android and iOS with React syntax.
The React code you write interacts with native APIs on mobile devices. React Native provides developers with native components like Text, Image, and View as building blocks for a native UI.
React Native, which is open source, was created and is maintained by Facebook.
Cross-platform tools like React Native and Capacitor can save you a lot of time and money.
Both frameworks eliminate the need to learn native languages like Java, Kotlin, Swift, and Objective C to build mobile apps for specific platforms. Rather than build an Android application with one codebase and build an iOS application with another, you can create mobile apps for both platforms using the same codebase.
This also means companies building cross-platform applications can hire just one React Native or Capacitor team to build both versions rather than requiring two different teams — one for iOS and one for Android — thus reducing the number of developers on payroll.
Capacitor and React Native share a common approach to integrating custom native code into their projects as modules or plugins. In both frameworks, you are given the ability to write custom native code in Java, Kotlin, Objective C, or Swift for accessing native features that the frameworks do not provide out of the box.
Like React Native, Capacitor uses the native features of mobile phones. The main difference is in rendering. Where React Native mobile applications use each device’s native view, Capacitor renders applications using the native WebView of devices.
Both frameworks are open source for anyone to contribute their source code to and use.
When working in React Native, developers can build native apps using React’s syntax and core principles. It is often referred to as an unopinionated framework, meaning it comes with very few official libraries and functionalities.
React Native’s creators preferred to give developers freedom when structuring apps and solving different problems, letting developers who do not want to write code from scratch build different functionalities using community-developed third-party libraries.
Some of these libraries include:
However, even with third-party libraries that can be seen as an advantage, these libraries often become outdated. If community support for a particular library isn’t strong enough and doesn’t update often, incompatibility issues can arise.
Capacitor was built on top of Cordova and is backwards-compatible with most Cordova plugins. Capacitor, however, is more modern and better-maintained, while Cordova has been deprecated. Capacitor also supports PWA and is faster than Cordova was, giving your app better startup time.
Even though Capacitor was developed by the Ionic team, you don’t actually need to use Ionic with Capacitor. Capacitor is compatible with any JavaScript framework as well as vanilla JavaScript.
With that said, using Ionic with Capacitor can make your work easier, as Ionic can help you implement native UI and configure some necessary tooling for mobile development.
Capacitor is perfect for web developers to hit the ground running building mobile applications. It can even generate mobile applications from web apps built with React frameworks like MUI and Chakra. You cannot do the same with React Native; you have to build your apps from scratch.
One advantage that Capacitor has over React Native is that it can be used to create progressive web apps, as it can access native APIs from the web. Capacitor is also very lightweight compared to other cross-platform tools like Xamarin, Cordova, and NativeScript.
If you were a fan of Cordova, you should consider using Capacitor. It is well-maintained by the Ionic team, which provides fixes to issues regularly.
Let’s take a look at the design philosophies of these two tools and how they differ from each other.
Capacitor takes a web-based approach to mobile development. It renders apps on phones using the devices’ native WebView and it comes with plugins out of the box that convert your web code into APIs that interact with devices’ native features.
With React Native, on the other hand, developers skip web code and go straight to mobile.
Unlike hybrid applications that use WebViews, React Native applications interact directly with a platform’s native components. Because of this, native apps like React Native’s are usually faster and more efficient, since they are tailored to the platform they run on.
One common issue with tools like Capacitor that use WebView to render apps is difficulty in rendering animations, CSS effects, and complex layouts with gradients — anything that is complex or heavy. Displaying video can be an issue too.
Capacitor apps may struggle on low-end devices or devices with old hardware. This is because usually, some resources have to be loaded from the web before the app’s UI can be rendered.
Also, when apps aren’t rendered on the native view of devices, they cannot fully leverage the devices’ hardware capabilities, resulting in sluggish performance.
Testing is easier with Capacitor, as it permits running apps in a web browser. With React Native, compiling, running, and testing apps requires installing Xcode or Android Studio, adding another step to the compilation process.
Although you can skip the Xcode/Android Studio step with Expo, Expo is not without its limitations.
A hybrid WebView tool like Capacitor saves you cost and a lot of time. But if high performance is very important to you, or if you’re building a complex application that might be run on cheap devices and devices with old hardware, then React Native might be a better option.
React Native apps are likely to be faster and more performant, as they are converted into the native languages of devices and work directly with the native features of those devices as opposed to running in a WebView.
With over 2,000 contributors and just under 700,000 users on GitHub, as well as a large community on Stack Overflow, React Native has the support developers need to learn and grow in the framework.
Additionally, because React Native is based on JavaScript and is a cross-platform framework, it’s accessible and popular among developers.
React Native also became popular because Facebook created it. Facebook is currently using React Native in many of its apps and investing heavily in the framework.
Other companies that use the React Native framework include:
Since Capacitor is still fairly new, there aren’t as many resources and materials online for developers to consume. It only has under 300 contributors on GitHub and a small community on Stack Overflow. However, it does have comprehensive documentation.
Companies that currently use Capacitor include:
Since React Native has been around for longer and has support from Facebook, more developers and large companies use it, so it clearly takes the win here.
Capacitor is open source and MIT licensed, just like other Ionic tools. However, the Ionic team provides paid support for enterprise users of Capacitor.
With Capacitor’s paid support service, you can get on phone conversations with the Ionic team (including engineers) to get your problems solved, usually in a matter of hours or days, and even on weekends.
If premium support is top priority for you and your team, then Capacitor might be the better option for you.
React Native uses JSX as its templating language. Rather than separate markup from logic by putting them in different files, React Native uses separate components that contain the markup and the logic belonging to a component in the same file, achieved through JSX.
This component-oriented approach allows developers to create components once and reuse them as many times as they need by combining markup, styling, and logic.
JSX makes creating these components simple, and since it is statically typed, developers can catch errors early, improving debugging and development quality.
It also optimizes code while compiling, so JavaScript code generated by JSX runs faster than the equivalent written directly in JavaScript.
Because of this, however, developers can’t style using CSS and can only style with JavaScript.
While JSX isn’t particularly difficult, most developers use HTML and CSS for markup and styling, and adapting to this new paradigm might take some time.
Here’s an example of JSX and styling in React Native:
Learn more →import React from 'react';
import { Text } from 'react-native';
const Example = () => {
return (
<Text style={[ color: 'red' ]}>Example text in React Native!</Text>
);
}
export default Example;
To use JSX, developers must import the React library and any React Native component they want to use; in this example, the React Native component used to display text is Text.
The Example function returns a line of text with some basic styling applied to it to make the text red, and the Text tags markup is embedded into the JavaScript Example function. This styling is JavaScript, not CSS.
Exporting components with export default allows you to use the components anywhere.
As you can see, developers usually have to learn JSX and other tools specific to React Native to develop an application.
They also have to develop those mobile applications from scratch. If there is already a website available, the code base of the website cannot be used to create a mobile application with React Native.
In fact, a React website can be deployed to market faster with Capacitor compared to React Native, with which you would have to build your app from scratch.
Capacitor, on the other hand, is framework-agnostic; you can introduce it into your project at any stage.
This means you can build out your JavaScript application with Capacitor from the beginning and make the mobile experience your primary focus, or you can introduce Capacitor into an already-existing web application to create a mobile experience for your existing users.
You can add Capacitor to an existing application by running the following command:
npm install @capacitor/cli @capacitor/core
Next, initialize it with the following:
npx cap init
Next, add the platform you’re building for:
npm install @capacitor/android npx cap add android
Now if you run npm run build, Capacitor will make use of the files generated to create your mobile application.
To sync the assets of your web application with your mobile application, run the command below:
npx cap sync
Finally, to run the app on your device, run the following:
npx cap open android
If you don’t already have web development skills and your focus is a mobile app rather than a website, then you might want to skip Capacitor and opt for React Native instead.
Capacitor shines where a developer already has web development skills and plans on creating a website or already has a website for the project that they are building. With React Native, your website and your mobile apps cannot share the same code base and may end up not being as aligned as you want.
Due to its popularity among developers and businesses, time on the market, and strong backing by Facebook, there is way more demand for React Native skills in the developer market.
These two cross-platform mobile app development frameworks work with the same code and can be utilized by both Android and iOS, ultimately saving time, money, and energy by not requiring developers to learn a new programming language across different operating systems.
It’s worth noting that factors like employment opportunities, community, and working with a tried and trusted framework favor React Native. So, if you are looking past efficiency and toward maturity and the job market, React Native easily takes the win.
However, if you simply want the framework with the easiest learning curve, Capacitor might suit you better.
You do not necessarily need to think of both frameworks as a replacement for each other. Rather, see both of them as tools you can use, depending on which one the situation calls for.
If you already have a web app, and you want mobile applications that you can ship to store as quickly as possible, then Capacitor might be the better option for you. If you plan on building from scratch and you are focusing on mobile, then React Native may be a good option for you.
Regarding performance, the efficiency and structure of your code goes a long way in determining how fast your app will be, rather than just which framework you opt for.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Learn to build scalable micro-frontend applications using React, discussing their advantages over monolithic frontend applications.
Build a fully functional, real-time chat application using Laravel Reverb’s backend and Vue’s reactive frontend.
console.time is not a function errorExplore the two variants of the `console.time is not a function` error, their possible causes, and how to debug.
jQuery 4 proves that jQuery’s time is over for web developers. Here are some ways to avoid jQuery and decrease your web bundle size.
