Vaadin Flow - JavaLand 2018

5
S T O R Y A N D P H I L O S O P H Y
Software is eating the world and what most of us see of it is the user interface. The user
interface has become the key component of how the users experience the business
behind it. Competition is lost or won due to user experience. Simplicity is king and the
users get frustrated by anything ugly, slow or not working on the device they happen to
use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight.
Together we want to build a user interface that puts a smile on the user’s face.
Vaadin is the technology that empowers developers to build the best web-apps for
business purposes. Our priority over everything else is developer productivity because
we believe that by simplifying the developer experience and saving the developer’s
time, they are best able to focus on building great user interfaces.
Our brand is what we want everyone to think about us. When everyone - both us and
the people around us - have a consistent understanding of what Vaadin is and what we
stand for, it enables that image to spread and amplify. This book defines what we want
that image to be. It defines what the Vaadin brand is.
I hope that You are as excited and proud of living and breathing the Vaadin brand as
I am. You are the one who is shaping what everyone thinks about Vaadin - using this
brand as a tool and a guideline every day.
Let’s fight for simplicity for both the users and the developers!
Joonas Lehtinen
Founder & CEO
Vaadin
I N T R O D U C T I O N
@peter_lehto
V A A D I N F L O W
N E X T G E N E R AT I O N W E B A P P S W I T H J AVA

Session’s content
• History meets Roadmap

Session’s content
• Web Components, what are they?

Session’s content
• Vaadin Components and Polymer

Session’s content
• Vaadin Components and Polymer
• Vaadin Flow, the way to the Future

Vaadin Framework
.1 .2 3 4 5 6 7

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

A History of Stability
OVER 15+ YEARS OF 
SHIELDING YOU FROM 
CONSTANT CHANGE
< Millstone 3.0 (2002)
IT Mill Toolkit 5 (2009)
Vaadin 7.6.0 (2016) >

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

Framework
8
Vaadin Elements
• Web Components 
A new, major standard to create
components for the Web 
“Custom tags for HTML”
• Vaadin Elements 
High-quality UI components for
users of client-side frameworks
such as Angular, ionic …
• A new generation of UI
components to be used also with
future versions of the Vaadin
server-side framework
Main changes

Framework
8
Vaadin Elements
• Web Components 
A new, major standard to create
components for the Web 
“Custom tags for HTML”
• Vaadin Elements 
High-quality UI components for
users of client-side frameworks
such as Angular, ionic …
• A new generation of UI
components to be used also with
future versions of the Vaadin
server-side framework
Main changes
• Java 8
• New data binding
• Focus on new browsers
• HTML imports (Web components)
• Improved performance

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

Browser
UI Backend
Server
Widgets Components

Theme
Browser
UI Backend
Server
Widgets Components

Theme
Browser
UI Backend
Server
Widgets Components
Shared State 
RPC

Java -> JavaScript
- Optimizing compiler
GWT

Browser specific
compilation
- No browser differences
GWT

Pure Java
- Web apps without JavaScript
GWT

Vaadin Framework
.1 .2 3 4 5 6 7 8
Web ComponentsGWTAJAXHTML

Vaadin Framework
.1 .2 3 4 5 6 7 8
Vaadin Components
Web ComponentsGWTAJAXHTML

Vaadin Components
Vaadin Framework
4 5 6 7 8

Vaadin Components
Vaadin Framework
4 5 6 7 8
Flow

Vaadin Components
Vaadin Framework
4 5 6 7 8
Flow Vaadin 10

Web Component Standards
4 C O R E C O N C E P T S

• HTML Templates

• HTML Templates
• Custom Elements

• HTML Templates
• Custom Elements
• Shadow DOM

• HTML Templates
• Custom Elements
• Shadow DOM
• HTML Imports

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

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

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

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

• Encapsulation
• Reusability
Benefits of using Web Components

Polymer
J A V A S C R I P T L I B R A R Y O N W E B C O M P O N E N T A P I

Polymer
• Vaadin Components are built with Polymer 2.x

Polymer
• For Vaadiner Polymer is the new GWT

Polymer
• Developed by Google

Polymer
• For building reusable Web Components

Polymer
• With emerging Web Component Standards

Polymer
• With emerging Web Component Standards
• Polyﬁlls dated browsers

Vaadin Components
Vaadin Flow
Component APIs

Vaadin 10
Vaadin Components
Vaadin Flow
Component APIs

Tab & Tabs 
Dropdown Menu 
Notiﬁcation 
Text Area 
Radio Button (Groups) 
Progress Bar
+

Polymer Element
T H E C L I E N T S I D E D E C L A R AT I V E H T M L

Polymer Element
• For Vaadin Developer it’s mentally the Widget

Polymer Element
• Deﬁnes own “dom-module”with <template> and <script>

Polymer Element
• Speciﬁes the logical DOM structure with HTML and Web Components

Polymer Element
• Speciﬁes the logical DOM structure with HTML and Web Components
• Extends from Polymer.Element JavaScript class

Use any Web Component
V A A D I N D I R E C T O R Y / W E B C O M P O N E N T S . O R G

1 S E R V E R - D R I V E N U I D E V E L O P M E N T

HorizontalLayout buttonLayout = new
HorizontalLayout();
Button saveButton = new Button(“Save”);
saveButton.addClickListener(event -> save());
Button cancelButton = new Button(“Cancel”);
cancelButton.addClickListener(event -> cancel());
buttonLayout.add(saveButton);
buttonLayout.add(cancelButton);
1 S E R V E R - D R I V E N U I D E V E L O P M E N T

2 D E C L A R AT I V E C O M P O S I T I O N

PolymerTemplate (Java)Polymer Element (HTML)

Polymer Element (HTML file)
<link rel="import" href="bower_components/polymer/polymer-element.html">
<dom-module id=“my-layout">
<template>
<div><h1>I'm Header</h1></div>
<div id="contentArea"></div>
<div><h1>I'm Footer</h1></div>
</template>
<script>
class MyTemplate extends Polymer.Element {
static get is() { return 'my-layout' }
}
customElements.define(MyTemplate.is, MyTemplate);
</script>
</dom-module>

PolymerTemplate (Java file)
@Tag(“my-layout")
@HtmlImport(“my-layout.html")
public class MyTemplate extends PolymerTemplate<TemplateModel> {
@Id("contentArea")
private Div contentArea;
@Override
public void setLayoutContent(HasElement content) {
contentArea.removeAll();
contentArea.getElement().appendChild(content.getElement());
}
}

3 N E W U I C O M P O N E N T S

public class YourComponent extends Div {
public YourComponent {
…
add([any Vaadin component]);
}
}

public class YourComponent extends Composite<Div> {
…
getContent().add([any Vaadin component]);
}
}

@Tag(“div”)
public class YourComponent extends Component {
…
getElement().appendChild([any Element])
}
}

4 L AT E N C Y - C O M P E N S AT I O N

@ E V E N T H A N D L E R

• Exposes server side methods for invocation from JavaScript

• Exposes server side methods for invocation from JavaScript
• Can be mixed with pure JS functions for immediate response

<div id="div" on-click="updateStatus">[[status]]</div>
// JavaScript event handler, run immediately
updateStatus() {
this.status = "Connecting to server…";
}
// Java event handler on the server, run asynchronously
@EventHandler
private void updateStatus() {
getModel().setStatus("Confirmed on the server");
}

5 C L I E N T - S I D E V I E W S

<person-list-view on-add="addPerson"
person-list=“[[persons]]">
</person-list-view>

public interface PersonListModel extends TemplateModel {
List<Person> getPersons();
void setPersons(List<Person> persons);
}
@EventHandler
private void addPerson(@EventData("event.newPerson") Person person) {
backend.persistPerson(person);
List<Person> persons = getModel().getPersons();
persons.add(person);
}

D E F A U L T I N T E R F A C E S F O R ‘ T R A I T S ’

• HasElement

• HasElement
• HasComponents

• HasElement
• HasComponents
• HasStyle

• HasElement
• HasComponents
• HasStyle
• HasSize

• HasElement
• HasComponents
• HasStyle
• HasSize
• …

default void addClassName(String className) {
getElement().getClassList().add(className);
}

default void setWidth(String width) {
if (width == null) {
getElement().getStyle().remove(ElementConstants.STYLE_WIDTH);
} else {
getElement().getStyle().set(ElementConstants.STYLE_WIDTH, width);
}
}
}

default void add(Component... components) {
assert components != null;
for (Component component : components) {
assert component != null;
getElement().appendChild(component.getElement());
}
}
default void setWidth(String width) {
if (width == null) {
getElement().getStyle().remove(ElementConstants.STYLE_WIDTH);
} else {
getElement().getStyle().set(ElementConstants.STYLE_WIDTH, width);
}
}
}

A L M O S T E V E R Y T H I N G I S A C O M P O N E N T

A L M O S T E V E R Y T H I N G I S A C O M P O N E N T
• Components are abstraction layer over the element API

@Tag("paper-input")
@HtmlImport("bower_components/paper-input/paper-input.html")
public class PaperInputComponent extends Component {
public String getValue() {
return getElement().getProperty("value", "");
}

@Tag("paper-input")
@Synchronize("value-changed")
}

@Tag("paper-input")
}
public static class ValueChangeEvent extends
ComponentEvent<PaperInputComponent> {
public ValueChangeEvent(PaperInputComponent source,
boolean fromClient) {
super(source, fromClient);
}

@Tag("paper-input")
}
@DomEvent("value-changed")
public static class ValueChangeEvent extends
ComponentEvent<PaperInputComponent> {
public ValueChangeEvent(PaperInputComponent source,
boolean fromClient) {
super(source, fromClient);
}

Lessons learned
• Web Components are becoming standard in browsers

Lessons learned
• Vaadin Components - the client side API for JavaScript Developers

Lessons learned
• Component API - the server side API for Java Developers

Lessons learned
• Vaadin Flow - the bridge between Client and Server

Lessons learned
• Vaadin Flow - the bridge between Client and Server
• Vaadin 10 provides the richest set of development features

@peter_lehto
@vaadin
T H A N K Y O U !

Vaadin Flow - JavaLand 2018

More Related Content

What's hot

Similar to Vaadin Flow - JavaLand 2018

More from Peter Lehto

Recently uploaded

Vaadin Flow - JavaLand 2018