Hilla Documentation

Creating an Application

Hilla is an application framework in which you write client-side code with TypeScript. Hilla views connect with server-side Java endpoints that can provide business data and logic, and can connect further with backend services.

This chapter gives a more thorough and practical overview of Hilla application basics. The various topics in this chapter are described in more detail in the further documentation.

Hilla Application Architecture

Hilla Application Architecture

The basic elements of an application built with Hilla are:

Application Shell

The index.html file that is loaded first sets up application styles and loads the application scripts. The main entry point is an index.ts script, where you set up routes to display the various views of the application, and do any other initialization needed by the application.

Views

The user interface of an application consists of one or more views. Views are built from Hilla web components by extending the LitElement component. Each view can display different data or other functionalities. Typically, you have at least a main view, and possibly a login view to enter that. A main view typically contains child views that fit inside the layout of the main view. Such child views could be "Products", "Personnel", or "Tasks".

As a view in Hilla is a web component that extends LitElement, it is an HTML element. The views are defined declaratively in a reactive manner, where changes in a view’s state cause it to be redrawn to reflect the new data.

Binding views to data

Views typically display some data or allow the user to enter some.

Topics

Application Basics
An introduction to reactive UIs using Hilla.
Component Basics
Creating views using reactive web components with Lit in Hilla.
Handling Events
Handling events in a Hilla application: declarative event listeners and event objects in TypeScript.
Using Components
Using Vaadin components and/or third-party web components in your Hilla views.
Accessing Java Backend
Using Hilla to call the Java backend from a TypeScript frontend in a type-checkable way.
Error Handling
Implementing error handling on the client side of a Hilla application.
State Management with MobX
Managing application state with the MobX state management library in Hilla.
Customizing Type Conversion
Using annotations to control the options when serializing and deserializing data in Java endpoints.
Configuring
Customizing the configuration of a Hilla application for both the development environment and for execution.