Building web apps with vaadin 10

B U I L D I N G M O D E R N
W E B A P P S I N J A V A
@ M A R C U S H E L L B E R G

A G E N D A
⚡ Quick intro to Vaadin 10
🙌 Hands-on programming

F O C U S O N
P R O D U C T I V I T Y

G R E AT U X T H R O U G H
G R E AT D X

S TA N D A R D S - B A S E D
W E B C O M P O N E N T S
<vaadin-combo-box> 
</vaadin-combo-box>

J A V A F R A M E W O R K
new ComboBox();

VAADIN 8
U I C O M P O N E N T S
J A V A A P I
VAADIN 10
V A A D I N
C O M P O N E N T S
V A A D I N
F L O W

O P E N S O U R C E
Apache 2.0

new Span("I'm a <span>")
new Button("I'm a button")
new DatePicker("Select a date")
new ComboBox <>("Select an option")

new VerticalLayout(
new Button("I'm a button"),
new DatePicker("Select a date"),
new ComboBox <>("Select an option"),
new Span("I'm a <span>")
);

var nameField = new TextField("Name");
var button = new Button("Click me");
button.addClickListener(click -> {
add(new Span(nameField.getValue()));
});

@Route("demo")
public class Demo extends VerticalLayout {
...
}

// Parent layout for all views under /users
@RoutePrefix("users")
class UsersView extends Div
implements RouterLayout {
// ... implementation ...
}
// matches /users/edit/123
@Route(value = "edit", layout = UsersView.class)
class UserEditorView extends Div
implements HasUrlParameter<Integer> {
@Override
public void setParameter(BeforeEvent event,
Integer userId) {
// ... fetch user ...
}
}

public class SignupForm extends VerticalLayout {
static class Person {
@NotEmpty private String name;
@Email @NotEmpty private String email;
}
private TextField name = new TextField("Name");
private TextField email = new TextField("Email");
private Person person = new Person();
public SignupForm() {
Binder<Person> binder
= new BeanValidationBinder <>(Person.class);
binder.bindInstanceFields(this);
binder.setBean(person);
Button save = new Button("Save");
add(name, email, save);
}
}

public Demo(PersonService service) {
Grid<Person> grid = new Grid <>();
grid.setItems(service.getPeople());
grid.addColumn(Person ::getName)
.setHeader("Name");
grid.addColumn(Person ::getAge)
.setHeader("Age");
}

github.com/marcushellberg/vaadin-chat

TextField name = new TextField();
Button button = new Button("Greet");
layout.addComponents(name, button);
Notification.show("Hi, " + name.getValue());
});

{name: {value: 'Marcus'},
button: {event: 'clicked'}}
261 bytes

TextField name = new TextField();
Button button = new Button("Greet");
layout.add(name, button);
Notification.show("Hi, " + name.getValue());
});

{name: {value: 'Marcus'},
button: {event: 'clicked'}}
261 bytes 
{updates: [
{notification: 'Hi, Marcus'}
]}
267 bytes

A U T O M AT E D C O M M U N I C AT I O N
public class MainView extends Div {
...
}
@Route("")

...
}
@Push
@Route("")

...
}
@Push
ui.access(() -> Notification.show("Alert!"));
@Route("")

new VerticalLayout(
new TextField("Text Field"),
new Button("Button")
)
<vaadin-vertical-layout>
<vaadin-text-field label="Text Field">
</vaadin-text-field>
<vaadin-button>Button </vaadin-button>
</vaadin-vertical-layout>

2 0 1 8 2 0 2 12 0 1 9 2 0 2 0 2 0 2 2 2 0 2 52 0 2 3 2 0 2 4 • • •2 0 2 6 2 0 2 7
LT S- V10
LTS-V23
LT S-V3 1
LT S-V3 9
V1 2
V1 1
V1 3
V14
LTS-V17
V15
V16
+ 5 year support (bug fixes)
F A S T R E L E A S E C Y C L E + S T A B I L I T Y

R O A D M A P
- Better Progressive Web App support
- More components
- More starters

vaadin.com/start
github.com/vaadin
gitter.im/vaadin

T H A N K S
@ M A R C U S H E L L B E R G

Building web apps with vaadin 10

More Related Content

Similar to Building web apps with vaadin 10

More from Marcus Hellberg

Recently uploaded

Building web apps with vaadin 10