5 ms·

I wish the dart/flutter team would focus on improving dart for web (e.g. by updating/fixing the JS bindings) instead of chasing flutter for web which seems like

I wish the dart/flutter team would focus on improving dart for web (e.g. by updating/fixing the JS bindings) instead of chasing flutter for web which seems like a long shot and rather hacky (referring to using the canvas for rendering content)

vesinisa 6y ago
> using the canvas for rendering content This sounds like Flash all over again. Let me guess - no native text select, copy & paste supported? Scrolling is "wrong" in a subtle way?
- spiderfarmer 6y ago
  Tie it in with AMP and you have the webdev cocktail from hell.
- timsneath 6y ago
  We haven't reached perfection yet (that's why we're still in beta), but our goal is to be _very_ different to Flash in these kinds of areas. Here's an example of text fields: https://gallery.flutter.dev/#/demo/text-field https://gallery.flutter.dev/#/demo/text-field Right-click and you have access to the browser context menu; choose Inspect and you can see a <textarea> or <input> control.
  - sciurus 6y ago
    I loaded that page in both Chrome and Firefox Preview on a Pixel 3a and switching between text inputs or scrolling feels quite janky
  - vesinisa 6y ago
    Frankly that feels exactly like a Flash page. Natively selecting text content isn't supported on either Firefox or Chrome on Android (apart from within inputs). Scrolling is broken ("yanky"). Flutter for Web further feels like a nightmare for accessibility. I tried enabling the native Google screenreader on my device. It only says "No text found at that location" when I try to read any of the Flutter demo pages in either Chrome or Firefox. In addition to being extremely hostile to people with disabilities, it will soon actually be illegal to build new products with accessibility-hostile tech like Flutter for Web for large parts of the European public and private sector: https://en.wikipedia.org/wiki/European_Accessibility_Act https://en.wikipedia.org/wiki/European_Accessibility_Act > we're still in beta From these viewpoints that feels more like an early alpha product. In 2020 no accessibility support is a non-starter.
    - mwcampbell 6y ago
      About accessibility, you need to find the "Enable accessibility" button and press it first. It's not visible on screen, but you should be able to find it with your screen reader's navigation commands (e.g. swiping left and right on a touch device). Yeah, it kind of sucks that the user has to turn accessibility on, and for that reason alone, I will never willingly develop a web application with Flutter. But at least it does support accessibility.
      - vesinisa 6y ago
        Right, to be fair I was able to enable the accessibility mode with your instructions. This way, the text content is indeed accessible to a screen reader. However, navigation in any of the demo apps with a screen reader was completely broken. So a user might be able to read a single page but not discover further content. With normal web pages we usually have <a> elements that enable navigation regardless of visual gimmicks.
  - metta2uall 6y ago
    That's really cool but I think all text, such as "Please enter only alphabetical characters", should be selectable. For example someone may want to copy & paste it into a bug report.
  - nl 6y ago
    https://gallery.flutter.dev/#/fortnightly https://gallery.flutter.dev/#/fortnightly Basic features like selecting the text doesn't work.
    - _pmf_ 6y ago
      "Flutter allows content providers to protect their IP by not allowing text theft out of the box"
  - lenkite 6y ago
    The gallery apps don't even support the browser back button after going into a detail page. I guess this is still alpha stuff presently.
  - tomc1985 6y ago
    That demo runs horribly on Firefox. And clicking around seems to completely ignore my back button. And hotspots didnt change to the finger cursor. It looked pretty slick, except for those points. Oh well...
    - johnday 6y ago
      It's also super laggy for me on Chrome.
  - dmitriid 6y ago
    Don't kid yourselves. Web target is very much early alpha for Dart. There are so many obvious problems with it: - Everything relies on 1500 nested custom elements with hardcoded transforms to put them in place - This breaks default browser interaction with the page entirely. Because what may look like a page is actually a bunch of absolutely positioned controls with absolutely positioned canvas inside them. - Scrolling, one of the most important things in a browser, is broken. It's janky and slow (manually re-implemented?). I'm guessing containers have to be explicitly marked as scrollable with correct sizes, because resizing the browser window does not make content scrollable (try it with the demo you linked). - Text is broken. Because it's rendered onto a canvas. So, all text interactions + accessibility is broken. Fonts are rendered incorrectly. I mean, on the demo page you can't even copy code other than through the "Copy All" button. - Navigation is broken. Navigating the demo apps (which have more than one page) is not reflected in the url, so the back/forward buttons are broken - Keyboard navigation is broken. Nearly none of the elements can be tabbed to. Except some buttons in demo pages. I guess they are explicitly marked as such? - When elements can be navigated to by keyboard, they can only be activated by Spacebar. Even though Enter also exists. I'm pretty sure forms cannot be submitted by pressing enter, either. - iOS-style date pickers are clipped in Safari - 2D transformations demo is broken in Safari It's just me spending five minutes on the demo site. The effort is certainly commendable. It's not beta yet. It's possible you may want to scrap this and go the Figma route. They implemented their own rendering engine in WebGL: https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/ https://www.figma.com/blog/building-a-professional-design-to... -
- yesimahuman 6y ago
  Yea, Flutter Web isn’t viable and likely never will be. The approach will require re-implementing browser primitives (like copy paste) which means you’re always going to need to ship a ton of JS to clients which makes it antithetical to the PWA approach. EDIT: thanks for the downvote. But you don’t have to take my word for it, this sentiment is (privately) shared by Googlers themselves working on Chrome and PWAs.
  - yxhuvud 6y ago
    Om The flip side, modern javascript frameworks seems to like to reinvent the basic primitives as well (based on how often my back button is broken), so I'm not certain that will be a deal-breaker.
axegon_ 6y ago
+1 on this one. I've fiddled with angular dart for instance and tbh as someone who is horrible with doing frontend and hates js with a passion, this was enjoyable. Yet the release of the newer version[0] is taking forever. [0] https://github.com/dart-lang/angular/pull/1892 https://github.com/dart-lang/angular/pull/1892

vesinisa 6y ago

> using the canvas for rendering content This sounds like Flash all over again. Let me guess - no native text select, copy & paste supported? Scrolling is "wrong" in a subtle way?

spiderfarmer 6y ago
Tie it in with AMP and you have the webdev cocktail from hell.
timsneath 6y ago
We haven't reached perfection yet (that's why we're still in beta), but our goal is to be _very_ different to Flash in these kinds of areas. Here's an example of text fields: https://gallery.flutter.dev/#/demo/text-field https://gallery.flutter.dev/#/demo/text-field Right-click and you have access to the browser context menu; choose Inspect and you can see a <textarea> or <input> control.
- sciurus 6y ago
  I loaded that page in both Chrome and Firefox Preview on a Pixel 3a and switching between text inputs or scrolling feels quite janky
- vesinisa 6y ago
  Frankly that feels exactly like a Flash page. Natively selecting text content isn't supported on either Firefox or Chrome on Android (apart from within inputs). Scrolling is broken ("yanky"). Flutter for Web further feels like a nightmare for accessibility. I tried enabling the native Google screenreader on my device. It only says "No text found at that location" when I try to read any of the Flutter demo pages in either Chrome or Firefox. In addition to being extremely hostile to people with disabilities, it will soon actually be illegal to build new products with accessibility-hostile tech like Flutter for Web for large parts of the European public and private sector: https://en.wikipedia.org/wiki/European_Accessibility_Act https://en.wikipedia.org/wiki/European_Accessibility_Act > we're still in beta From these viewpoints that feels more like an early alpha product. In 2020 no accessibility support is a non-starter.
  - mwcampbell 6y ago
    About accessibility, you need to find the "Enable accessibility" button and press it first. It's not visible on screen, but you should be able to find it with your screen reader's navigation commands (e.g. swiping left and right on a touch device). Yeah, it kind of sucks that the user has to turn accessibility on, and for that reason alone, I will never willingly develop a web application with Flutter. But at least it does support accessibility.
    - vesinisa 6y ago
      Right, to be fair I was able to enable the accessibility mode with your instructions. This way, the text content is indeed accessible to a screen reader. However, navigation in any of the demo apps with a screen reader was completely broken. So a user might be able to read a single page but not discover further content. With normal web pages we usually have <a> elements that enable navigation regardless of visual gimmicks.
- metta2uall 6y ago
  That's really cool but I think all text, such as "Please enter only alphabetical characters", should be selectable. For example someone may want to copy & paste it into a bug report.
- nl 6y ago
  https://gallery.flutter.dev/#/fortnightly https://gallery.flutter.dev/#/fortnightly Basic features like selecting the text doesn't work.
  - _pmf_ 6y ago
    "Flutter allows content providers to protect their IP by not allowing text theft out of the box"
- lenkite 6y ago
  The gallery apps don't even support the browser back button after going into a detail page. I guess this is still alpha stuff presently.
- tomc1985 6y ago
  That demo runs horribly on Firefox. And clicking around seems to completely ignore my back button. And hotspots didnt change to the finger cursor. It looked pretty slick, except for those points. Oh well...
  - johnday 6y ago
    It's also super laggy for me on Chrome.
- dmitriid 6y ago
  Don't kid yourselves. Web target is very much early alpha for Dart. There are so many obvious problems with it: - Everything relies on 1500 nested custom elements with hardcoded transforms to put them in place - This breaks default browser interaction with the page entirely. Because what may look like a page is actually a bunch of absolutely positioned controls with absolutely positioned canvas inside them. - Scrolling, one of the most important things in a browser, is broken. It's janky and slow (manually re-implemented?). I'm guessing containers have to be explicitly marked as scrollable with correct sizes, because resizing the browser window does not make content scrollable (try it with the demo you linked). - Text is broken. Because it's rendered onto a canvas. So, all text interactions + accessibility is broken. Fonts are rendered incorrectly. I mean, on the demo page you can't even copy code other than through the "Copy All" button. - Navigation is broken. Navigating the demo apps (which have more than one page) is not reflected in the url, so the back/forward buttons are broken - Keyboard navigation is broken. Nearly none of the elements can be tabbed to. Except some buttons in demo pages. I guess they are explicitly marked as such? - When elements can be navigated to by keyboard, they can only be activated by Spacebar. Even though Enter also exists. I'm pretty sure forms cannot be submitted by pressing enter, either. - iOS-style date pickers are clipped in Safari - 2D transformations demo is broken in Safari It's just me spending five minutes on the demo site. The effort is certainly commendable. It's not beta yet. It's possible you may want to scrap this and go the Figma route. They implemented their own rendering engine in WebGL: https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/ https://www.figma.com/blog/building-a-professional-design-to... -
yesimahuman 6y ago
Yea, Flutter Web isn’t viable and likely never will be. The approach will require re-implementing browser primitives (like copy paste) which means you’re always going to need to ship a ton of JS to clients which makes it antithetical to the PWA approach. EDIT: thanks for the downvote. But you don’t have to take my word for it, this sentiment is (privately) shared by Googlers themselves working on Chrome and PWAs.
- yxhuvud 6y ago
  Om The flip side, modern javascript frameworks seems to like to reinvent the basic primitives as well (based on how often my back button is broken), so I'm not certain that will be a deal-breaker.

axegon_ 6y ago

+1 on this one. I've fiddled with angular dart for instance and tbh as someone who is horrible with doing frontend and hates js with a passion, this was enjoyable. Yet the release of the newer version[0] is taking forever. [0] https://github.com/dart-lang/angular/pull/1892 https://github.com/dart-lang/angular/pull/1892