Mobile Development - React - Native vs Flutter 2022 Compare

Lets compare the platforms
I will try breaking down the different aspects of both platforms:

• Supported platforms:

• Flutter: OS, Android, web, Windows, macOS, and Linux.

• RN: iOS, Android, web, and Windows10 apps.

1. 1. 1. Win this round – Flutter, but not by far. 

• Programming Language:

• RN is written in javascript, that is a non-typed language, not-Object-Oriented language, not null-safe language, a low level language and a runtime interpreter. Saying that, please keep in mind the abundance of javascript skilled programmers and React familiar developers. 

• Flutter is written in Dart, a specialized programming language, specialized for mobile development. It is an Object-oriented, type-safe language, null-safe language and a modern high-level programming language. Saying that, fornew-comers to mobile, this means learning a new programming language and platform, Flutter.

1. 1. 1. Interpreted language vs Compiled Programming Languages. Flutter is pre-compiled and RN is Interpreted languages. Naturally pre-compiled languages will be faster and less buggy, although javascript with just-in-time compilation is closing the gap.

• Win this round – both, depending where you come from, if you are coming from web-development, you will be more familiare with RN, if you are coming from iOS or android, Flutter is a more natural choice.

• Ecosystem:

1. 1. 1. RN has been around since 2015, Flutter since 2018. Both are quite mature platforms with large communities, with a small advantage to RN, but the gap is rapidly closing. 
      2. Both are supported by a huge community similar in size, seeking trends in Github, Stack-Overflow and Google, both communities are around the same size.
      3. In Github, there are around the same amount of projects in both platforms.
      4. 3’rd party packages:
         1. Flutter has Pub-Dev with a high variety of UI and non-UI packages, easy to use. ALL packages can be used in Flutter apps.
         2. RN has NPM-js packages, but not all packages are suitable for React-Native use. There is no ranking and the package documentation is usually insufficient. Many packages are obsolete and outdated.
      5. Win this round – at this point in time, RN wins by a few points, but Flutter is closing the gap rapidly.

• Platform origin:

1. 1. 1. RN – Facebook.
      2. Flutter – Google
      3. Win this round – both are supported by tech giants.

• Architecture Development Philosophy:

1. 1. 1. Both platforms are open-source platforms.
      2. Both are built as a widget-tree.
      3. RN is based on a javascript communicating real-time with a bridge, activating native components and controls. This results in a different UI on each platform, the app WILL-NOT look the same on android and iOS. This is also naturally a slower solution.
      4. Flutter creates its own widgets, with all rendering at 60 frames-per-second, all custom functionality. On top of those widgets, you can create your own widgets using a fast-kick-start with a wide variety of brand-widgets, or build a widget e from scratch.
      5. RN comes with a very small amount of brand-widgets, and a lot of simple widgets are up to the user to import from NPM or other packages. This gives more development choices but more research is needed for a simple widget. 
      6. Project-Complexity and Code-Maintenance – Project architecture is very simple in Flutter, with very few files in order to run a minimal project, in RN, we will need a large numberof files for a minimal project.
      7. Code-Complexity – Will be similar due to the fact that both platforms are built as a component-widget tree, with a slight advantage to RN. Flutter has out-of-the-box state-management, with streams for simple state-management, in addition, both have 3’rd party state-of-the-art packages, for complex and comprehensive state-management.
      8. Win this round – it seems that Flutter is built from the ground up for mobile app, and RN is a web-based platform that has been adapted to mobile development,soy I think Flutter wins here by quite a bit. 

• Tooling:

1. 1. Both platforms can run on VSCode, Flutter can also run on Android-Studio.
   2. Flutter has more tools, including command-line tools.
   3. Unit-Testing – slightly better in RN, due to a large variety of unit-test specific libraries.
   4. Running on a device is slightly easier in Flutter than in RN, although both platforms have hot-reloads, RN is more buggy and less reliable.
   5. Win this round – in short, Flutter.
2. Coding:
   1. Flutter-Dart is a typed language, therefore auto-complete is much better than a non-typed language.
   2. Flutter-Dart keeps null-safe, so that apps will not crash on null objects. This is highly important when understanding that mobile-apps are not as easy to update versions than web-apps. It is therefore crucial to protect the app from real-time errors that can cause it to crash. Javascript is a run-time interpreter, and is highly vulnerable  to runtime errors causing the app to crash.
   3. Documentation – here Flutter is leading with flying stars, with a very highly maintained online documentation, over 100 very short videos of less than 2 minutes of every out-of-the-box widget and major package, called “Widget Of The Week”, down to long one hour plus videos named “The Boring Show”. No doubt, in RN there are also videos, but self produced and not from the platform-team like in Flutter. This is highly important for kick-starting on the platform.
   4. Code – in Flutter, we can research every widget including out-of-the-box widgets, since the code is typed and the code is open-source, we can easily see just at least the widget interface. Unfortunately, RN is not typed, so this task is much complex or in some cases impossible.
   5. Stability – due to null-safety, code-typing and pre-compiling, Flutter is more likely to be  stable, but  this is also dependent on  the development team.
      1. Flutter is almost single -code for multi-platform, and almost single -code for multiple devices.
      2. RN has to maintain specific code for each platform.
   6. Win this round – Flutter by far.
3. Size-Of-App:
   1. Even though this topic is highly controversial and depends on the amount of packages imported to the project, most notice that Flutter has a smaller app-size. This can also be due to the fact that a lot of the RN components and libraries have to be imported from NPM, whereas in flutter, a lot is pre-built out-of-the-box. 
4. Developer productivity:
   1. Taking into account that there are more out-of-the-box widgets, high concentration of 3’rd party packages in pub.dev, better documentation, advantages of null-safety and type-safe programming language, one-code for multiple platforms and devices, a highly skilled Flutter team can develop faster than a RN team.
   2. Development team size – as mentioned above, RN for big apps, will need more human-resources than Flutter, also at development time and also in QA phase.
   3. Saying the above, for starter teams coming to mobile from web, or prototyping teams, enjoying the speedy development of non-typed code, might find the RN more appealing.
   4. Win this round – Flutter by far.
5. UI and animation:
   1. Flutter has built in animation-widgets, supporting complex-animations.
   2. RN has libraries like Spring, that are more cumbersome and not so intuitive.
   3. Flutter has 60 frames-per-second rendering, and rendering is much faster than in RN. 
   4. Flutter widgets are also better looking and consistent across-platforms.
   5. Flutter makes it easy to support multiple devices and multiple platforms.
   6. Navigation – both not too difficult, but in Flutter there are more out-of-the-box resources for navigation.
   7. Win this round – Flutter by flying colors.

Conclusion

Both platforms can do the job of creating a real cross-platform app.

Both platforms have proven record in different app-stores, with well written large apps such as Instagram and Facebook and Uber for React-Native and Alibaba for Flutter.
Both have large development communities, with a slight advantage to React-Native, where Flutter is rapidly closing the gap and even passing.
Please note that bringing in a web developer to create a mobile app will still force the team to learn and understand mobile-related development, like product-life-cycle of mobile apps, whereas in contrast to web-development, that issuing a new version is online and immediate, in mobile, version updating can take weeks, and even so, there will always be some apps with old versions, support of old devices with old OS’s, that can not run certain product features due to old API’s. So well planning and well coding is crucial in mobile.

Personal conclusion

As a developer of over 20 years in mobile and web, especially mobile, I would put my bet on Flutter, the platform is more appealing for new developers, is less frustrating to develop and has a shorter learning curve for Object-Oriented developers. 

For large and complex projects, you will definitely need an Object-Oriented language like Dart, but for small or simple-logic projects, React-Native can do the job.
Sorry React-js and React-Native developers, but I think I will stick to Flutter for the time being.

Written by: Ari Deane, Mobile iOS & Android Expert