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 simulator Python is easy to work with Use (almost) any python library Very easy to create custom widgets Kivy 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 you Creating dy

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 Sympy Open 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

Control Systems in Python - Part 2 - Routh Hurwitz

In my last post Control Systems in Python Part 1 , i described how to setup and use Python for doing some basic plotting of transfer functions. One of the biggest benefits of using sympy vs numeric packages like matlab/numpy/scipy is the fact that you can use symbolic variables. This post includes a function for computing the Routh Hurwitz table (Note: It does not work for row's of zeros). Lets do my control systems design homework problem together :) (Warning: I have not verified if this answer is right so please correct me if it’s not!) The Problem The problem is DP 9.11 from Dorf & Bishop’s Modern Control Systems. ISBN 0136024580. Basically we have to design a controller to compensate for a system with a time delay. The controller is: And the system is: First we approximate the exponential term with a 2nd order polynomial using pade(0.4,2) such that: Thus the approximated system is: Using frequency response methods, design the controller so that th