4 ms·

On the other hand you have Figma and Google Docs as examples of canvas-based applications that work well enough. I admit there are additional challenges to usin

On the other hand you have Figma and Google Docs as examples of canvas-based applications that work well enough. I admit there are additional challenges to using egui on a Web context, but when you're building a highly interactive application (!), the benefits can outweigh the drawbacks. When building DOM-based applications that require frequent updates I've always ended up working around browser limitations in awkward ways, e.g. minimizing re-rendering by using redux's relesect. I decided to use egui because I get to use Rust for the entire stack, but also because it lets me ship a native app without an entire (slow to init) browser.

chrismorgan 4y ago
I can’t speak about Figma, never having used it. Google Docs I have just now tried. It isn’t like egui. egui throws away everything the browser gives it, other than a text input element and a canvas element, and does all the rendering itself and dumps it to the canvas as a bitmap. Google Docs is full DOM for everything other than rendering the document, and it still uses the browser’s text layout and painting facilities. (I say this because I have my browser set to only use my chosen fonts—so for English text, there are only the default font, serif, sans-serif and monospace—and I observe that it renders and shapes everything in my chosen default font, and am mildly disappointed it doesn’t even do a sane fallback, e.g. “Courier New” to monospace, and “Sans Serif” to sans-serif.) Almost all of my criticisms of the egui approach are avoided. Scrolling works fine, because it’s using the DOM for that, so it’s just normal scrolling. Links work fine, because it uses normal links (these are in tooltip-like things when you move the cursor to the link in the normal text flow). (I retract my remark about mobile-style pinch zoom not being possible in canvas-only, because Google Docs does support it. I can now imagine how it’s done and I’m not sure why I didn’t see it before.) But I would also remark about Google Docs since I’ve now tried it in edit mode for the first time since canvas rendering: ugh it’s slow. Low throughput, high latency, high jitter. This on a very fast (Ryzen 5800HS), near-idling laptop with a 165 Hz screen and 2× devicePixelRatio. Just try holding a letter down (I have a 40ms repeat rate), and compare the result to the same actions on contenteditable: the difference is stark. It also gets keyboard caret navigation behaviour wrong for my platform (Linux, Firefox), and its behaviour doesn’t match my vague recollection of Windows’ either. (I mean things like where Ctrl+Left and Ctrl+Right stop—whether at the end of one word or the start of the next, and whether to consider punctuation as part of another word or a word on its own; that kind of thing.)
dmitriid 4y ago
> On the other hand you have Figma and Google Docs as examples of canvas-based applications that work well enough. At what cost? Google Docs is run a by a trillion-dollar corporation, they have the resources to rebuild it in canvas. Figma isn't based on canvas, it's based on WebGL. And here's what Figma had to say about it: "Pulling this off was really hard; we’ve basically ended up building a browser inside a browser... We’ve implemented our own rendering engine" [1] Good luck getting text to render properly on your own. Just because there are two great examples made at great cost doesn't mean it's scalable to all other apps. [1] https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/ https://www.figma.com/blog/building-a-professional-design-to...
- freeCandy 4y ago
  > Figma isn't based on canvas, it's based on WebGL. Aren't they the same thing? And egui also talks about challenges with rendering on browsers using WebGL and WASM: https://github.com/emilk/egui/tree/master/crates/eframe#problems-with-running-egui-on-the-web https://github.com/emilk/egui/tree/master/crates/eframe#prob...
  - CryZe 4y ago
    Often when people say "Canvas" they mean "CanvasRenderingContext2D", which still lets the browser do all the text rendering. With WebGL you need to do all that yourself.
    - juancampa 4y ago
      Just in case it isn’t obvious, egui is WebGL based (like Figma)
  - dmitriid 4y ago
    > Aren't they the same thing? Ah. In my mind Canvas refers to the 2D API, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API Which is different and separate from WebGL, https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API (There will be a third different and separate API, WebGPU: https://www.w3.org/TR/webgpu/ https://www.w3.org/TR/webgpu/) > And egui also talks about challenges with rendering on browsers using WebGL and WASM Ah. It's good they are aware of this.

chrismorgan 4y ago

I can’t speak about Figma, never having used it. Google Docs I have just now tried. It isn’t like egui. egui throws away everything the browser gives it, other than a text input element and a canvas element, and does all the rendering itself and dumps it to the canvas as a bitmap. Google Docs is full DOM for everything other than rendering the document, and it still uses the browser’s text layout and painting facilities. (I say this because I have my browser set to only use my chosen fonts—so for English text, there are only the default font, serif, sans-serif and monospace—and I observe that it renders and shapes everything in my chosen default font, and am mildly disappointed it doesn’t even do a sane fallback, e.g. “Courier New” to monospace, and “Sans Serif” to sans-serif.) Almost all of my criticisms of the egui approach are avoided. Scrolling works fine, because it’s using the DOM for that, so it’s just normal scrolling. Links work fine, because it uses normal links (these are in tooltip-like things when you move the cursor to the link in the normal text flow). (I retract my remark about mobile-style pinch zoom not being possible in canvas-only, because Google Docs does support it. I can now imagine how it’s done and I’m not sure why I didn’t see it before.) But I would also remark about Google Docs since I’ve now tried it in edit mode for the first time since canvas rendering: ugh it’s slow. Low throughput, high latency, high jitter. This on a very fast (Ryzen 5800HS), near-idling laptop with a 165 Hz screen and 2× devicePixelRatio. Just try holding a letter down (I have a 40ms repeat rate), and compare the result to the same actions on contenteditable: the difference is stark. It also gets keyboard caret navigation behaviour wrong for my platform (Linux, Firefox), and its behaviour doesn’t match my vague recollection of Windows’ either. (I mean things like where Ctrl+Left and Ctrl+Right stop—whether at the end of one word or the start of the next, and whether to consider punctuation as part of another word or a word on its own; that kind of thing.)

dmitriid 4y ago

> On the other hand you have Figma and Google Docs as examples of canvas-based applications that work well enough. At what cost? Google Docs is run a by a trillion-dollar corporation, they have the resources to rebuild it in canvas. Figma isn't based on canvas, it's based on WebGL. And here's what Figma had to say about it: "Pulling this off was really hard; we’ve basically ended up building a browser inside a browser... We’ve implemented our own rendering engine" [1] Good luck getting text to render properly on your own. Just because there are two great examples made at great cost doesn't mean it's scalable to all other apps. [1] https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/ https://www.figma.com/blog/building-a-professional-design-to...

freeCandy 4y ago
> Figma isn't based on canvas, it's based on WebGL. Aren't they the same thing? And egui also talks about challenges with rendering on browsers using WebGL and WASM: https://github.com/emilk/egui/tree/master/crates/eframe#problems-with-running-egui-on-the-web https://github.com/emilk/egui/tree/master/crates/eframe#prob...
- CryZe 4y ago
  Often when people say "Canvas" they mean "CanvasRenderingContext2D", which still lets the browser do all the text rendering. With WebGL you need to do all that yourself.
  - juancampa 4y ago
    Just in case it isn’t obvious, egui is WebGL based (like Figma)
- dmitriid 4y ago
  > Aren't they the same thing? Ah. In my mind Canvas refers to the 2D API, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API Which is different and separate from WebGL, https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API (There will be a third different and separate API, WebGPU: https://www.w3.org/TR/webgpu/ https://www.w3.org/TR/webgpu/) > And egui also talks about challenges with rendering on browsers using WebGL and WASM Ah. It's good they are aware of this.