Native applications work smoothly on mobile devices. Their graphic transitions take less time for UI rendering compared to the cross-platforming. The reason is simple: their code can communicate straight to the mobile OS core, enabling UI methods.
In the meantime, the native mobile platforms (OS) are written in different languages. For instance, Android OS is a mix of Java, C and C++. In comparison, the iOS platform is built with Objective C and Swift. So, native mobile development requires the knowledge of a few languages like Swift and Java simultaneously. That's a big deal, as not many companies could afford to hire developers for each platform.
Cross-platforming mobile applications are less competitive in graphic animation, though it is hard to notice at first glance. Moreover, they are cost-efficient and could be a good fit for early-staged companies.
Facebook was the first significant player who announced React Native in 2015. The cross-platforming development became true: you create the code once, but it turns to native designs.
The next big event occurred in 2017. Google introduced Flutter, which is based on Dart programming language.
Table of contents
What is Flutter?
Flutter is a popular cross-platform UI framework developed by Google in 2017. It can be expressed on any mobile device or linked to your existing web applications. To date, Flutter is considered one of the leading open-source frameworks used by giant companies such as Alibaba Group, BMW, Toyota, Google Play, Hamilton, Topline, and eBay. With every major release of the framework, the number of Flutter apps increases. When Flutter 2 was released in March 2021, over 150k Flutter-based apps were on the Play Store alone. With the launch of Flutter 3 in May 2022, there were 500,000 Flutter apps already out there, which is a 455% jump in framework usage over two years.
Cross-platform mobile frameworks used by software developers worldwide in the 2019 - 2021 period
One of the unique features of cross-platforms like Flutter is the ability to create apps using a single codebase. It eliminates the need to develop separate mobile, web, and desktop apps, allowing building apps easily with one tool. Traditionally, a company would need multiple developers and tools to create an app, which would be available on the web, mobile, and desktop. This approach would require a team of developers, like:
- A developer who specializes in web development using React to create a website;
- A mobile developer using Kotlin and Swift to build Android and iOS apps;
- A developer using C# and Java to create the desktop version.
With Flutter, companies can hire a single developer to build apps across platforms with just one codebase to manage, significantly reducing the time and resources required to launch and maintain an app.
Flutter is well-known for its ideally-structured documentation, which has answers to all the questions, allowing developers to find everything they need about this framework. The only downside to the Flutter documentation is that you must visit the website whenever you need to check something.
Pros and Cons of Flutter
Similar to all existing frameworks, Flutter has some advantages and disadvantages, and the decision on which framework to use is always up to the developer. Among the pros of this framework are:
- Faster code writing. Typically, developers need to write code and then wait for it to compile and load to the device before seeing any changes. With one of Flutter’s advantages - hot reload, iOS or Android developers can test changes immediately, allowing them to collaborate more effectively with designers or QA engineers, make changes quickly, and see results without delay. The hot reload feature makes Flutter app development faster compared to other frameworks. In addition, Flutter features ready-to-use widgets that allow developers to create apps of any complexity easily. Flutter’s widgets are fast, extensible, and reliable, so the entire process is simpler and faster no matter the screen size.
- Large community support. The framework is created by Google, and this tech giant consistently supports Flutter developers with frequent updates and quick issue fixes. A vast community of experts and beginners are ready to share their experience and knowledge of this framework. Moreover, there is a significant increase in Flutter’s performance compared to other similar technologies. Since its first release in 2017, the framework has gained 146k stars on Github.
- Similar to native app development. Flutter software rendering uses an internal graphics engine called Skia, which offers fast and streamlined development compared to most other mobile app frameworks. A Flutter app will end up indistinguishable from a native app as the framework doesn’t rely on intermediate code interpretation or representations.
- Simplicity. Flutter provides developers with advanced OS features like sensor data collection, permission handling, GPS coordinates, credentials, Bluetooth, and others in Google-supported ready-to-use plugins.
At the same time, beyond advantages for developers, Flutter is also a good solution from a business perspective. Its benefits for customers and businesses include:
- Beautiful UI;
- Quicker time to market.
The downsides of this framework are:
- The large size of the apps;
- It’s not native;
- Has a more limited set of tools and libraries than native apps.
These disadvantages don’t interfere with app development, although, in some cases, they may be decisive when choosing a cross-platform development framework.
What is React Native?
React Native’s revenue in billion U.S. dollars
Highlighting the Main Features of Flutter
- Hot Reload. With Flutter's hot reload feature, you can see the changes to your code in real-time without restarting the application. It effectively improves the development experience.
- Dart Language. Flutter uses the Dart programming language, which provides high performance and is known for being easy to learn. It makes a good option for building high-quality mobile, web, and desktop applications.
- Widget Library. Flutter provides a customizable widget library that allows developers to create beautiful, intuitive app interfaces. The widget library includes a wide range of pre-built user interface elements, such as buttons, text boxes, and sliders, that can be easily customized to suit your application's design. It enables a seamless user experience.
- Cross-Platform Development. Flutter allows developers to build native apps for multiple platforms using a single codebase, including iOS, Android, and the web.
- Native Performance. Flutter provides native application performance through the use of the Dart Ahead-of-Time (AOT) compiler and the Flutter engine.
- Material Design and Cupertino Widgets. Flutter provides widgets for developers to create user interfaces in Material Design (for Android) and Cupertino (for iOS) styles. This feature allows developers to create platform-specific user interfaces easily.
- Easy Integration. Flutter can be easily integrated with other technologies and platforms, making it a one-stop shop for your project.
- Testing. Flutter comes with built-in testing support, making writing unit and integration tests for applications easy.
- Stateful Hot Reload. This feature allows developers to make changes to the application's state without restarting the entire application.
- Rich Development Tools. Flutter provides development tools that streamline the development process and make it easy to create high-quality applications. One standout tool is Dart DevTools, which offers powerful debugging and profiling capabilities.
Highlighting the Main Features of React Native
- Cross-Platform Development. With React Native, you can develop high-quality native iOS, Android, and web apps using a single codebase.
- Native Components. React Native provides a set of native components that you can use to build your app's user interface, ensuring it has a native look and feel.
- Hot Reloading. Thanks to this feature, developers can see the changes in the code at once without restarting the entire app. It updates the user interface, and changes are made without losing the current state of the application.
- Live Reload. Due to this feature, developers can view the updates of the entire application whenever they change the code. It means that when you save your changes, React Native will automatically update the app to display the latest version of your code.
- Community-Driven. There is a large community of developers who contribute to the development of React Native. They share best practices and support each other.
- Easy Integration. React Native is easily integrated with other technologies, platforms, and APIs, which makes it an ideal environment for building functional applications.
- Testing. React Native provides built-in testing support. This makes it really easy to write and run unit and integration tests for your application.
- Platform-Specific Code. React Native enables developers to write platform-specific code when it is needed. It gives you complete control over how your application behaves across platforms.
Backend for Flutter and React Native
Flutter and React Native are widely used to build native mobile apps. Both frameworks can be integrated with a wide range of backend technologies. Let's consider some examples of backend technologies that are compatible with Flutter.
Backend for Flutter:
- Firebase. It is a mobile and web application development platform from Google that provides various backend services, including authentication, real-time database, cloud storage, and hosting. Flutter has built-in integration with Firebase, allowing it to create serverless applications quickly.
- Parse. Parse is an open-source framework that enables developers to build scalable and modular backend applications. It offers a range of features, including user authentication and push notifications. Parse is seamlessly integrated with Flutter using the Flutter Parse SDK.
- GraphQL. It is a powerful API query language that allows you to create efficient APIs. It is compatible with various server-side technologies, including Node.js, and can be integrated with Flutter using the Flutter GraphQL client.
Backend for React Native:
- Firebase. Firebase has built-in integration with React Native and can be used for building serverless applications. It makes a good option for building real-time, scalable applications.
- AWS Amplify. AWS Amplify is a development platform that provides various backend services, including authentication, data storage, and APIs. It has built-in integration with React Native and can be easily used to build scalable, secure apps.
Of course, we mention only a part of server technologies that are actively used with Flutter and React Native. It should be noted that the choice of server technology in the majority depends on the requirements of a particular project and the experience of the development team.
React Native’s Documentation
Compared with Flutter, React Native’s documentation isn’t so impressive, although many developers find it more user-friendly. React’s documentation includes guidelines and popular topics, covering all the components needed to build a React Native-based application.
Pros and Cons of React Native
Main React Native’s advantages from a development perspective include:
- Quick iteration cycle.
- Ease of operation due to robust tools, meaningful error messages, and time-savings;
- It’s easier to debug with intelligent debugging tools and error-reporting mechanisms.
- A large community of developers.
- Code reusability. React Native developers can integrate 90% of the native framework and reuse the code for any platform, which significantly saves time and cuts down the cost of building two apps.
- Smoother and faster UI compared to classic hybrid ones. React Native apps use native APIs to render their user interface.
- Compatible with third-party plugins. React Native also doesn’t require high memory to process. Native modules are linked with the plugin through the framework, allowing smoother running and faster loading.
- One codebase for all allows keeping just one codebase to run the project on iOS, Android, and the web.
- Hot reloading saves significant time, allowing developers to see the changes they applied in the code almost immediately.
- Demo mode. With Expo, it’s possible to build a demo for a customer without pushing the app to the Google Store or Testflight.
- Pre-developed components. Numerous open-source libraries are available for developers to accelerate the work.
- The Expo tool allows fast development of apps for many platforms, with many ready-to-go libraries in the SDK.
- Over The Air (OTA) updates allow making quick fixes directly to users without the need to wait for Google Play or App store to accept the changes.
From a business perspective, React Native’s pros include:
- Costs and speed of web development.
- Maintenance cost.
- User experience.
- Quick and easy idea validation with MVP.
- Faster time to market.
Among the drawbacks of this framework are:
- Lower than native performance.
- Apps are bigger compared to native ones.
- Lack of some custom modules. Some specific components may be needed to build from scratch.
- UI can be easily broken.
- It isn’t efficient for complex interfaces. Native development may be better for complicated designs or advanced interactions.
- Updating issues. Keeping apps updated with the latest React Native version is a complicated process.
The disadvantages of React Native and Flutter have many things in common as both these frameworks aren’t native, which implies some problems in the development. However, with libraries and professional support, all these cons become minor.
A visual scheme on the process of installation for React Native app based on the keynote speech of Lev Vidrak.
The UI layer is responsible for user interactions. If any event happens on display (like clicking or scrolling over a screen), the native controller must pass this information to the bridge.
While React Native invokes the OEM widgets, Flutter is shipped with its own widgets. After the installation, the Flutter engine draws the UI through the Skia. Such a rendering approach helps Flutter provide 60 frames per second (fps) performance or 120 fps on devices capable of 120Hz updates.
Google Team on Flutter's performance: "Flutter is fast. It's powered by the same hardware-accelerated Skia 2D graphics engine that underpins Chrome and Android. We architected Flutter to be able to support glitch-free, jank-free graphics at the native speed of your device. Flutter code is powered by the world-class Dart platform, which enables compilation to native 32-bit and 64-bit ARM code for iOS and Android."
There is never any bridge or context switch needed to go between your app and the platform. All the Flutter requires from the platform is a canvas to render the widgets. They will appear on the device screen and access events like finger taps and services like the camera and geolocation.
Both Flutter and React Native use the best practices, distinguishing the UI from the business logic. Flutter represents the BLoC methodology, while React Native is based on Flux.
React Native keeps all the data communication within a single process, saving the device's memory. Meanwhile, the system keeps the three equal threads simultaneously, distinguishing their responsibilities.
It may seem that the existence of the bridge as a middle layer may decrease the application performance. Regarding the Airbnb case, React Native's architecture is not leading to that problem.
Airbnb on React Native’s performance: “One of the largest concerns around React Native was its performance. However, in practice, this was rarely a problem. Most of our React Native screens feel as fluid as our native ones. Performance is often thought of in a single dimension. We frequently saw mobile engineers look at JS and think “slower than Java”. However, moving business logic and layout off of the main thread actually improves render performance in many cases. When we did see performance issues, they were usually caused by excessive rendering and were mitigated by effectively using shouldComponentUpdate, removeClippedSubviews, and better use of Redux."
If you do complex calculations in your application that leads to a lot of UI changes, these can lead to bad performance. The rule of thumb is that if your UI changes slower than 16.67 ms, then your UI will appear sluggish.
Along with that, React Native's team acknowledges the framework's limitations. Since 2018, they have been working on a new architecture to eliminate the bridge. The upcoming version will use Fabric, making the UI rendering process more lightweight.
Joshua Gross, a member of React Native's core team, claimed that the Facebook app is already running with Fabric renderer. As he shared on his tweeter on July 14, 2021, their team is to publish it on open source:
Today, React Native reached a major milestone - all 1K+ RN screens in the Facebook app use the new Fabric renderer. This is something we have been working toward since January 2018!— josh #blm (@joshuaisgross) July 14, 2021
Next, we'll be starting to work on bringing this to open source for everyone to use - stay tuned!
If React Native team implements Fabric to its public release as promised, the framework will get superior performance.
The deep dive into the business logic of Flutter's architecture shows it has more similarities with React Native than differences. It also allows building the UI with the components or widgets that are immutable descriptions of the interface.
A widget is an immutable description of part of a user interface.
The immutability of the widgets helps Flutter separate the concerns. The UI is only data. The functionality is brought out to the logic side, called BLoC (Business Logic Component). The primary responsibility of this part is to recognize the events taken on the UI and set the corresponding state for the widgets. The same as in React Native or React, the changes in the state fetches new data.
If you look at the below diagram, you will find the state management concept of Flutter very similar to React Native:
As well as in React Native, the Flutter app uses data storage. The data arrives asynchronously, which prevents the application from the I/O blockage.
Many new apps like taxi driver services and ride-sharing marketplaces require synchronous processing. Flutter is a better match in this case. Unlike React Native, Flutter prioritizes the incoming requests, placing them in essential and isolated threads. For instance, Uber's partner in Russia, the Yandex Driver team, chose Flutter as the primary SDK for building their app.
Nevertheless, React Native is a good fit even for transportation and delivery apps at their early stages. For example, our team developed an uber-like app ‘Gokada’. The application's design was solely created with React Native. The client company has validated its MVP and acquired new customers. This app's performance hasn't been an issue due to the UI's split and the business logic.
Though Dart is very new, it is loved by many programmers. Flutter community admires the documentation on Dart, above all, it is pleasant to read. The only issue that the community faces now is they are not enough large. However, Google’s team regularly contributes to the framework at GitHub and is keen on answering the upcoming question on StackOverflow.
Lastly, Dart supports Ahead Of Time compilation (AOT). This feature significantly improves app performance and startup time. Its other advantage is the Just In Time compilation (JIT), which enables developers with the Hot Reload feature.
UI Design Tools
Flutter inherited the React methodology from the start. They have been using the same component structure. The whole application is constructed as one single widget which is breaking down into many others. Components are called widgets and have the same hierarchical principles as at React Native.
Flutter has two particular spaces for the UI code design. They provide Cupertino widgets specifically for iOS and Material widgets for React Native. The developer needs to work with two libraries to align them with the app's final design. Even though this approach helps build the customizable look and feel design, this work doubles the development time.
React Native provides a developer with a UI library compatible with both platforms. The most popular libraries are: Native Base, React Native elements, React Native Material UI.
Worth mentioning that Flutter contains a hot loader feature that is highly valued by its community. The feature enables to view the ongoing changes on-screen without the need to recompile the whole project again. React Native involves a similar feature too, but there are lots of claims that it (is buggy) doesn’t work properly.
Flutter and React Native are different in terms of their market strategies. The first one targets native mobile developers, and the second one focuses on specialists from the web-programming world. It explains the difference in programming tools and environment of both SDKs.
React Native saves the developers time for design since its UI code is reusable for both platforms. Also, React Native provides a developer with better visual features to simulate the code view on different platforms.
React Native developers claim that they often come across incomplete libraries. That's unclear if the code is valid unless you tried to implement it. There are many libraries of poor quality, which will take extra hours to figure out the issue. So, working with open-sourced libraries is a pain point for React Native developers.
Top 10 companies that built their products with React Native:
- Uber Eats;
Top 10 companies that created their products using Flutter:
- Google Ads;
- eBay Motors;
- The New York Times.
Uber Eats on React Native:
"We ultimately architected UberEATS in much the same way as we would a regular React /Redux web app, eschewing iOS patterns and modules wherever possible. Fortunately for our needs and preferences, web concepts and technologies, on the whole, translate quite nicely to native development" (source of the quote).
Alibaba Cloud on Flutter:
"Flutter features strong UI expressiveness to enable fast, efficient and low-cost development of attractive UIs. Flutter is especially suitable for e-commerce businesses that emphasize UI-based visual interaction, helping them create highly expressive web pages" (source of the quote).
Key Differences Between Flutter and React Native
|Documentation||Is easy to read as it’s structured, detailed, and formatted.||Isn’t well-organized and straightforward as Flutter’s one. Heavily depends on community-developed libraries.|
|Project Size||In terms of project size, Flutter may need 2 GB of available disk space minimum, with 4 GB recommended. A default app size may take 60 MB on Android devices.||An app size may be reduced from 26.1 MB to 3.1 MB by enabling Hermes and ProGuard.|
|Installation||Is slower and trickier to install than React Native as you must download the binary for the specific platform you choose from GitHub. Lacks a one-line installation and a native package manager for OS.||Installation is seamless using the Node Package Manager. Similarly to Flutter, it lacks a one-line installation and a native package manager for OS.|
|Code Reusability||A codebase is more reusable than in React Native. Developers can define a single UI widget tree and then reuse the defined logic.||Allows to write code once and apply it to every platform, although compatibility on every type of mobile app platform isn’t guaranteed. Developers are often required to download different sets of working components.|
Flutter uses the same concept as React Native. However, it moved a big step ahead in terms of performance and architecture.
A Brief Comparison of Flutter and React Native:
- Flutter and React Native have much in common regarding components design and state management.
- Flutter is targeted at the native app developers group, whereas React Native is focused on web programmers.
- Flutter is suited for apps requiring synchronization and animation rendering.