Imagine that your company needs both web and mobile apps. There are many options available and the choice is sometimes hard. There are many factors that needs to be considered, such as:
- Is the web or mobile apps your priority?
- What are the main features of your apps?
- What is your product strategy? Short term such as for an event or long term system?
- Do you have a good existing solution for the web and just need mobile apps?
- Are you building from scratch?
- Do you have an existing development team with experience in a specific technology?
- Are you using contractors to build the solution?
Native vs cross platform fight has been going on for many years. There have been several cross platform solutions: React Native, Xamarin, Cordova, Phonegap, Flutter, etc.
React Native seems to be the king now as both JavaScript (being the most popular programming language nowadays) and React are widely used.
Flutter may be the new challenger in cross platform ecosystems.
Native development is still strongly supported, developed and modernised by platform owners: modern languages (Kotlin / Swift), declarative UI patterns with Swift UI and Jetpack Compose are introduced.
The web is such a huge topic that it deserves several articles on its own. Hence here we are just briefly focusing on it. In most projects there is an existing backend available with APIs toward web frontend and apps. The major web technologies are based on Javascript: React, Angular, Vue. From these, React (DOM) is the most interesting since it is very similar to React Native. PWA’s are also not considered here. We are not focusing on the hybrid approach either where native and cross platform code is used together in the same app. These may be discussed in the future articles.
Native app development
iOS
Programming languages are Objective-C (legacy) and Swift. You can mix them in legacy projects. Swift was created by Apple in 2014 and open sourced since. Swift is a modern, stable language. Developer tool, XCode, is provided by Apple. Recently added Swift UI and declarative, modern UI framework. All device functionalities that Apple made available to 3rd parties are accessible. Provides the real platform native look and fastest performance. Developing for iOS requires Apple HW so due to its price tag and resistance from some developers against Apple it is the most difficult to find good iOS developers.
Learning the language and iOS programming paradigms are also a bit time consuming. Official documentation guidelines are very obsolete and many occasions cited as ‘don’t do this’ (the famous MVC pattern). There are however, still a big community providing 3rd party libraries, tools and help. iOS new version adaptation is the highest, new OS versions usually supported by at least 5+ year old devices.
Android
It supports both Java and Kotlin as native languages. Kotlin is considered the primary choice when making a new app and is also recommended by Google.
Kotlin is fully compatible with Java (runs on JVM), and the two can be used together in the same projects. Kotlin is developed by JetBrains and open sourced. The main developer tool is Android Studio (open source) built on top of JetBrains’ IntelliJ tools. Google introduced a new declarative UI toolkit called Jetpack Compose. Building Android apps in Java or Kotlin will give native look and best performance. It is considered cheaper and easier to start than iOS, more appealing to people as a lot of developers are already familiar with Java and the tools. Official documentations are kept up to date and Google provides good and modern patterns to build up apps. Lots of 3rd party libraries, tools are available. Device fragmentation is an issue, many vendors, version device combination, dead ends (like Huawei). Google will replace Android with a new OS called Fuchsia. Kotlin is also a cross platform language in itself it can be compiled to run natively iOS, macOS, Linux, Windows, etc… and can be used on any platform that runs JVM such as for backend development. This cross platform aspect of Kotlin is not discussed here.
React native
React native is developed by Facebook and open sourced. It is a cross platform framework that supports Android, iOS, desktop OS and many others. Programming language is Javascript or Typescript (extension of Javascript offering some form of type safety). React native apps on the device run on top of a Javascript engine that bridges the Javascript operation and platform events back and forth between the underlying native code. This adds an extra layer and run time complexity that in some cases can impact performance. The UI can look the same as a native one since it is using native elements to render. In the case of React Native it is mostly not the goal. Remember some of the earlier cross platform iOS apps that wanted to look like native, but Apple revamped the UI and these apps look odd as they were running on an older version of iOS. Native code can be used from a React Native app. There are many large scale apps that are written partially or entirely in React Native, including Facebook. JavaScript is one of the most popular programming languages as of today, with a vast number of developers with a lot of tools, open source libraries and huge community support, etc. It is quite straightforward for front end developers familiar with React DOM (web) to start building React Native apps. That’s the biggest driver for it.
However, UI code sharing (using the same React component on React web and React Native) is not possible, React web renders HTML elements, while React Native defines its own elements. So if someone already has a web app, then the React UI components must be forked (copied) and refactored and two UI code bases should be maintained. Non UI, business logic code however can be shared (much better if these code are on the backend though). It supports hot reload that can save development time.
React Native does not expose all native features that then platforms are capable of, native bridging is possible though. They also suffer from device fragmentation and weird bugs on certain device and OS combinations.
Flutter
Flutter is a UI framework developed by Google and is open sourced. Flutter is for cross platform development that supports mobile, desktop and web. It is using the Dart language. Dart is also developed by Google and open sourced. Dart is a modern type-safe language syntactically similar to JavaScript, Kotlin and Swift. Flutter apps are compiled to native code on mobile platforms, Google reimplemented the UI components natively for both iOS and Android. Hence the performance and the look can be the same as for native apps. It is also possible to use native UI components directly in a Flutter app. Flutter can also be built for the web, however, the output is not the common JavaScript + HTML + CSS but some blackbox JavaScript code that directly draws pixels to the HTML canvas similar to games running in browsers. This has a big drawback, since there is no meaningful HTML, the web apps cannot support SEO at the moment. This may change though, since it’s owned by Google, the biggest web search company, so they may come up with some solution. For development Android Studio or Visual Studio Code can be used. Flutter supports hot reload which is a great help during development, and can save a lot of time for the developers compared to native development. Flutter is probably the first cross platform framework that delivers the promise of being truly cross platform by running the same code base on web, and native apps. There are not many developers with hands-on Flutter experience now. However, since the language is similar to many popular ones. It’s easy to learn and the declarative UI concept is similar to SwiftUI, Android JetpackCompose, React. Flutter has probably one the best developer guides and tutorials to help learning, there is already a lot of 3rd party libraries and community behind it. Many Google’s own services are implemented in Flutter or Dart, so the support will be there especially, the Flutter will be the UI framework for Google’s new mobile OS (Fuchsia) that will follow Android.
Comparison
After some summary of each technology, let’s try to sum up in the table below our recommendations.
Conclusion
Native apps
Native apps offer the best performance and most features, however they are more expensive to develop. In some cases they should be the first choice especially if your app needs functions like advanced camera, AR, heavy app CPU usage, gaming, navigation, background data processing, location tracking, etc. and you have a long term goal with your apps. It’s more challenging to build a decent native app development team.
To summarise, going for native apps means you will have three different apps: web (in any technology), Android and iOS. You can achieve the best result on all platforms; your app on each platform can adapt to the platform but the development and maintenance costs are higher. Native apps also should be adjusted annually when Apple and Google make changes to the platforms.
React Native
Choosing React Native as your app development platform is an attractive option for many, especially if you have a development team with JavaScript and React experience. React Native is for most web developers the first step into the mobile app development domain. This means you will need a single team to build web and mobile apps as well. It is usually easier to find a team of React engineers than having Android, iOS and web competence. App development can be rapid. If you already have a React web, probably a lot of components can be used as base for your native app. However, full UI code sharing between React DOM(web) and React Native is not possible. So you will still end up having two code bases, one for the web and one for the apps. React Native can be a good choice if you have an available React team, the mobile app features are not too complex as there might be performance issues and you are mainly thinking in short or mid term.
Flutter
Flutter can really deliver on the cross platform promis, meaning implement once and run everywhere. Flutter mobile apps are executed as native code, performance and look and feel is comparable to that of native apps. Except for the few niche features where native code is necessary it can be a really good choice for apps. On the web the lack of SEO support is probably a no go for some cases, however, for web apps that logs in users it is not required. For MVPs or quick to market full scale (web and app) solutions it can be a perfect choice. If you keep the web and app UI design same or close you will have one code base. Separate web and Flutter apps may be a better option in the longer term however. If the initial reception is promising the web may be replaced later with a separate web solution (React, Angular, Vue, etc..). There are not many hands-on Flutter developers out there yet, but the learning curve is steep with good tutorials and documentation.
In most cases mobile apps written in Flutter and web developed in any web technology will give the best results.
Rule of thumb
- Choose native app if you need performance and device features
- Choose React Native if you have React front-end developers
- Choose Flutter for most mobile app where native is not required