Vaadin Key Concepts

This document is meant for developers who are new to Vaadin and want to get up to speed quickly. It gives you a quick overview of the core concepts and provides links to relevant documentation for further reading. It can also be used as a quick reference while developing Vaadin apps. If you don’t ...
designer-flex-editor

Layout views with flexbox in Vaadin Designer

Vaadin Designer 4.3.8 makes laying out your Vaadin views a whole lot more visual. Previously, you had to know and enter the CSS for your views. Now, you can edit your flexbox layouts using simple controls in the properties panel. You will also learn flexbox in the process! The main building blocks ...

Production PWA webpack setup

In the previous tutorial, the focus was on learning the basic principles of how Progressive Web Apps work. Some of the issues we identified with the application were: We need to remember to update a timestamp in the ServiceWorker any time we update static resources Our initial caching can easily ...
nextgencomp-twitter-banner

The next generation of Vaadin web components

The current set of Vaadin components is the result of many years of development. We invested a lot in building high-quality components that are suitable for enterprise-grade apps. Starting from Vaadin 10, every major version ships with a set of new components. While we constantly add new features ...

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 ...

Is your Grid too slow? You are probably using the wrong renderer

If you are building a business web application with Vaadin, chances are that you are using Vaadin Grid. There are multiple ways to create columns with Grid: some are more flexible than others. But what you might not know is how they differ in terms of performance on the client side. Why Client-Side ...

Vaadin Pro available for students

The best way to learn to code is by coding. Vaadin is open source and free to use for any kind of web applications. In addition to this, we offer professional web developers Vaadin Pro, which adds more tools and components to increase productivity. We don’t want the price to prevent you from using ...