You May Not Need JavaScript

Single page applications (SPA) have become the for web application development. Angular, React, Vue.js and Ember.js are the best known representatives from this category of web frameworks. But does this client architecture fit every application? Or are there alternatives that may fit better and are less complex to develop?

In the first part of the talk, the differences between SPAs and classic, server-side approaches are explained and the advantages and disadvantages are discussed.

The second part reports on a current customer project in which the front end of a large ERP system had to be replaced by a modern web front end. The chosen framework is Vaadin Flow, a server-side web framework that makes development of web applications entirely in Java possible.

Transcript

1. You May Not Need JavaScript Simon Martinelli martinelli.ch
2. About Me • 30 years in software engineering • 25 years with Java • Self-employed since 2009 • Teacher at two Universities • Co-Lead JUG Berne, Switzerland
3. 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
4. Single Page Applications (SPA) Client Server
5. SPA Challenges Client Server How does the client access the API? Where is the input validate? How do we manage build and deployment?
7. 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 …
8. 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
9. 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.
10. Vaadin Flow Architecture
11. 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
12. 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); } }
13. Hilla Architecture
14. 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
15. Hilla Frontend export default function HelloWorldView() { const name = useSignal(''); return ( <> <section className="flex p-m gap-m items-end"> <TextField label="Your name” onValueChanged={(e) => { name.value = e.detail.value; }} /> <Button onClick={async () => { const serverResponse = await HelloWorldService.sayHello(name.value); Notification.show(serverResponse); }} >Say hello</Button> </section> </> ); }
16. Hilla Backend @BrowserCallable @AnonymousAllowed @Service public class HelloWorldService { public @Nonnull String sayHello(String name) { if (name.isEmpty()) { return "Hello stranger"; } else { return "Hello " + name; } } }
17. 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
18. Vaadin in Action
19. Real-World Projects
22. 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
23. Thank you! • Web https://martinelli.ch • EMail simon@martinelli.ch • X/Twitter simas_ch • Bluesky martinelli.ch