The document discusses the history and future of the Vaadin framework. It outlines how Vaadin has evolved from GWT-based widgets to modern web components using the Polymer library. It describes how Vaadin 10 introduces Vaadin Components that are built as reusable web components, allowing developers to create user interfaces with modern APIs and structure. The talk also covers how Vaadin now uses functional data binding with its Binder class to simplify editing and validation of business objects.
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Vaadin Brand and Simplicity Fight
1. 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 8 & 1 0
6. 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
• Initial Web component support
• Improved performance
28. H o w w o u l d y o u e d i t
c u s t o m e r r e c o r d s ?
29. firstName = new TextField("First name");
lastName = new TextField("Last name");
status = new ComboBox<CustomerStatus>("Status");
yearOfBirth = new TextField("Year of Birth");
30. firstName = new TextField("First name");
lastName = new TextField("Last name");
status = new ComboBox<CustomerStatus>("Status");
yearOfBirth = new TextField("Year of Birth”);
status.setItems(CustomerStatus.values());
status.setItemLabelGenerator(CustomerStatus::name);
31. firstName = new TextField("First name");
lastName = new TextField("Last name");
status = new ComboBox<CustomerStatus>("Status");
yearOfBirth = new TextField("Year of Birth”);
status.setItems(CustomerStatus.values());
status.setItemLabelGenerator(CustomerStatus::name);
binder = new Binder<Customer>();
32. firstName = new TextField("First name");
lastName = new TextField("Last name");
status = new ComboBox<CustomerStatus>("Status");
yearOfBirth = new TextField("Year of Birth”);
status.setItems(CustomerStatus.values());
status.setItemLabelGenerator(CustomerStatus::name);
binder = new Binder<Customer>();
binder.forField(firstName).bind(Customer::getFirstName, Customer::setFirstName);
33. firstName = new TextField("First name");
lastName = new TextField("Last name");
status = new ComboBox<CustomerStatus>("Status");
yearOfBirth = new TextField("Year of Birth”);
status.setItems(CustomerStatus.values());
status.setItemLabelGenerator(CustomerStatus::name);
binder = new Binder<Customer>();
binder.forField(firstName).bind(Customer::getFirstName, Customer::setFirstName);
binder.forField(lastName).bind(Customer::getLastName, Customer::setLastName);
34. firstName = new TextField("First name");
lastName = new TextField("Last name");
status = new ComboBox<CustomerStatus>("Status");
yearOfBirth = new TextField("Year of Birth”);
status.setItems(CustomerStatus.values());
status.setItemLabelGenerator(CustomerStatus::name);
binder = new Binder<Customer>();
binder.forField(firstName).bind(Customer::getFirstName, Customer::setFirstName);
binder.forField(lastName).bind(Customer::getLastName, Customer::setLastName);
binder.forField(status).bind(Customer::getStatus, Customer::setStatus);
35. firstName = new TextField("First name");
lastName = new TextField("Last name");
status = new ComboBox<CustomerStatus>("Status");
yearOfBirth = new TextField("Year of Birth”);
status.setItems(CustomerStatus.values());
status.setItemLabelGenerator(CustomerStatus::name);
binder = new Binder<Customer>();
binder.forField(firstName).bind(Customer::getFirstName, Customer::setFirstName);
binder.forField(lastName).bind(Customer::getLastName, Customer::setLastName);
binder.forField(status).bind(Customer::getStatus, Customer::setStatus);
binder.forField(yearOfBirth)
.withConverter(Integer::valueOf, String::valueOf)
.bind(Customer::getYearOfBirth, Customer::setYearOfBirth);
36. public interface Converter<P, M> {
Result<M> convertToModel(P value, ValueContext context);
P convertToPresentation(M value, ValueContext context);
}
44. Web Component Standards
4 C O R E C O N C E P T S , S T I L L E V O L V I N G
• Custom Elements
• Shadow DOM
• Templates
• Reusability, HTML Imports / JS Modules
53. 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
• Vaadin Components are built with Polymer
• For Vaadiner Polymer is the new client side technology
• Affiliated with Google
• Building Web Components with slowly stabilizing standards
65. 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
• For Vaadin Developer it’s mentally the Widget
• Defines own “dom-module”with <template> and <script>
• Specifies the logical DOM structure with HTML and Web Components
• Extends from Polymer.Element JavaScript class
66. 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
86. 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
87. 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
91. public class YourComponent extends Div {
public YourComponent {
…
add([any Vaadin component]);
}
}
3 N E W U I C O M P O N E N T S
92. public class YourComponent extends Composite<Div> {
public YourComponent {
…
getContent().add([any Vaadin component]);
}
}
3 N E W U I C O M P O N E N T S
93. @Tag(“div”)
public class YourComponent extends Component {
public YourComponent {
…
getElement().appendChild([any Element])
}
}
3 N E W U I C O M P O N E N T S
99. @ E V E N T H A N D L E R
• Exposes server side methods for invocation from JavaScript
• Can be mixed with pure JS functions for immediate response
4 L AT E N C Y - C O M P E N S AT I O N
100. <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");
}
103. 5 C L I E N T - S I D E V I E W S
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);
}
105. • Vaadin 8 and 10 - built on Java 8
• Lambdas and Functional paradigm at large
• Data binding completely redone
• Targets simplifications and flexibility, #FFS ;)
• Flexible components and multiple ways to data bind
• Gathers all data binding to Binder, simplifies Fields
Lessons learned
106. Lessons learned
• Web Components are becoming standard in browsers
• Vaadin Components - the client side API for JavaScript Developers
• Component API - the server side API for Java Developers
• Vaadin Flow - the bridge between Client and Server
• Vaadin 10 provides the richest set of development features