The tech world is constantly evolving. As engineers, we have many options for solving complex problems, but these options can also contribute to uncertainty when choosing the right tool for the job. Deciding the right course of action can be complex—especially when it comes to mobile. My goal is to shed some light on selecting a mobile tech stack based on my personal experience, research, and prototyping. This article features a high-level comparison and doesn’t dive in too deep into technical details.
Disclaimer: The findings in noted this article are valid at the time of publishing (April 2019). With improvements and new products being introduced, information may shift.
My key takeaways of 4 popular mobile options
There are numerous architecture choices for building mobile applications. Four of the most frequently used options are Progressive Web Applications (PWAs), Native, React Native, and Flutter. Below is an overview of each option and my thoughts on what makes them stand out.
Progressive web apps (PWAs)
These types of applications are regular web applications tailored to be friendlier for mobile devices. They are responsive, connectivity independent, and app-like. PWAs show up without a browser frame and have the ability to be installed on the home screen of your mobile or desktop device. While being run by a browser under the hood, PWAs are limited to the browser vendor implementing API's to access hardware features.
PWAs shine in categories related to ease of development and discoverability. Other platforms are not as good or flexible in these areas.
Native
Chances are Native is familiar and needs no introduction. This is where everything started for mobile development. For Native, there are two independent platforms with their respective programming languages JAVA/Kotlin for Android and Objective-C/SWIFT for iOS. While each native library provides unrivaled functionality and performance, they are two separate platforms and ecosystems.
Native is still unmatched if your application needs lightning-fast performance and/or cutting-edge mobile device capabilities. However, operational and update-related costs are way higher than of any other mentioned platforms.
React Native
Based on React, this popular frontend library for the web was developed by Facebook. React Native enables app developers accustomed to the React framework to build truly native apps using Javascript and React. As node.js bridging the development gap between front-end and back-end, React Native aims to do the same to web and mobile development.
React Native is a sweet spot between Native-like features, hardware access, and operational cost. We see this as a pretty balanced mobile stack.
Flutter
Developed by Google, based on Dart programming language (also developed by Google), Flutter is a powerful mobile framework that enables developers to build cross-platform apps for either iOS or Android. This is a relatively new technology. Google heavily invests in Flutter as their go-to framework. It’s also the conduit for the rumored Google operating system Fuchsia. Any aspects of Flutter detailed below take into account that it's a relatively new platform. These findings may change in the very near future as this product matures.
Flutter shows promise. At this stage, we believe making a large investment in Flutter could leave you with an un-supported mobile framework if it's ultimately abandoned by Google. A recent example of this type of a move is the retiring of Fabric, which forces users to migrate to a new platform to get the same functionality.
An overview of my evaluation
I took a look at each mobile option and considered how they compared in 8 categories:
Features: They greatly impact the speed of development and provide guidelines for choosing the best tech stack for the problem at hand.
Discoverability: This is a crucial component for app development as the ultimate goal is to help users find and use the application.
Updates: It's important to know what's currently available because updating apps can be both time-consuming, costly, and a pain point for dev teams.
Long-term perspective: With companies investing in technology, it's critical to identify options that won't become obsolete in the short term.
Operational cost efficiency: Time (work effort) and money (the cost for operation) are two key factors. In some cases, this is the reason why development initiatives don't start or worse fail due to underestimating cost.
Deployment: Every app has to be provided to users. It's important for developers and the business to know how fast a product can ship to consumers + how complex or simple the process can be.
Performance: This boils down to the user experience. I evaluate what the performance differences are in order to determine which tool to select (looking at user acceptance).
Ecosystem: This is targeted on development speed and operational costs. Large ecosystems already built tools to make development easier, faster. Small ecosystems push development teams to implement needed functionality themselves--increasing dev costs and time.
The chart below summarizes my findings.
NOTE: 1=the top-ranked > 4=the lowest ranked.
Tier 1 approaches offer full support in this area, while Tier 4 apps are lagging behind their peers. In some instances, platforms offer similar experiences and are rated on the same tier. Ultimately, PWAs had the best score in my assessment.
Read on for more information on how I came to this conclusion.
Prerequisites & disclaimers
My evaluation is based on business need, risks, costs of development and maintainability. Not included in this evaluation is the fun factor. Why? There are many opinions about which is the best or "what do I want to learn next". For the purposes of this assessment, I'm trying to be objective and not be opinionated.
In order to best compare each option, let's assume that the goal is to build a web application and a mobile app. I chose this example, as it's the most common request that we get from our clients. Keep in mind that some of the points mentioned below vary in importance based on the situation/need.
Features
While most of the common business needs are served by features that can be achieved with all of the mentioned technologies, advanced needs can introduce more complex challenges.
Native apps have a full spectrum of access to features for a mobile device as long as the platform in question provides that. React Native and Flutter provide Native APIs wrapped in their own implementation language (either Dart or Javascript), thus depends on the community to implement them. Both are extensive enough to let developers implement their own native code and bridge that to the right wrapper framework. PWAs have matured to offer additional functionality. For example, the web application can work offline, store more data, and access a lot more device platform features including push notifications, the ability to be kept inside of user’s device, use of the camera, and use of real-time communication.
For more information: Take a look at https://whatwebcando.today. Be aware that when visiting this site, the browser you are using will influence which features show as available because this is presented based on the user's browser.
Discoverability
This one is pretty easy—PWAs offer the best option here over Native, React Native, and Flutter. Why? PWAs are web pages designed to work like apps – but they don't need to be downloaded via the iOS app store or Google Play. A simple Google search and proper ads/SEO support can get you running in no time. On the other hand, dedicated apps (either Native or Hybrid) have to be submitted to their respective app stores. In addition, different marketing campaigns have to be set up in order for users to be able to find and install them.
Updates
Similar to discoverability, PWAs perform the strongest. They require no updates. After opening the app, the latest code is applied (as long as you are online). There is no need to maintain older API end points to serve users that weren't as eager to get latest and greatest features. By comparison, Microsoft has provided a way to push non-native code to update apps in real time for React Native (CodePush). While Flutter is technologically capable too (at least on Android), it doesn't appear to have this ability. Native apps have no ability to do this as all of the four languages have to be compiled to run.
Long-term perspective
Technologies come and go, thus making a strategic decision on what stack to use more and more difficult. The web has evolved rapidly over the pasts couple of years and continues to grow. However, it seems as though PWAs are here to stay and will continually improve with even more hardware access. Native platforms are second to none when for mobile development. Since there are no real contenders to replace Android or iOS, Native will stay a popular option (as long as those platforms survive). React Native is widely used. This option helps reduce operational costs for companies working on mobile apps. As history suggests though, hybrid frameworks come and go. In the event that some new innovation arises, this might cast a shadow on React Native. While talking about innovation new options, Flutter is a great example. Though relatively young, this newcomer has not proven its true market value yet.
Operational cost efficiency
If you're looking for the most cost-effective approach, PWAs allow development teams to maintain a single codebase that supports mobile/web and even desktop. (Yes. You can install a web page as a desktop app.) If your application does not require native API access, access to contacts or calendars, or the ability to use fingerprint or facial recognition, we believe PWA's are a great option for cost-efficient mobile app development.
By comparison, many developers are already familiar with the React library used for React Native as it gained popularity more recently. With a large community, React developers are fairly easy to find. Most developers who have worked in another JS framework will find React Native straightforward to get up to speed. It's worth noting that when using React Native, most of the business logic can be re-used. Most of the supplementing libraries that work for React (web version) work with React Native as well. For example, take a look at state management using React Redux.
With Flutter, although you can develop cross-platform apps on Dart, unless your development team is already leveraging this less common language, they'll be faced with context switching costs as they need to learn the new ecosystem. Every development initiative costs time and money. These two factors greatly correlate to mobile architecture decisions.
Native development consumes by far the most time and money. This approach requires staffing a development team comfortable with working on two different languages/tools. Native also necessitates the need to develop the same features twice (once per platform).
Deployment
PWAs are simple web pages and can be deployed on any given cloud platform or in-house infrastructure with minimal delay and limited maintenance. Native, React Native, and Flutter all have to be built, signed and distributed to their respective app stores. The deployment process adds another maintenance layer and additional difficulty when deploying iOS and Android products at the same time. Keep in mind, Apple reviews can take at least a day or two to be actually available in the app store.
Performance
This is a hard one, but one thing is certain: Native apps will run best as they don't have any kind of wrapping layer/runtime on top of them. Performance of applications on the other platforms is heavily dependent on the content and features of the app. Given that React Native and Flutter run native code generally, we expect to see better performance from these frameworks when compared to PWAs.
Ecosystem
More and more tools are provided to developers via open source initiatives. The same can be said for mobile app frameworks. PWAs (as these are simply web applications) and Android/iOS Native platforms have the largest communities and thousands of helpful articles. For a developer, this means that many common problems he/she might encounter might be solved already with a third-party library or a user guide. Similarly, React Native uses React which has a huge community as it's based on a popular web library and uses Javascript (also very popular). While Flutter is backed by Google and has many base features built into the framework, both Flutter and Dart are very new. The ecosystem is still taking shape in the 'developer' world.
My results…
We're seeing most B2B apps and many B2C apps continue to be developed in React Native, while others are taking the leap to PWAs.
Native apps are the “king” in mobile performance and design—although they take up considerable resources to be actively worked on. As a result, most smaller companies switch to “hybrid” solutions such as React Native or Flutter. PWAs promise to be as native-like as possible but are a bit behind because of missing browser features on different platforms.
Let’s keep current on mobile tech stack options. Leave us a note or contact us for more information on building mobile apps.
Some bonus information
NativeScript - While not being covered in this topic, I'd also like to take a moment to give a shout out to NativeScript. It has a strong community and developers can build apps with VueJS and Angular. This might contribute to code re-use if web versions of the app are running Vue or Angular respectively. To avoid confusion, let’s treat NativeScript as a nice alternative to React Native.
Cordova – This option was the starting point for building hybrid applications and deserves some recognition. However, Cordova is not included in the list. Currently, there are no true advantages of using this mobile technology over more modern alternatives described above.
For more information, I encourage you to visit an article written by a colleague of mine comparing React Native and Flutter—as well as the challenges and findings when starting to work with hybrid mobile app where he takes a deeper dive into the fundamentals of each option.
