Canvas-based rendering

[jjrv]

fin-hypergrid renders the grid contents on a canvas element. Editing cell contents still pops up a regular DOM input element.

PhosphorJS also has some work in progress code (in TypeScript, even) for a canvas-based grid.

Since the old dgrid works perfectly on old browsers without canvas support, maybe the new grid could switch to this technology? It would probably render faster, and avoid some cross-browser issues.

[dylans]

Hi @jjrv that's interesting (and I'm familiar with OpenFin's work)... I think one of the longer term goals of Dojo is to eventually support multiple rendering options for all widgets (e.g. html, canvas, svg, WebVR, native). However, we have to start somewhere, and with virtual DOM, an HTML grid can hold its own in performance. What it may lack is the ease of embedding sparkline charts within each cell, but it has several benefits including the ease of accessibility support within the grid, and not having to do a fair number of unusual workaround to get things like DOM inputs working with cell editors.

So, I think we'll keep this in mind for the future, but the primary focus for the beta is going to be on the HTML version of the grid as its conceptually the most straightforward.

[jjrv]

Currently my main benefit from a DOM based grid is the ease of adding classes to rows and cells based on their content, and styling them with CSS. Especially how styles, content and word wrapping can change the size of cells without problems. Without reimplementing all of CSS, unavoidably there will be cases where a canvas-based grid requires developing more complicated custom functions compared to simply adding CSS rules to style DOM elements.

Maybe some kind of hybrid approach would work: If the entire content or certain columns are either very simply styled or require a canvas to draw things like sparklines, such blocks of cells could be replaced by canvases.

Leaflet is very good at scrolling a map composed of DOM elements like images and canvases. It might be practical for example to have two canvases, height matching the dgrid and width spanning certain columns, scrolling alongside DOM-based columns and requiring repainting only when one canvas scrolls out of view and another one into view.

[dylans]

One of my very early goals (predates Dojo 0.1 I think) is to make it so that widgets can swap their rendering environment away from HTML. As far as we got in 1.x was gfx, which abstracted away some of the differences between SVG, Canvas, VML, Silverlight, and Flash rendering.

We've seen mixed results in the React community with react-canvas, react-gl/react-vr, and react native, which while somewhat similar, really are very different in their approach and not completely easy to mix and match.

I would love to see our approach to widgets be able to support HTML, SVG, Canvas, WebGL, and WebVR (and perhaps native) eventually, though it's not a 2.0 blocker. I remain hopeful that we'll at least get the first two done in time for 2.0 (they're the easiest since they are both true DOM APIs), and SVG is needed for @dojo/dataviz. The virtual DOM approach we're taking should provide a good foundation for making this long-lived goal a reality in the future, but I would say that unless someone gets very inspired on a canvas renderer implementation (which is no small task), then this is post 2.0.

[jjrv]

PhosphorJS feature set is becoming very nice. Here's their canvas-based grid demo:

http://phosphorjs.github.io/examples/datagrid/

Also note how the grids are in tabs that can be dragged around to change how the overall layout is split.