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
SMART_READER_LITE
LIVE PREVIEW

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

Dec 22, 2022 667 likes •1.27k views

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

slide-1
SLIDE 1

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
slide-2
SLIDE 2

@marcushellberg

slide-3
SLIDE 3

T O D A Y

⚡ Quick intro to Vaadin, Spring & Project Reactor 🙍 Hands-on programming

slide-4
SLIDE 4
slide-5
SLIDE 5 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); } }
slide-6
SLIDE 6 public class MainView extends VerticalLayout { public MainView(@Autowired MessageBean bean) { Button button = new Button("Click me", e -? Notification.show(bean.getMessage())); add(button); } }
slide-7
SLIDE 7 public class MainView extends VerticalLayout { public MainView(MessageBean bean) { Button button = new Button("Click me", e -? Notification.show(bean.getMessage())); add(button); } }
slide-8
SLIDE 8

mvn spring-boot:run

slide-9
SLIDE 9

PROJECT REACTOR

slide-10
SLIDE 10 public class MainView extends VerticalLayout { public MainView() { getMessages().forEach(System.out:;println); } public List<ChatMessage> getMessages() { ../ } }
slide-11
SLIDE 11

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

slide-12
SLIDE 12 public class MainView extends VerticalLayout { public MainView() { getMessages().subscribe(System.out:;println); } public Flux<ChatMessage> getMessages() { return null; } }
slide-13
SLIDE 13

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

slide-14
SLIDE 14

V A A D I N

slide-15
SLIDE 15

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

slide-16
SLIDE 16

F O C U S O N

P R O D U C T I V I T Y

slide-17
SLIDE 17

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

slide-18
SLIDE 18

J A V A ♥ W E B

slide-19
SLIDE 19
slide-20
SLIDE 20

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>

slide-21
SLIDE 21

J A V A F R A M E W O R K

new ComboBox();

slide-22
SLIDE 22 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
slide-23
SLIDE 23

O P E N S O U R C E

Apache 2.0

slide-24
SLIDE 24

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

slide-25
SLIDE 25 new Span("I'm a <span>") new Button("I'm a button") new DatePicker("Select a date") new ComboBox<?("Select an option")
slide-26
SLIDE 26 new VerticalLayout( new Button("I'm a button"), new DatePicker("Select a date"), new ComboBox<?("Select an option"), new Span("I'm a <span>") );
slide-27
SLIDE 27 var nameField = new TextField("Name"); var button = new Button("Click me"); button.addClickListener(click -? { add(new Span(nameField.getValue())); });
slide-28
SLIDE 28

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

slide-29
SLIDE 29 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); } }
slide-30
SLIDE 30 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"); }
slide-31
SLIDE 31

🔦 D E M O T I M E 🔦

slide-32
SLIDE 32
slide-33
SLIDE 33

github.com/marcushellberg/vaadin-chat

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

Initial HTML CSS JavaScript

slide-36
SLIDE 36
slide-37
SLIDE 37 {name: {value: 'Marcus'}, button: {event: 'clicked'}}

261 bytes


slide-38
SLIDE 38 TextField name = new TextField(); Button button = new Button("Greet"); layout.add(name, button); button.addClickListener(click -> { Notification.show("Hi, " + name.getValue()); });
slide-39
SLIDE 39 {name: {value: 'Marcus'}, button: {event: 'clicked'}}

261 bytes


{updates: [ {notification: 'Hi, Marcus'} ]}

267 bytes


slide-40
SLIDE 40

F E AT U R E S

slide-41
SLIDE 41

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("")
slide-42
SLIDE 42

P W A S U P P O R T

public class MainView extends Div { ... } @PWA(name = "Vaadin Chat", shortName = "Chat")
slide-43
SLIDE 43 new VerticalLayout( new TextField("Text Field"), new Button("Button") ) <vaadin-vertical-layout> <vaadin-text-field label="Text Field"> <0vaadin-text-field> <vaadin-button>Button<0vaadin-button> <0vaadin-vertical-layout>
slide-44
SLIDE 44
slide-45
SLIDE 45

A C C E S S I B L E

slide-46
SLIDE 46

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

slide-47
SLIDE 47

S TA B L E A P I

slide-48
SLIDE 48

T H E J V M

♥

slide-49
SLIDE 49
slide-50
SLIDE 50

E X T E N D A B L E

slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53

Always happy to help you.

slide-54
SLIDE 54

$

slide-55
SLIDE 55

$

slide-56
SLIDE 56

vaadin.com/start

slide-57
SLIDE 57

🤕

slide-58
SLIDE 58

T H A N K S

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