Introduction to Vaadin Flow

[Audio] Hello, my name is Matthew. I'm from Vaadin, and today I'm going to give you an introduction to Vaadin Flow. This is the first part of our Vaadin Foundation training series..

[Audio] Other videos in this series cover topics such as user interface layouting, form creation, or navigation..

[Audio] In this introduction we will cover: what are Vaadin and Flow, developing a web application in Java, built-in components and component development, and then we will go through an exercise to build your first application..

[Audio] Firstly, what is Vaadin?. What is Vaadin?.

[Audio] Vaadin is a Finnish word meaning a female deer..

[Audio] It's also a company, with our headquarters in Finland, creating open-source web development tools and components..

[Audio] Flow is a web framework for Java, developed by Vaadin. The Flow framework comes with a suite of components and tools for building web applications..

[Audio] Hilla is another framework developed by Vaadin. While Flow uses Java for the frontend and backend, Hilla focuses on TypeScript development for the frontend, with a Spring Boot and Java backend. In this training we will focus on Flow..

[Audio] How is Vaadin Flow different from other web frameworks available out there? Flow is focused on building progressive web applications on the Java platform. It gives an unparalleled developer experience that allows you to build typesafe and secure applications with end-to-end integration. It is vendor-backed open-source software that is a stable foundation to build on. And with Vaadin Flow you get a best-in-class component set that makes building highly usable and accessible applications easy..

[Audio] Lets talk about how you can start developing in Java.

[Audio] To start a new project in Java, just go to start.vaadin.com. From there you configure and download a small application..

[Audio] When you extract the application you get something like this. Within the project structure you will find the source main Java folder for Java sources, a Maven project configuration file, a frontend directory for client-side resources such as JavaScript and CSS files, then some client-side dependencies and a Vite configuration file..

[Audio] Here is a Vaadin Flow hello world program written in Java. There's not a lot to see here. We have a Java class, HelloWorldView, that extends a Flow class called VerticalLayout. In the constructor we create a new button and add a notification that will be shown when the button is clicked. Then we add the button to the root layout, and that's it..

[Audio] Why would you want to write this in Java? One of the reasons can be seen here. It's easy to integrate with any kind of Java backend service when you are writing your code in Java. Here we have a message bean providing the message. This could be injected via a dependency injection framework, or there could be some other way the backend has created it, and now it is being used in UI code quite easily..

[Audio] How do you run your application once you have built it? One way is to run the main method of Application.java. After waiting a short while for the application to start, you can open localhost port 8080 in your web browser and you will see your application running..

[Audio] Thank you for watching. I hope you learned something and enjoyed developing Flow applications..