1. H A I J I A N W A N G
W E B C O M P O N E N T S
W I T H J A V A
@haijian_wang

2. Java
Web

3. E l e m e n t s
C o m m u n i c a t i o n

4. Vaadin Framework
.1 .2 3 4 5 6 7 8
2001
2002
2002
2007
2008
2009
2013
2017

5. Vaadin Framework
.1 .2 3 4 5 6 7 8
1
Vaadin Core Elements

6. Web Components
in Practice 1/2
A new TAG for your browser: ‘<my-ui-
component>’
Based on standard specifications
(no frameworks!)

7. Goodbye to browser plugins (WC + HTML5)
Isolated from other elements in DOM
Easy to share (npm, yarn)
Easy to integrate
Web Components
in Practice 2/2

8. <vaadin-date-picker>
</vaadin-date-picker>

9. Web Components technically
F O U R H T M L 5 S P E C I F I C AT I O N S
1. Custom Elements
2. Templates
3. HTML imports (es6 modules)
4. Shadow DOM

10. Custom Elements
<my-new-element></my-new-element>

11. Templates
<template id=“my-template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="/img/logo.svg">
</div>
</template>

12. HTML Imports
<link rel="import" href="my-el.html">

13. S H A D O W D O M

14. <video src=“video-src.mp4” controls></video>

15. <video src=“video-src.mp4” controls></video>

16. • Encapsulation
• Reusability
Benefits of using Web Components

17. Native browser support

19. G E T S TA R T E D W I T H W E B
C O M P O N E N T S

20. I ns ta ll a co m pon ent

21. Us e i n H TM L

23. W E B C O M P O N E N T S W I T H J A V A ( V A A D I N ) ?

25. Ser ver- s id e Java Comp one nt
@Tag("paper-slider")
public interface PaperSlider extends Element{
static PaperSlider create() {
return Elements.create(PaperSlider.class);
}
void setValue(double value);
@UpdatedBy(“value-change")
double getValue();
}

26. Clien t- s i de I mple me ntation
( i n t e n t i o n a l l y l e f t b l a n k )

27. Using a s er ver- s id e co mp one nt
PaperSlider paperSlider = PaperSlider.create();
paperSlider.setValue(50);
paperSlider.addEventListener("change", arguments->{
Notification.show(
"Value changed to"+paperSlider.getValue());
});

28. Demo

29. H O W T O C R E AT E YO U R
O W N W E B C O M P O N E N T ?

31. Polymer
J A V A S C R I P T L I B R A R Y F O R W E B C O M P O N E N T S
• Vaadin Core Elements are built with Polymer 2.0
• Mentally for Vaadin Developer Polymer is new GWT
• Developed by Google
• Helps building re-usable Web Components
• Utilises new emerging Web Component standards
• Polyfills missing features for browsers

32. Polyfills
M A K E S TA N D A R D S W O R K T O D A Y
• Implementations making older browsers support new standards
• Will eventually be out powered by Browser standards

33. ES6-Class definition
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}

34. ES6-Class Inheritance
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
this.width = width
this.height = height
}
}
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
}

35. ES6-Static Members
class Rectangle extends Shape {
static defaultRectangle () {
return new Rectangle("default", 0, 0, 100, 100)
}
}
class Circle extends Shape {
static defaultCircle () {
return new Circle("default", 0, 0, 100)
}
}
var defRectangle = Rectangle.defaultRectangle();
var defCircle = Circle.defaultCircle();

36. ES6-Arrow Functions
odds = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums = evens.map((v, i) => v + i)
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v)
})

37. ES6-Method Properties
obj = {
foo (a, b) {
…
},
bar (x, y) {
…
}
}

38. Demo: How to create a web
component with Polymer
and Integrate with Vaadin

39. Vaadin Framework
.1 .2 3 4 5 6 7 8
1
Vaadin Core Elements

40. Vaadin Framework
.1 .2 3 4 5 6 7 8
1
Vaadin Core Elements
2
x
Unified
platform

46. https://bakery-flow.demo.vaadin.com/

48. Summary
• My talk has nothing to do with GWT :(
• Web components is the future of web
• Catch the train before it’s too late
• Vaadin provides pure client side web components as
Vaadin Elements
• Vaadin provides Java integration with Web
components

49. T H A N K YO U !
@haijian_wang
https://vaadin.com/blog/-/blogs/framework-roadmap-connecting-the-dots
https://vaadin.com/directory#!addon/elements-add-on