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 announced Flutter, which was based on Dart programming language.
A visual scheme on the process of installation for React Native app (used from the speech of Lev Vidrak):
The UI layer is responsible for the user interactions. If any changes appeared on the UI (like, a user touched the button or scrolled down), the native controller will pass this information to the bridge.
Like React Native, Flutter is compiling the design to the native code. But in contrast, it doesn’t use the bridge. Flutter’s core is based on the engine, which is primarily written in C/C++. The graphic machine is called Skia, and it compiles the graphic to the native machine code while a user interacts with the application.
"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."
For graphic rendering, both Flutter and React Native are using external engines. In both cases, the code is compiling at the running time of the application.
React Native uploads its entire libraries and components to the device when Flutter is rendering the widgets directly connected to the native library.
Summary: Flutter shows better performance due to seamless integration with the mobile OS platform and the graphic rendering at a few times higher frequency than React Native.
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 the Flux.
React Native keeps all the data communication within the single process, saving the device 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.
“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.
Lots of new apps like taxi driver services and ride-sharing marketplaces require synchronous processing. Flutter supports the synchronization and seems to have an advantage in this case. For instance, Yandex Driver chosen Flutter as the primary SDK for building their app.
Unlike React Native, Flutter is prioritizing the incoming requests, placing them in essential and isolated threads.
Nevertheless, React Native is a good fit for building transportation and ridesharing apps at an early (MVP) phase. Our team developed an uber-like app 'Gokada' with React Native. The service company has validated its MVP and acquired new customers. The performance hasn't been an issue for this app due to the UI's split and the business logic.
Summary: Flutter is a better choice for companies that require synchronization, though React Native could be a good fit at the MVP stage.
Google has founded Dart in 2011, though it was not widely used before 2017. It became popular due to Flutter of course. Dart is simple to learn, it doesn’t take much time to get familiar with it. It is an object-oriented programming language, based on C and looking similar to Java.
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 contributing to the framework at GitHub, and keen on answering the upcoming question on StackOverflow.
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 is 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.
Summary: 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 the open-sourced libraries is a pain point for React Native developers.
Top companies that built their products with React Native:
- Uber Eats;
Top companies that created their products using Flutter:
- Google Ads;
- eBay Motors;
- The New York Times.
Flutter uses the same conception as React Native. However, it moved a big step ahead in terms of performance and architecture.