Do you want to develop apps? But you are unsure about which technology to use? Well you have landed on the correct page. In this article, we will compare the leading market players- flutter and react native and help you identify which framework best fits your app idea.
As many of you may know, React Native and Flutter both are the most popular cross-platform mobile development frameworks that are used to build thousands of mobile apps today. If you have to choose between the two, which one would you pick? Well technically, There is no right answer to that question, it depends on your business needs and use. Both React Native and Flutter are powerful contenders with their own set of pros and cons
They both have similarities like, building cross platform apps using codebase, hot reloding, excellent UI, awesome tooling and native features. But they also have their differences.
Lets discuss some pros and cons of FLUTTER:
Pros:
Looking from a developers point of view, flutter offers more dynamic and faster app development. It is one of the most important thing about flutter and it’s appreciated by every mobile app development company.
Developers can make changes in the codebase and see them immediately reflected in the application. This is known as the Hot Reload feature
This feature helps teams add features, bug fixing, experiment with new ideas etc and it is also very handy as it comes with a developer- designer collaboration.
2. One Codebase, 2 Mobile Platforms
With Flutter, developers can write just one codebase for two applications- for both ios and android platforms. Google is currently working on flutter for web , which you can see on preview version once it goes live, a single codebase will cover android, iOS and web platforms.
3. Up to 50% less testing
Given you have the same applications on both platforms, your quality assurance process will be much faster as you can test less
We mention roughly 50% fewer automated tests because we can create the same tests to run on both platforms.
4. Faster Apps
Flutter apps runs smoothly and fast without hanging or cutting while scrolling. Why?
Flutter uses skia graphics library. Thankful to this, the UI is redrawn each time when view changes. Most of the work is done with the GPU, that’s why flutter UI is smooth and deliver 60pfs
However you must be very careful during development so as to not cause redrawing those elements of the view whose data has not changes
5. Same UI, even on older devices
Even new apps look the same on older IOS and android system, so you never have to worry about supporting on older devices
Cons:
1. Size of developer community
Most people will tell you: a key advantage for React Native over Flutter is its more established, more experienced developer community. Further, in terms of programming languages, Dart isn’t as widely used as JavaScript, at least for now. Which is true. Flutter has a lot more catching up to do
2. Libraries & Support
It is impressive but still not as rich as native development. Google’s support for flutter is impressive, but is still quite new. This means it cant always find the functionality you need in existing libraries, so your developer need to build custom functionality itself, which takes time
3. Continuous Integration Support
At time of writing, flutter lacks support for CI platforms. So, to achieve automatic building testing and deployment, your developers need to use and maintain a script
4. Platform Risk
Even though Flutter is open source, if Google decided to pull support for the project, it would spell disaster. That said since the Google team released the Beta version of Flutter, it has only ramped up its efforts, as illustrated by Flutter’s prominent role during Google IO ’19, alongside the recent Flutter Live event. At the current point in time, we cannot imagine a world where Google walks away from Flutter.
5. App’s Size
Application written in Flutter are bigger than native once. However flutter team is working on reducing size of the apps made with flutter
React Native – Pros and Cons<
Pros:
1. Fast Refresh = Fast Coding
Technically the same feature as flutter
Hot reload speeds up the development process by allowing a developer to inject new code directly into the running app. So, a developer can see changes instantly, without rebuilding the app. To improve the developer experience with hot reloading, the React Native team includes in 0.61 version a new feature called fast refresh that unifies live and hot reloading. It’s more resilient to typos and mistakes compared to the previous version. You can read more about fast refresh.
2. One codebase, 2 mobile platforms
Similar to flutter: write a single codebase to power 2 apps – covering both Android and iOS platforms.
Better still, JavaScript gives you a leg up when writing cross-platform applications by sharing code with web apps. This is accomplished by creating abstraction components that you can compile to target platforms.
3. An Active and Vast Community
React native has a mass developer community. Not just that , but there are countless tutorials, libraries and UI frameworks that make it easy to learn the technology and quick and easy to develop with it. If you compare repositories focused on tools and articles, React Native is much better than flutter or ionic
4. Easy to learn for react developers
This advantage in our list is highly targeted at React developers. If you have a background in web development and already use popular React solutions, you can easily get to work with React Native, without having to learn new libraries. You can use the same libraries, tools, and patterns.
Cons:
1. It isn’t really native
Like any cross-platform solution, neither the UI experience nor performance will be the same as in native apps – just close to them.
2. Fewer components out of the box
React native supports only basic components out of the box. As mentioned, there are outside repos with many additional components for react native
On the other hand flutter is designs to support material design out of the box so the framework supports much more widgets
3. Developer freedom of choice
It can be looked as curse as well as blessing
Once a developer has created a new project, they need to decide which navigation package as well as global management – to use
4. Lots of abandoned packages
React Native boasts an enormous number of libraries. Unfortunately, too many of them are either low quality; or have been abandoned altogether. Dan Abramov advises checking the number of issues and frequency of commits in a repository to prevent using abandoned packages.
5. Fragile UI
The fact that react native uses native components under the hood should give you confidence that, every OS UI update, your app components will be instantly upgraded as well.
What’s worse is that updates can become more dangerous if they cause certain changes in the native components API
Whereas when it comes to flutter, the app UI is more stable.
Remember that each application is different, so you must consider each one on its own merits. It’s always worth discussing your project with an experienced team of developers: people capable of considering the different approaches, with a varied enough skillset when it comes to cross-platform development.
