Google’s Flutter Beefs up Web Support, So How Does It Compare to React Native Now? – InApps 2022

Earlier this month, Google announced Flutter 2, the latest version of its UI toolkit for building “natively compiled applications for mobile, web, and desktop from a single codebase.” Flutter allows developers to create native apps for five operating systems — iOS, Android, Windows, macOS and Linux — as well as a web app for modern browsers like Chrome, Firefox, Safari and Edge.

Perhaps the biggest news in the Flutter 2 announcement was that its support for the web is now labeled “stable” (prior to this, it was “beta”). Flutter, which initially launched in 2015, has primarily been seen as a mobile-focused Software Development Kit (SDK) for Android and iOS. Up till now, the web part of the framework has been, if not a minor feature, then certainly an experimental one.

The strengthened web support brings Flutter closer to the functionality of other cross-platform development platforms, like React Native and Ionic. So it’s an important step for Google, especially given its Chrome-related strength in the web application market. Flutter needs to show it can cover all bases, including the web.

Flutter was written in a programming language called Dart, which compiles to JavaScript. This is key for Flutter’s growing web ambitions, because of course JavaScript rules everything in this current era. As an aside: back in 2010 Google was talking about creating a new language called Dash, which was being pitched as a replacement for JavaScript. What actually got launched was Dart, in 2011, but it wasn’t until 2015 that Google went all-in on on compiling Dart to JavaScript. Not even the might of Google can kill off JavaScript in the modern web.

The problem with Dart is that not many developers use it — certainly in comparison to JavaScript. So this puts Flutter at a disadvantage compared to React Native in particular, which was launched by Facebook in 2015 to complement its popular React JavaScript library.

According to Flutter’s documentation, adding web support “involved implementing Flutter’s core drawing layer on top of standard browser APIs, in addition to compiling Dart to JavaScript, instead of the ARM machine code that is used for mobile applications.”

Cross Developers

Essentially, with Flutter 2, Google is saying that it’s open for business for web developers wanting to build production-ready applications. However, initial feedback from web developers has been mixed.

One of the biggest features of Flutter is hot reloading, which is “a way to update the code in a running application without restarting or resetting the application state.” Not losing state makes for faster development, so it’s a time saver for developers. However, what Flutter calls “stateful hot reload” isn’t currently supported on the web. Instead it offers a “hot restart” for web apps, but this doesn’t remember your state.

The biggest disappointment of Flutter web is definitely no hot reload.

— Luke Pighetti (@luke_pighetti) March 11, 2021

The trouble is, the full hot reloading experience is a feature that competing frameworks offer, as one Reddit user noted:

“I understand that hot reloading is a feature of the dart VM, which is hard to emulate on the web. But if you look at React and Vue, they do offer some extent of hot reloading. For example, it’s possible to edit the style of an App without losing it’s state.”

There have also been complaints about other web tooling in Flutter 2 — such as the widget inspector — and the large bundle size of the code.

All these concerns raise a valid question about Flutter’s web support: was it premature to take off the beta tag?

Flutter vs. React Native

When announcing the stable web support, Google noted that Flutter is best suited for Progressive Web Apps (PWAs), Single Page Apps (SPAs), and bringing existing mobile apps to the web.

In the Flutter Engage virtual event, which accompanied the launch, Google product manager Mariam Hasnany said that “while you can do a lot on the web, Flutter’s initial stable release is best fit for building web applications, not static content websites.”

When it comes down to it, Flutter is a user interface framework and specializes in dynamic design elements — so it’s best suited for web apps that require a rich, interactive UI. The Flutter website puts it this way:

“…text-rich, flow-based, static content such as blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver.”

A related point about Flutter on the web is that it doesn’t support SEO, making it ill-suited to build large content sites. Eric Seidel, engineering director for Flutter, said that “we have plans to add [SEO] support, but it will be awhile yet.”

While Flutter isn’t recommended for building text-rich web apps, React Native is viewed by many developers as a viable option there. Sébastien Lorber, a React expert who is also a contractor at Facebook, said on Twitter that “I still bet on React-Native for many use-cases.” He added that he would choose React Native “for content-centric websites.” But Lorber was also impressed by Flutter 2 and would choose it “for UI intensive web-apps that can download 10mb upfront.”

Conclusion

Despite the teething issues discussed on Reddit and Twitter, Flutter 2 is a good step forward by Google for web support in its cross-platform framework. It was also a necessary step, given that much of Google’s developer energy is driven by the capabilities provided by its dominant web browser, Chrome. It would not be a good look to cede web support in cross-platform development to Facebook.

You get the sense that PWAs will be a focus for Flutter going forward, at least in terms of web support, since the framework is not suitable for text-rich web apps. PWAs are, by definition, web apps with native app-like interactive functionality; and Google has been pushing this technology forward in recent times.

It’s also worth keeping an eye on the ongoing competition between Flutter and React Native — sure, both are open source, but they’re also backed by two web giants. Facebook’s React ecosystem has the upper hand with web developers currently, due to its JavaScript innovations over the past decade. But Google has Chrome and is influential in setting web standards. Both are coveting more cross-platform developers.

InApps is a wholly owned subsidiary of Insight Partners, an investor in the following companies mentioned in this article: Dash.

Feature image via Pixabay.