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

Going Full-Stack with Hilla

Going Full-Stack with Hilla

Full-stack development is often a good choice when developing business applications. But the integration of the frontend and the backend is not trivial.

Hilla to the rescue!
Hilla integrates a Spring Boot Java backend with a reactive TypeScript frontend. You build UIs using Lit framework or React and web components without caring about a REST API. Hilla generates the REST-API and the client code for you.
The backend is secure by default and fully stateless.

Hilla was made by the creators of the famous Java web framework Vaadin. This talk introduces the architecture and concepts of Hilla and Lit. A hands-on demo shows how easy it is to do full-stack development using Hilla and Spring Boot.

Simon Martinelli

September 22, 2022

More Decks by Simon Martinelli

Other Decks in Technology


  1. About me https://martinelli.ch 1995 2000 COBOL 2007 2009 2011 2012

    JSR-352 Java Batch 2013 JSR-354 Money/Currency 1972 2021
  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. 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
  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. 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/
  6. Demo Time • Starting Points • https://hilla.dev • https://start.vaadin.com •

    Example Code • https://github.com/simasch/jcon-hilla
  7. Conclusion • With 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
  8. Thank you! • Web https://martinelli.ch • E-Mail [email protected] • Twitter

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