Vaadin Blog
An introduction to client-side TypeScript views in Vaadin 15
Vaadin is fast expanding its horizons. By the next LTS (estimated for 2021), the platform is looking to fully support two unique development models: Java-only server-side development (the current primary Vaadin model). TypeScript-based client-side UI development with seamless access to Java on the ...
Community Answer: Understanding inversion of control and dependency injection
There are two key concepts that you must understand when you start with Spring or JakartaEE/CDI–inversion of control and dependency injection. In brief, inversion of control means letting a framework take control of the execution flow of your program to do things like create instances of your ...
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 ...