Though having some restrictions, cross-platform development is a trend. Instead of creating two separate native apps with, say, Swift and Kotlin, you need only one framework and a bit of tweaking.
There are lots of cross-platform frameworks now: Xamarin, Ionic, PhoneGap… You name it. Add other methodologies like PWA, and it becomes clear that choosing a right cross platform technology is a challenge. Many developers choose React Native, as it’s popular and powered with Facebook: a huge company that invests in its technology.
Flutter is an emerging technology that you need to look out for now, as soon it might become the next Android.
Origins of Flutter and React Native
Flutter is two years younger than React Native. It appeared in 2017 and is based on a programming language called Dart. Flutter was unveiled at the Dart Developer Summit and impressed the audience with its stateful hot reload feature. This feature allows developers to make changes in code and reflect them immediately in the running application without having to restart it or change the state.
Many companies are now enjoying the advantages of React Native. Facebook’s mobile app is written entirely in React
Flutter runs on C and C++, which allows developers to use platform-specific SDKs for Android and iOS. Note that Flutter is still in beta.
The best thing about React Native is that it speeds up development, and its architecture allows you to reuse components in different parts of your apps. This saves lots of time and allows you to adapt an application for both iOS and Android much faster than you could create two native apps.
Many companies are now enjoying the advantages of React Native. Facebook’s mobile app is written entirely in React. Other apps like Instagram and LinkedIn also use React as their core language.
React Native and Flutter are both pretty young frameworks that open new possibilities for cross-platform development. They’re very different, and both have their pros and cons. Let’s analyze these two frameworks and find out which is the best choice for developing a mobile project now.
Comparing React Native and Flutter
There are many differences between Flutter and React Native. To make our comparison between Flutter and React Native more structured, we’ll compare them according to several parameters:
- Support and community
- Core elements
- Working with native functionality
- Adoption in the industry
- Life cycle management
- Code structure
- Companies behind the frameworks
Support and community
React Native appeared earlier than Flutter. This, of course, has its consequences.
One of the biggest benefits of React Native is much better support and a larger community. Flutter’s community is currently pretty small.
The community is what makes React Native grow so fast and become a better option for creating an MVP
Better support and community directly influences the number of available libraries, features, and additional tools. React Native is way ahead of Flutter in this respect at the moment.
Both React Native and Flutter are open source, but because there are more developers interested in React Native, there are more suggestions from them, meaning more new features and tools that appear regularly.
To compare the size of the communities around React Native and Flutter, we can look at GitHubs stars: React Native currently has 68, while Flutter has only 37. The number of Flutter subscribers on GitHub is half that of React Native, but I believe it’s only because of the difference in age: soon the numbers will be similar.
The community is what makes React Native grow so fast and become a better option for creating an MVP. As developers submit new code in React, you can use these code elements in your own project and thus develop even faster. This is especially useful when you start a new project and want to test it in real market conditions.
Since Flutter is closer to native development, it uses native components. Native components are parts of the user interface. Just like when working in native languages like Kotlin, when working in Flutter you need to use Material Design guidelines developed by Google.
Native components work great on the platform they were developed for, but they need tweaking for different screens. There are lots of mobile device manufacturers that produce models with different screen sizes, UIs, and layouts. To make native components work for each screen is a real challenge. It usually takes lots of time for both developers and QA engineers to make the same app work on different devices.
React Native is much more convenient in this respect, as it uses widgets. Each user interface component in React Native is a widget you need to create just once. It will adapt for each screen without any additional effort from developers.
This makes React Native convenient and fast to develop on.
Working with native functionality
Both React Native and Flutter are wrappers around the app, and they need to get access to native components.
Flutter, as a native-based language, has direct access to core device functionality, so developers don’t need to worry about connecting with APIs.
React Native, on the other hand, uses third-party libraries to get to core device functionality. Sometimes it can be hard to get access to APIs, let alone integrate your own data exchange protocol into a third-party library. It’s hard to change libraries, and using a library will often mean restrictions for your project.
Dart Analysis and Flutter Inspector help to analyze code written on Flutter and make sure it meets the performance standard of 60 fps
Flutter works through Android Studio, and recently two tabs have appeared in this IDE: Dart Analysis and Flutter Inspector. These tools help to analyze code written on Flutter and make sure it meets the performance standard of 60 fps. Android Studio also offers familiar tools for debugging and optimizing the code.
Adoption in the industry
Because it has wide support and a large community, React Native is also more widely adopted in the mobile development industry. Flutter hasn’t seen massive adoption yet. The reason is that it has too few libraries, additions, and out-of-the-box solutions.
Many things that already exist in React Native need to be written from scratch on Flutter. This of course makes Flutter more time-consuming and pricier. For example, there’s no possibility to add ARCore in Flutter. At least, I didn’t find any solution while researching this framework.
But even though Flutter has a lower adoption rate, there are already some popular apps that are based on Flutter. Google Ads and the Alibaba apps are the biggest examples.
Life cycle management
The life cycle of an application means the cycle of changes in its state. Usually, the life cycle is managed by the operating system.
Currently, there are no lifecycle management tools in Flutter that allow developers to see what happens at each stage of an application’s life cycle.
Native Android, which Flutter was inspired by, has a similar principle, but the styles are usually stored in a different place. In Flutter, you need to create a custom view that has its own styles.
In React Native, you can create a separate file for your styles or add them to the file with your code. In Flutter, however, you can’t separate styles from code: you need to write them in the same class where the element is.
This is a drawback, as it makes it harder to read the code. If a new developer joins your Flutter project, it will take them more time to find out what the code does and how to handle it.
The companies behind the frameworks
The companies that created Flutter and React Native also make a big difference to everything from their future, support, and goals to their code structure and development environment.
Flutter was made by Google, just like Android, which is why developers can enjoy working with Android Studio. Android Studio is one of the biggest benefits of Flutter because it offers all necessary tools for the best development process, from emulators to code analysis tools.
Initializing an app written in Flutter is easy with Android Studio. React Native initializes an app with Pack Manage Expo, which is also great. It took me only 20 minutes to get everything set up and launch both applications written in React Native and Flutter.
Google has long-term plans for Flutter. It will be the main native language for their new operating system, called Fuchsia OS. The goal of this operating system is to create a whole new development system that will make it easier for developers to create apps and adapt them for different screens and different devices.
Google is an expert at promoting new languages: Kotlin is a great example of that, as there are already lots of apps written with Kotlin and currently all examples in Google’s documentation are based on Kotlin. I believe that the same will happen for Flutter.
What about React Native?
React Native is a very popular technology that Facebook promotes and uses for their own apps. Facebook offers great support for React Native, however the documentation for Flutter is better.
Differences between Flutter and React Native
In this table we’ve evaluated each aspect of these two frameworks using a five-point scale where 1 is poor and 5 is excellent.
|Life cycle management||5||3|
Personally, as an Android developer, I find Flutter to be a great framework that’s so easy to understand and build apps with. I believe that with the growth of the community around it, Flutter will become more versatile and universal, offering lots of libraries and additions. This will make development way faster and more efficient.
However, if I needed choose a framework to develop a project right now, I’d choose React Native. It’s more stable and advanced, and it has lots of tools and libraries that are great out-of-the-box solutions for most functionality a project might include.
At least for the next three to five months, I’d prefer React Native. Currently, all the amazing things about Flutter are held back by lack of libraries.
That said, I believe that Flutter will be a great framework for future projects, and if you’re planning to create your own project in 2019, you might as well look at Flutter. If you’re a developer, you should definitely start learning it and maybe even create your own unique solutions that will contribute to the community. The mobile market is ever changing, and tomorrow Flutter may be the next Kotlin or an even more popular phenomenon.
Cross-platform development services
Do you want to create a React Native or Flutter app for your business?