Vaadin Blog
Turning Figma designs into Vaadin layouts
Editor's note: The Designs to Layouts Figma plugin is Matti's personal project, not an official Vaadin tool. Visual design is a critical aspect of a modern software project that permeates the entire process. Unfortunately, there is a tool mismatch: designers tend to use tools such as Sketch or, ...
Vaadin simplicity, now also in TypeScript
Vaadin has always provided a strong abstraction for web development. The component-based Java API and completely abstracted client-server programming model make development of web UIs as easy and efficient as developing traditional desktop apps. Because the UI code resides in the JVM, accessing ...
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 ...
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 ...
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 ...
