This post aims to summarize my thoughts on Flutter vs. React Native specifically for web development.
Flutter
The purpose of Flutter Web is not to create websites; rather, it focuses on making apps available in the browser. Embracing web standards is not the objective here, instead, the goals are to ensure fidelity and consistency across platforms. For that, with the help of CanvasKit, the browser functions as a Flutter screen, enabling the rendering of your mobile/desktop app within a canvas, and bypassing many built-in browser features. This is why the Flutter documentation states the following:
Not every web page makes sense in Flutter, but we think Flutter is particularly suited for app-centric experiences:
- Progressive Web Apps
- Single Page Apps
- Existing Flutter mobile apps
React Native
React Native shares a similar objective, which is to ensure cross-platform consistency. However, when it comes to web development, React Native has a significant advantage: it relies on JavaScript, HTML, and CSS. No need to download a 2MB web assembly; no need to reimplement the wheel to make the scrollbar work or hack the accessibility tree to make the canvas accessible: React Native Web relies on the browser rendering engine and existing javascript APIs.
Conclusion
It makes a lot of sense to choose Flutter if you are already familiar with Dart or if you intend to migrate an existing Flutter app to the web. But otherwise, if you make a web app and plan to target other platforms in the future I would not hesitate to go with React Native!
Obviously, you should compare Flutter and React Native on Android and iOS to make a final choice (and that would deserve another post). However, whatever you read elsewhere, don't forget that you can use skia (Flutter's engine) inside a React Native application.😉
Notes:
Flutter does support HTML/CSS rendering as a replacement for CanvasKit. (but I don't really understand why they maintain two renderers in parallel ?).
Illustration image: I ask bing chat for "an epic combat between Flutter and React Native, colorfull and illustrated"
Top comments (1)
I really appreciate this comparison between React Native Web and Flutter Web. It's clear that both frameworks have their strengths and weaknesses. Flutter for the Web seems like a great choice for those who want a full-stack solution, and Dart's backend capabilities are intriguing. On the other hand, React Native Web's focus on providing a native-like experience and real-time interaction is also compelling. It really depends on the project's requirements, and it's fantastic to have these options available for web development!