Short introduction to Web Components, Vaadin Elements, Vaadin's set of enterprise quality UI components, and how to use them to create a modern, Google Polymer-based UI to control Philips Hue lightbulbs and monitor them in real time

1. Vaadin Elements
IoT with
Jürgen Treml, Key Account Manager
juergen@vaadin.com, @juergentreml

2. Server-side
Java
Rich Set of
UI Components

3. Server-side
Java
Rich Set of
UI Components
IDE Support
Mature language
Extensive tooling
Third-party libraries

4. Server-side
Java
Rich Set of
UI Components
IDE Support
Mature language
Extensive tooling
Third-party libraries
Component based UI
Enterprise-grade
quality & performance
Rich selection

5. All problems solved
for Java developers!

6. Client-side
only?

7. Client-side
only?
High-latency network
Offline capability
Millions of
concurrent users
Team knowledge

8. Not long ago:
You’re screwed

9. Not long ago:
You’re screwed
Conflicting selectors
Lack of tooling
Language features

10. Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features

11. Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features

12. Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features

13. Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features

14. Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features
Libraries to the rescue?
Selectors
Templates
Language features
Importing & Loading
Style Extensions

15. Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features
Libraries to the rescue?
Selectors
Templates
Language features
Importing & Loading
Style Extensions

16. Things have changed:
You’ll be just fine

17. Lack of tooling
Language features
Selector conflicts
Lack of semantics
Things have changed:
You’ll be just fine

18. Lack of tooling
Language features
Selector conflicts
Lack of semantics
:-):-):-):-)
Things have changed:
You’ll be just fine

19. Things have changed:
You’ll be just fine

20. Things have changed:
You’ll be just fine
Gulp, Bower,
IDE Support
ECMAScript 6

21. Things have changed:
You’ll be just fine
Gulp, Bower,
IDE Support
ECMAScript 6
Web Components

22. Web Components
Component-oriented
UI for the Web

23. Benefits
Composition
Separation
Reusability

24. How?
Custom Elements
Shadow DOM
Templates
HTML Imports

25. How?
Custom Elements
<my-component>
</my-component>

26. How?
Custom Elements
<my-component>
</my-component>

27. How?
Shadow DOM
<audio></audio>

28. How?
Shadow DOM
<audio></audio>

29. How?
Shadow DOM
<audio></audio>

30. How?
Shadow DOM
<audio></audio>

31. How?
Shadow DOM
<audio></audio>

32. How?
Templates
<template id="tmp">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="logo.svg">
</div>
</template>

33. How?
Templates
var tmp =
document.querySelector(‘#tmp');
var clone =
document.importNode(tmp.content, true);
var host =
document.querySelector(‘#host');
host.appendChild(clone);

34. How?
Imports
my-component.html
<link rel="stylesheet"
href="css/style.css">
<script src="js/script.js">

35. How?
Imports
index.html
<link rel="import"
href="my-component.html">
my-component.html
<link rel="stylesheet"
href="css/style.css">
<script src="js/script.js">

36. Why?

37. Why?

38. Why?

39. Why?

40. Why?

41. Browser Support
When?

42. “Things have changed”

43. “Things have changed”are changing

44. Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE
Native Browser Support

45. Browser Support with Polyfills

46. Polyfill
Framework
Set of ComponentsPolymer

47. <dom-module id="my-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> … </script>
</dom-module>

48. Polymer({
is: 'my-counter',
properties: {
counter: {
type: Integer,
value: 0, // Default value
}
counterChanged: function() {
this.$.counterVal.classList.add('highlight');
},
increment: function() { this.counter++; }
});

50. What does Vaadin
have to do with
Web Components?

51. We add one more element…

52. … in fact many Elements
We add one more element…
Vaadin

53. Server-side
Java
Rich Set of
UI Components
IDE Support
Mature language
Extensive tooling
Third-party libraries
Component based UI
Enterprise-grade
quality & performance
Rich selection

54. Server-side
Java
Rich Set of
UI Components
IDE Support
Mature language
Extensive tooling
Third-party libraries
Component based UI
Enterprise-grade
quality & performance
Rich selection

55. Server-side
Java
Rich Set of
UI Components
IDE Support
Mature language
Extensive tooling
Third-party libraries
Component based UI
Enterprise-grade
quality & performance
Rich selection

56. Let me show you…

57. github.com/jtreml/home-command

58. vaadin.com/elements
juergen@vaadin.com
@juergentreml

59. vaadin.com/elements
juergen@vaadin.com
@juergentreml
?