Earlier quoted context omitted.
Yeah it's a real shame it's all moving to HTML/JS for the chrome & e.g. devtools, even if it's more "maintainable".
I use the modern Firefox HTML5/JS dev tools on a daily basis and love the featureset that they provide, though it is equally shocking to compare the feel to that of the old DOM Inspector[0] (and Venkman[1], the old JS debugger), which was a XUL add-on for DOM inspection that used to run in Firefox, Thunderbird, and SeaMonkey. What feels snappy and instantaneous in DOM Inspector feels somewhat muddy and laggy in the m…
Google Docs will now use canvas based rendering
931–940 of 953 posts
Re: Google Docs will now use canvas based rendering
#932I wrote the terminal canvas renderers in VS Code that has been called out a few times here. Initially I implemented a canvas renderer using just a 2d context to draw many textures which sped things up "5 to 45 times"[1] over the older DOM renderer. Since then I moved onto a WebGL renderer[2] which was mostly a personal project, it's basically the first canvas renderer but better in every way since it works by organiz…
The fact that the DOM elements are invisible (don't affect layout) should eliminate the majority of the performance cost, right?
Re: Google Docs will now use canvas based rendering
#933Re: Google Docs will now use canvas based rendering
#934Speaking as one of the original three authors of Google Docs (Writely), but zero involvement in this project (I left Google in 2010): I'm seeing a lot of comments asking how JavaScript-on-Canvas could possibly outperform the highly optimized native code built into the browser engines. It's been a long time since I've really been involved in browser coding, but having written both Writely and, farther back, several na…
Does the challenge of word processors extend to these chromium based IDEs like VsCode ? I wonder if that can also be optimized if going to a non DOM based approach?
Re: Google Docs will now use canvas based rendering
#935Earlier quoted context omitted.
> ... it's hard to beat just drawing on a canvas or using WebGL. Both of these APIs perform quite poorly for what they're doing. To compete with native, the web platform needs simple low-level APIs that do not have a lot of Javascript marshalling overhead and other performance cliffs. You can always build a more convenient library above low-level interfaces, but the opposite is not true.
It seems like WebGPU is the next thing: https://github.com/gpuweb/gpuweb/wiki/Implementation-Status
Now given that WegGL support is still hit and miss, and the only way to debug is to rely on native GPGPU debuggers, and having the pleasure to differentiate between browser own rendering code and the one from the application, that shows how easy it is to do 3D on the Web.
Re: Google Docs will now use canvas based rendering
#936Earlier quoted context omitted.
The demo doesn't have it, but they did fix the selectable text issue, just need to wrap your text in a SelectableText widget.
But this means the default is for text to be unselectable. Which clearly says all I need to know about it :-/
Re: Google Docs will now use canvas based rendering
#937Earlier quoted context omitted.
Also, you know, accessibility. This could be a real serious problem for people with disabilities.
I'm hoping for a revamped EU accessibility act https://ec.europa.eu/social/main.jsp?catId=1202 that also covers document and office applications, and with GDPR sized fines.
Cannot read property 'match' of undefined
TypeError: Cannot read property 'match' of undefined
at /var/app/current/routes/avs.js:44:29
at Layer.handle [as handle_request] (/var/app/current/node_modules/express/lib/router/layer.js:95:5)
at next (/var/app/current/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/var/app/current/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/var/app/current/node_modules/express/lib/router/layer.js:95:5)
at /var/app/current/node_modules/express/lib/router/index.js:281:22
at param (/var/app/current/node_modules/express/lib/router/index.js:354:14)
at param (/var/app/current/node_modules/express/lib/router/index.js:365:14)
at param (/var/app/current/node_modules/express/lib/router/index.js:365:14)
at Function.process_params (/var/app/current/node_modules/express/lib/router/index.js:410:3)Re: Google Docs will now use canvas based rendering
#938I don't build extensions or work on much front end web lately but this reads like Google wants more control over their stuff. The web is becoming less open. > By moving away from HTML-based rendering to a canvas-based rendering, some Chrome extensions may not function as intended on docs.google.com and may need to be updated. > If you are building your own integrations with Google Docs, we recommend using Google Work…
I worry about the same thing, but in Google's defense, docs is a wysiwyg document editor, not a webpage for displaying info. It's meant to help users create and edit documents. It has different needs than HTML.
I also wonder how they'll support CKJ IMEs. Generally when sites try to do their own input the languages that need an IME get 2nd class support. You can see an example but looking at the Qt WASM examples which draw the entire app in canvas using WebGL. They don't support anything but English
Re: Google Docs will now use canvas based rendering
#939Earlier quoted context omitted.
In this case, I think the switch is most likely entirely based on technical merits, rather than some way of asserting more control. So with that in mind, the fact that the team behind one of Google's most interactive pieces of software has to throw up their hands and say "DOM is too slow, we gotta roll our own" should be a wakeup call for everyone working on Chrome and other browsers, but mostly for Google itself. Wh…
> Why isn't the plan here to systematically start improving DOM performance, There are already many steps taken to improve DOM performance over these years. However, DOM is designed for documents. The performance can never be good enough when it is abused for non-document usage. > or create APIs to more directly modify how elements are laid out and created? Why do all of this work to benefit only Google Docs? Because…
JavaScript was originally designed for simple tweaks, but we've significantly expanded and improved the language over the years to adjust it for what it's used for *today*. I don't see why DOM is special. Sure it was designed to handle small, unchanging documents, but it's used for much more now, just the same as JavaScript. Also it's worth noting we're talking about Google Docs here, so it looks like DOM fails even at its intended use-case (I'm saying this *mostly* jokingly).
> Because other browser engines are unlikely to adopt these APIs just so that Google Docs can have better performance. Not to mention that these new APIs will take years to be present in every user's devices.
We wouldn't have fetch, canvas, async/await, PWAs, websockets, etc. if those things had to be available immediately and/or be guaranteed to be adopted. I'd rather it take years to get improvements, but eventually have them, than not doing anything and still be talking about how bad X, Y, or Z is 10 more years from now.
I'll take FLIP animations as a specific example. If I want to have a box animate from one part of the page to another (where it's position in the DOM hierarchy changes), we're having to do all kinds of crazy gymnastics around when you read the DOM, when you write to it, how do you update it, etc. And even still, you're unable to do this without using JavaScript animations (if your box contains content and it happens to change size, we'd have to do a reverse scale animation on the content).
This is stuff that's trivial in iOS and Android, and commonly used. In the web land, we're stuck doing this poorly both from a development point of view, and with bad performance, resulting in poor end user experience.
The FLIP hack has been talked about for 6+ years [1], and yet here we still are, unable to simply move and animate a box from one place in the tree to another. Want nice drag and drop interactions? Good luck. Limited animations, or slow, and often both.
Why are we getting articles from Google about how it's bad to change the size of something on the screen [2], instead of seeing improvements to the underlying APIs that cause it to be slow in the first place? If a hacky JavaScript based solution is able to make this performant, surely a native API would do better.
The DOM has to evolve to support interactive apps in a performant way, or risk being replaced by custom things like the canvas or WASM, that are not easy for machines to parse, that won't have nearly as much consideration for accessibility and extensibility. That aren't as easy to enforce good usage of, or share knowledge about. It should not be "DOM is slow, oh well", or "DOM is slow, lets drop it", or "DOM is slow, so lets build a JS scaffolding around it (VDOM)." It should be "DOM is slow. What are the contexts in which it matters most, and how can we improve the APIs such that it can natively do those things performantly and easier?" Be that better selection APIs, animation APIs, better ways to read/write to styles, the list is endless. The DOM is slow, but it does not have to be slow. We *choose* not to make significant improvements to it, and one can come up with plenty of reasons why or excuses for it.
My point is that we should choose to improve it, because the alternative will lead us down a worse path. Years of neglect has led us here, where Google, a browser vendor themselves, has to give up on DOM because it's bad. This is fundamentally messed up.
[1]: https://aerotwist.com/blog/flip-your-animations/ [2]: https://developers.google.com/web/updates/2017/03/performant...
Re: Google Docs will now use canvas based rendering
#940Earlier quoted context omitted.
One of my first programming projects as a teenager back in terminal-type days was to write my own text editor for the Atari ST. I was super happy with it, and sold three (3) copies of it! That made me very happy at the time. Of course there was that time that I messed with the save/load code and destroyed the text files of one of my customers. Not so happy with that! Saved it by writing a fix system, and that actuall…
Former ST user here: out of curiosity, what was that text editor and company?
I called it DEdit, because every programmer wants to grab a single letter title.