Flutter Web: A Fractal of Bad Design

But can Google index what's in a Flutter app?

People say stuff like this all the time but the truth is that Google as a company has very little direction at the scale of niche software like this. Google as an organization is not pushing Flutter in any meaningful capacity or trying to convince everyone to start adopting it. As a sibling comment asked, how would you expect a search engine giant to go for something that makes the web less indexable? The truth is that Google is a massive company with hundreds of teams that have 0 shared interest in any of their products and operate almost entirely independently.

Seconding.

And that's why, unlike some other comments, I worry it will gain traction. Publishers of all kind - news companies, streaming companies, social media - will be more than happy to adopt technologies that take away control over the experience from end users. After all, most of the web already looks like glorified print posters and lifestyle magazines. With Flutter, they'll have the ability to make it impossible for end-users to turn on Reader Mode or remove ads, or branding. The site will look exactly the way the UX experts designed them to, simplifying all kinds of data-driven user abuse.

Now of course, they could've done that already without Flutter. But they didn't, because it's too hard. Regular HTML+CSS+JS are the default. It's what has the mindshare, it's what the devs on the market do, it's what works for everyone, ever since Flash died. It's already good enough to control majority of end-users, so there's no marginal benefit in trying to invent an even more restrictive form of content delivery. It's not worth the time spent fixing bugs and cross-device inconsistencies. But now add a player like Google - with money, mass, and clout - pushing such new solution, and it may be enough. God knows, webdev community just embraces everything Google releases.

I doubt that's true. It's a minor side thing of a project, it's easily explained as done this way because it's the easiest, it's unclear it actually makes adblocking that much harder. It seems unlikely that this is a targeted strategy, companies that size generally suck at that.

Sorry to take your example too literally, but I suspect ad blockers still might work, because at the end, it's really just JavaScript. The network panel still shows everything the app does. Plus when I see the source code, it's still just transpiled js, and even uses standard js libraries, like Google analytics, which are not written in dart.

I specialize in runtime code modification ecosystems who happens to work on a (non-Web) Flutter app, and I don't see any intrinsic reason why Flutter will be somehow fundamentally worse for ad blocking than HTML/JavaScript, simply because of its rendering technique: the issue should only come down to how the code is structured and executed and how much of the semantics can be recovered at runtime. So, on such note, I have not examined the output of the Flutter Web compiler to see if it is ridiculously obfuscated... have you? Again, it isn't at all the case that the way it renders matters: it only matters how easy the behavior is to automatically and safely edit. (Frankly, the end game on ads is AI that does its thing on the resulting view: nothing else makes any sense, as it involves people who are incentivized to not help you to choose to help you.)

How though? All of the UI is rendered in a canvas element. This would break most existing screen readers and accessibility tools which rely on properly marked up and parseable HTML. I would suppose that the Flutter devs could provide some sort of bridge that would allow this to work (although I'm not sure how, unless the webkit team also steps in), but seems like an incredible amount of work and IMO with Google's history more likely to be abandoned than actually implemented.

Yes, I’m hoping it’s running in “dev mode” or something? Because even just scrolling on the latest iPhone was extremely low FPS and felt broken

Yes, the real criticism of this article should have focused on the hard-to-fix problem of performance because it seemed absolutely abysmal to me -- multiple seconds before the page showed up as anything but black on both Firefox & Chrome.

> In fact, I think a platform like this could good for accessibility if it handles it properly instead of leaving it up to fallible developers.

Fluttercs CanvasKit will never be good for accessibility because it will never work with the tools user's use on the rest of the web. Tools expect hypertext, expect a dom, & smashing that on the rocks & turning the web into VNCh no matter how hard the team tries- is going to result in the kind of accessibility that matches well & works across the rest of the web.

You won't get it automatically foolproof, but you'll have at least a good chunk of the information you could expose, and have extension places for developers to easily inform a HTML version. I'm not familiar with the accessibility APIs on mobile, but I presume some of this would also be useful for them.

Alas a bunch of absolutely positioned elements wasn't enough. The team went full "the web is now VNC" mode.

Thank you. Unbelievable how many people would rather no one try anything new at all.

This article and the responses show the worst of HN -- bad faith attacks, no attempt to give the benefit of the doubt, no engagement with the underlying vision, unwarranted pessimism.

Why not ask what niche this tech excels in, or what impact a refined version could have? Most projects fail -- that's obvious -- but how might this one succeed?

In short, why so much negativity? The more you default to these views, the likelier it is you and everyone around you will never accomplish anything.

This is the poison that is destroying Hacker News and likewise many startups before they have even been imagined.

Author here, I'll try and write a response to your points.

Yes the post is cynical, I'm the first to admit that. The topic makes me angry because I think we should expect better of frameworks for the web. As a whole Flutter Web moves us in the wrong direction, towards a less open, less standardised, and less transparent web. On the point of accessibility, yes the web didn't start out accessible and in fact we are still struggling with this to this day. As such, a new technology that is a regression in terms of accessibility is a step backwards in 2020 and solid accessiiblity support should be a basic goal of any such technology.

Regarding aria roles, it might be possible to improve Flutter Web by using it but ironically the HTML it generates is so inscrutable that I find it hard to understand if that's a simple fix or a complete overhaul. The general idea of Flutter, to ship an exact pixel by pixel replication of the UI across all platforms, seems incompatible with the open and flexible nature of the web.

> are people really expecting CSS restyling tricks and Vimium to work in modern web apps like Google Drive or Discord?

Yes, that's the beauty of the web as an open and standardised platform after all. The fact the people can experience it in a way that best suites their needs, for accessibility reasons or otherwise, is amazing. Flutter Web is a clear regression in this regard.

> (...)is preceded by a large warning stating that this is a beta and(...)

I mentioned this quite early in the piece, but I am unsure if the issues with Flutter are so fundamental that it would be hard to fix without a complete overhaul or if in fact it would be possible at all. If Flutter Web leaves beta generating semantic and accessible HTML I'll be the first to applaud it, but it doesn't seem likely.

> are people really expecting CSS restyling tricks and Vimium to work in modern web apps like Google Drive or Discord

What's the problem? Modern web browsers are already dumbed down, now you want web pages to be dumbed down too?

Also let's be honest I'm not sure flutter web really matters.

Flutter is a cross-paltform app framework. If you have a app on all platforms you (the company) care about the web app would often become just a seconds class citizen which you (the company) only have as some users are hesitant to install apps and some few users have some exotic platform or need access during holidays after their laptop was stolen etc. Anyway from a business POV a second/third class citizen you don't want to spend much money on. So flutter web would be good enough (once it's out of beta, at which point text selection likely will somewhat work).

But if you ever have a web app as first class target you probably would never go for flutter anyway.

My prediction:

- Flutter will long term be come the new default native way to write apps on google phones. Dart will very slowly replace java.

- Flutter will become a serious way to write the UI of apps on Linux, through maybe not as big as Qt/Gtk. But likely a common choice companies which target Linux as 2nd/3rd class citizen.

- Companies mainly targeting Android will use flutter for their iOs, Windows, Linux, Web apps to save cost.

- Google pushes some new Web API's around accessibility to provide a better flutter on web experience. Making it again harder for non chrome browsers, through in this case not intentionally.

But the issue is that people are considering flutter for mobile to build decent user experiences, which it cannot achieve being flash player like

The main value is to target multiple platforms at once.

Otherwise there's no point in choosing Flutter to develop for the web.

I don't think so.

A major difference is that as far as I can tell flutter is long term meant to be the main way to write native Android apps.

Flutter on web has this kind of problem due to how they handle text differently then a HTML does and HTML provides no way to customize it to the way they need it.

Flutter on Android, iOs, Linux, etc. won't have this problem.

Most modern UI's render with a graphics API like OpenGl (ES), Firefox does so for HTML.

Just reminds me of flash in general. It was effectively a reliable cross-browser 'vector canvas' that was a dream for developers but a completely inaccessible, closed system to everyone else. No doubt they will get there with performance on flutter, but the decade-old concerns per flash's demise will be harder to address.

In Clutter's CanvasKit there is just a canvas, pushing pixels in your face. Be glad you got a hard to use DOM, that's better than the abomination that is coming.

'We wrote this cross platform framework, now we must bend to break the web to fit it.'

This is what the author was addressing with "It’s worth noting that Flutter for Web is currently in beta and the problems I am about to detail could be addressed. However, I believe these issues are fundamental to Flutter’s design choices so I feel confident in my criticism."

I agree, this is a fundamental problem they are probably unable to fix.

It was always my impression that rendering to a canvas was the quick n dirty way to get something running on the web, not the long term plan for flutter

It does. It says that designers and product managers don't care to bound themselves by reality.

It is a generic accessibility problem with any UI toolkit that goes beyond the "native toolchain". However, customizing everything from drawing layer is the only way to achieve any kind of UI consistency, especially on mobile. You can go very far with React Native approach (using native widgets), but there are limits.

There are many failed attempts to draw UI oneself. But ultimately, it is because development cost (you need to implement a lot of widgets, supporting new OS capabilities in on-going basis). If Google can support these development cost, it can be done.

Accessibility issues can be solved for these toolkits. OS often exposed some kind of the API to achieve that. For web, you certainly can have hidden elements to support accessibility. Again, it is just a matter of development cost.

As you said, nobody should seriously mistake Flutter app with semantic web. Most of the SPA online will break if you style CSS differently or disable Javascript, this is just the world we live in. The missing of semantic information for Flutter app should be treated as the generic accessibility problem, not some resistance to the semantic web vision.

It's not at all about vim extensions.

It's about people with visual or motoric impairments using the web.

I think you're missing a lot when you start comparing the web to vim extensions, IMO of course.

Yes, mobile users will never try to highlight and select text to "search with Google" or copy to paste into another application. That's a pretty huge design flaw. I highlight text all the time mate. Pretty common feature for some of us who read on our fondle-slabs.