Live data from Hacker News

You might want to build your WebApp in Canvas instead of HTML

hivekit.io

31–40 of 59 posts

Re: You might want to build your WebApp in Canvas instead of HTML

#31
Please don't do this.

Native controls have dozens to hundreds of subtle UI interactions. Consider a text input element. On macos there are text shortcuts - cmd+A to select all. cmd+left / right to go to the next or previous word. Page up / page down. Home / end. Spell check. A right click menu with about 10 more options, including OS based text services. Tapping on a text input element on ios or android will pull up the native on-screen keyboard, configured in system settings. Every major OS version, the UI changes in small and subtle ways.

You simply can't reimplement this functionality in the web browser. Browser APIs don't let you intercept a lot of the keyboard shortcuts you need. You don't have access to macos text services, or the native iOS keyboard UI.

Some people try to reimplement this stuff in the browser, but it always feels horrible to use. Nearly native, but laggy. Nothing looks quite right. You can't select text on the page properly. Fonts render slightly wrong. I have muscle memory for keyboard shortcuts that don't work. I hate it.

Re: You might want to build your WebApp in Canvas instead of HTML

#32
> The document in Google Docs is a Canvas.

This is only mostly true, and no justification at that. I’ll just quote myself from a couple of years ago https://news.ycombinator.com/item?id=42253177>:

> Google Docs isn’t pure-canvas: they only switched their document area to use it for layout. Text rendering is still browser (necessary to keep performance even close), and all the rest of the UI is still DOM. Having thought extensively about it, I cannot come up with any advantage to the approach they’ve taken—neither the performance¹ nor the consistency² angles make any sense, and the product is actively worse because of it³. I’ve written more about it on HN at times, skim https://hn.algolia.com/?query=chrismorgan%20google%20docs&ty... for more. Seriously, having thought about it very carefully and reviewed the matter several times over the years, I honestly believe that they lied in their justifications.

I haven’t ever examined Google Sheets closely, but it looks to use a similar approach, but worse in scrolling (it’s very obnoxious compared with native on my device—lags fiercely, and breaks inertia).

Excel I can’t comment on.

Docs should definitely have stayed HTML.

Sheets and Excel should probably be HTML, or possibly SVG.

For Hivekit’s scheduling interface as shown, I’d say most of the area should be HTML, but that I wouldn’t object to canvas or SVG for the centre area.

Now, for their reasons.

• Speed: at the level of complexity they’re talking about, this is flat nonsense. Yes, the browser does more than necessary, but a lot of effort has gone into making it perform far better than it has any right to, and DOM performance is not your bottleneck. (I mean by this that, if it looks like it is, it would be if you did the same thing with canvas too.) And as soon as it comes to things like scrolling, you cannot perform or behave as well as the browser, because the browser is a compositor and you can’t work at that level. Even in the rest, unless the entire thing is owned by a single small team skilled at saying “no” and at implementing everything from scratch rather than leaning on others’ libraries, your code is very unlikely to do better than the browser.

• Control: it undermines its own point completely by talking of scrolling. You must use real DOM for the scrolling, or else it will be horrible to use on a reasonably large fraction of devices. Note how the likes of Google Docs and Sheets use real DOM and render slices with the adding and removing and such that it criticises.

• Consistency: you only get this if you do all the text rendering yourself from first principles, which Google Docs and Sheets don’t do because it performs terribly. So no, this one falls flat too.

(I’ll continue more later, got to go again.)

Re: You might want to build your WebApp in Canvas instead of HTML

#33
post #29
post #9

Canvas is a last resort if you absolutely cannot build the thing any other way. When you use canvas you're giving up on not just accessibility but also optimizations that the browser does for you transparently when you use the native render tree. There's no guarantee that your app will be faster in canvas, it could easily be slower. Do you really think you can beat the browser's C++ by writing code in a language that…

You’re not “giving up” on accessibility. You’re just not getting it “for free” — though it was never free to begin with. When you’re dealing with things like spreadsheet viewers, disengaging from the DOM for sighted users can actually make accessibility simpler.

> disengaging from the DOM for sighted users can actually make accessibility simpler.

Do you have any examples? In my experience, a lot of software written like this just doesn't work with screen readers at all.

Re: You might want to build your WebApp in Canvas instead of HTML

#34
post #9

Canvas is a last resort if you absolutely cannot build the thing any other way. When you use canvas you're giving up on not just accessibility but also optimizations that the browser does for you transparently when you use the native render tree. There's no guarantee that your app will be faster in canvas, it could easily be slower. Do you really think you can beat the browser's C++ by writing code in a language that…

Can WASM write to Canvas though?

WASM can call javascript, and javascript can call canvas. You can use JS bridges to let WASM do more or less anything.

Re: You might want to build your WebApp in Canvas instead of HTML

#36

Earlier quoted context omitted.

YouTube too. And I'm not even talking about the video player. Displaying a 4x4 grid of thumbnails seems to be some kind of herculean task.

I think some of the Youtube thumbnail stuff is lazy-loaded, so depending on the speed of your browser and connection it can just hang there doing nothing for a while.

5800X3D and a 1gig symmetric line. I really don't know how much more system resource it wants.

Re: You might want to build your WebApp in Canvas instead of HTML

#38

The dev tools in the browser become much more useless when you draw everything in a canvas. It's gonna be sad when everyone starts using frameworks that draw on canvases. Arguably more sad than when Webassembly came. One could probably write new dev tools for those frameworks though. I also imagine this will be a big setback for web accessibility.

yes, and a big setback for the companies that do this when all the accessibility lawsuits hit them.

Re: You might want to build your WebApp in Canvas instead of HTML

#39
post #31

Please don't do this. Native controls have dozens to hundreds of subtle UI interactions. Consider a text input element. On macos there are text shortcuts - cmd+A to select all. cmd+left / right to go to the next or previous word. Page up / page down. Home / end. Spell check. A right click menu with about 10 more options, including OS based text services. Tapping on a text input element on ios or android will pull up…

Read the post. The author talks explicitly about when canvas is useful (unsurprisingly, for canvas shaped apps) versus when to use native DOM elements.

Re: You might want to build your WebApp in Canvas instead of HTML

#40

People who work on web browsers have ranted that HTML/CSS isn't a very natural interface into the engine, so it's inefficient and has nasty edge cases. I know nothing about browser engines but do find CSS awkward as a user when I'm not making a plaintext website, so have been relying heavily on React for side projects. Been thinking about doing a toy project where I try to build my own alternative to HTML/CSS that ru…

That's basically Flutter.
Post reply on HN