The document discusses building modern web apps in Java using Vaadin 10. It provides an agenda that includes a quick intro to Vaadin 10 and hands-on programming. It then covers Vaadin 10's focus on productivity and great UX through great DX. The core concepts of Vaadin are also summarized, including standard-based web components and the Java API.

1. 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

2. @ M A R C U S H E L L B E R G

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

4. 5
V A A D I N 1 0

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

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

7. J A V A ♥ W E B

9. 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>

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

11. 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

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

13. C O R E C O N C E P T S

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

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

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

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

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

19. // 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 ...
}
}

20. 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);
}
}

21. 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);
}
}

22. 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");
}

23. 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");
}

24. 🔥 D E M O T I M E 🔥

27. github.com/marcushellberg/vaadin-chat

28. TextField name = new TextField();
Button button = new Button("Greet");
layout.addComponents(name, button);
button.addClickListener(click -> {
Notification.show("Hi, " + name.getValue());
});

29. Initial HTML
CSS
JavaScript

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

33. TextField name = new TextField();
Button button = new Button("Greet");
layout.add(name, button);
button.addClickListener(click -> {
Notification.show("Hi, " + name.getValue());
});

34. TextField name = new TextField();
Button button = new Button("Greet");
layout.add(name, button);
button.addClickListener(click -> {
Notification.show("Hi, " + name.getValue());
});

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

37. F E AT U R E S

38. 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("")

39. 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 {
...
}
@Push
@Route("")

40. 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 {
...
}
@Push
ui.access(() -> Notification.show("Alert!"));
@Route("")

41. 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>

43. A C C E S S I B L E

44. S T R O N G S E C U R I T Y

45. S TA B L E A P I

46. T H E J V M♥

48. E X T E N D A B L E

50. $

51. $

52. $

53. 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

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

58. Always happy to help you.

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

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