React Native — A good answer to the wrong question?

React Native is a relatively new and exciting technology. Designed by Facebook, but used outside their ranks, it is gaining traction from both web developers and traditional native app developers for its simplification of native development. Facebook describes it thus:

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components

This is a lofty goal which React Native certainly achieves, but like most things it‘s not as simple as it sounds. As a result it ends up as a good solution to the wrong question.

So what is the right question?

How do you make a high quality and consistent mobile experience cross platform?

With more and more users using mobile devices, this is certainly an important question to ask. Gone are the days of desktop dominance; mobile users are now the primary internet consumer.

How does React Native answer this question?

**React**The code you write is almost the same as normal React, with some differences in styling & testing. As such, moving from React to React Native is pretty easy.
Native Abstraction React Native makes developing apps for Android/iOS phones really straightforward. 80% of the things you make will work for both platforms, out of the box.
High Quality Mobile App Experience Being a native app when you release it enables you to make a really high quality app that can do everything a native app can do.

How does React Native fail to answer this question?

**It’s still a native app at the end of the day**If you need a web-based application (in order to cater for mobile users who won’t/can’t download the app), it will have to be built separately.

React Native answers our question — for the most part. It enables you to create a high quality and consistent mobile experience, but, crucially, it falls down on the cross-platform part

It’s a good answer… to the wrong question. So, what question is it answering?

How do you make a high quality and consistent cross platform native app?

Why is this the wrong question? Because, in my view, building two native apps for different platforms (iOS/Android) is dead.

This is why React Native isn’t a good solution to mobile first development. It doesn’t think big enough!

React Native achieves abstraction of native apps; Progressive Web Apps try to abstract mobile development.

Progressive Web Apps

Progressive Web Apps as described by Google:

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging — Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

Basically PWAs are websites that look and feel like a native app and can even be saved to your phone for offline use.

Mobile Development Evolution

Why Progressive Web Apps will win over React Native

React Native isn’t superseded yet, it can still do a lot of things the web cannot do, but the web is getting better and better.

Both Progressive Web Apps and React Native are still in their infancy, and they both have their problems. However I think PWAs will become dominant, as they initially have fewer problems than React Native.

React Native Problems

Native devices caveatsYou still end up having to deal with app store distribution/lock-in and Android/iOS differences.
Automation is hardAutomating building, testing & deployment is hard, as iOS is very tied to OSX/XCode, e.g. you can’t easily leverage container architecture.
End to End testing isn’t abstracted between Android & iOSTL:DR Adding support for android:id breaks Facebooks internal testing so it is rejected. You have to instead use the accessibility tag, which is hacky and bad.
Not functionally complete React Native is still not version 1.0.0. As a result there are a lot of breaking changes still going on.
Library infancyThere are a lot of components missing - I’m looking at you dialog! This means you spend a lot of time looking to see if anyone in the community has done what you want. The community is neither particularly big nor old, this means you end up with lots of incomplete/abandoned components which you can’t use and will have to make instead. This means you end up with lots of incomplete/abandoned components of varying quality and consistency.
Dependency JugglingWith Web Dev you (mostly) only have to worry about having the correct React/Angular version, and what browser version you’re targeting to get up and running. With React Native you have to worry about React Native, and React (RN currently uses the React 16 beta…), as well as the iOS/Android build dependencies. Trying to keep your app’s dependencies up to date becomes a logistical nightmare. We’re currently using NavigationalExperimental and have been unable to upgrade to the new Navigation library, because it’s a complete navigation rewrite (see ⛵Thousand Ways to Navigate in React Native). As such, we’re stuck on React Native v0.42.3.

React Native suffers from the fact that you still need to build a website. ReactXP and React Native for Web try to solve this problem by adapting your React Native solution for use on the web, but this seems like doubling down on React Native (and all of its problems). Not only will you have to deal with React Native’s issues; you have web problems to fix as well. Why reinvent the wheel, React already exists and has a large community and support around it.

Progressive Web App Problems

SafariThis is one of the most prominent browsers, and it is missing many important features needed to make a PWA (see https://whatwebcando.today/ on a iDevice). Service Workers is one of the features that is missing, though it is in development.
Hardware SupportA lot of hardware support is missing from Safari as well; see https://whatwebcando.today/ on an iDevice & https://caniuse.com/ for specific functionalities. Unlike with React Native, you don’t have the ability to go lower-level and integrate with existing/new Java/Objective C/Swift code if needed.
Backwards Compatibility SupportSince these features will only be in future browser releases, supporting old browsers to the same level as a native app is not possible.

Progressive Web App Examples

https://pwa.rocks/ has a lot of great examples of PWAs, including some large companies that have already adopted PWAs as the way forward. These include AliExpress, Twitter and Forbes. You can read more about each of these companies on the PWA showcase page. My favorite is Pokedex.org.

Gotta Catch ’Em All

The problems that React Native poses are harder than those of Progressive Web Apps. PWAs also have a significant amount of development behind them already as they aren’t a new technology, they are just a really good mobile app written in React or Angular. This means that all the great libraries that already exist can be leveraged to build your app; you won’t have to make a new dialog, just use the Material-UI one. Google provides plenty of resources to help you build your new web app to be a PWA, such as the Lighthouse tool and this checklist.

The Future

Right now, if you can make an iOS and Android app, React Native is a great solution — it halves the amount of work required. However if android/web is your main user base, PWAs are the way to go — and the tools to make them exist right now… Hopefully iOS won’t take too long to add proper support for PWAs, so that you can roll it out to them as well.

So what was that question again? The right one, not the wrong one: