Flutter vs React Native: What to know before getting started

The ongoing competition for cross-platform application development supremacy is between two major rivals: React Native and Flutter. Developed by Meta (formerly Facebook), React Native is an open-source cross-platform UI software framework. Meanwhile, Flutter is Google's latest open-source cross-platform development framework, launched in May 2017. Both frameworks can effectively accomplish the fundamental goal of creating cross-platform applications using a single codebase that runs seamlessly on iOS, Android, and the web.

Flutter vs React Native: Properties

Despite sharing a common purpose, they are significantly different in terms of operation and developer experience.

Cross-platform Programming Languages

React Native uses Javascript with React being a compulsory UI library. React Native also supports TypeScript, a strict syntactical superset of JavaScript, and adds optional static typing to the language. Flutter, on the other hand, uses the Dart programming language, a statically typed language optimized for compiling code to multiple platforms with just-in-time or ahead-of-time compilations.

While JavaScript was not built to be used to build mobile applications, it is a widely used language, more popular than Dart, which is built with mobile application development in mind and is mostly known within the Flutter community.

Ecosystems

Flutters' and React Natives' GitHub repositories are some of the most actively contributed to repositories in the world with the Flutter repository at 144 thousand stars and React Natives' repository at 105 thousand stars as of September 1st, 2022. React Native is architecturally designed to be minimal with base components provided by the framework. Still, virtually everything else is left to the open-source community to build upon, which means a React Native project would generally depend on loads of third-party dependencies, most commonly through the Node Package Manager (NPM).

While Flutter comes with a built-in widget library and tons of prebuilt widgets, the company behind Flutter, Google, also produces and maintains a fair amount of open-source plugins that are housed on the Dart and Flutter Package Manager (pub.dev). Developers can also build packages and plugins and host them on pub.dev.

Nick, Tech Lead of the Mobile Development department at NIX, says: “Many tools and features in React Native and Flutter are on par with one another, including Code consistency and hot reload with the flexibility to make adjustments immediately. Other qualities are just as undesirable, such as state management.

"Unlike React Native, Flutter operates without the need for additional APIs when it comes to performance. The framework handles all of the work necessary to bridge the gap between the codebase and the device. However, React Native is more dynamic with a strong and flexible API when it comes to native design.”

Architectures

React Native uses a bridge that enables the JavaScript Thread, which the application is built with, to communicate with the Main Thread, also called the Native Thread, which is a different language depending on the platform. This makes it possible for React Native to render truly native components that evolve with the platform the application is running on and not just render WebViews.

Flutter, on the other hand, uses a high-performance rendering engine built with C++ and Skia which renders custom pixels to the screen with compiled native code. It renders pixel-perfect iOS and Android-style widgets while also giving developers the ability to render custom-built widgets similar to the gaming engine, Unity.

Tooling

React Native requires certain npm packages to run applications on configured devices and also requires Metro which watches for changes in the background. React Native also supports hot reload which automatically updates the application - This preserves the application's state while updating the UI changes. With React Native, you can use whatever works best for you - you can use JavaScript, TypeScript, the default React Native CLI, Expo CLI, and more.

Flutter makes it easy to run applications on configured devices within the development environment that is being used with just the click of a button. And it also supports hot reload because of Dart's ability for just-in-time compilation. As Dart has a very sound type system, it is capable of providing great tooling as code is being written. For example, when typing, developers can hover over any class or variable in their code and see the full documentation for it. And if a developer inputs the incorrect datatype, the Dart compiler alerts them right away.

Developer Onboarding and experience

When getting started with React Native, developers have access to the official React Native documentation at reactnative.dev/docs/environment-setup. Starting a project is as simple as writing a single command in the terminal, and developers have the option of using third-party CLIs like Expo or Yarn, instead of the default React Native CLI.

Flutters SDK on the other hand, can be installed with guidance through the official documentation on docs.flutter.dev/get-started/install. Flutter applications can be built using any text editor or IDE. Starting a Flutter project is a simple one-line command in the terminal as Flutter doesn't need to reach out to the Node Package Manager to install extra dependencies.

Final Thoughts

React Native and Flutter are both highly regarded open-source cross-platform development frameworks available to anyone. While I personally favor Flutter, ultimately, the choice between the two will hinge on your priorities and the specific requirements of your team or project.