What About Other Platforms on Flutter and React Native?

Flutter and React Native’s performance are pretty good on Android and iOS. But what about web and desktop performance?

How actually Flutter works?

Okay, everybody knows flutter’s performance great and flutter compiles Dart code to C++. But how actually flutter works?

Flutter renders every vectors and pixels to directly screen. So actually what you see in an app is just like an image. And when you use any animation, flutter updates states and present you new frames. That’s why Flutter introduce 60 FPS apps.

Actually you can think Flutter like a game engine (Unity or Unreal Engine 4). What flutter does is same with what games engines do. Just one difference: Flutter keeps same state if there isn’t any changes on screen. So like game engines, flutter use mostly GPU for rendering.

How React Native works?

Unlike Flutter, React Native use real native components. React native creates a bridge between real components and JavaScript code.

For example, in below code, React Native converts the <Text> tag to <TextView> in Android XML.

class HelloWorld extends Component {
   render () {
      return <Text>Hello World</Text>;
   }
}

Flutter in Web

Flutter isn’t so much good at web. The reason of it is flutter renders JavaScript canvas instead of real html elements. Not using real html elements harms SEO in websites and performance.

Especially when using an animation, you can see frame drops. Because Flutter can’t use whole GPU from computer.

But React Native renders real html elements. Again, react native isn’t very good at web compare to real websites. But React Native wins in web compare to Flutter.

You can see Flokk as flutter sample app. It has website and desktop app that written in Flutter. If you check Flokk, Website is loading very slow. And if you view source of Flokk, the body tag is completely empty except service worker script code. Under of that it has this line:

<script src="main.dart.js?version=1.0.0" type="application/javascript"></script>

This is the whole flutter code actually. Flutter compiles all code to one javascript code. Flokk is slow because Flutter is trying to render with CPU and it is not enough for web. You can check the how slow is Flokk on web below:

But if you download desktop app of Flokk from https://github.com/gskinnerTeam/flokk, you can see the desktop performance is pretty good.

Flokk uses GPU for state changes.

But there is one more problem too: It works pretty well If you use a good GPU.

It is okay when you don’t do anything on app. It doesn’t use any GPU. But when you click a one button or even hover. It really use your GPU like a game. My GPU-0 is Intel Ultra HD Graphics and Flokk use my 20% GPU when visiting pages.

Conclusion

Flutter and React Native still race in mobile part. But in web part, definitely React Native is on top. React native doesn’t have desktop support. But if you use Electron.js with React Native, I believe again React Native will win. But animation of Flutter is beautiful in desktop apps.

My personal prefer: Flutter on mobile apps, Electron.js on desktop apps, Vue.js on web apps.