Web components with java by Haijian Wang

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

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

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

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

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

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

<vaadin-date-picker>
</vaadin-date-picker>

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

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

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

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

• Encapsulation
• Reusability
Benefits of using Web Components

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

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 ) ?

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(); 
 
}

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 )

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());
});

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 ?

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
• Polyﬁlls missing features for browsers

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

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
}
}

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
}
}

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();

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)
})

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

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

Vaadin Framework
.1 .2 3 4 5 6 7 8
1
Vaadin Core Elements
2
x
Uniﬁed
platform

https://bakery-ﬂow.demo.vaadin.com/

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

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

Web components with java by Haijian Wang

More Related Content

What's hot

Similar to Web components with java by Haijian Wang

More from GWTcon

Recently uploaded

Web components with java by Haijian Wang