Thursday, May 13, 2021

Google Docs Switching From DOM to Canvas

Google (via Hacker News):

We’re updating the way Google Docs renders documents. Over the course of the next several months, we’ll be migrating the underlying technical implementation of Docs from the current HTML-based rendering approach to a canvas-based approach to improve performance and improve consistency in how content appears across different platforms.

Steve Newman:

Speaking 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 native-app word processing engines, here are some thoughts.

Word processors have extremely specific requirements for layout, rendering, and incremental updates. I’ll name just two examples. First, to highlight a text selection in mixed left-to-right / right-to-left text, it’s necessary to obtain extremely specific information regarding text layout; information that the DOM may not be set up to provide. Second, to smoothly update as the user is typing text, it’s often desirable to “cheat” the reflow process and focus on updating just the line of text containing the insertion point. (Obviously browser engines support text selections, but they probably don’t expose the underlying primitives the way a word processor would need. Similarly, they support incremental layout + rendering, but probably not specifically optimized in the precise way a word processor would need.)

Modern browser engines are amazing feats of engineering, but the feature set they provide, while enormous, is unlikely to exactly match the exacting requirements of a WYSIWYG word processor. As soon as your requirements differ even slightly from the feature set provided, you start tipping over into complex workarounds which impact performance and are hell on developer productivity and application stability / compatibility.

6 Comments RSS · Twitter

Bit by bit, they're discarding the purpose and advantages of web browsers and really just using it as a widespread, multi-platform app engine.

Would the change have any impact on screenreader software like macOS's built in VoiceOver?

"really just using it as a widespread, multi-platform app engine"

The word "just" is doing a lot of work in this sentence :-)

"Would the change have any impact on screenreader software like macOS's built in VoiceOver?"

Canvas can be made accessible, but it requires more work.

>The word "just" is doing a lot of work in this sentence :-)

Yeah, not the most fitting choice of word. It's a tremendous technical achievement and quite valuable, no doubt — but it's extremely far removed from the original purpose, and early key aspects of the Web like navigating through hypertext are basically gone.

We moved from Lynx/Gopher type stuff to running full-blown apps. But we never migrated from text-loving HTML to something far more mature that was suited to app development. Something that can draw on screen, handle user input while executing locally and remotely. Hmm, sounds a bit like X Window. There have been a handful of protocols, going back to the one the Prodigy service used (itself an upgrade from TeleText systems) that could have become more mature and focused on delivering an app-style experience. But instead we got in to a fever of updating web “pages” until they weren’t, and building ridiculous complexity into the javascript engine (after, ironically, dissing that same concept when it surfaced as Java applets, which sucked).

Let’s skip to HTML10 and make it all just like building desktop or mobile apps.

I think what makes the web so powerful is that it provides different technologies that solve a wide variety of different use cases. Wikipedia still exists, you can still build traditional hypertext-style websites; in fact, with semantic tags in newer HTML versions, the web is now better at this than it ever was before. But you also have technologies like SVG or canvas, which allow you to build all kinds other applications, as well.

Leave a Comment