Slide 1

Slide 1 text

You May Not Need JavaScript Simon Martinelli martinelli.ch

Slide 2

Slide 2 text

About Me • 30 years in software engineering • 25 years with Java • Self-employed since 2009 • Teacher at two Universities • Co-Lead JUG Berne, Switzerland

Slide 3

Slide 3 text

UI Architectures • Server-Side Rendering • JSF • Spring MVC • Single Page Applika2on • React, Angular, Vue etc. • Vaadin 3 https://msdn.microsoft.com/en-us/magazine/dn463786.aspx

Slide 4

Slide 4 text

Single Page Applications (SPA) Client Server

Slide 5

Slide 5 text

SPA Challenges Client Server How does the client access the API? Where is the input validate? How do we manage build and deployment?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

History HTML AJAX GWT Web Components .1 3 4 5 6 7 8 10 TypeScript & Lit Element .2 15 Vaadin Components & Flow 2001 2002 2002 2005 2007 2009 2013 2017 2019 … 2020 23 Fusion renamed to Hilla 2022 24 Dev Bundles & React 2023 24.4 Unified Vaadin Platform 2024 …

Slide 8

Slide 8 text

Reasons for Vaadin • Excellent fit for data-centric business applications • Grids with paging, sorting, and filtering • Forms with data binding, validation, and conversion • Rich component model based on web components with excellent styling and theming support • Integrated build for frontend and backend

Slide 9

Slide 9 text

Web Components? • Web Components allow you to create reusable custom elements and utilize them in your web apps. • Custom elements: A set of JavaScript APIs • Shadow DOM: To keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document. • HTML templates: These can then be reused multiple times as the basis of a custom element's structure.

Slide 10

Slide 10 text

Vaadin Flow Architecture

Slide 11

Slide 11 text

Vaadin Flow • Type-safe Java-UIComponent-API on the server side • Uses Web Components • No REST API is necessary • Direct access from UI code to services and repositories • Bi-directional Data Binding • If the user interface changes on the client or the server, the changes are automatically applied to the other side

Slide 12

Slide 12 text

Example Code Vaadin Flow @Route("") public class HelloWorldView extends VerticalLayout { public HelloWorldView() { var name = new TextField("Your name"); var sayHello = new Button("Say hello"); sayHello.addClickListener(e -> { Notification.show("Hello " + name.getValue()); }); sayHello.addClickShortcut(Key.ENTER); add(name, sayHello); } }

Slide 13

Slide 13 text

Hilla Architecture

Slide 14

Slide 14 text

Hilla • Integrates a Spring Boot Java backend with a reactive TypeScript frontend • Build UIs from web components • Use a reactive programming model for updating the UI • Use routing to display views and resources • No RESTAPI necessary • REST API and client code are generated • Manage security on the server-side • Fully stateless • TypeScript views can be loaded without creating a server session

Slide 15

Slide 15 text

Hilla Frontend export default function HelloWorldView() { const name = useSignal(''); return ( <>

Slide 16

Slide 16 text

Hilla Backend @BrowserCallable @AnonymousAllowed @Service public class HelloWorldService { public @Nonnull String sayHello(String name) { if (name.isEmpty()) { return "Hello stranger"; } else { return "Hello " + name; } } }

Slide 17

Slide 17 text

Vaadin Flow or Hilla • Vaadin Flow • If you build a data-centric application • If you want to do full-stack development with Java • Hilla • If you want to avoid server state • If you have a lot of client interaction • If your application must be offline capable • If you have developers who know React

Slide 18

Slide 18 text

Vaadin in Action

Slide 19

Slide 19 text

Real-World Projects

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Conclusion • Creating the entire UI with Java makes life for Java developers easier • You don’t have to care about client-server communication • You can concentrate on building the application because the build works • Having a single deployment, is, in many cases, very convenient

Slide 23

Slide 23 text

Thank you! • Web https://martinelli.ch • EMail [email protected] • X/Twitter simas_ch • Bluesky martinelli.ch