Forem: David Marko

5 areas where Vaadin shines as LiveView implementation for Java

David Marko — Fri, 17 Feb 2023 07:30:00 +0000

LiveView is a programming approach that allows developers to build interactive, real-time user interfaces for web applications. It was introduced as a part of the Phoenix web development framework for the Elixir programming language. There are LiveView implementations available for many popular languages, Java included. And we are talking about Vaadin here which exists for much longer and is much more mature than Phoenix LiveView.

Where Vaadin shines in areas LiveView programming is very famous?

1.) Writing less code — and I really mean much less than you would expect. No zillions of endpoints, no DTOs, mappers, JavaScript code. Your feelings will be like that you are developing a desktop application, though UI for the browser will be there.

2.) Both ways communication — is it frontend triggering an action or is the backend receiving a message from pub/sub system? Vaadin will update the browser page to reflect the latest situation. You are not doing this — Vaadin does.

3.) Single language approach — Java for backend and frontend development. And it's a huge thing. This means you don't need angular/react/vue developers, you have a single repository for the entire application, that simplifies overall deployment and long time maintenance.

4.) Automatic UI updates managed by Vaadin — changes being done in backend code that relates to UI are automatically transformed into updated HTML and sent to frontend. Very efficient ‘diffed changes’ are communicated to frontend, push communication is also directly supported. And don't forget, it's Vaadin doing this for you as a silent servant.

5.) HTML transformed to Java objects — you can use HTML templates but Java objects are better. Using Vaadin you use HTML in form of Java objects. You have Div() object available, and you can insert TextField() into it. Want to hide TextField in the browser? Just call textField.setVisible(false) … and Vaadin will remove textField from the browser page. Just simple as that.

Are you still with me? Nice. If you are interested in details and can get a whole idea of how you can use Vaadin in your new or existing projects, you are welcome to take part in this Udemy Course: “FullStack Vaadin (14–23+) — Practical Solutions”

Not a Vaadin developer, yet? Try to guess what this code is doing …

David Marko — Thu, 16 Feb 2023 07:30:00 +0000

Are you a long-time Java developer using Spring-related tech stack? Vaadin can bring a fresh brief of the air into your daily development routines.

If you are not a Vaadin developer yet, take this as a quick exercise to understand, how Vaadin code is organized in a very efficient way.

1) Our simple web browser UI contains label, text field, and button for submitting data to the backend.

2) And here we go with implementation in pure Java code. Our Vaadin page is integrated into the SpringBoot project.

What the code above says:

ad 1) We have a simple Java class that extends Vaadin Div() object. It becomes Div (HTML) on the screen then.

ad 2) By using ‘Route’ annotation, we make this page accessible from the browser by specifying this routing URL.

ad 3) We are in the SpringBoot project, and we can inject other stuff here using Spring DI.

ad 4) We create TextField, and set a name, autofocus, and width. All this in plain java. Vaadin makes an HTML representation based on that.

ad 5) Button is defined here with many specific properties. Again, Vaadin will make an HTML representation for our page.

ad 6) Some action is needed for our button. So we defined a click listener. When the button is clicked in the browser, Vaadin makes sure, that this bubble-up to the backend and the correct listener is triggered for us. We are not doing that, Vaadin does.

ad 7) Click listener pulls the value from TextField. How does the value get from the browser to Java TextField object? Vaadin has done that for us when the button was clicked. Frontend and backend are in sync.

ad 8) When information is saved into a database, we display a nice confirmation popup. Vaadin communicates this back to the browser and makes a small notification popup appear on the screen.

ad 9) We defined all around our TextField and Button, let's add both to the Div() we started with.

And that's all. Really, just one Java class. No HTML, no JavaScript, no endpoints, no custom Ajax calls, no DTOs. Just plain Java and the magic of Vaadin.

Are you using https://start.spring.io/ ? You can add Vaadin as a dependency here directly. It's fully supported by SpringBoot.

Not a Go LiveView developer yet? Try to guess what this code is doing, though.

David Marko — Wed, 15 Feb 2023 07:30:00 +0000

My common practice for evaluating new technology, framework, or programming approach is based on the first feeling I have from the code presented. What is the cognitive effort to understand “the idea”? Things have to “look nice and be polished” in some way to convince me. I can still remember that overall ‘wow effect’ when seeing my first Phoenix LiveView presentation a few years ago. Such a small amount of code and a great level of expressiveness so even not being a daily Elixir developer make me an idea, of how this is supposed to work and what the code is doing.

LiveView implementation for Go raised the same type of feelings in me when I went through this for the first time.

Just make a quick review of the code below without seeing any other details:

That is like we write stuff in Go LiveView implementation.

ad 1) In HTML we use tag attributes to specify LiveView-related actions. LiveView makes those things actually ‘live and working’, no other JS code is needed. We have defined LiveView click event here. In other words, we just said: “send ‘temp-up’ event back to backed, when this button is clicked in the browser”. LiveView detects this attribute in HTML and provides the appropriate actions that will make a backend call through the websocket. LiveView establishes a websocket connection to our backend when a web page is loaded in a browser for the first time.

ad 2) We reference variables from our backend model using Go Template syntax. LiveView keeps those values updated whenever the backend representation is changed. LiveView uses websocket push technology under the scene here.

ad 3) We tight ‘temp-up’ event front end is emitting to our backend handler. LiveView calls our handler whenever a ‘temp-up’ event is emitted. We can just rely on that.

To learn more, you can take a look at my previous articles on LiveView here:

Are you still with me? Nice. If you are interested in details and want to get a whole idea of how you can use the LiveView programming approach in Go for your new or existing projects, you are welcome to take part in this new Udemy Course “Mastering Live(View) development in Go”.

7 years with Vaadin in production. Do we still enjoy it?

David Marko — Mon, 13 Feb 2023 07:30:00 +0000

It’s been 7 years since we deployed our first Vaadin app for production. The whole process has been more than interesting. We developed the application according to an analysis (several modules for the agenda in the field of local government) based on a verbal assignment. The customer started testing on our server and after 2 months found only 3 bugs and requested 2 modifications beyond the original brief. Once implemented, we installed at the customer’s site. The application started for the first time and is still running :-).

SW stack we have used:

SpringBoot 1.5.x
Vaadin 8.x
MongoDB 3.x
ElasticSearch 1.x
Java 8 on Apache Tomcat 8

Even after 7 years, the application is still running in the same configuration, we only updated the main versions of the individual software packages (there was no budget for doing more). After a successful deployment, the customer started using the application and apart from one small issue, we have not heard from them for more than a year. In fact, we thought the application was not being used much. We were even more surprised when we found out that the application was actively being used and the customer had not heard back as he had no problem with the application.

Lessons we learned (from this and another Vaadin projects):

quality of the initial development version was excellent. Individual parts/modules were working as expected and no runtime memory leaks or whatever. We were actually very surprised at how stable Vaadin is. In Vaadin everything is a Java object, so it's easy to avoid any typos and other inconsistencies.
we haven't used any SW testing tool. The entire application has been and still is, tested manually only. Having Java static typing, and no weak bindings like REST endpoints, surprisingly we have had very minimal issues. Most of them were caught by developers during initial development.
the application was created in the style of a “modular monolith”. The entire application consists of 6 modules, we split those inside the SpringBoot application using Java packages in the same structure inside. We just followed some conventions we defined. (btw. have you heard about a recent Spring Modulith ?)
before being involved in Vaadin, we used SpringBoot MVC with Thymeleaf templating. It was nice but not flexible for large forms with complex logic, with different buttons, fields visible only under some conditions, etc. We also used Angular, and many REST endpoints but it slowly became very difficult to maintain and synchronize the front-end development with the backend.
we still do updates every year. We are adding new modules or enhancing existing ones. If you don't see a code for around one year, it's generally not easy to get into it. But it's not the case with the Vaadin. It's very easy to locate the form and button and it’s an onClick listener. Static typing of Java helps here a lot.

Do we still enjoy it?
We are running many Vaadin apps in production since that first one. If there are not any specific requirements we use a “modular monolith” concept, which fits our stack best. We pack applications as WAR and deploy them under Apache Tomcat. And yes, we enjoy the development process. It’s very straightforward and Vaadin and SpringBoot fit together well.

If you are successful enough, you will slowly switch the app into long time maintenance mode. From time to time a customer comes back and requests some changes or additions. Keeping the entire stack small helps here a lot. It's easy to find the place that needs to be updated and see all in-place relationships/dependencies, SpringData provides data to our Vaddin components directly, and SpringSecurity covers all logins/permissions requirements. Everything is under your control.

3 issues LiveView development in Go resolve efficiently for small teams

David Marko — Thu, 02 Feb 2023 14:56:13 +0000

If you are a freelancer or working in a small development team, you are probably aware of many related benefits. Many good articles reference different research outcomes on that topic.

We can mention just a few useful things that help small teams with sustainable software development.

an easy-to-understand implementation supporting a long-time software maintenance
complex features implemented with less code
using one development language (Go in this case) as much as possible
using a limited amount of familiar technologies because whatever you use in your project, you will have to maintain for years

And here it is, where LiveView programming concepts help us in a great way. LiveView uses websockets to create a persistent connection between the client and the server, which enables the server to push updates to the client in real-time. This allows developers to build interactive user interfaces that can update dynamically in response to user actions or changes in the application state, without the need for traditional page reloads or AJAX requests. LiveView programming style is based on this excellent Live project that is an implementation of the LiveView approach in Go.

LiveView programming style can bring a significant boost in at least 3 key areas:

Smaller codebase (less code) — the entire LiveView abstraction and internal implementation require less code for implementing a complex frontend to backend communication. No REST endpoints are needed, almost no JavaScript is needed, and no DTOs and converters are needed as all is being done in a backend. Browser-to-backend communication goes through the websocket and is fully managed by the LiveView library. We just rely on facts, that things just work.
Go language only — as much as possible — most of the tasks providing communication between frontend and backend are managed by Live internally. We use Go for updating UI stuff, the codebase is in one place and there is no need for endpoints, DTOs, ajax calls, etc. We don't need Angular/React or Vue developers in a team.
Easy to understand code — declarative approach — LiveView programming and implementation approach are sort of declarative. We define LiveView browser actions(events) as HTML tag attributes and LiveView provides instrumentation for making it live.
On the backend side, we are implementing event handlers in a declarative way also, and Live is responsible for internal routing so the appropriate event handler is called when the user triggers a button on the screen. (to be honest, you don't need to know anything about websockets to use LiveView programming)

If you are a long-time developer, part of your job is to maintain existing applications running successfully for years. Understanding how the flow is going, and being able to fix something or add a new feature quickly is a key thing. LiveView programming approach is a real game changer here for the last couple of years and is available in Go now.

Several useful links for supporting/explaining a LiveView idea:

https://medium.com/@dmarko484/mastering-liveview-development-in-golang-5fdae1ebba2c
https://elixirschool.com/blog/phoenix-live-view/
https://fly.io/blog/liveview-its-alive/
https://github.com/jfyne/live (Go implementation of LiveApproach)

Are you still with me? Nice. If you are interested in details and can get a full idea how you can use Live View programming approach in Go, you are welcome to take a part in this new Udemy Course "Mastering Live(View) development in Go" .

Mastering LiveView development in GoLang

David Marko — Thu, 19 Jan 2023 13:35:55 +0000

LiveView uses websockets to create a persistent connection between the client and the server, which enables the server to push updates to the client in real-time. This allows developers to build interactive user interfaces that can update dynamically in response to user actions or changes in the application state, without the need for traditional page reloads or AJAX requests.

In GoLang world, LiveView applications are built using a combination of Go code on the server and HTML and CSS on the client. The server-side Go code is responsible for rendering the HTML template, handling user input, and updating the client with new data as needed. The client-side code handles tasks such as rendering the user interface and handling user interactions. (this part is fully managed by LiveView implementation)

Overall, the LiveView programming approach is designed to make it easier for developers to build real-time, interactive web applications, while still allowing them to leverage the benefits of a server-side architecture.

Let’s take a look on how simple ‘Live Counter’ Go example can look like. For LiveView Go implementation we are using Live project hosted on Github. Screenshot below contains full Live(View) application integrated with Fiber Framework.

Key implementation parts include:

Dependency definition
Model definition
Application 'Mount' entry point implementation
Counter click event implementation
Fiber application setup + Live part included
We can still use an endpoints implemented in Fiber way.

And our template snippet looks like this:

Button with Live click listener emitting 'value-change' events
Keyboard connected event trigger
And we display Counter value using standard Go HTML template syntax

Go Live project provides real-time user experiences with server-rendered HTML completely in Go. Inspired by and borrowing from Phoenix LiveViews, Live is intended as a replacement for React, Vue, Angular etc. You can write an interactive web apps just using Go and its templates. The structures provided in this package are compatible with net/http, so will play nicely with middleware and other frameworks. But integrations with other frameworks like Fiber exist as well.

If you are interested in details and can get a full idea how you can use Live View programming approach in Go, you are welcome to take a part in this new Udemy Course "Mastering Live(View) development in Go" .

Vaadin 23: Integration with SpringBoot can boost your development speed

David Marko — Sun, 15 Jan 2023 07:10:18 +0000

Vaadin is a Java framework for building web applications. It allows developers to build web applications using Java code instead of JavaScript, HTML, and CSS. Vaadin provides a set of pre-built UI components and tools for creating responsive and interactive user interfaces. It also includes a server-side architecture for handling browser-server communication and an API for building client-side logic. Vaadin is open-source and can be used with any Java application server or servlet container.

You might be interested in Vaadin, if you are existing SpringBoot developer.

Vaadin and Spring Boot are both Java frameworks, but they are used for different purposes.

Vaadin is a framework for building web applications, specifically for creating user interfaces. It provides a set of pre-built UI components and tools for creating responsive and interactive user interfaces. It also includes a server-side architecture for handling browser-server communication and an API for building client-side logic.

Spring Boot, on the other hand, is a framework for building web applications based on the Spring framework. It provides a set of tools for setting up and configuring a Spring application, including an embedded web server, database connection, and security. Spring Boot also makes it easy to build and run stand-alone, production-grade Spring-based applications.

In summary, Vaadin is a Java web framework that focuses on building UI and client-side logic, while Spring Boot is a Java framework that focuses on building server-side applications using the Spring framework.

You could use Vaadin to build the front-end and use Spring Boot for the back-end of your web application. They are not mutually exclusive, Vaadin application can run on Spring Boot and Spring Boot can be used to expose vaadin as a web application.

Sure! Here is an example of a simple Vaadin application that displays a button and a label. When the button is clicked, the label text is updated to say “Button was clicked!”.

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

@Route
@PWA(name = "My Vaadin Application", shortName = "Vaadin App")
public class MainView extends VerticalLayout {
    public MainView() {
        Label label = new Label("Button has not been clicked yet.");
        Button button = new Button("Click me", e -> label.setText("Button was clicked!"));        add(button, label);
    }
}

This example uses a VerticalLayout to arrange the button and label vertically on the page. The @route annotation tells Vaadin to use this class as the root view of the application. The @pwa annotation tells Vaadin to create a Progressive Web App.

The button is created with a click listener, which updates the text of the label when the button is clicked.

You can run this application with a servlet container such as Apache Tomcat or Jetty, or with a framework like Spring Boot.

Please note that this is a very basic example and in real world applications, you should use some kind of dependency injection and a separation of concerns in the code.

Interested in more details?
You are welcome to take part in Udemy Course …
FullStack Vaadin (14–23+) — Practical Solutions — Vaadin 14–23+ — working with MongoDB, PDF, MS Excel, Vaadin Push, GridFS

Building PWA application using Vaadin framework - our stack and useful links

David Marko — Wed, 08 May 2019 05:09:15 +0000

My plan is to build PWA application using Vaadin framework, but I'm supposed to build it on other's shoulders. So what my (full)stack is supposed to look like?

Vaadin - engine for our app
Spring Boot - glue for everything
Jodd - I'm using this project long time as an excellent utilities stack
Lombok - to write a less code
I'm a Gradle person
IntelliJ IDEA is my workplace
GitLab - repository for my code is located here

Useful links:

Vaadin Add-ons:

App Layout Add-on

This page will be updated as proceeding with implementation.

Building PWA application using Vaadin framework

David Marko — Wed, 08 May 2019 04:52:45 +0000

This is an initial post of upcoming tutorial series that should serve as my personal reflection on building PWA application using Vaadin framework. I'm using Vaadin for 5 years now since its version 7. My current systems are built using Vaadin 8 as migration to current version(Vaadin 13 is available now) is not quite simple for a complex code base. I have a several CRM and DMS like systems built and running in production using Vaadin 8 with quite success. Its very stable environment, contains very intuitive API and one can create very complex web applications with almost no JavaScript being used. Resulting application codebase is very comprehensive and lives in Java only. Best for fullstack developer.

My development environment is based mainly on Spring Boot and its excelent Vaddin integration. This allows me to use quite large tool infrastructure Spring Boot is surrounded with.

My primary idea is to create PWA application using latest Vaadin 13 version that can be used as a counterpart for other existing CRM / DMS systems I run. This will cover several topics I have to deal with in some way. And this series is a way how to document this process.

Steps supposed for building the application (subject to change)

preparing the stack - what we are going to use actually?
create app skeleton
create basic application UI structure
going live for the first time - life behind SSL
display data using app-layout addon
create dummy backend simulating external system
adding authentication
going offline
... next to come

A GitLab repository with codebase used in this series is located here.