5 ms·

This is exactly how Flutter (now) works on web - the browser loads a JS/WASM blob, and your app renders everything to a canvas - and you're right, almost everyt

This is exactly how Flutter (now) works on web - the browser loads a JS/WASM blob, and your app renders everything to a canvas - and you're right, almost everything you mention is problematic. There is a time and a place for that paradigm, but it's niche. The lack of SEO alone is usually enough to stop it in its tracks.

deleted 2y ago
[deleted]
chrismorgan 2y ago
Flutter even had a DOM renderer which should in theory have fixed approximately all the issues (I don’t know for sure, I never knowingly encountered anything using it), but they’ve killed it off fairly recently, doubling down on the fundamentally unfixable direction that is the pure-canvas approach.
- brabel 2y ago
  They still seem to have something, from this page: https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility https://docs.flutter.dev/ui/accessibility-and-internationali... * Inspect the HTML tree containing the ARIA attributes generated by Flutter. Wouldn't that help with SEO as well?
  - chrismorgan 2y ago
    That gives you a distinct accessibility tree in the DOM, which is kinda dumb as an approach. One of the reasons for going pure-canvas on the web was supposed to be performance (I don’t think it was ever true, though—only if comparing with a bad DOM implementation), and if you have to enable this accessibility DOM, you’re guaranteeing you’re doing double work. And no, on the web you can’t just do it when you need it: you can’t poll if it’s needed. All you can do in that case is to present screen reader users with a “this page is currently empty, press this button to unbreak it” button. (Aside: I’ve seen that done once. And the button was broken.) But the problems we’re talking about are far broader than “does my screen reader work”. Do my links work properly—Ctrl+Click, middle-click, long press, hover? (This one is fixable with only mild compromise. Those that follow are not.) Does my text render correctly? Can I select it and use my browser’s context menu or other similar tools? Does content scroll properly, at correct rates, with correct inertia, without jank or at least a frame’s latency? It’s these sorts of things that Flutter’s pure-canvas approach cannot fix, and they affect, in smaller ways, a lot more people. I’ve written more specifically about the problems here on HN quite a few times. Search and you’ll find ’em. I really should get down to writing a detailed article about it all at some point… it’s been quite a few years.
    - _bent 2y ago
      No, performance and fidelity are definitely better with the canvas renderers, especially skwasm. Flutter is very inspired by React, but instead of React which does tree diffing to minimize rebuilds, Flutter tries to make rebuilds as cheap as possible instead - for example through its single pass layout algorithm. The issue is that this doesn't map well to the DOM. You can't rebuild cheaply on the DOM because you'd be constantly updating the DOM. And you don't profit from your simpler layout, because you have to implement it in JavaScript and use absolute positioning on all DOM Elements to lay them out. I do agree that this all absolutely sucks for websites, but if you're building an App that is supposed to run in the browser like Rive or Figma, where you're going to override all click handlers anyways, or where where what you're rendering would be too much for the DOM, Flutter Web is pretty ok.
      - dleeftink 2y ago
        I'm sure this is tried (I've done it myself), but a hybrid approach would take best of both worlds; heavy rendering on a canvas, the rest as SVG/DOM elements. Even this relation can be inverted: to speed up SVG interactions, I pre-render complex path and text elements at a sufficient resolution, which are shown during transitions/user interactions, but replaced with the SVG original elements once the render loop settles down again.
      - charrondev 2y ago
        I went and loaded up the flutter web demo on my iPhone 15 Pro https://flutter.github.io/samples/web/material_3_demo/ https://flutter.github.io/samples/web/material_3_demo/ In addition to the pitfalls mentioned like being unable to select text, every interaction including scrolling is noticeably laggy and dropping frames.
        Philpax 2y ago
        Wow, you weren't kidding: same phone and it feels like I'm using a 15-year-old Android. That's rough.
        johnisgood 2y ago
- bflesch 2y ago
  Yeah, the strategic direction of flutter feels like the famous "embrace, extend, extinguish" approach. All the big companies prefer walled gardens.
  - tabinno 2y ago
    Flutter is 109% open source
- rafaelmn 2y ago
  Flutter is unique because it is a cross platform canvas renderer with huge number of components built on top. Sort of, there are libs like QT but nobody wants to deal with C++ for GUI apps, and even the bindings leak C++isms last time I checked. Rendering Flutter to DOM sounds like a huge effort bound to fail on some level - just use React and React native if you are leaning in that direction. Im sure Flutter can add some shims to get basic stuff like navigation working to be more web like.
noduerme 2y ago
Hasn't SEO been dead for like 10 years? It's not as if there's a search engine you can get to the first page on without paying, so why waste ad dollars on stuffing SEO garbage in your page and chasing the algorithm when you can just buy ads, if that's what you need? And does anyone find anything anymore by doing generic web searches anyway?
- taikahessu 2y ago
  It sucks if you are non-profit working on subjects like drug abuse. Or anything that is considered "difficult" for our ad-overlords and thus all the relevant keywords are against ToS.
  - skulk 2y ago
    Not sure what nonprofits you're referring to, but most drug searches are SEO spammed with godawful websites that contain tons of misinformation while reputable sources that actually promote harm reduction like erowid are pushed down.
LelouBil 2y ago
I was excited about Compose Multiplatform Web too, until I realized it also does this : everything in a canvas
torginus 2y ago
I'm ignorant on this - but are there browser APIs that make it possible for the dev to integrate testing and accessibility tools, such as screen readers? If not, this sounds like a major oversight, and basically kills accessibility dead in these software and makes testing pretty painful.
- youngtaff 2y ago
  Yes, browsers expose APIs to accessibility tools
Narretz 2y ago
Wow, they still render to canvas? That's terrible. Just looked at this website: https://payamzahedi.com/toastification/ https://payamzahedi.com/toastification/ Feels janky just when scrolling. This is supposed to be the future? Last time I used a flutter app they didn't even update the url for different screens.
- johnecheck 2y ago
  The goal isn't the wholesale replacement of html webpages. I have a traditional website for SEO and such that links to my Flutter game app on the same domain. It's exactly what the parent described: a way to ship executable code. A lot of features supported for websites don't work, sure. But that's not the point. It's a single build that practically any user on the planet can execute without needing to install something. The idea that an app distribution method needs to natively support every feature and analysis method that works for a website is nonsense. You don't expect all that from every app on the play store, for instance. The browser isn't just for visiting html websites anymore. It's also the app distribution method with the widest reach. On your specific complaints: it's easy to make your screens have different urls. An app that doesn't is built by a novice or lazy developer. Skipping frames while scrolling is a fair complaint. In my experience, flutter is performant enough but always just a little short of the performance I'd like. Definitely an area that could use improvement.
- kevmoo1 2y ago
  It's using a Flutter web build that's over 2 years old. We've gotten a LOT better. Context: I'm a product manager on the team.
- a2128 2y ago
  I'm shocked every time I use a Flutter web app. Not even one of the highest-end desktop GPUs on the market is enough to animate a dark mode toggle at more than a choppy 2fps. In one app with a login page, my password manager fills out the password into the username field, though I'm surprised it's able to fill anything at all. You'll be lucky if you can even select text on the screen or copy a link, though I know some websites would love if they can prevent you from doing that at a technical level. Text editing feels sluggish and doesn't behave the same way as standard web text fields when using advanced keyboard controls. I'm thankful that technologies like Flutter never took off on the web, and I hope they never will.
jauntywundrkind 2y ago
Coopting the web as a low level platform, to be bent into blast utterly non web stuff feels like a gross misdeed to me, that directly violated rfc8890 "the internet is for end users". Flutter or somethint similar maybe possibly perhaps might some day conceivably eventually rebuild enough platform that the major gaps and faults and chasms of it might be less terribly ruinous, but users will never have anywhere near as much agency. User scripting will always be at the extent the developer's enable it. Its terrible to think of the web denigrated to being as closed foreign and black box as regular apps are, would set back human conputing's one little tenous bridge of progress back immeasurably. None the less, theres folks who believe the developer experience trumps all other concerns, and are still full steam ahead on canvas based systems. One of those people is Ian Hixie, former editor of the HTML specification, who authored what is sort of the manifesto of the canvas-based effort, Towards a Modern Stack, https://news.ycombinator.com/item?id=34612696 https://news.ycombinator.com/item?id=34612696 https://docs.google.com/document/d/1peUSMsvFGvqD5yKh3GprskLC3KVdAlLGOsK6gFoEOD0/ https://docs.google.com/document/d/1peUSMsvFGvqD5yKh3GprskLC... Plz plz no.
- Apocryphon 2y ago
  Sounds like his viewpoint is someone burned out by all of his prior work coming to seeming naught https://news.ycombinator.com/item?id=34622514 https://news.ycombinator.com/item?id=34622514

deleted 2y ago

[deleted]

chrismorgan 2y ago

Flutter even had a DOM renderer which should in theory have fixed approximately all the issues (I don’t know for sure, I never knowingly encountered anything using it), but they’ve killed it off fairly recently, doubling down on the fundamentally unfixable direction that is the pure-canvas approach.

brabel 2y ago
They still seem to have something, from this page: https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility https://docs.flutter.dev/ui/accessibility-and-internationali... * Inspect the HTML tree containing the ARIA attributes generated by Flutter. Wouldn't that help with SEO as well?
- chrismorgan 2y ago
  That gives you a distinct accessibility tree in the DOM, which is kinda dumb as an approach. One of the reasons for going pure-canvas on the web was supposed to be performance (I don’t think it was ever true, though—only if comparing with a bad DOM implementation), and if you have to enable this accessibility DOM, you’re guaranteeing you’re doing double work. And no, on the web you can’t just do it when you need it: you can’t poll if it’s needed. All you can do in that case is to present screen reader users with a “this page is currently empty, press this button to unbreak it” button. (Aside: I’ve seen that done once. And the button was broken.) But the problems we’re talking about are far broader than “does my screen reader work”. Do my links work properly—Ctrl+Click, middle-click, long press, hover? (This one is fixable with only mild compromise. Those that follow are not.) Does my text render correctly? Can I select it and use my browser’s context menu or other similar tools? Does content scroll properly, at correct rates, with correct inertia, without jank or at least a frame’s latency? It’s these sorts of things that Flutter’s pure-canvas approach cannot fix, and they affect, in smaller ways, a lot more people. I’ve written more specifically about the problems here on HN quite a few times. Search and you’ll find ’em. I really should get down to writing a detailed article about it all at some point… it’s been quite a few years.
  - _bent 2y ago
    No, performance and fidelity are definitely better with the canvas renderers, especially skwasm. Flutter is very inspired by React, but instead of React which does tree diffing to minimize rebuilds, Flutter tries to make rebuilds as cheap as possible instead - for example through its single pass layout algorithm. The issue is that this doesn't map well to the DOM. You can't rebuild cheaply on the DOM because you'd be constantly updating the DOM. And you don't profit from your simpler layout, because you have to implement it in JavaScript and use absolute positioning on all DOM Elements to lay them out. I do agree that this all absolutely sucks for websites, but if you're building an App that is supposed to run in the browser like Rive or Figma, where you're going to override all click handlers anyways, or where where what you're rendering would be too much for the DOM, Flutter Web is pretty ok.
    - dleeftink 2y ago
      I'm sure this is tried (I've done it myself), but a hybrid approach would take best of both worlds; heavy rendering on a canvas, the rest as SVG/DOM elements. Even this relation can be inverted: to speed up SVG interactions, I pre-render complex path and text elements at a sufficient resolution, which are shown during transitions/user interactions, but replaced with the SVG original elements once the render loop settles down again.
    - charrondev 2y ago
      I went and loaded up the flutter web demo on my iPhone 15 Pro https://flutter.github.io/samples/web/material_3_demo/ https://flutter.github.io/samples/web/material_3_demo/ In addition to the pitfalls mentioned like being unable to select text, every interaction including scrolling is noticeably laggy and dropping frames.
      - Philpax 2y ago
        Wow, you weren't kidding: same phone and it feels like I'm using a 15-year-old Android. That's rough.
      - johnisgood 2y ago
bflesch 2y ago
Yeah, the strategic direction of flutter feels like the famous "embrace, extend, extinguish" approach. All the big companies prefer walled gardens.
- tabinno 2y ago
  Flutter is 109% open source
rafaelmn 2y ago
Flutter is unique because it is a cross platform canvas renderer with huge number of components built on top. Sort of, there are libs like QT but nobody wants to deal with C++ for GUI apps, and even the bindings leak C++isms last time I checked. Rendering Flutter to DOM sounds like a huge effort bound to fail on some level - just use React and React native if you are leaning in that direction. Im sure Flutter can add some shims to get basic stuff like navigation working to be more web like.

noduerme 2y ago

Hasn't SEO been dead for like 10 years? It's not as if there's a search engine you can get to the first page on without paying, so why waste ad dollars on stuffing SEO garbage in your page and chasing the algorithm when you can just buy ads, if that's what you need? And does anyone find anything anymore by doing generic web searches anyway?

taikahessu 2y ago
It sucks if you are non-profit working on subjects like drug abuse. Or anything that is considered "difficult" for our ad-overlords and thus all the relevant keywords are against ToS.
- skulk 2y ago
  Not sure what nonprofits you're referring to, but most drug searches are SEO spammed with godawful websites that contain tons of misinformation while reputable sources that actually promote harm reduction like erowid are pushed down.

LelouBil 2y ago

I was excited about Compose Multiplatform Web too, until I realized it also does this : everything in a canvas

torginus 2y ago

I'm ignorant on this - but are there browser APIs that make it possible for the dev to integrate testing and accessibility tools, such as screen readers? If not, this sounds like a major oversight, and basically kills accessibility dead in these software and makes testing pretty painful.

youngtaff 2y ago
Yes, browsers expose APIs to accessibility tools

Narretz 2y ago

Wow, they still render to canvas? That's terrible. Just looked at this website: https://payamzahedi.com/toastification/ https://payamzahedi.com/toastification/ Feels janky just when scrolling. This is supposed to be the future? Last time I used a flutter app they didn't even update the url for different screens.

johnecheck 2y ago
The goal isn't the wholesale replacement of html webpages. I have a traditional website for SEO and such that links to my Flutter game app on the same domain. It's exactly what the parent described: a way to ship executable code. A lot of features supported for websites don't work, sure. But that's not the point. It's a single build that practically any user on the planet can execute without needing to install something. The idea that an app distribution method needs to natively support every feature and analysis method that works for a website is nonsense. You don't expect all that from every app on the play store, for instance. The browser isn't just for visiting html websites anymore. It's also the app distribution method with the widest reach. On your specific complaints: it's easy to make your screens have different urls. An app that doesn't is built by a novice or lazy developer. Skipping frames while scrolling is a fair complaint. In my experience, flutter is performant enough but always just a little short of the performance I'd like. Definitely an area that could use improvement.
kevmoo1 2y ago
It's using a Flutter web build that's over 2 years old. We've gotten a LOT better. Context: I'm a product manager on the team.
a2128 2y ago
I'm shocked every time I use a Flutter web app. Not even one of the highest-end desktop GPUs on the market is enough to animate a dark mode toggle at more than a choppy 2fps. In one app with a login page, my password manager fills out the password into the username field, though I'm surprised it's able to fill anything at all. You'll be lucky if you can even select text on the screen or copy a link, though I know some websites would love if they can prevent you from doing that at a technical level. Text editing feels sluggish and doesn't behave the same way as standard web text fields when using advanced keyboard controls. I'm thankful that technologies like Flutter never took off on the web, and I hope they never will.

jauntywundrkind 2y ago

Coopting the web as a low level platform, to be bent into blast utterly non web stuff feels like a gross misdeed to me, that directly violated rfc8890 "the internet is for end users". Flutter or somethint similar maybe possibly perhaps might some day conceivably eventually rebuild enough platform that the major gaps and faults and chasms of it might be less terribly ruinous, but users will never have anywhere near as much agency. User scripting will always be at the extent the developer's enable it. Its terrible to think of the web denigrated to being as closed foreign and black box as regular apps are, would set back human conputing's one little tenous bridge of progress back immeasurably. None the less, theres folks who believe the developer experience trumps all other concerns, and are still full steam ahead on canvas based systems. One of those people is Ian Hixie, former editor of the HTML specification, who authored what is sort of the manifesto of the canvas-based effort, Towards a Modern Stack, https://news.ycombinator.com/item?id=34612696 https://news.ycombinator.com/item?id=34612696 https://docs.google.com/document/d/1peUSMsvFGvqD5yKh3GprskLC3KVdAlLGOsK6gFoEOD0/ https://docs.google.com/document/d/1peUSMsvFGvqD5yKh3GprskLC... Plz plz no.

Apocryphon 2y ago
Sounds like his viewpoint is someone burned out by all of his prior work coming to seeming naught https://news.ycombinator.com/item?id=34622514 https://news.ycombinator.com/item?id=34622514