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.

Transcript

1. Going Full-Stack with Hilla TypeScript meets Java Simon Martinelli @simas_ch martinelli.ch
2. About me https://martinelli.ch 1995 2000 COBOL 2007 2009 2011 2012 JSR-352 Java Batch 2013 JSR-354 Money/Currency 1972 2021
4. 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
5. Hilla Architecture
6. 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
7. 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.
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. Demo Time • Starting Points • https://hilla.dev • https://start.vaadin.com • Example Code • https://github.com/simasch/jcon-hilla
10. 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
11. Thank you! • Web https://martinelli.ch • E-Mail simon@martinelli.ch • Twitter simas_ch • LinkedIn https://linkedin.com/in/simonmartnelli