B U I L D I N G R E A C T I V E W E B A P P S I N J A V A @ M A - PowerPoint PPT Presentation

B U I L D I N G R E A C T I V E 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

� @marcushellberg

T O D A Y ⚡ Quick intro to Vaadin, Spring & Project Reactor 🙍 Hands-on programming

public class MainView extends VerticalLayout { private MessageBean bean = new MessageBean(); public MainView() { Button button = new Button("Click me", e �-? Notification.show(bean.getMessage())); add(button); } }

public class MainView extends VerticalLayout { public MainView(@Autowired MessageBean bean) { Button button = new Button("Click me", e �-? Notification.show(bean.getMessage())); add(button); } }

public class MainView extends VerticalLayout { public MainView(MessageBean bean) { Button button = new Button("Click me", e �-? Notification.show(bean.getMessage())); add(button); } }

mvn spring-boot:run

PROJECT REACTOR

public class MainView extends VerticalLayout { public MainView() { getMessages().forEach(System.out �:; println); } public List<ChatMessage> getMessages() { ��../ } }

Guest 1: Hello there? Guest 2: Hi! Guest 3: Hi there! Guest 3: How's it going? Guest 1: Pretty good. Nice weather outside! Guest 2: It's raining here...

public class MainView extends VerticalLayout { public MainView() { getMessages().subscribe(System.out �:; println); } public Flux<ChatMessage> getMessages() { return null; } }

Guest 1: Hello there? Guest 2: Hi! Guest 3: Hi there! Guest 3: How's it going? Guest 1: Pretty good. Nice weather outside! Guest 2: It's raining here...

V A A D I N

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

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

J A V A ♥ W E B

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>

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

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

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

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

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

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 { ��../ }

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

🔦 D E M O T I M E 🔦

� github.com/marcushellberg/vaadin-chat

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

Initial HTML CSS JavaScript

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


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

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


F E AT U R E S

A U T O M AT E D C O M M U N I C AT I O N @Push @Route("") public class MainView extends Div { ... } ui.access(() -> Notification.show("Alert!"));

P W A S U P P O R T @PWA(name = "Vaadin Chat", shortName = "Chat") public class MainView extends Div { ... }

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

A C C E S S I B L E �

S T R O N G S E C U R I T Y �

� S TA B L E A P I

♥ T H E J V M

� � � �

E X T E N D A B L E �

Always happy to help you.

$

$

� vaadin.com/start

🤕

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