Magento 2 new grid system template

Question

I've been poking around in the new backend grid system of Magento on the Merchant beta 1.0.0 version.
First of all I must say I'm impressed.
Now you can select what columns to see, you can reorder them, you can filter by attributes that don't necessarily have a column.
But that's not important.
I don't understand how the grid is rendered.
By enabling the template path hints I saw that the products grid for example is rendered via the template app/code/Magento/Ui/view/base/ui_component/templates/listing/default.xhtml and via block Magento\Ui\Component\Listing.
I edited the template and saw something I don't understand.

<!-- ko template: getTemplate() --><!-- /ko -->

If I remove this line (and clear the cache if enabled) I don't get a grid anymore.
Can someone explain what this ko is and how it works?.
I also find this kind of markup in other templates. app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html for example.

[UPDATE]
I just found out with a simple search (duh!) that ko refers to this: http://knockoutjs.com/ but I still need some explanations.

Answer 1

That looks like Magento 2 is using Knockout.js, a MVVM framework that uses HTML data bindings (and in some cases HTML comments, like the one you found) to link model and view.

Here, this comment is a virtual element, "template" probably a custom binding from Magento (see: http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html), getTemplate() obviously a JavaScript function that is responsible to render the real element(s).

To understand knockout, go through their interactive tutorial at knockoutjs.com, I found it easy to grasp and the tutorial/documentation is really great.