A Hard Look at React Native From an Ionic Guy

Why I’m going to migrate.

I first discovered Ionic 4 or 5 years ago; before React Native was even a twinkle in Facebook’s eye. At the time Ionic was revolutionary and Angular was the best framework around. I’ve spent the last year and a half developing with Ionic. In that time I’ve watched React Native make a stellar rise in popularity. The last holdout against it was their horrible license. Pressure from Wordpress caused them to change it though.

I’ve recently spent a lot of time studying React, React Native, and JSX… And I like it! I like the radically modular approach to design offered by JSX. I like how much simpler components are than directives. I love hot reload vs livereload. Here are my thoughts after a detailed analyses and serious consideration:

Advantages:

Expo is far superior to Ionic View. It has tunneling baked right in, so you can (presumably) test your apps even behind a firewall like at Starbucks. I haven’t tested this yet though. I haven’t looked at Ionic View for a couple months. I always had issues with iOS apps in Ionic View. And the latest version of Ionic View, while introducing many awesome new features, brought the iOS bugs with it. The latest View comes closer to Expo, but still falls short.

React is closer to the metal. Your development experience is much closer to what a purely native developer experiences.

The current Javascript ecosystem often involves enormous wobbling stacks of NPM dependencies. One careless update and the whole stack can collapse. Every Cordova plugin adds more to that stack. I was working on a Tinder clone that used a lot of Native functionality. My NPM stack had over 4,600 dependencies and sub-dependencies that my app relied on.

A fresh new Ionic app has a much more complex layout with many more dependencies out of the box. Some of the dependencies add to the app, but most just make it more complex.

React has hot reload, which is far superior to livereload. Livereload reloads the whole page every time you save a document. That was awesome five years ago. But now, we have hot reload. Hot reload changes only the elements that have changed and it changes them in place. This saves you having to wait for a full reload and then navigate back to the page you were working on over and over. That process is much more time consuming if you already have authentication or other steps in place. Hot reload is a feature of Webpack. And while Ionic uses Webpack, there’s apparently some deep configuration required to make it work properly. React has that configuration. Ionic does not.

In early 2017 I went looking for Ionic gigs on Craigslist and there were at least a half dozen in every major city. Now there are none. There used to be job listings on Ionic’s site, but they’re gone too. Less and less people are looking for Ionic developers. React jobs are still widely available though.

React Native is used by Airbnb, Skype, and Tesla. I don’t think there’s been any major adoption for Ionic in a mainstream commercial application. Ionic has been used by Microsoft in at least one mobile app though. This is most likely due to the fact that Ionic uses Typescript (Microsoft’s baby) out of the box.

With React, your CSS/SASS is made from scratch so you don’t have to battle existing CSS. Granted, the CSS struggle is something you’ll have to deal with with almost any framework. For purists though, this is a very nice thing to have.

According to last year’s stack overflow survey React is the most loved framework and Cordova is the most dreaded.

JSX is really neat! If you’re used to working with HTML though, it requires a major paradigm shift to use. I’ve never heard anybody say they hate it though. Once you’ve wrapped your head around JSX it makes your app much more modular and therefore better organized.

Disadvantages:

What’s the greatest programming language in the world? If you’ve ever worked with anything other than Javascript, you probably didn’t answer “Javascript is the best!” It makes sense to use JS because it’s probably the most well known language. And of course, React Native is built on React, a JS framework. Still, I’d rather be using a better language.

I’d mention their shitty license, but they seem to have fixed that.

Once you eject from Expo because you need some Native functionality that Expo doesn’t provide, you lose Expo’s awesome debugging features. In Ionic, you still have access to livereload when testing your apps at any stage.

If you want to use FCM push notifications instead of the Expo backend, you’ll have to eject the app first and lose that Expo safety blanket and all their sugar 🍭.

React has a steep learning curve for many. You can actually learn the framework in an afternoon. However, if you’ve been using traditional HTML and CSS since Google was only a search engine, it can be really hard to learn to do things with Web Components (JSX).

React doesn’t mesh well with existing JS and CSS frameworks. So you can’t just drop Zurb’s Foundation into a React app, for example. You’d need to select a Framework that’s been written specifically for React Native to get the exceptional Ionic level native look and feel. There are frameworks out there for RN, but they’re young and often just don’t feel finished. Also, the better ones are based on Google’s Material Design standards. So they look great! But they don’t feel like an iOS app.

Then there’s that god awful red error screen. Oh gawd, don’t get me started on that red screen. Like straight up #ff0000. They couldn’t have chosen a nice brick red or maybe a hot pink? No, they had to choose an abrasive, glaring, stress inducing shade of red guaranteed to give you an Ocular Migraine. When you’re debugging code that just don’t work, you don’t want to see a painfully red screen. Granted, this might be an Expo thing, but it’s horrible. Then again, maybe you’ll write better code, just to avoid that screen.

Hey! You got your HTML in my JS! You got your JS in my HTML! Wait you’re both right! Putting everything in HTML, like JS, SQL, and CSS has been tried in the past. PHP did it and has survived because of Wordpress. But that doesn’t make it good. There was also ColdFusion. You know those guys that still love ColdFusion? Exactly. In defense though, JSX enforces much better organization. I’ve heard it said that because of the modularity, this approach is actually an improvement.

Why Ionic is still awesome!

Ionic is and will always be “web first.” That means that Ionic will be continue to be awesome for PWAs if they continue their rise in popularity. And Ionic is still a good solution for many apps that are being ported from existing Angular code. If you’re team is a group of hard core Angular vets, you can get them building a mobile app with very little extra training and no extra hiring.

Ionic gets it man. They recognize the rise of React, as well as the framework churn in the JS world. So they recently released a tool called Stencil that brings the best of JSX and Angular 2+ together. It’s a super-light JS un-framework that makes an existing W3C web standard (Web Components) available to Vanilla JS regardless of your browser. It’s like Babel but for Web Components. And it makes what most frameworks do best, magical HTML components, unnecessary. So you can use it with any existing or as yet unimagined JS framework, including React. The next version of Ionic will be built on Stencil, meaning that in the near future, you can be an Ionic AND React Native developer! Huzzah!

In Summary:

Ionic still has its place and the next version with Stencil could keep it in the game. However, React is just easier to learn and simpler than Angular. And Cordova is clunky. I believe that for most mobile apps, React Native is the way to go going forward. As always though, pick the best tool for the job.