Cross-platform Mobile Development Overview, Flutter Vs React Native Development Comparison and Performance Checks
August 20, 2019
In the left corner is React Native from Facebook, on the right is Google’s Flutter. What stands behind these two popular frameworks? Why are they popular? Which one is more effective? How can Flutter be better than one of the already well-established technologies such as React Native?
Let’s check a short frameworks overview:
Dashdevs team keep up on technology trends and constantly improve our expertise. We’ve noticed the gaining popularity of Flutter, moreover, we got caught by its promising potential. For that reason, we assigned a riveting task for ourselves — to find out how to make the right decisions in favor of one of the technologies and looked at this topic from the product owner’s point of view.
But first things first, what is React Native?
1.What is React Native created for?
For building natively rendering mobile applications for iOS and Android.
2. What React Native has under the hood?
3. What are the cool apps made with React Native?
4. How long does it take to start coding with React Native?
To switch to React Native, it may take for developers from 4–5 days depending on learning capabilities, background and the complicity of the project.
Three cores of React Native:
Platforms — React Native supports iOS and Android platforms.
Things we need to know about React Native:
- Comes with many built-in components: the equivalent to a component is called a widget in Flutter, and there are many more widgets in Flutter than components in React Native. Anything a bit more advanced in React Native will likely have to be built by you, or you can always use npm library, as there are plenty of them.
Strengths of React Native:
- Open source and free (when a developer faces some issues, there is a high probability of getting help from other developers and the community).
- Easy to build part of your app in React Native, and another part using the native code directly.
- Live updates: no need to go through the whole app store update cycle. Send the updates to the user’s mobile phones.
- React Native wraps the fundamental native components, giving you the native app performance using the APIs of React. Therefore, there’s no time wasting for recompiling.
- It combines with components written in Swift, Java, or Objective-C. It is quite simple to drop down to native code if you need to optimize a few aspects of your application.
- Numerous of React Native UI components promise excellent user experience, even better than its growing opponent — Flutter.
- The flexibility of creating custom components. If there is a need in creating an entirely new element — a developer can write platform-specific code.
- Hot Reload feature saves the developers time significantly.
- React works separately from the main UI thread, which allows the application to maintain high performance without sacrificing capability.
- Regular updates (New useful components are added, but you need to update your app regularly).
- Significantly big community and the team behind it: it is quite easy to find answers to almost any question or concern; a plethora of courses.
- It is easier to switch to the RN if a developer is familiar with web development. Previous experience in native development will work for the developer as it gives the understanding of all the basics. Especially for Android developers, since usually there are fewer problems with iOS.
Weaknesses of React Native:
- Allows the code reuse but is restricted to a few basic components. It takes quite a lot of time to style the developed app.
- Many developers find the documentation of React Native as somewhat disorganized and clumsy due to its open-source nature.
- The app developed with RN has a relatively large size, even considering its simplicity. (Although there made some improvements regarding this issue in recent updates).
- If not follow the process specification of bridging implementation — the app will lag. Still, there is almost always a solution for this type of limitations not to impede the development.
- The bridge to the native elements requires separate optimization for every platform. That may cause more extended and tiresome development process.
- We can write native applications to use many familiar web APIs and idioms, but the app won’t be “really native,” and there can sometimes be a noticeable contrast in performance. The benefit is that teams or developers without expertise in mobile development can transfer their web-related skills and be able to create a mobile app.
- If you plan to deal with complex interactions or something that needs to be highly performant, it’s probably better to dip down to native.
What is Flutter?
Flutter is a framework for cross-platform development, which was developed and released by Google in 2017.
1. What Flutter has under the hood?
2. What is Flutter created for?
By introducing Flutter, Google tried to resolve the issue of cross-platform app development, which otherwise has always been a hurdle for the app developers and this issue is that it was necessary to code separately for each platform.
3. What are the cool apps made with Flutter?
4. How long does it take to start developing with Flutter?
Due to the fact that the developer will need to learn Dart language first, it may take approximately one-two weeks to start coding your first app on Flutter depending on professional skills and previous background.
Things we need to know about Flutter:
- The UI of the developed app is much more lightweight if stack up against the React Native’s UI.
- In Flutter, everything revolves around the term widget. A widget is a high-level object used to describe any part of an application. (It can be an image, icon or text.)
- The number and variety of widgets are increased due to the lightweight and simplicity of the widgets. Greater widgets may contain smaller ones, with a single responsibility. Simple widgets can be modified into more complicated ones if needed.
- Flutter uses only the canvas of the native platform and draws the UI and all the components from scratch. All the UI elements look the same as native ones. This mainly reduces the burden of time for converting through some language to the native one and speeds up the UI rendering time. As a result, the UI performance is remarkably high.
- The way of designing views is similar to web applications so that one can find many analogies to HTML/CSS.
Strengths of Flutter:
- Open source and free, same as React Native.
- Less code: most of the UI/UX code is shared between the platforms.
- Allows developers to reuse their Java, Kotlin, Swift, or Objective C codes within the same framework.
- Stateful Hot Reload helps to increase the productivity of developers ten-fold as they can make changes in code on the fly. It is even faster than in React Native.
- Powerful UI experience out-of-box: makes it easy to create diversified animation from 60-120 FPS (comparing to average 60 FPS in React Native) which allows saving the overall development time.
- An extensive catalog of open-source packages simplifies many complicated tasks.
- All the UI elements are lightweight, which gives greater scope for customization.
- Both Flutter and Dart offer regimented and efficiently smooth documentation, which indeed simplifies the job of the app developers.
- Because of Dart’s asynchronous nature, the server can handle many requests at a single time.
- It is profitable when it comes to application assembly because there is no need to parse and translate XML into code.
- Uses 2D rendering engine known as Skia to create visuals.
- At any time, you can jump to a lower layer. Communication between Flutter and the native app is simpler and fast by virtue of the native engine.
- Fast UI rendering.
- Dart is used as the main language for Fuchsia (Google’s OS).
Weaknesses of Flutter:
- Games and apps that require a lot of device-specific functions are better off not developed with Flutter.
- As there is no bridge between the Flutter app and the device and all UI components belong to the application directly, Flutter apps end up being quite large.
- Switching to Flutter may seem not as smooth as to React Native. It can take more time to learn all the ropes.
Product owner vision on both technologies:
Both React Native and Flutter allow creating mobile apps for iOS and Android with a native look and feel from a single codebase.
React Native has led the way for uniting both the iOS and Android platform’s native APIs. As well as, its plucky contender Flutter has also been a progressive leap to allow creating Android and iOS highly responsive native apps at the same time.
From a technical point of view, picking a correct framework to build cross-platform native mobile apps may depend on many aspects. Before starting designing and developing your app, it is critical to confine the compelling factors and the resources you possess.
In basic operations, taking into account only the UI of the app, the difference between the two technologies is not visible for a common app user. To differentiate whether your application was written using a native technology or a cross-platform framework is next to impossible. The majority of the code can be shared, though the UI Structure is different.
To sum it up, let’s have a look at the below:
|Documentation||A bit clumsy, due to its open-source nature||A well-structured documentation|
|UI Components||Less components||Rich in components, animation out-of-box|
|Developer productivity||Decreases with the complexity||Encourages developers productivity|
|Community support||Better, due to 2 years of a head start||Not as much big, but grows fast|
Dashdevs are sophisticated rowers in a list of technologies.
We already had a bunch of projects created with React Native (FitGrid, BetterHuman, Jack’s Flight Club, Petrimazepa, and others.)
The attractiveness of Flutter has not bypassed us. One of our recent projects is an application for psychic advisors to network with like-minded individuals and helps customers who use the app transcend the situations they are in and discover the clarity and positive change they are searching for.
When developed an advisory app using Flutter, our technical experts admitted fast and straightforward communication between native applications and Flutter. Taking into account that there is one codebase for both iOS and Android platforms and great customization possibilities, Flutter has significantly saved the overall development time for the specified product in our case.
Is there an all-purpose technology among React Native and Flutter?
Nowadays, almost every company needs a mobile app performing faster and consuming fewer resources to remain competitive in the market. iOS and Apple developers can build apps using Xcode and Swift, while Android developers use Android Studio, Java, and Kotlin. This approach provides engineers with two different sets of technologies. All that inspired a new era of cross-platform technologies to build solutions for both Android and iOS, which can be implemented faster with one codebase.
It is always a tough decision whether your mobile app should be a true native or with the implementation of a cross-platform approach like React Native or Flutter.
Both Flutter and React Native are good. Leaning toward one or another framework may depend on many aspects. These are:
- the business value of your future app
- specific technical requirements of your project
- technology trends
- the importance of flexibility and scalability
- availability of well-structured and detailed documentation
- presence of development tools
- ready-made solutions, among others
Complex apps. It seems that the more complicated app is, the more advantageous is to support it using native technologies. Creating games or app projects which require device-specific functions might be challenging with Flutter. Moreover, it remains uncertain by now how Flutter will cover resource-intensive applications and how will it maintain their performance.
Long-time support. The other reason which leverages the attractiveness of Flutter is Google’s kind of tendency of shutting down its open-source projects (among the recently closed ones is Google+).
Optimization for platforms. Contrarily, since React Native uses the bridge and native components, it often requires separate optimization for each platform — the problem that widget-based Flutter does not have. It may lead to a more prolonged and laborious development process. It is obvious that for relatively small projects (as in our case) Flutter is a perfect fit. The technology is young but already has an excellent road map.
Savvy, yet less popular. The value of Flutter is apparent as it relieves many of the pain points faced by startups trying to release multiple platforms, especially when dealing with limited time and budget to get the software product to market. Though, the existing nuances, such as Dart language, immaturity of the framework with a small community, code structure, may discourage developers from exploring this technology. As a consequence, it could be challenging to hire a team with Flutter expertise.Moreover, you should also keep in mind the expertise of your team and situation on the labor market. You might face some obstacles in a hiring team of Dart developers — something that is proved to be infeasible with its rival.
UI customization. You may consider developing on Flutter with its powerful UI experience out-of-box, if a brand-first design of your app is a priority, or get in the sub of a time-honored and well adopted React Native when starting a complex and long-time project.
You may decide in favor of Flutter when you want cross-platform, highly-attractive UI, excellent native performance and quicker time-to-market.
We must admit that for now there is no one-size-fits-all solution and leaning toward one or another framework entirely depends on the project requirements and budgets.