We are going to look at these two frameworks on a wide range of topics that is, Learning Curve, Performance, Community Support, Industry Trends, and Pros & Cons.
What is React Native
React Native is a JavaScript framework for building mobile apps making use of the JavaScript UI library called React. This framework React Native allows developers to leverage JavaScript to build mobile applications supporting both Android & iOS in just one code base.
What is Flutter
Flutter is an open-source mobile UI framework to develop cross-platform applications I.e., Android & iOS in one codebase. Flutter uses Dart programming language to achieve this and provides a reactive programming model for building user interfaces.
React Native Learning Curve
React Native uses the UI library React to accomplish business logic which is transferred through a bridge for translation to Native UI and business logic. React native code makes use of JSX syntax coming from React which essentially is the capability of writing HTML-like elements inside our JavaScript code.
Prior knowledge in JavaScript and React will yield too easy and less painful learning for React Native. React developers will find React Native a bit institutive as React Native has the same component-based structure as React, and their lifecycle methods make learning React Native a bit easier and smoother.
React Native does, however, take things a bit up a notch with unique features catering to how native mobile apps handle things such as touch events that which are only accessible on mobile devices, navigation, and storage where React Native uses Asynchronous storage by default. All this then may take some time to learn as this is unique to React Native.
Flutter Learning Curve
Flutter uses dart programming language to accomplish its business logic which is compiled to native business logic. To start with Flutter, a developer should first start by learning Dart, which can be easy or hard depending on the developer’s background. If you are a developer that is coming in from an Object-Oriented Programming background Dart will be intuitive and easy to learn as the rest will just be what I love to call syntactical sugar that you’d have to get used to but the concept is the same as any other programming language out there.
Upon learning Dart, your journey does not end there you’d now have to learn the Framework Flutter which depending on the prior background can make the learning a bit complex or smooth, from personal experience coming in from a background where I daily wrote HTML & CSS understanding the Flutter layout system and widgets was a bit tricky to learn and understand. Flutter employs a different approach as compared to the web development ecosystem and makes use of a box model system similar to flexbox but with its own version.
Flutter resources are, in my opinion are now getting to more and more available as it’s somewhat fairly new so tutorials etc for specific things might often be hard still to find causing the learning of Flutter to be a bit harder.
All in all, I would consider Flutter’s learning curve to be steeper than that of React Native.
React Native Performance
To dive deep into React Natives’ performance understanding the underlying architecture will be key.
So, we have the UI rendering which is done natively and business logic is done in JavaScript. These two components that are the UI rendering and business logic are thus encapsulated in two separate threads that being the Main Thread and Background thread respectively for each component.
The Main Thread which is responsible for rendering the UI that we see and the Background Thread executing the JS interpreter which is executing all the business logic you have in you React Native application.
Both these threads are connected by an asynchronous bridge that allows JavaScript code in React Native to call native functions and access native objects and vice versa that the native code can call JavaScript functions and access JavaScript objects biggest bottleneck in this architecture.
With that said React Native is in its experimental phase of implementing a new architecture making, that is the bridge that was existing for communication between JavaScript and Native code will be replaced with JSI (JavaScript Interphase).
JSI written in C++ allows communication between JavaScript and Native code without needing to serialize the contents to JSON, JSI opens up a lot off capabilities such as a new approach in rendering using Fabric moving away from the Shadow thread which is responsible for calculating all the positions and determine what is the height and width of an element then transforming it to the native UI element
Flutter performance
We will also dive deep into understanding Flutter’s architecture so to understand what makes or breaks Flutter’s performance. Flutter makes use of an AOT (ahead-of-time) compilation process to convert the Dart code into native machine code for the specific platform Android or iOS.
Upon running of your Flutter application, the dart code is thus first compiled to native code which later gets executed onto the respected device this allows your application to run faster and more efficiently due to the native code being optimized for that specific platform.
Flutter’s AOT allows flutter to achieve many more other things than fast startup such as smaller binary size due to the compiled code taking less space on device which in turn will result to small app binary size and faster download time, AOT can also allow flutter to achieve some better security due to the compiled code is translated to machine code which makes reverse engineering that hard.
Everything that’s good has its drawbacks, AOT increases application build time and modules or libraries that rely on runtime reflection can be affected.
React Native Community Support
React Native community is very large and active, many developers and companies are constantly contributing to the framework as it’s an open-source framework. React Native has many resources out there on the internet to getting started and learning about React Native.
The React Native community is growing rapidly as we have many React developers wanting to jump into the mobile space and straight jump into React Native as the concept of both React & React Native are similar.
Flutter Community Support
Flutter community itself is very large and also has an active base of developers and companies that are constantly contributing to the framework. Flutter also has wide pool of resources that which one can select on to getting started in learning and understanding Flutter.
Industry Trends
We are going to now look into what is that the industry says about these two Frameworks & the languages that there are built on top of.
Will make use of Stack Overflow survey trends to get some senses of what thousands of other professional developers out there are using and love using, we get to see that React Native is thus more popular than Flutter with React Native being no4 popular Framework with 13.62% and Flutter being just behind React Native with 12.56%
These trends are very useful helping new developers to knowing what they can potentially start learning increases their high chances of getting into the industry quicker than ever as when you just getting in you want to learn what’s relevant and also needed plus used by companies.
React Native Pros and Cons
React Native has its benefits and disadvantages we’ll start looking at its benefits which are:
- React allows for developers to write cross compatible code I.e., with one code base they can support both Android & iOS
- React Native is component driven allowing developers to write one component once and reuse it a million times
- React Native has a very big community this makes it easy to find solutions to problems that you are having and getting started becomes easier because there are also a lot of resources out there that people have created.
Finally, the disadvantages of React Native are:
- React Native has limited for some native features and tapping into that will demand additional workarounds or knowledge of writing native code
- React Native app size is prone to sky rocketing than native apps due to the JavaScript runtime inclusion
Flutter Pros and Cons
Flutter has its benefits and disadvantages we’ll start looking at its benefits which are:
- Flutter allows developers to write cross compatible code I.e., with one code base they can support both Android & iOS
- Fast application startup this due to AOT that Flutter employs
Finally, the disadvantages of Flutter are:
- Dart as some bit of learning curve especially if you are coming from a none OOP background
- Flutter also does have some limited support for native features and that will result in having some knowledge in Native code writing to expose those features to Flutter
