Javascript – Drawing a data-grid on canvas – whats the point

canvashtml5javascript

To simplify my question let's assume for a minute that all users are using the latest version of Chrome to view a particular website.

Using the latest libraries (Polymer for example), I can render a VERY large list of constantly changing records in DOM and it will only create enough DOM elements to render what is visible on the screen. Polymer will even render the list on the GPU for me.

I can see that there is alot of investment in canvas based data-grids eg: https://github.com/openfin/fin-hypergrid

My question is – given the above – why, or have I missed the point?

Best Answer

Even if we do assume all browsers supported the features necessary to do all of these things in HTML...

The purpose of this project is to address the Finance/Big Data community's desire for a high performance, unlimited row data-grid

This is simply not something the DOM is designed for.

For some apps like the financial one I work on, rendering a complicated grid with thousands of rows and dozens of columns while also enabling a huge amount of responsive end-user customization is the front-end performance bottleneck.

In particular, row virtualization is absolutely mandatory in these applications. That means only the rows currently visible to the user get rendered, and the other several thousand rows in the grid are completely ignored until the user scrolls them into view. The DOM does not (and I believe it cannot) do this optimization for you; you have to write at least some Javascript no matter what to get reasonable performance. But if you write your own grid renderer using Canvas, it's almost trivial to render only the currently visible subset of rows/columns.

Plus, in a more general sense, if your grid rendering relies solely on Javascript code invoking the Canvas API (as opposed to any details of the DOM rendering algorithm), it's much easier to implement various UI features and optimizations in a way that will work and work efficiently on every browser with basic Canvas support.

Related Solutions

HTML5 3D Canvas – What is HTML5 3D Canvas and How is it Different from WebGL?

WebGL is rendered onto a canvas element with a context acquired from it. So "3D canvas" and WebGL are pretty much synonyms.

Understanding the Prototype Method in JavaScript

That's not how the prototype works. The prototype is used in the prototype chain.

Whenever you try to get a property on an object it will check the object for that property name. If it does not exist it will look in the prototype.

Example:

var o = {
  "foo": "bar",
  "method": function() { ... }
};

var o2 = Object.create(o);
var o3 = Object.create(o);

console.log(o2.hasOwnProperty("foo")); // false
console.log(o2.foo); // "bar"
console.log(o2.__proto__ === o); // true
o.baz = "foobar";
console.log(o2.baz); // "foobar"

So the point of the prototype is simply code re-use and inheritance.

Best Answer

This is simply not something the DOM is designed for.

Related Solutions

HTML5 3D Canvas – What is HTML5 3D Canvas and How is it Different from WebGL?

Understanding the Prototype Method in JavaScript

Related Topic