My presentation on Vaadin's high performance data grid that is available to use from any client-side framework. Examples from Angular 2.

1. Vaadin Components
@joonaslehtinen
Founder & CEO
for AngularJS

2. Vaadin Framework?

3. User Interface
Components

4. For "business apps"

5. Developer
Productivity
Rich
UX

6. htmljava

7. Automated Communication
Statically typed Java
Components

8. Automated Communication
Statically typed Java
Components
Framework
Components web

9. <v-grid>
Sass API for theme engine
<v-component> / JS API
GWT
API
Java Server
Automatic
communication
API
HTML5
API

10. Vaadin Component
C s
0.3-beta2

11. <v-grid>

14. Static
<v-grid>
<table>
<colgroup>
<col header-text="Name">
<col header-text="Value">
<col header-text="Progress">
</colgroup>
<tbody>
<tr>
<td>Project A</td><td>10000</td><td>0.8</td>
</tr>
...

16. Component: Template
<v-grid (select)="select($event)">
<table>
<colgroup>
<col width=54>
<col header-text="First">
<col header-text="Last">
</colgroup>
<tbody>
<tr *ng-for="var user of users">
<td><img src="{{user.picture.thumbnail}}" /></td>
<td>{{user.name.first}}</td>
<td>{{user.name.last}}</td>

17. Component: Code (1/2)
import {bootstrap, Component, View, NgFor, NgIf} from 'angular2/
angular2';
@Component({
selector: 'angular-grid-example'
})
@View({
templateUrl: 'angular-grid-example.html',
directives: [NgFor, NgIf]
})

18. Component: Code (2/2)
export class AngularGridExample {
users;
selected;
constructor() { < Fetch some users to _this.users > }
select(event) {
var grid = event.target;
this.selected = this.users[grid.selection.selected()[0]];
}
}
bootstrap(AngularGridExample);

19. Setup (1/2)
<script src="webcomponents-lite.js"></script>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-
runtime@0.0.90/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<link rel="import" href="vaadin-grid.html">

20. Setup (2/2)
window.addEventListener("WebComponentsReady",function() {
var fileref = document.createElement("script");
fileref.setAttribute("src",
"https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js");
document.getElementsByTagName("head")[0].appendChild(fileref);
fileref.addEventListener('load', function() {
var ag = document.createElement("angular-grid-example");
document.body.appendChild(ag);
System.import('angular-grid-example');
});
});

21. https://github.com/jojule/angular-grid-example

22. Features

23. Data-source: Array
grid.data.source = [
{ projectName: "Project A", cost: {estimate: 10, current: 80 } },
{ projectName: "Project B", cost: {estimate: 20, current: 1100 } }
];
grid.columns[0].name = "projectName";
grid.columns[1].name = "cost.estimate";

24. Data-source: Function
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project B", 87654, 0.2 ],
[ "Project C", 12999, 0.6 ] ];
grid.data.source = function(req) {
var slice = data.slice(req.index, req.index + req.count);
req.success(slice, data.length);
};

25. Data-source: Async Function
grid.data.source = function(req) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE &&
xhr.status == 200){
var json = JSON.parse(xhr.responseText);
req.success(json.results, dataSourceSize);
}
}
xhr.open("GET", "http://foo.com/" + req.count, true);
xhr.send();
};

26. Columns
<v-grid>
<table>
<colgroup>
<col header-text="Name" width="100" flex="1">
<col header-text="Surname" max-width="200">
grid.columns = [
{ headerContent: "First column" },
{ headerContent: "Second column" }
];
grid.columns[0].flex = 1;
grid.columns[1].maxWidth = 200;
or

27. Multilevel headers/footers
<v-grid>
<table>
<colgroup>
<col><col><col><col>
</colgroup>
<thead>
<tr><th colspan="2">Emp.</th><th colspan="2">Resp.</th></tr>
<tr><th>First</th><th>Last</th><th>Op.</th><th>Pr.</th></tr>
</thead>
<tfoot>
<tr></tr>
</tfoot>

28. Default row
grid.header.defaultRow = 1;

29. Frozen columns
<v-grid frozen-columns="1">
<table>
…
grid.frozenColumns = 1;
or

30. Interactive headers
grid.header.getCell(1, 0).content = filterElement;

31. Styles
grid.rowClassGenerator =
function(row) {
return classFor(row.data);
};
grid.cellClassGenerator =
function(cell) {
return classFor(cell.index,
cell.row.data);
};

32. Renderers
var progressRenderer = function(cell) {
cell.element.innerHTML = '';
var child = document.createElement('progress');
child.setAttribute('value', cell.data);
cell.element.appendChild(child);
};
grid.columns[2].renderer = progressRenderer;

33. Sorting
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project D", 999999, 0.2 ],
[ "Project C", 43256, 0.01 ]];
grid.data.source = data;
grid.addEventListener('sort', function() {
var idx = grid.data.sortOrder[0].column;
var asc = grid.data.sortOrder[0].direction == 'asc';
data.sort(function(a, b) {
return a[idx] < b[idx] && asc ? -1 : 1;
});
});
<v-grid>
<table>
<colgroup>
<col header-text="Name"
sortable="">

34. Selection
• Single is the default selection mode for
Grid. It allows only one row to be
selected at once.
• Multi selection mode reveals an
additional checkbox column allowing
the user to select multiple rows.
• All selection mode has each row
selected by default allowing the user to
deselect individual rows.
• Disabled disables the selection
functionality.

35. http://vaadin.github.io/components-examples/

36. Impl.

39. <x-component></x-component>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var div = document.createElement('div');
div.textContent = 'This is Custom Element';
this.appendChild(div);
};
var XComponent = document.registerElement('x-component', {
prototype: proto
});

40. var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow Root
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div); // Append elements to the Shadow Root

41. index.html
<link rel="import" href="component.html" >
component.html
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

42. <template id="template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="http://webcomponents.org/img/logo.svg">
</div>
</template>
<script>
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
</script>
<div id="host"></div>

43. webcomponents.js

45. <my-counter counter="10">Points</my-counter>

46. <polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id="counterVal">{{counter}}</span><br>
<button on-tap="{{increment}}">Increment</button>
</template>
<script>
Polymer({
counter: 0, // Default value
counterChanged: function() {
this.$.counterVal.classList.add('highlight');
},
increment: function() { this.counter++; }
});
</script>
</polymer-element>

48. <v-grid>
193 files
37 kLOC
2 years
3 - 5 persons
No human sacrifices ;)
</v-grid>

49. Magic

50. Escalator
DOM
Grid
DataSource
Column
Scrolled to row 15
Show data for row 15
in these DOM elements
Get data for row 15
Extract cell value from row object
and show it in this element
Renderer
Show value in element

51. Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15

52. Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15

53. Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15

54. Row 3
Row 4
Row 5
lördag 24 januari 15

55. Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15

56. Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15

57. Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15

58. Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15

59. Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15

60. Row 4
Row 5
Row 6
Row 7
Row 4
lördag 24 januari 15

61. Row 5
Row 6
Row 7
Row 8
Row 8
lördag 24 januari 15

62. will-change: transform;
transform: translate(0, -y);
transform: translate3d(0, -y, 0);
top: y;
GPU acceleration

63. plays nice with
screenreaders

64. simulated kinetic
scrolling if needed

65. https://github.com/vaadin/components

66. Apache 2.0

67. Vaadin Component
C s

69. ComboBox

70. DateField

76. Vaadin Charts

78. <v-grid>
Charts

79. @joonaslehtinen
Founder & CEO
slides
slideshare.com/joonaslehtinen