What app development framework should you choose in 2021?
The topic React Native vs. Flutter has been increasingly debated in the developer community in the past two years. The competition between them is very tight, making the decision a difficult one.
Many developers that are interested in learning to build mobile apps are looking at cross-platform technologies. React Native and Flutter are the top two most popular such technologies available at the moment. Both frameworks have gained a lot of popularity in recent years, and in 2020 they left older technologies like Cordova, Ionic and Xamarin far behind, according to Statista.
The chart above is a screenshot from the Statista 2020 report showing how much each platform is used. Their advantage is they both compile into a native app offering higher performance and a native look and feel.
What is React Native?
- React Native is an open-source mobile application framework, introduced by Facebook in 2015.
- The original framework later became very popular and community-driven.
- It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React’s framework along with native platform capabilities.
What is Flutter?
- Flutter is an open-source software development kit released by Google in December 2018
- It can be used to develop applications for Android & iOS, for web (available as a technical preview only at the moment) and for desktop (in development) Linux, Mac, Windows and Google Fuchsia from a single codebase.
- It used Dart and compiles the app into a native application
We have extensive experience using React Native, for 5 years now, using it to build several projects, from a simple pro-bono festival app to complex financial, data visualisation and banking apps.
Flutter is a more recent endeavour for us, we recently built and published our Tea Cup application with it.
In the following article we are presenting a comparison between the two frameworks, with the contribution of our team-mates Marco, Halil and Arthur. The aim is presenting the pros and cons of these technologies for a set or relevant criteria, based on our own conclusions and research. We are trying to ignore our bias towards React Native due to our far greater experience with it.
React Native also offers TypeScript support, so this is a good choice for developers coming from more structured languages.
React Native also uses states, whose management is one of the more problematic aspects of React Native and React in general, Redux is used to ensure a directed data flow in the app thus allowing proper state management. The framework also allows for users to write platform specific code that is then bridged to the React Native application. Given that fact, a native Android or iOS developer can just form their own customised components and just make a bridge for them in React Native, giving the developer a very large degree of freedom. Anything can be done natively in Swift / Kotlin and bridged into the app, removing any limitations the platform might have.
Flutter by comparison doesn’t require a bridge to connect the framework to the platforms native modules. The toolkit uses UI frameworks like Cupertino and Material Design together with the Skia C++ engine along with all the needed protocols and channels. This has the advantage that the developer doesn’t have to use multiple technologies for app development. For app development, the most popular architecture used by the Flutter community is BLoC (Business Logic Component), which was first unveiled at Google’s I/O Conference in 2019. BLoC architecture takes the business logic outside of the presentation layer of the application and instead splits it into components designed to handle it. Redux/Flux can also be used with Flutter, with the necessary packages installed.
Documentation and Community
In comparison to React Native, Flutter has an incredibly thorough and rich documentation, especially for such a young framework. It contains very detailed guides and video tutorials, making it easier for people with a moderate or low experience in programming to pick up speed quickly. Flutter also offers several useful tools to assist in app development, including debugger and Flutter inspector.
Configuration & IDEs
React Native’s configuration process is simple. All one needs to done is to install the React Native CLI (or Expo CLI) globally trough the command line, but also remember that you also need NodeJS and Yarn as a package manager. Read about setting up React Native. There are multiple IDE’s that can be used with it, like Atom, Visual Studio Code, Vim Editor, Sublime Text and more.
For Flutter, you have to download the binary for a specific mobile platform first, then you need to add it to your PATH variable. Because of this, Flutter loses points to React Native since its installation process isn’t as straight forward. Read here about getting started with Flutter. IDEs that officially support Flutter are Visual Studio Code, Android Studio and IntelliJ Idea.
Applications made with React Native inherit the native styling and appearance, providing the user with a seamless experience in accordance with the OS. In case of operating system updates, the app elements will be updated respectively, thus maintain a feel of nativeness and similarity to other native applications.
This also means the application will look slightly different on Android and iOS devices, as well as on different firmware versions. This can be seen as a pro or a con depending on wether the app needs to have that native OS flavour to its design or it needs 100% the same look and feel across platforms. React Native allows for fully customisable native components to be made on the native side of the application and merely bridged to the React Native project, but extra effort is needed to achieve a fully custom UI.
In comparison, Flutter has UI widgets packaged within itself, meaning that creating native-like application can be done easily without the need for large third-party libraries and frameworks, having a large library of framework widgets is enough. Given its mostly consistent behaviour on both platforms, Flutter has an advantage when it comes to creating a fully custom UI.
With all that said and done, the decision React Native vs. Flutter can be made literally from the app requirements. If the app needs a fully custom UI, then Flutter is the easier choice. If the app must have a more native feel to the UI, then React Native is the choice.
Regarding performance, React Native has a big edge in comparison to older frameworks like Ionic or Cordova, but Flutter holds the upper hand here.
Flutter has a different approach by compiling its apps using ARM C and C++ libraries which gives it an improved native performance. When using Flutter to build apps, the whole application that compiled not just the UI. Individual project needs must be considered to assess the impact of performance.
React Native has a vast community of devs that have created a myriad of libraries that can be used as building blocks to speed up development. It also has a high code reusability, given its idea that everything is a component. On top of that, React Native also has a hot reload feature that allows for modifications to be viewed in the app without the need of recompiling, which saves a lot of time.
Flutter also has a hot reload feature making it so one can go trough multiple iterations quickly and receive feedback immediately. As a plus Flutter also has a fast app compilation feature, which is really impressive.
Releasing mobile apps can be a painful process and when it comes to cross-platform apps, it surely is a complex undertaking to get every detail right. There are signing certificates, provisioning profiles, key stores and may other tools, files and factors to take into consideration.
Flutter enables the use of command line tools for deployment and has already documented the process with fastlane here.
Continuous Integration / Continuous Delivery
Both CI and CD are essential for keeping an app up-to-date with ease, and also for allowing short feedback cycles and improving quality.
There are no official docs at this time on how to set up CI/CD for React Native yet there are services like App Center (Microsoft) or Nevercode which do the job for a small monthly fee (or even free of charge, depending on your need).
Flutter’s powerful CLI allows for an easy setup of CI/CD. Nevercode launched Codemagic, its CI/CD tool built exclusively for Flutter in 2018, and since then, it added support for React Native, too. Read more about how to get started with it in Codemagic’s blogpost.
Even though Flutter has an impressively rich CLI, for continuous integration and delivery in 2021 there are quite a few options to use for either one of the two.
Trends & Roadmaps
Both frameworks are in the top 4 most wanted frameworks for software developers to master according to a Stackoverflow survey of 65.000 developers.
There is no specific roadmap for React Native for 2021. They share the vision and focus areas for contributing to the platform here: React Native roadmap.
For 2021 Flutter promises to work on new features and improve performance for iOS and Android platforms and fix at least 17000 issues, as they did in 2020. Also a big step forward is their plan to deliver production-quality support for Web, macOS, Windows and Linux in 2021. Read the Flutter roadmap here.
In conclusion both frameworks are incredibly useful and can help you build cross-platform applications faster and easier than the native approach.
React Native is a good choice given its large component library that helps speed up development. Because it renders native components for each platform React Native has an advantage when using these ready-made building blocks, when the app needs a bit of OS-specific look and feel.
For fully custom UIs, React Native offers the developer the ability to create customised components on the native side and merely bridging them, allowing freedom and power. The main tradeoff for this is performance and effort.
If you have experience with other programming languages and have a concrete project to start, take into account the specific app requirements, analyse the complexity and style of the design, app performance needs and actual components to be built.