Skip to main content

Flutter vs React-Native - Why react-native will continue to dominate

I think that Flutter, Google's attempt at competing with react-native, will flop and react-native will continue to dominate, here's a few reasons why.



Please note that I have used react-native for almost a year now but not flutter. This is just a comparison and what I see as after looking at and using some of the apps and docs from each framework.

Let me discuss the pros and cons that I see of each.

React-native

Pros:

1. Native widgets.
2. React community is huge
3. Any npm package works
4. Smaller apps
5. Feels fast

Cons:

1. Bridge can be slow (though I never had this problem in our app)
2. IDE integration is not as good
3. Javascript querks

Flutter

Pros:

1. Great IDE integration.
2. Non native widgets - Easier customization
3. Starts up and feels fast

Cons:

1. Does anyone use Dart outside of Google?
2. Non native widgets, very poor support for iOS looking "cupertino" components. Supported components lack a lot of features (so it seems)
3. Huge app sizes.

Discussion

Let me unpack the con's by looking at the app Hookle which Flutter mentioned in the beta release announcement



You can tell right away that the iOS version is not using native widgets and looks like the android one. Ex the toolbar is a material design toolbar, NOT, an iOS looking toolbar that users typically see.  It also looks like the padding is screwed up on the send button. Not really a big deal.

Also notice how NONE of the hashtags are highlighted as links. Does Flutter support this yet? Probably not. This is why using non-native widgets sucks. Even with a fancy UI framework you can't quickly redo all the work that has been put into the YEARS spent on native widgets and have to ship an app that's lacking otherwise standard features. 

Also the iOS version is 50.3MB! The Android version is 16MB, about twice a typical react-native app. Really?

And people complain that Kivy apps are big...

Dart vs JSX

It's you're preference but JSX makes more sense to me.  Nesting the closure like syntax that Dart uses does not seem declarative to me compared to react which naturally feels declarative as it's like html.

While these are doing different things, the react one is more clear what the view tree is exactly doing due to the explicitly named tags.


With Dart you have to follow all your brackets and parenthesis, which is clearly going to be a lot more error prone.


Dart also requires `new` keywords and casting `<Widget>` which is a pain to maintain. A "Modern, reactive framework" should do this for you, it's inherit in the structure that you nest a Widget within a Widget.

When it comes to the actual rendering, they both use `setState` and a single `render` or `build` method so it's the same.  I don't see any major differences here.

Native integration and APIs

It looks like both frameworks require you to make a "Plugin" / "Package" to act as an intermediate between the system API's. Looking at the details I don't see major differences between one or the other that would cause me to choose one or the other, they're just different ways to do the same thing. They both are async and use a "channel"  to convert data between the two "realms".

However where Flutter flops, as expected is embedding / reusing an existing widget. For instance a MapView,  even after two years (see https://github.com/flutter/flutter/issues/73), is not supported! 

Notice how their sample health tracking app uses an IMAGE for their "path" background. Really, what is that?



According to https://medium.com/@matthew.smith_66715/maps-in-flutter-a1ac49ab554b, "Currently, rendering a native iOS or Android view like a MapView inside of your Flutter hierarchy is a work in progress".   

Even the python equivalent to react-native that I made for python, enaml-native, has native maps support!

Summary

In each category I would say:
  1. IDE integration - Flutter
  2. Development time - Tie
  3. Native "look and feel" - React
  4. Language - React
  5. Community - React
  6. Native API integration - React

So in summary, the major issues I see with flutter, is the use of Dart which is unpopular, and not using native widgets. 

Clearly whoever Ok'd the user of Dart and ditching native widgets underestimate how much work has gone into native platform widgets and ALL the 3rd party widgets.

While React native actually adds a layer of abstraction that makes development faster while still keeping the ability to use all existing code / work, Flutter PILES ON all the work that has already been solved by native platforms ON YOU.

When you use a framework that chooses a "brew your own" style, you drop all of the work of others onto yourself (or whatever team implementing the framework), thus in my opinion "Flutter" is dead.

Just because a project is backed by Google, doesn't mean... well you get it.





Comments

Popular posts from this blog

Kivy vs React-Native for building cross platform mobile apps

I've built three apps now using Kivy and one with React-Native, just wanted to share my thoughts on both.

Just a warning, I am strongly biased towards python and this is all based on opinion and experience and is thus worth what you pay for it. I don't claim to be an expert in either of these, just have worked with each for several months.  If something is incorrect I'd love to hear advice.

Kivy
Demo of one of the apps



Pros:
Nice to be able to run natively on the desktop WITHOUT a simulatorPython is easy to work withUse (almost) any python libraryVery easy to create custom widgetsKivy properties and data binding just work. Way nicer than React's "state" / flux / redux whatever you want to call it (stupid?). Native interfaces (pyjnius) and (pyobjc)Runs and feels pretty smooth Cons:Default widget toolkit looks like Android 4.4. Requiring you use your own widgets or a theming kit like KivyMD if styling bothers youCreating dynamic widgets declaratively is not yet s…

Control Systems in Python - Part 1 - Bode and Step Response

I hate matlab with passion, yet sadly, nearly everyone uses it.  I'm a fan of Python and open source stuff so here's a simple article on how to do some common control systems stuff in Python.

First we need to make sure the environment is setup.
Install IPython (or you can use any other python shell, but a unicode supported shell is preferred)Install python-control (numpy, scipy)Install sympy
These should do if your on Ubuntu/debian:

sudo apt-get install python-sympy python-numpy python-scipy python-matplotlib ipython
Then you need to install python control, see How to download and install python-control
Intro to using SympyOpen ipython and run the following:

import sympy from sympy import * sympy.init_printing() s = Symbol('s')

Now we can do things like define transfer functions using the symbolic variable s.


We can expand the bottom using the .simplify() method

and we can do something more complex like...
which is really nice because it does all the multiplication for us... and it’…