hg0088线上网址

Live event: Hybrid app development, redefined

Watch Now

Ionic React vs React Native

Ionic React and React Native are two great options for building apps, but they differ in some important ways. We explore the differences in detail and make a recommendation on which one your team should adopt.

Ionic React vs React Native

hg0088线上网址The React ecosystem has two major ways to build cross-platform mobile apps: Ionic React and React Native. However, the two projects have different goals, features, and capabilities, and it’s important to understand the differences before investing in one.

hg0088线上网址In this article we outline the differences between the two projects and make a recommendation based on the type of apps your team is building, the skillsets of the engineers on your team, and the importance of enterprise support and functionality.

What is Ionic React?

Ionic React is an open source UI and Native API project consisting of cross-platform UI components and native functionality for building iOS, Android, Electron and Progressive Web Apps using React and standard web technology.

hg0088线上网址Ionic React is the official React version of the popular Ionic Framework, used by millions of web developers and powering mission critical apps for companies like Amtrak, AAA, Burger King, Home Depot, and more.

What is React Native?

React Native is an open source project released in 2015 by Facebook with the goal of adding iOS and Android UI control rendering through React and JavaScript in order to speed up app development at Facebook. React Native can be embedded into existing native apps or used to build apps from scratch.

hg0088线上网址Because React Native does not use DOM elements for rendering, it requires using a different rendering library than traditional web-based React.

React Native is used at companies like Shopify, Facebook, and Wix.

Difference: Web vs Native

Ionic React is web-first, meaning that it implements native iOS and Android UI patterns using cross-platform, standards-based web technology instead of accessing platform UI controls directly.

In contrast, React Native provides an abstraction through React that controls platform UI controls directly.

hg0088线上网址There are some benefits to React Native’s approach. Since React Native uses mostly standard iOS and Android controls under the hood, in some cases performance may be higher. Additionally, interfacing with an existing native app’s UI controls is easier. Apps created with React Native will look the closest to stock platform apps out of the box.

There are a few downsides to this approach, however. Native controls are harder to customize than most web developers and designers are used to, so they may find React Native apps more challenging to design custom UI experiences with. Since React Native is not a true browser environment, standard CSS, HTML, and DOM techniques can’t be used (though React Native does have a CSS-like utility). Additionally, existing React web code and libraries likely won’t be portable to React Native without heavy customization.

This also means the development process for each is different. Ionic React is the most similar to traditional React web app development since Ionic React apps are React web apps. That means Ionic React will offer a web developer a fast and familiar development experience directly in Chrome or their browser of choice, and many apps can have a significant portion of their functionality built right in the browser. Ionic React can also easily be added to any existing web-based React app.

React Native does not use traditional web development tools directly but does have some custom support for integrating with a Chrome debugger, but will require running in an emulator or on device unlike Ionic React and will not be a true browser debugging experience.

hg0088线上网址Finally, because Ionic React is based on web technology and the entire web platform, it doesn’t require making a bet on a new platform. Chances are your team is already heavily invested in the web platform. React Native, in contrast, is a self-contained platform and ecosystem and must be self-sufficient in order to succeed in the long term.

Difference: React DOM vs React Native

React itself is an abstract UI library that supports multiple platform rendering libraries. The two main ones are React DOM (react-dom on npm) and React Native (react-native on npm), and they are not compatible.

hg0088线上网址React DOM is, by far, the most popular rendering library for React. By today’s numbers (Feb ‘20), React DOM is installed 25M times per month compared to React Native’s 1.4M, which is an 18x difference.

hg0088线上网址This distinction is important because React libraries must explicitly support specific rendering libraries. Given that React DOM has considerably more usage, it makes sense that most library authors target it first. Thus, React DOM has the broadest compatibility with the React ecosystem. React Native developers, in contrast, will have to find libraries that explicitly support it.

This means that Ionic React will likely Just Work with any React library now and in the future, but React Native may not.

Difference: Progressive Web App support

hg0088线上网址Progressive Web Apps are a new standard for building rich, native-quality mobile apps but distributing them through a web browser instead of an app store. Progressive Web Apps have benefits for user engagement, search engine optimization, and shareability, and are becoming popular for consumer and enterprise apps.

hg0088线上网址Ionic React has first-class Progressive Web App support, while React Native does not support Progressive Web Apps officially at all.

If Progressive Web Apps are in your team’s future plans, it would be worth starting with Ionic React, which would let your team build and distribute an app to iOS and Android app stores andhg0088线上网址 to the web as a Progressive Web App at the same time and with the same code.

Difference: Cross-platform Support

hg0088线上网址React Native is a UI library with official support for iOS and Android app store apps only (there are some unofficial projects that add desktop and web support). In contrast, Ionic React officially supports iOS, Android, Electron, and the web using Progressive Web App technology.

hg0088线上网址React Native takes a “learn once, write anywhere” approach, while Ionic takes a “write once, run anywhere” approach. With React Native, developers learn one set of concepts (in this case, React with the React Native flavor), and then build UI screens specifically for iOS and specifically for Android.

hg0088线上网址In contrast, Ionic React apps run the same UI on all platforms, utilizing responsive web design, CSS, and platform-detection utilities to enable developers to customize an app for specific platforms if they choose.

hg0088线上网址Additionally, Ionic React uses what the Ionic team calls Adaptive Styling to map core UI concepts like navigation, tabs, toolbars, and buttons to platform expectations (such as Material Design), while still enabling full designer customizability. React Native requires developers to build screens specifically for each platform.

Similarity: Native Access and Functionality

hg0088线上网址Ionic React and React Native apps both have full native access and capabilities, since both projects create real native app projects and binaries.

This is a point of confusion since many people incorrectly believe that web-based mobile apps are not actually native apps. A web-based mobile app using Ionic React will simply perform more work in a native WebView control but is ultimately part of an actual native app UI hierarchy and can access all native APIs, call native code, and use any native control (though not directly in the WebView).

Additionally, many people have the misconception that React Native apps are “compiled down to native” which is not true. Both Ionic React (through Capacitor or Cordova) and React Native execute JavaScript at runtime as opposed to being pre-compiled. However, Ionic React has access to advanced Just In Time compilation for JavaScript available in most Web Views that React Native does not (JavaScriptCore does not offer JIT unlike WKWebView, for example), meaning JavaScript is compiled to machine code at runtime for native performance for Ionic React apps.

Ionic React uses a project created at Ionic called Capacitor to enable developers to call native code directly from JavaScript, and exposing new native functionality or displaying Native UI is easy. In particular, Capacitor’s first-class support for Swift makes building native functionality for iOS much easier than in the past and easier than React Native’s Objective-C focused layer.

hg0088线上网址However, both make it easy to extend an app’s native functionality and developers shouldn’t find any roadblocks with any approach.

Thus, Ionic React and React Native have nearly equal support for running native code and accessing Native APIs, though each take a different approach to get there.

Difference: Enterprise Support and Functionality

hg0088线上网址Ionic React is truly unique in the mobile ecosystem in that it is backed by a business dedicated to helping teams build and scale mission critical apps. In contrast, React Native is an internal Facebook project built to improve Facebook’s app development process, with no commercial or enterprise business behind it.

hg0088线上网址Today, Ionic works with hundreds of medium-to-large enterprises building consumer facing and employee facing mobile and web apps that reach millions of users and drive billions of dollars in revenue. Ionic’s entire business is helping these teams be successful and offering a dedicated resource of app experts they can call on at any time.

hg0088线上网址Ionic also offers key enterprise native functionality that is supported and draws its priorities directly from enterprise customers. Such functionality includes secure authentication and identity management using advanced encryption APIs available on iOS and Android, high performance offline encrypted data storage, and a library of supported and maintained native functionality.

hg0088线上网址Last but not least, Ionic has a suite of Mobile DevOps features available in its Appflow product to help teams deploy app updates in realtime and add native app binary building to their CI/CD processes. Soon, teams will even be able to submit apps to the app store automatically as part of their workflow!

Conclusion

hg0088线上网址Ionic React and React Native are both great choices for building mobile apps. For teams targeting iOS and Android only and with more traditional native developers or advanced JavaScript developers and an existing repository of native controls, React Native may be a better fit. This explains why React Native is popular with consumer app startups that have a history of native app development.

For teams that have traditional web development skills and libraries and wish to target mobile and web (as a Progressive Web App), Ionic React will likely be a better fit. This explains why Ionic has been successful with startups and enterprise teams with more of a web development history.

Additionally, for teams that need guaranteed support and dedicated enterprise functionality for mission-critical apps, Ionic React may be the onlyhg0088线上网址 option given that it is one of very few platform companies in this space dedicated to the business of app development technology.

hg0088线上网址We believe both projects fill different needs in the ecosystem and will co-exist. We are happy to talk through which platform is a better fit for your team. Get in touch with a Solutions Architect at Ionic or give Ionic React a try first.

You’re in good company. Ionic powers millions of apps at some of the smartest companies in the world.

See all Customers