Where Does Ionic React Fit in the React Ecosystem?
A few weeks ago, we announced the beta of our official React support, making it possible for developers to build quality apps for mobile, desktop, and the web using React and standard web development techniques. Predictably, we’ve gotten a few questions from the community wondering about Ionic React and how it’s different from React Native, and when someone would pick one over the other.
First of all, we are huge fans of the React Native project and what the team at Facebook has built. In many ways, React Native has helped Ionic quite a bit by getting more and more teams to be okay with building apps in JavaScript. We have a shared mission in making app development easier using JavaScript, and are thankful to have them fighting alongside us.
However, we believe Ionic React fills an important void in the React ecosystem and has a few fundamental philosophical differences that may resonate with your team. Let’s dig into some of those differences.
Web Native vs Mobile Native
Ionic React is what we call “web native,” meaning that it is based on pure web technology that runs in a browser. In fact, Ionic’s mission is to help make the web platform the dominant app runtime by helping teams build awesome apps for mobile, desktop, and the web, without compromising native power and performance.
That means every Ionic React component is a typical HTML element that runs in most every browser environment on most every platform out there, without any custom per-platform UI code needed. Under the hood, Ionic styles your UI for each platform to follow platform design standards and meet user expectations.
Ionic React components use the standard web development technology stack so it’s very natural for the traditionally-trained web developer. Every bit of Ionic React works the same as any other web app component framework, so customizing with CSS, adding custom div’s to build custom UI, etc. work exactly the same. With Ionic React you can drop in pretty much any web library or component (such as a graphing library like c3) just like you do in the browser, helping you take advantage of decades of web libraries and existing web code.
On top of that, one of the biggest benefits to being web-native like Ionic React, is being able to build a huge portion of your app directly in your desktop browser (Chrome, etc.) using the typical Dev Tools workflow. This is one of my personal favorite aspects of the web-native approach.
React Native, in contrast, uses React to orchestrate iOS and Android stock “native” controls on the screen. React Native provides some utilities, like a flexbox-like library and stylesheet abstraction, to bring some of the web dev experience to native, but fundamentally it’s not drawing standard HTML elements like divs on the screen and it’s not running a browser environment, so those features are emulated and may not let a web developer apply the exact same skills to mobile.
In fact, even React Native and React are not the same development experience, since React Native does not support CSS files or DOM. One of the bits of feedback we’ve had from early Ionic React users is they are glad they can use the same React development experience they use for the web to build mobile and desktop apps with Ionic React. Given that the standard React DOM npm package (React web support) has nearly 25x the installs that React Native has, we think focusing on this most popular of React environments is a safe bet.
To be clear, React Native is a high-quality mobile experience and has focused on providing a core set of familiar web-dev features but running using stock mobile controls. There are some benefits and tradeoffs to that approach that may fit better for your team (more on that at the end).
More than mobile
Ionic at the core is a UI framework for building apps. While we focused primarily on mobile for the first few years of Ionic’s existence, we’re increasingly adding desktop and mobile web (Progressive Web Apps) as core supported platforms.
That means a typical Ionic app can literally run without modification in the app stores, as a Progressive Web App, as a deployed intranet app available in a browser, as an Electron or UWP app, as an embedded view in a traditional native app, and on some smart devices like TVs and wearables.
React Native, in contrast, is focused on iOS and Android app store apps. There are some projects that bring React Native to desktop and a web project that uses the React Native control names but renders web controls. However, keep in mind that none of those projects are official and the desktop ones have a similar tradeoff compared to mobile as a non-web native abstraction.
For us, supporting more than iOS and Android app store apps is important, because it’s important for you. In our 2018 developer survey, over 50% of developers reported targeting the web with a Progressive Web App using their Ionic code, something that isn’t quite possible to the same extent with React Native.
Similar Plugin Model
While the two projects have more that separates them than they have in common, React Native has a similar plugin model to Cordova and Capacitor. Native code is written in a platform-specific native language, and then exported to JavaScript through an internal plugin API. Capacitor is even more similar here as portions of its plugin system were inspired by React Native.
Capacitor, like React Native, automatically exports Plugin API code to JavaScript in a way that your plugins are immediately available to use as soon as your app code starts executing. This differs from Cordova which loads plugin interfaces in an async fashion and requires you to wait for deviceready before using plugins.
With a similar plugin model, that means React Native and Cordova or Capacitor have similar concerns when considering community plugins. You need to ask if a plugin is maintained, whether or not there is support available if you have issues, and whether the plugin exposes the full functionality you need. Many people complain about plugin support in Cordova but forget that this is a question about open source sustainability first and foremost, not about the project itself, and React Native is no different.
This last point is one place that React Native differs heavily from Ionic. Facebook does not commercialize React Native, so teams building mission-critical apps on the platform are not able to engage with Facebook for commercial support contracts or access to additional software on top. Ionic, in contrast, is commercializing the platform by providing enterprise support and expanded native plugin functionality on top of our open source offerings, such as our Identity Vault solution and suite of supported native plugins. For many teams, that means you have an expert available to help you navigate any app development challenges, and a team of native mobile experts providing ready-made native components in a well-supported fashion.
When to choose Ionic React or React Native?
Ionic is relentlessly focused on the web platform and we are excited about aligning with the core web developer skill set. When thinking about whether to try out Ionic React or use React Native, consider whether your team will want to target Desktop or Web/PWA along with app store apps for iOS and Android, and whether you plan to hire and build a team of primarily web developers. If so, you might want to try Ionic React to get as broad of cross-platform support possible using the standard web developer skill set. Also, if you have existing web libraries and code you want to incorporate, Ionic React is a good bet.
When would you pick React Native over Ionic React? While we think Ionic React can handle many React Native use cases, we think there are a few cases where React Native would be a better choice for your team. First, if your team is largely native developers and you want to experiment with adding some JavaScript powered bits to your app, React Native might be a better fit. If you want to use stock native controls in your app for every bit of your UI, React Native would be a better fit (though Ionic supports rendering native UI controls in many scenarios, so this choice is not quite cut and dry). If there’s a plugin out there you really like for React Native, Ionic won’t work with it (yet…) so you’ll want to use React Native in that case.
And, obviously, there’s a matter of taste and preference here. If you like React Native and prefer that project’s view of the world, then stick with it! We’re not out here to tell anyone to change platforms. We think Ionic React offers something compelling for the React community and so far it seems many of you agree based on the passionate reception we’ve gotten since we announced the project. We’re thrilled to be able to bring Ionic to the React community, especially considering how many React fans we have at Ionic (myself included!).
Get Started with Ionic React
At the end of the day, Ionic React is focused on being 100% aligned with where the web platform is going, and this mission drives us to build better and better ways to build apps on top.
Ionic React is in beta at the time of this writing, but you can get started using it today.
Check out our announcement blog that walks through getting started, and our fully-featured demo app that features most of the Ionic React UI components and explores more complicated navigation flows.
And, stay tuned for a lot more on the React front as we work to make Ionic React one of the primary way Ionic apps are built!
