Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Efficient Full-Stack Development with Java

Efficient Full-Stack Development with Java

Single Page Applications (SPA) have become the quasi-standard in the development of web applications today. Angular, React, and Vue.js are the most well-known representatives of this category of web frameworks.

For Java developers, however, this means learning a new programming language and finding a completely foreign build environment with its ecosystem, which can often be more difficult.

Are there alternatives?
Vaadin is an established web framework that allows web applications to be developed entirely in Java but recently also supported a classic SPA approach.
First, the new architecture of Vaadin, which is no longer based on GWT but WebComponents, is explained.

The second part explains Hilla (former Vaadin Fusion), which offers the possibility to develop SPAs with TypeScript and WebComponents in the frontend and Java in the backend.

Simon Martinelli

October 06, 2022

More Decks by Simon Martinelli

Other Decks in Programming


  1. Current system • Existing ERP System based on Oracle Forms

    • Adaptable to customer needs • Goal: Build a modern web frontend ~800 Forms ~1800 Tables und Views ~4600 Procedures und Functions ~100 User Defined Types
  2. History HTML AJAX GWT Web Components .1 3 4 5

    6 7 8 10 TypeScript Lit Element .2 LTS 14 15 Vaadin Components & Flow 21 … 23 Fusion Renamed to Hilla
  3. Reasons for Vaadin Flow and Hilla • Excellent fit for

    data-centric business applications • Grids with paging, sorting, and filtering • Forms with validation and conversion • Provides a rich component model with theming • Integrated build
  4. 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.
  5. 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
  6. Example Code Vaadin Flow @Route public class HelloView extends VerticalLayout

    { public HelloView() { TextField textField = new TextField("Your Name"); Label label = new Label(); Button button = new Button("Greet", e -> label.setText("Hello, " + textField.getValue())); add(textField, label, button); } }
  7. Hilla (former Vaadin Fusion) • 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
  8. What is Lit? • Lit is a simple library for

    building fast, lightweight web components • At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast, and expressive • https://lit.dev/
  9. Hilla Frontend @customElement('hello-world-view') export class HelloWorldView extends View { name

    = ''; render() { return html` <vaadin-text-field label="Your name" @value-changed=${this.nameChanged}> </vaadin-text-field> <vaadin-button @click=${this.sayHello}>Say hello</vaadin-button> `; } nameChanged(e: CustomEvent) { this.name = e.detail.value; } sayHello() { showNotification(`Hello ${this.name}`); } }
  10. Hilla Backend @Endpoint public class MyEndpoint { @PermitAll public void

    permittedToAllMethod() { // Any authenticated user can access } @RolesAllowed("ROLE_ADMIN") public void permittedToRoleMethod() { // Only users with admin role can access } }
  11. 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 frontend developers that know TypeScript
  12. Demo Time • Starting Points • https://hilla.dev • https://start.vaadin.com •

    Example Code • https://github.com/simasch/java-forum-nord-2022
  13. Conclusion • With Vaadin Flow creating the entire UI with

    Java makes life for Java developers easier • With Vaadin Flow and Hilla you don’t have to care about client-server communication • You can concentrate on building the application because the build just works • You get a single deployment which is, in many cases, very convenient
  14. Thank you! • Web https://martinelli.ch • E-Mail [email protected] • Twitter

    simas_ch • LinkedIn https://linkedin.com/in/simonmartnelli