https://hilla.dev

 

  * Docs
  * Blog
  * GitHub

The modern web framework
for Java

Hilla integrates a Spring Boot Java back end with a reactive
TypeScript front end. It helps you build apps faster with type-safe
server communication, included UI components, and integrated tooling.

Get startedDocumentation

  * TypeScript UI
  * Java back end

                    export class PersonView extends LitElement {
                      @state() people: Person[] = [];

                      async firstUpdated() {
                        this.people = await PersonEndpoint.findAll();
                      }

                      render() {
                        return html`
                          <vaadin-grid .items=${this.people}>
                            <vaadin-grid-column path="firstName"></vaadin-grid-column>
                            <vaadin-grid-column path="lastName"></vaadin-grid-column>
                          </vaadin-grid>`;
                      }
                    }

                      @Endpoint
                      @AnonymousAllowed
                      public class PersonEndpoint {
                          private PersonRepository repository;

                          public PersonEndpoint(PersonRepository repository) {
                              this.repository = repository;
                          }

                          public @Nonnull List<@Nonnull Person> findAll() {
                              return repository.findAll();
                          }


                      }

Type-safe server access

Hilla simplifies secure data access from the client side. Create
type-safe endpoint Java classes and let Hilla take care of the rest.
Calling a back-end method is as simple as calling an async function.

UI components included

The included Vaadin web components encapsulate rich functionality so
you don't have to build it yourself. Start with ready-made UI
components, typography, and a beautiful base theme.

Fast and flexible

It is easy to create your own reusable elements with Lit -- a
lightweight library for creating web components. You get full control
over the DOM and unrivaled rendering performance.

Zero configuration

Full stack & single deployment

Hilla offers a zero-configuration toolchain for building web apps
that include both your front-end UI and Java stack in a single
project. Fetching data from the Java back end is straightforward,
thanks to automatically-generated TypeScript code.

Simple type-safe server communication

Hilla helps you access the back end easily with type-safe endpoints.

  * Hilla generates TypeScript definitions automatically for all
    parameter and return types.
  * Call the server through async TypeScript methods instead of URLs.
  * Build-time type-checking.
  * Shared data validation on server and client.
  * Endpoints are secured by default.

  * index.ts
  * PersonEndpoint.java
  * Person.java

                // Type info is automatically generated based on Java
                import Person from
                  'Frontend/generated/dev/hilla/demo/entity/Person';
                import { PersonEndpoint } from 'Frontend/generated/endpoints';

                async function getPeopleWithPhoneNumber(){
                  const people: Person[] = await PersonEndpoint.findAll();

                  // Compile error: The property is 'phone', not 'phoneNumber'
                  return people.filter(person => !!person.phoneNumber);
                }

                console.log('People with phone numbers: ',
                  getPeopleWithPhoneNumber());

                @Endpoint
                @AnonymousAllowed
                public class PersonEndpoint {

                    private PersonRepository repository;

                    public PersonEndpoint(PersonRepository repository) {
                        this.repository = repository;
                    }

                    public @Nonnull List<@Nonnull Person> findAll() {
                        return repository.findAll();
                    }
                }



                @Entity
                public class Person {

                    @Id
                    @GeneratedValue
                    private Integer id;

                    @Nonnull private String firstName;
                    @Nonnull private String lastName;
                    @Email @Nonnull private String email;
                    @Nonnull private String phone;

                    // getters, setters
                }

              @customElement('person-view')
              export class PersonView extends View {
                @state() people: Person[] = [];

                async getPeople() {
                  this.people = await PersonEndpoint.findAll();
                }

                render() {
                  return html`
                    <vaadin-button @click=${this.getPeople}>
                      Fetch data
                    </vaadin-button>
                    <span>Showing ${this.people.length} people.</span>

                    <vaadin-grid .items=${this.people}>
                      <vaadin-grid-column path="firstName"></vaadin-grid-column>
                      <vaadin-grid-column path="lastName"></vaadin-grid-column>
                      <vaadin-grid-column path="email"></vaadin-grid-column>
                      <vaadin-grid-column path="phone"></vaadin-grid-column>
                    </vaadin-grid>
                  `;
                }
              }


Declarative & component based

Hilla uses a simple, yet powerful, reactive programming model based
on Lit.

  * Define your components and views declaratively in HTML.
  * The template is updated efficiently whenever the application
    state changes.
  * Bind properties and values using standard JavaScript syntax.
  * The included Vaadin components include all the building blocks
    you need to build even complex apps.
  * Create and validate forms using Binder.
  * Navigate between views and capture parameters with Router.

Clone this example

Powered by Spring Boot

Hilla uses Spring Boot on the server. It means you can get started
quickly and have access to the full power of the Spring ecosystem:

  * Access your database easily with Spring Data.
  * Secure your app with Spring Security.
  * Deploy your app as a standalone JAR.

              @SpringBootApplication
              @PWA(name = "Hilla App", shortName = "Hilla")
              public class Application
                      extends SpringBootServletInitializer
                      implements AppShellConfigurator {

                  public static void main(String[] args) {
                      SpringApplication.run(Application.class, args);
                  }

              }


All the tools you need

Components and tools included

Hilla helps you start fast and stay productive by including
everything you need in one package.

  * 40+ UI components.
  * A customizable design system to match your brand.
  * Figma design kit to help designers and developers work together.
  * Unified front end and back end build tooling. Run the entire app
    with Maven or Gradle.

Learn more
[svg]
Vaadin components
Develop faster with hilla

Features to build faster

Here are some of the great features that gives you a headstart.

Powerful forms

Hilla comes with a library for binding input fields to model objects
and keeping track of the form state. It reuses the metadata from Java
Bean validation annotations to show client and server-side errors
automatically.

In-app navigation with a router

Hilla includes a powerful client-side router for web components.
Features include async route resolution, animated transition, child
routes, navigation guards, redirects, and more.

Secure endpoints by default

Access control features are enabled by default for all endpoint
methods. Hilla uses Spring Security for securing your app.

Supports server-side Java views

Hilla is fully interoperable with Vaadin Flow. You can extend
existing server-side Vaadin Flow applications with offline
functionality by writing client-side Hilla views.

Productivity with Spring Boot

Hilla helps you be productive by seamlessly integrating with Spring
Boot, the industry standard for building fast and secure enterprise
Java apps. In addition, Maven and Vite are preconfigured to work
together, while Live Reload lets you see the result of your code as
you go.

Customizable look and feel

All Vaadin components expose their styleable parts, allowing them to
be adapted to a custom design system. Built-in CSS custom properties
make changing application-wide settings straightforward.

Stateless by default

Hilla apps are easy to scale because they are stateless by default.
Stay performant no matter how much your business grows.

Open Source

Hilla is hosted in a public GitHub repository where you can view,
extend and modify the source code and report issues.

Modern web + modern Java =

We think Java web apps deserve some love. That's why we built Hilla,
the modern web framework built specifically for Java back ends.

Get startedDocumentation
(c) 2022 Vaadin. All rights reserved

  *  
  *  
  *  
  *