Presentation slides for the Vaadin 8 release meetup. Covers the new features in Vaadin 8 and 8.1, the migration steps from Vaadin 7 and what's up ahead for Vaadin.

1. V A A D I N 8 A N D B E Y O N D
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
@ M A R C U S H E L L B E R G # V A A D I N 8

2. things we'll look at
1. What's new in Vaadin 8
2. How you upgrade to Vaadin 8
3. What's next for Vaadin

3. W H AT ' S N E W ?

4. B R E A K I N G C H A N G E S

5. B R E A K I N G C H A N G E S
Only Java 8 + supported

6. B R E A K I N G C H A N G E S
Only Java 8 + supported
Dropped support for IE 8, 9, and 10

7. B R E A K I N G C H A N G E S
Only Java 8 + supported
Dropped support for IE 8, 9, and 10
Requires Servlet 3.0+ Container

8. B R E A K I N G C H A N G E S
Only Java 8 + supported
Dropped support for IE 8, 9, and 10
Requires Servlet 3.0+ Container
All themes except Valo are dropped

10. R . I . P .
C O N TA I N E R , I T E M & P R O P E R T Y

11. B I N D I N G T O A C O L L E C T I O N
BeanItemContainer<Person> container =
new BeanItemContainer(Person.class, persons);
Grid grid = new Grid();
grid.setContainerDataSource(container);
List<Person> persons = Backend.getPersons();

12. B I N D I N G T O A C O L L E C T I O N
List<Person> persons = Backend.getPersons();
Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(persons);

13. 1 0 X L E S S M E M O R Y U S A G E

14. 1 0 X L E S S M E M O R Y U S A G E ( ! )

15. 1 0 X L E S S M E M O R Y U S A G E ( ! )
S I G N I F I C A N T L Y L O W E R C P U U S A G E

16. D E F I N I N G C O L U M N S
Grid grid = new Grid();
grid.setContainerDataSource(new BeanItemContainer<>(persons));
grid.removeAllColumns();
grid.addColumn("firstName");
grid.getColumn("firstName").setHeaderCaption("First Name");
grid.addColumn("lastName");
List<Person> persons = Backend.getPersons();

17. D E F I N I N G C O L U M N S
Grid<Person> grid = new Grid<>();
grid.setItems(persons);
grid.addColumn(Person::getFirstName).setCaption("First Name");
grid.addColumn(Person::getLastName).setCaption("Last Name");
List<Person> persons = Backend.getPersons();

18. L A Z Y L O A D I N G

19. L A Z Y L O A D I N G
grid.setDataProvider(
(sortOrder, offset, limit) -> service.findAll(offset, limit),
() -> service.count()
);

20. C U S T O M C A P T I O N S
List<Person> persons = Backend.getPersons();
ComboBox comboBox = new ComboBox();
BeanItemContainer<Person> bic =
new BeanItemContainer<>(persons);
GeneratedPropertyContainer gpc =
new GeneratedPropertyContainer(bic);
gpc.addGeneratedProperty("name",
new PropertyValueGenerator<String>() {
@Override
public String getValue(
Item i, Object id, Object o1) {
Person p = (Person) id;
return
p.getFirstName() + " " + p.getLastName();
}

21. C U S T O M C A P T I O N S
String fullname =
genItem.getItemProperty("name")
.getValue().toString();
return fullname.toLowerCase().startsWith(
ssf.getFilterString());
}
@Override
public boolean appliesToProperty(
Object propertyId) {
return "name".equals(propertyId);
}
}
}
});
comboBox.setItemCaptionPropertyId("name");
comboBox.setContainerDataSource(gpc);

22. C U S T O M C A P T I O N S
List<Person> persons = Backend.getPersons();
ComboBox<Person> comboBox = new ComboBox<>();
comboBox.setItemCaptionGenerator(
p -> p.getFirstName() + " " + p.getLastName()
);
comboBox.setItems(persons);

23. T Y P E S A F E E V E N T S
comboBox.addValueChangeListener(evt -> {
Person p = (Person) evt.getProperty().getValue();
assert(p.getName().equals("John"));
});

24. T Y P E S A F E E V E N T S
comboBox.addValueChangeListener(evt -> {
assert(evt.getValue().getName().equals("John"));
});

25. N U L L R E P R E S E N TAT I O N

26. B I N D I N G T O F I E L D S
class PatientFormLayout extends FormLayout {
TextField firstName;
TextField middleName;
TextField lastName;
}
PatientFormLayout form = new PatientFormLayout();
Binder<Patient> binder = new Binder<>(Patient.class);
binder.bindInstanceFields(formLayout);

27. B I N D I N G T O F I E L D S
class PatientFormLayout extends FormLayout {
TextField firstName;
TextField middleName;
TextField lastName;
Binder<Patient> binder = new Binder<>(Patient.class);
binder.forField(firstName)
.withValidator(str -> str.length() > 4, "Name too short")
.bind("firstName");
}

28. E A G E R V A L I D AT I O N

29. E A G E R V A L I D AT I O N

30. N E W L A Y O U T D E F A U L T S

31. N E W L A Y O U T D E F A U L T S

32. A U T O M AT I C E X P A N D
HorizontalLayout header = new HorizontalLayout(title, logout);
VerticalLayout root = new VerticalLayout(header, grid);
grid.setSizeFull();
root.setExpandRatio(grid, 1);
root.setSizeFull();

33. A U T O M AT I C E X P A N D
HorizontalLayout header = new HorizontalLayout(title, logout);
VerticalLayout root = new VerticalLayout(header);
root.addComponentsAndExpand(grid);

34. V A A D I N 8 . 1 I M P R O V E M E N T S

35. T R E E G R I D

36. T R E E G R I D

37. C O M P O N E N T S I N G R I D

38. C O M P O N E N T S I N G R I D

39. H T M L 5 D R A G A N D D R O P

40. H T M L 5 D R A G A N D D R O P

41. T O U C H K I T I S N O W O P E N S O U R C E

43. V A A D I N 6 E N D O F L I F E

44. 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025
9
6
3
7
8
Fo r wards Comp atib le
GUARANTEED SUPPORT
≥ 5 years for a major release
≥ 2 latest major releases
(after that support is available on time and materials basis)
?
5
4
guaranteed
guaranteed
guaranteed
guaranteed
migration path
migration path

45. M A K I N G T H E J U M P T O 8

46. T W O U P G R A D E P AT H S
vaadin-server 7.x

47. T W O U P G R A D E P AT H S
vaadin-server 7.x

48. T W O U P G R A D E P AT H S
vaadin-server 7.x
vaadin-server 8.x

49. T W O U P G R A D E P AT H S
vaadin-server 7.x
vaadin-compatibility-server 8.x
vaadin-server 8.x

50. T W O U P G R A D E P AT H S
vaadin-server 7.x
vaadin-compatibility-server 8.x
vaadin-server 8.x

51. U P D AT E P A C K A G E
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId>
<version>7.7.6</version>
</dependency>

52. U P D AT E P A C K A G E
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-compatibility-server</artifactId>
<version>8.0.0</version>
</dependency>

53. C O M P AT I B I L I T Y S E R V E R

54. C O M P AT I B I L I T Y S E R V E R

55. U P D AT E F O R M S
Change FieldGroups to Binders
Move validators from Fields to Binder
Update Converters to new interface

56. R E M O V E C O N TA I N E R S
Change BeanItem/IndexedContainers to setItems
Lazy containers should instead use dataProvider

57. D R O P C O M P AT I B I L I T Y P A C K A G E
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-compatibility-server</artifactId>
<version>8.0.0</version>
</dependency>

58. D R O P C O M P AT I B I L I T Y P A C K A G E
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId>
<version>8.0.0</version>
</dependency>

59. W H AT ' S N E X T ?

60. V A A D I N
G R I D 2 . 0

61. <vaadin-grid items="[[users.result]]">
<vaadin-grid-column width="50px" flex-grow="0">
<template class="header">#</template>
<template>[[index]]</template>
<template class="footer">#</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template>[[item.firstName]]</template>
<template class="footer">First Name</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Last Name</template>
<template>[[item.lastName]]</template>
<template class="footer">Last Name</template>
</vaadin-grid-column>
</vaadin-grid>

62. I thought you said there would
be no HTML
– Every single Vaadin developer
”

63. L E T ' S TA K E A T R I P B A C K I N T I M E

65. •

66. •
User
Interface
Automata

69. .1
2001
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP

70. .1
2001
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP
WSDL transform
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP

72. joonas.lehtinen@itmill.com +358 40 5035001 www.itmill.com
Web Adapter

73. .1
2001
3
2002
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP (Millstone)
Web Adapter

75. joonas.lehtinen@itmill.com +358 40 5035001 www.itmill.com
AJAXAdapter

76. .1
2001
3
2002
4
2007
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP (IT Mill Toolkit)
AJAX Adapter

78. .1
2001
3
2002
4
2007
5
2007
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP (IT Mill Toolkit)
Web Adapter (GWT)

81. .1
2001
3
2002
4
2007
5
2007
6
2009
7
2013
8
2017
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP (Vaadin)
GWT

82. .1
2001
3
2002
4
2007
5
2007
6
2009
7
2013
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP (Vaadin)
GWT

83. .1
2001
3
2002
4
2007
5
2007
6
2009
7
2013
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP (Vaadin)
GWT
8
2017

84. .1
2001
3
2002
4
2007
5
2007
6
2009
7
2013
Button button = new Button("Hello");
TextField text = new TextField();
SERVER APP
Web Components
8
2017
9

85. H T M L I M P O R T S I N V A A D I N 8

86. webapp/VAADIN$ bower install -save game-card

87. webapp/VAADIN$ bower install -save game-card
@JavaScript("GameCard.js")
@HtmlImport("vaadin://bower_components/game-card/game-card.html")
public class GameCard extends AbstractJavaScriptComponent {
public GameCard(String symbol, String rank) {
callFunction("setCard", symbol, rank);
}
}

88. com_example_GameCard = function () {
var element = this.getElement();
this.setCard = function (symbol, rank) {
element.set("symbol", symbol);
element.set("rank", rank);
};
};
com_example_GameCard.tag = "game-card";

91. V A A D I N . C O M / E L E M E N T S

92. T H A N K Y O U
@ M A R C U S H E L L B E R G # V A A D I N 8