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. describes it thus: Facebook 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. 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. Native Abstraction 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. High Quality Mobile App Experience 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 You still end up having to deal with app store distribution/lock-in and Android/iOS differences. Native devices caveats Automating building, testing & deployment is hard, as iOS is very tied to OSX/XCode, e.g. you can’t easily leverage container architecture. Automation is hard TL:DR . You have to instead use the accessibility tag, which is hacky and bad. End to End testing isn’t abstracted between Android & iOS Adding support for android:id breaks Facebooks internal testing so it is rejected React Native is still not version 1.0.0. As a result there are a lot of breaking changes still going on. Not functionally complete There 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. Library infancy With 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 ). As such, we’re stuck on React Native v0.42.3. Dependency Juggling ⛵Thousand Ways to Navigate in React Native 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, already exists and has a large community and support around it. React Progressive Web App Problems This is one of the most prominent browsers, and it is missing many important features needed to make a PWA (see on a iDevice). Service Workers is one of the features that is missing, though . Safari https://whatwebcando.today/ it is in development A lot of hardware support is missing from Safari as well; see on an iDevice & 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. Hardware Support https://whatwebcando.today/ https://caniuse.com/ Since these features will only be in future browser releases, supporting old browsers to the same level as a native app is not possible. Backwards Compatibility Support Progressive Web App Examples 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 . My favorite is . https://pwa.rocks/ PWA showcase page 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 . Google provides plenty of resources to help you build your new web app to be a PWA, such as the and this . Material-UI one Lighthouse tool 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: How do you make a high quality and consistent mobile experience cross platform? If you want to answer this question, with the best user/developer experience and the smallest cost, then my money is on Progressive Web Apps. Further reading & Resources _Updated April 2017_medium.com Why “Progressive Web Apps vs. native” is the wrong question to ask _Nate Black interviews Jonathan Stark on Mobile App development. Topics include: platforms for mobile development…_www.se-radio.net SE-Radio Episode 300: Jonathan Stark on Mobile App Development _Learn how to set up Lighthouse to audit your web apps._developers.google.com Lighthouse | Web | Google Developers _From now on, I won’t be building any more native apps. All my apps going forward will be progressive web apps…_medium.com Native Apps are Doomed _The choice to build a native app over a website is often made because apps “feel” so much nicer than web sites and that…_medium.com The surprising tradeoff at the center of the question whether to build a Native or Web App
