Category: Tutorials
Converting a website into a PWA
This tutorial will teach you the the basic Progressive Web App concepts by turning an existing web app into a PWA only using the native browser API. The tutorial does not use any framework, everything you learn will be relevant no matter what framework you use in your project. What’s needed In ...
Decoupling Vaadin components with the Observer Pattern
In this tutorial, we show you how to use the observer design pattern to decouple Vaadin components. Who Belongs to Whom? Connecting two components using constructor parameters is a common procedure. It can be clearly seen, for example, in the construction of graphic surfaces. Take, for example, the ...
Speed up Vaadin builds with a local npm registry
In this tutorial, we’re going to show you how to avoid redundant downloads of npm dependencies while building Vaadin applications. Why does npm cause slow development turnaround times? npm is the equivalent of Maven in the JavaScript environment. It manages the front-end dependencies for a Vaadin ...
How to create a Docker container for a Vaadin Java app
In this tutorial you learn to deploy your Java-based Vaadin application in a Docker container and run it locally. Configuring Docker is a complex topic that has, by now, filled many articles and books. This tutorial gives you a short and simple example of how to start a Vaadin application in a ...
Java Bean Validation: A Comprehensive Introduction and Best Practices
Jakarta Bean Validation (previously known as Java Bean Validation) allows you to define data validations using annotations in your Java Beans. Its motto is "constrain once, validate everywhere". Available implementations Jakarta Bean Validation is an API defined by the JSR 380. Currently, there are ...
Building a dynamic web form with validation
When building business web apps, one of the most common tasks is data entry, that is, lots of webforms bound to domain objects or POJOs, validated against sometimes complex logic and finally persisted in a database or perhaps over REST to a remote server. In this tutorial, we walk through the ...
LitElement and PWA
In the first four tutorials in this series, we’ve built an app with LitElement, using Redux for state management, Vaadin Router for navigation and Webpack for building and code splitting. In this final tutorial, we turn the application into an offline-capable Progressive Web App. If you didn’t do ...
Navigation and code splitting in a LitElement project
So far in this tutorial series, we have built an app with LitElement and connected it to a Redux store for state management. In this tutorial, we add a new view for stats to learn how to navigate between views and how to split code for performance. If you didn’t do the previous steps of the ...
Using Redux in a LitElement app
In this third tutorial, you’ll learn how to use Redux for state management in a LitElement application. Check out the first two tutorials to learn how to set up a LitElement application and how to use lit-html for templating. If you aren’t interested in Redux, feel free to skip over this tutorial ...