Server-side
Java
Rich Set of
UI Components
Server-side
Java
Rich Set of
UI Components
IDE Support
Mature language
Extensive tooling
Third-party libraries
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
All problems solved for Java developers!
Client-side only?
Client-side only?
High-latency network
Offline capability
Millions of concurrent users
Team knowledge
Not long ago:
You’re screwed
Not long ago:
You’re screwed
Conflicting selectors
Lack of tooling
Language features
Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features
Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features
Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features
Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features
Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features
Libraries to the rescue?
SelectorsTemplates
Language features
Importing & Loading
Style Extensions
Not long ago:
You’re screwed
div > div > div
Conflicting selectors
Lack of tooling
Language features
Libraries to the rescue?
SelectorsTemplates
Language features
Importing & Loading
Style Extensions
Things have changed:
You’ll be just fine
Lack of tooling
Language features
Selector conflicts
Lack of semantics
Things have changed:
You’ll be just fine
Lack of tooling
Language features
Selector conflicts
Lack of semantics
:-):-)
:-):-)
Things have changed:
You’ll be just fine
Things have changed:
You’ll be just fine
Things have changed:
You’ll be just fine
Gulp, Bower, IDE Support
ECMAScript 6
Things have changed:
You’ll be just fine
Gulp, Bower, IDE Support
ECMAScript 6
Web Components
Web Components Component-oriented UI for the Web
BenefitsComposition
Separation
Reusability
How?
Custom Elements
Shadow DOM
Templates
HTML Imports
How?
Custom Elements
<my-component> </my-component>
How?
Custom Elements
<my-component> </my-component>
How?
Shadow DOM
<audio></audio>
How?
Shadow DOM
<audio></audio>
How?
Shadow DOM
<audio></audio>
How?
Shadow DOM
<audio></audio>
How?
Shadow DOM
<audio></audio>
How?
Templates
<template id="tmp"> <style> ... </style> <div> <h1>Web Components</h1> <img src="logo.svg"> </div> </template>
How?
Templates
var tmp = document.querySelector(‘#tmp');
var clone = document.importNode(tmp.content, true);
var host = document.querySelector(‘#host');
host.appendChild(clone);
How?
Imports
my-component.html<link rel="stylesheet" href="css/style.css"> <script src="js/script.js">
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">
Why?
Why?
Why?
Why?
Why?
Browser Support
When?
“Things have changed”
“Things have changed”are changing
Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE
Native Browser Support
Browser Support with Polyfills
Polyfill
Framework
Set of ComponentsPolymer
<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>
Polymer({ is: 'my-counter',
properties: { counter: { type: Integer, value: 0, // Default value } counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } });
What does Vaadin have to do with Web Components?
We add one more element…
… in fact many Elements
We add one more element…
Vaadin
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
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
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
Let me show you…
vaadin.com/elements
@juergentreml
vaadin.com/elements
@juergentreml ?
