Kontakt

Progressive Web Apps (PWAs) vs React Native for Mobile Apps

For building mobile applications today, there exist a few options beside programming a native app once for every platform. We think the two most promising ones are Progressive Web Apps (PWAs) and React Native.

PWAs are built on top of a few modern web standard APIs, most importantly Service Workers, which allow to intercept the loading of resources and do work even while the webpage is not loaded. I'm rating PWAs as ASSESS for now, as they are incredibly promising as soon as Apple/iOS properly supports them.

React Native uses the React library and has components which map to platform-native components – leading to native-looking UIs. For now, we'd recommend to use React Native (rated TRY); and for quick prototypes, check out expo.io (built on top of React Native). However, even though you are developing with JavaScript in React Native, you cannot use the HTML and CSS skills you already have, as the primitive types are different (and in some regard more low-level). Thus, we think it often takes longer to do a project in React Native than when doing it in HTML/CSS, but on the other hand it has native look&feel.

Benefits of PWAs

  • quite easily possible to make a single-page web application offline-ready; just by implementing a Service Worker.
  • all modern web technologies and JS frameworks/libraries, like ES6, SASS, CSS Modules, can be used.
  • there exist web APIs for native APIs like location, camera, motion, and lots more.
  • very easy to deploy, just by hosting on an HTTPS web server. Auto-Updates are also very easy.

Drawbacks of PWAs

  • PWAs will be implemented in iOS 11.3; though this is currently in beta and there it still has some severe bugs.
  • applications won't have native look and feel
  • some native features will likely never be possible (e.g. iOS Touch ID)

Benefits of React Native

  • native look and feel on iOS and android – to the end-user, it is not distinguishable whether it is a native or a react native app (because many native controls are used)
  • state management concepts like redux  can be easily used.
  • possible to implement parts in native code, if React Native is not powerful enough (or too slow)
  • implements hot reloading, allowing for a quick development cycle
  • I'd suggest to base quick kickstarts on expo.io, as they implement a more rich JS API, support on-device preview, and have a cloud-based deployment service; so they handle certificates etc completely if needed. And it's open source, too!
  • React Native has a WebView as well; so you can do the app shell in React Native, and some screens web-based. Thus, the most important application parts could be React Native, and the less important ones web based.

Drawbacks of React Native

  • apps still must be distributed through app stores, meaning you need to deal with certificate, device enrollment, and all these nice things. (though expo.io might help there)
  • a subset of CSS is embedded in JS in some special/non-standard way
  • many features web devs take for granted must be manually built (e.g. Link styling; bullet lists)
  • a mobile web view of the app is not possible by default, though there exists an escape hatch through react-native-web (which, looking at the references, seems to work reasonably well)

Alternatives

  • We do not do classical, native, iOS-only or Android-only apps; as in our opinion, this only makes sense in rare cases when only one of these platforms shall be ever targeted.
  • In the past, we did some work with Apache Cordova, which just packages a Web View as a native app – in our opinion, this shall be handled by the options above today.