Starting with Hilla (from Vaadin)

Name: Starting with Hilla (from Vaadin)
Rating: 4.0 (28 reviews)

Learn using Hilla (from Vaadin) web framework for building a full-stack web applications

Created byDavid Marko

Last updated 8/2023

English

English [Auto],

What you'll learn

Create a new Hilla application from scratch
Understand how Hilla frontend and backend are connected together
Working with Hilla backend endpoints
Create a simple but complete application in Hilla
Implement a simple @Push technology support in a real application
Create MS Excel file from dynamic data and serve it from Hilla app
How to add MongoDB as Hilla backend database platform

Course content

6 sections • 23 lectures • 2h 15m total length

Introduction3:58
Explore Vaadin-based full-stack framework that unites Spring Boot back end with a TypeScript front end in one codebase, enabling type-safe server access.

Tools we are going to use2:59
Explore the toolset for a Vaadin project, including Spring Boot with a Java backend, a TypeScript frontend, Node.js, Eclipse IDE, and Maven for dependency management.
Generating a new project2:33
Create a Halo studio application from a starter template using Node.js and npm, configured with a Java Maven Spring Boot backend and a TypeScript front end in Eclipse.
Understanding frontend and backed parts structure4:35
Open a Maven-based Hilla project in Eclipse, review the backend Java src and frontend TypeScript front end folders, and examine the pom.xml with Spring Boot and Halo dependencies.
Backend is SpringBoot and JAVA, frontend Lit and TypeScript5:23
Explore how a Spring Boot Java backend and a Lit and TypeScript frontend run as a single full-stack app. Experience automatic UI updates in the browser on port 8080.

Generating Todo project2:53
Create a full stack to-do demo with front end and back end, linked to MongoDB, using a NodeJS starter; explore a project structure with Java, TypeScript, Spring Boot, and Eclipse.
Running project for a first time3:29
Review the base hilla starter: a spring boot app with tomcat on port 8080, using eclipse with pom.xml dependencies, a front end folder, and a basic two pane UI.
Making a first changes - frontend vs. backend3:22
See how front end and back end interact in a single application, using spring boot dev tools for live reload and instant browser updates after saving TypeScript or Java changes.
Implementing a backend part connected to Frontend - part111:31
Implement a spring boot backend connected to the Vaadin Hilla frontend by creating a to-do endpoint, configuring MongoDB in application.properties, and auto-generating a TypeScript counterpart.
Implementing a backend part connected to MongoDB - part212:12
Develop backend for a to-do app with MongoDB; define a todo document with id, title, description, author, and done, and provide save and find all endpoints for the TypeScript frontend.
What we are not doing?1:49
Identify that we are not creating any frontend-backend communication channels or glue code; instead, Hilla provides endpoints and a TypeScript counterpart, enabling automatic communication between front end and back end.
Updating a frontend part3:54
Update the frontend by wiring view.ts to the backend update, save, and find all endpoints, using Vaadin components and a binder to bind the to-do entity.
Adding a new Todo6:29
Add a new todo using Vaadin text field and button, bound to a todo model, sent to the backend via the todo endpoint, and saved in MongoDB.
Listing Todo's stored in database11:29
Fetch all todos from the backend endpoint and render them in a front-end table by binding to a TypeScript state variable, syncing with MongoDB data and reflecting updates immediately.
Updating Todo item 'done' status5:59
Add a checkbox to each todo item to toggle its done status, update the frontend state, and persist changes to MongoDB via the todo endpoint.
Removing Todos - backend & frontend parts8:31
Implement backend and frontend support for removing completed todos, filtering done items in MongoDB, deleting them via a remove done items endpoint, and updating the front-end state.
Adding more fields to Todo5:29
Add an author field to the Vaadin Hilla Todo app, bind it to the Todo model with the binder, and save the author alongside the task in MongoDB.

New backend dependencies2:33
Add a front-end export button to select items and export to a native Excel file using a single Apache library dependency managed by Maven, with backend and frontend integration.
Backend implementation8:44
Implement a backend that generates an Excel workbook using Apache POI, exposes a Spring Boot REST endpoint, and serves a sheet with rows and cells to the browser.
Downloading Excel file in frontend implementation10:19
Call the backend endpoint from the frontend to download an Excel file of todo items, with sheet rows for task name, author, and done status.

Enabling Hilla @Push support2:11
Enable Hilla push support to update todo lists in real time across clients. Add the Vaadin feature flag and restart the app to activate server push and reflect changes immediately.
Adding @Push support to backend3:56
Enable Vaadin backend server push with info sync to broadcast to all connected clients when items are created or removed, using reactor flux and info sink in Spring Boot.
Updating frontend for receiving @Push messages11:31
Enable real-time updates by connecting the TypeScript frontend to a server push sink, receiving @Push messages and updating the message state and todos for all connected users without reloads.

Requirements

Java 11+, basic knowledge of web development, SpringBoot basics

Description

Welcome to the ‘Starting with Hilla from Vaadin’ course. With this course, you are going to add value to your existing JAVA and SpringBoot knowledge by getting familiar with Hilla web framework. Adopting Hilla will help you create a full-stack (frontend/backend) applications in one project structure using a well know technologies like Java, Typescript, SpringBoot, and Node.js.

The course covers several topics often useful in corporate JAVA development but not exclusively. SpringBoot is being used here as an underlying framework used by Hilla web framework by default. 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, including UI components, and integrated tooling.

The primary idea of this course is to help existing SpringBoot/Java developers to adopt Hilla web framework and move from common backend development to frontend also. Hilla makes this connection much more feasible and you hopefully get a taste of this in our course. Are you working with Angular or React with SpringBoot backend? This course can help you to get a taste of more tight integration Hilla makes to SpringBoot backend and reuse your existing SpringBoot skills on a full scale.

Topics covered by this course:
During a course, we create a basic Hilla single-page application and each lecture will add a new enhancement to it. Eventually, we create a single application with many different features.

understanding Hilla project structure
creating a single-page Hilla application step-by-step
using MongoDB as persistent data storage
collaboration using server Push technology
export application data in MS Excel format

An important part of this course is to realize 'what we don't need to do' when using Hilla. Simplification can be huge and the old saying that 'the best code is the code you don't have to write' is proven here.

GitHub repository:

The source code is available through the link attached to the last lecture in this course. You can clone the repo and use the code snippets we are building in this course.

Who is this course for:

‘Starting with Hilla’ course is targeted at individuals or small/medium teams of professional Java developers that want to be productive and competitive in this large market. You will see how Hilla and Vaadin take away the unnatural "need" to split teams into Frontend and Backend developers, with all the communication hassles that come with that all the time.

Who this course is for:

‘Starting with Hilla’ course is targeted for individuals or small/medium teams of professional Java developers that want to be productive and competitive in this large market. You will see how Hilla and Vaadin take away the unnatural "need" to split teams into Frontend and Backend developers, with all communication hassles that come with that all the time.

Starting with Hilla (from Vaadin)

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 4min

Project setup4 lectures • 16min

Building Todo application step-by-step12 lectures • 1hr 17min

Exporting data to MS Excel3 lectures • 22min

@Push support3 lectures • 18min

Quiz0

Requirements

Description

Who this course is for: