You May Not Need JavaScript Simon Martinelli martinelli.ch

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

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

Single Page Applications (SPA) Client Server

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

No content

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 …

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

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.

Vaadin Flow Architecture

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

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

Hilla Architecture

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

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

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

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

Vaadin in Action

Real-World Projects

No content

No content

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

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