Choosing your Tech platform for your next Cross platform app – Flutter or React Native?
Selecting one or the other technology is always a matter of individual preferences but knowing which platform has what benefits can help in deciding the best option. In this blog, we are going to discuss two of the very popular technologies for creating cross-platform apps i.e. Flutter & React Native.
Programming Languages
Let’s start by looking at the programming languages for each of these frameworks. For React Native we use JavaScript and for Flutter we use Dart. The languages themselves can divide their own audiences. As a web developer who is looking into the opportunities to enter into a cross-platform market React Native will feel right at home while a native platform developer for say, Android or iOS will feel more relatable to Dart for its class and function usage.
The design philosophy
React Native just like for web is designed to be minimal, so it provides some basic functionalities but leaves the rest to developers which means generally a React Native project will have a lot of third-party dependencies depending on the project requirements. Flutter, on the other hand, comes with a huge library of widgets out of the box and this library is maintained by Google. As for dependency management Flutter has a package manager called Pub which has a huge library of tools that can be added to your project. For the bottom line, they both have a huge community that can provide almost anything that you need to be done in your project.
The Architecture
For React Native apps, under the hood, it runs two separate JavaScript threads, one for the Main thread that runs the native platform code and the other for JavaScript code that runs the main code written by devs. When there is a need for these two threads to communicate, a Bridge is used between these threads. Using a bridge helps in separating the platform-specific logic from the business logic. So this means that whenever a “View” is rendered in react native, it is translated to a native view i.e. an Android View on android platforms, a UIView on the iOS platform, and a Div on the web, so this means that the code you write is not just packing a website in the native app, but it is translating the components to their native counterparts. This is also helpful if the native components are updated in a future release; the JS code need not be updated to adjust for them.
As for Flutter, instead of using the native components, Flutter draws each pixel on the screen using its highly optimized rendering system that runs on the compiled native code. So this is helpful when you want your code drawing on the screen. With this drawing engine, Flutter can display a very smooth UI on the screen which is 60fps on the native platform and it looks very neat. All this is done with the need for a bridge to communicate with the native platform. But this does not mean Flutter does not allow you to have native code for a platform. With the help of native channels, you may write platform-specific code for example accessing the photo library on Android or iOS devices or handling the file system requirements on the native platform.
The Coding experience
To run your code on a device, in React Native, you first have to run the Emulator either by command line or from ADB in Android studio. Once the emulator is up and running, you run two commands, one to start monitoring the code changes and another to run your code in the emulator. There is an option to “Hot reload” the app anytime you feel like there is a big update that needs to happen in the UI. apart from Hot Reloads, the UI of the app is automatically updated as per the changes in the code without changing the state of the app. Apart from these options, there are many third-party options available that may help in doing all these boilerplate steps.
When talking about a Flutter app, if you open the project on VS code, with the Futter extension installed, there is a dedicated button to run your code in an emulator. No other steps are needed. A single button attaches to the app on the emulator and updates the code changes you make. Flutter, just like React Native, has a hot reload option as well as update the UI of the app as you make changes in the code without affecting the state of the app in the emulator. An additional benefit of using Dart as a programming language is that it provides a Just-in-time (JIT) compiler so it raises the syntax error when you write your code rather than writing and running your code than knowing about the problems in the code. Dart is also very aware of the “Null” values.
The code structure
On the React Native side, the code more or less looks like an HTML document or a JSX file where you write a view and the nest other views in its hierarchy. On the other hand, for Flutter, you use classes that have a “build” method that returns a view hierarchy. As an overview both the frameworks use a similar approach but React Natives uses functions while in Flutter the UI components can be broken into classes. The more significant difference comes into light when in React Native, you usually do not have an already built UI component that you can just use and display, you have to create your own component and define its behavior yourself or use any third-party tool that can do it for you. This results in a project that is highly dependent on third parties. As for Flutter, there are abundant pre-built widgets available for developers to use.
Conclusion
In conclusion, each platform has its pros and cons based on your expectations. If you have a good experience in JavaScript, React Native will be a better tool for you as you will be aware of the patterns and workarounds of the language. Same for Flutter, if you are familiar with Java of C# or any of the native platform languages like Swift or Kotlin, the coding experience in Flutter will be easier.
