Tuesday, July 23, 2019

My Experience Talking at JConf Colombia

Ever since I joined the team at Vaadin I had wanted to showcase our technologies at a local conference in my home country, Colombia. This year, the organizers of JConf Colombia 2019 invited me over to give not one but two talks during the event. It was good timing–the conference took place around the summer vacation time I had already planned to have in Colombia (I'm based in Finland).

So, I packed my suitcase with the usual essentials, plenty of Finnish treats (read, salmiakki) and a bunch of Vaadin stickers and T-shirts. Unfortunately, this swags didn't make it to Medellín (where the conference took place) since I know quite some people in the IT industry in Bogotá, where I initially landed in Colombia. Vaadin T-shirts are super popular! So, blame my IT colleagues in Bogotá if you didn't get one at the conference. Kidding. It was bad planning from my side, sorry. Catch me at the next conference I'll get you one.

I headed to Medellín two days before the conference started and was picked up at the airport by Geovanny Mendoza, a fervent Vaadin fan to whom I'm more than grateful. He has also been talking about Vaadin in other versions of the Latin-American JConf conferences. We spent the rest of the day talking about technology and the promising future of Vaadin.

The next day, I visited IBM Colombia and presented Vaadin and its philosophy–code your web UI in Java without JavaScript or HTML. Most of the audience didn't know about Vaadin at all. They looked impressed by how fast you can get started with it. The code, to them, resembled the API of Java's Swing, which many developers used when they were learning Java. However, it was an eye-opener to realize that the younger developers didn't know about Swing nor had used it before. And even so, they were easily guessing the names of the Vaadin API's methods I had to use while coding.

The first track of the conference started the next day. It was held in the theater of the University of Antioquia which has a capacity of more than 1000 people. Talks were mostly technical but there was an emphasis on community and open source.

My first talk at JConf Colombia, Colombians in the Open Source World: Our Experience Working for Payara and Vaadin, was shared with the talented Fabio Turizo, also Colombian, and a Java Architect and Developer working as a Service Team Manager for Payara. I hope we can do additional collaborative work in the future with Fabio and Payara's technologies.

In our talk, we shared our experience working for open-source companies. What are these companies all about? What products do they develop? How did we end up working there? How is it to work for these companies? What do we do at these companies? It was fun to share this kind of insights, and since Vaadin is so simple to use and everybody in the audience was a developer, I managed to explain what Vaadin is in a single slide with a "Hello, World" application. After the talk, I was amazed by some developers in the audience who approached me to ask more about Vaadin, both the company and the web framework.

The second track was on the next day at Ruta N Complex. A day packed with amazing international and national speakers with highly technical topics. I quickly prepared my laptop for my talk Implementing Modern Web Pages in Java and got the chance to talk about the very origins of the Spring + Vaadin integration with its own creator Josh Long from Pivotal before heading to the auditorium.

During my talk, I implemented a simple "comment system" from scratch. Developers were amazed by how you are able to leverage the full potential of a Java IDE (I used IntelliJ IDEA) while coding the presentation layer of an application with Vaadin. It was marvelous to see "wow" reactions during my talk.

After a couple of silly jokes, refactorings, and fun with Java code, we continued having conversations with developers who, again, wanted to know more about Vaadin. They were curious about how to integrate web components, how to organize or modularize the code, and how a company that releases an open-source free product makes money.

I had a blast at the conference. Finally got to meet face-to-face Reza Rahman from Microsoft, and Josh Long and Mark Heckler from Pivotal. Plenty of “wow” reactions during my talks which was a nice reminder that we are developing a really cool technology at Vaadin. Thanks for the inspiring discussions to the people from Payara, IBM, and Jakarta EE and all the organizers of the event. I'm definitely looking forward to joining the 2020 edition!


Thursday, March 7, 2019

Learning Microservices with a Practical Example

Although this example application is simplistic and no one should ever use microservices to implement an application like this one, it shows you how it feels to run this kind of applications and how to implement it using Spring Cloud.

If you only want to play around with a microservices application, follow this tutorial. If you want to code the full app using Java, Eureka, Spring Cloud Config, Spring Data Rest, Hystrix, Zuul, Spring Session, and Vaadin, follow the complete 9 steps tutorial.

You'd end up with several terminals where each terminal is running a specific service:

In real-world projects, you most likely wouldn't start microservices like this. You would probably use an orchestration tool such as Docker Swarm or Kubernetes. There's a Git branch in the repository for this example application that contains Docker files you could experiment with to learn more about how to deploy microservices in production environments.

In the following sections, I describe some guidelines to create a practice environment.

Setting up the Machines

Use VirtualBox to create a virtual machine and install Alpine Linux on it. Use a Bridged Adapter in the network configuration.

Set up static IPs for both machines. Edit the /etc/network/interfaces file to:

auto lo
iface lo inet loopback

auto eth0
iface eth0 inet static

Set up SSH so you can use your host machine to connect to the virtual machine from now on (something that would happen in a real-world scenario):

apk add openssh

You would need to add PermitRootLogin yes to the /etc/ssh/sshd_config file to make things easier for now (or you can create a new OS user and connect to the VM using its credentials). With this, you can connect to the VM using:

ssh root@

To install Docker, first add the following repository to the /etc/apk/repositories file:


Then run:

apk update
apk add docker

To run Docker at startup, execute:

rc-update add docker boot

In VirtualBox, shut down the VM and clone it. Generate a new MAC address for the cloned VM in the network configuration. Start and connect to the cloned VM to configure a different IP address in the /etc/network/interfaces file. For example Restart the cloned VM and start the original one. You should have now two VMs ready.

Running the Application with Docker Swarm

In the machine, init a swarm:

docker swarm init --advertise-addr

This machine is now the master machine.

Copy the reported docker swarm join command and run it in the other machine ( The command should look similar to this:

docker swarm join --token SWMTKN-1-2j6qifl5jbb7zmcbr1ti7xl3qthmhj87b853afjmh29i7f6voi-5az2apq6vq80sls2uvd1sjz1o --advertise-addr

This machine is now a worker machine.

In the master machine (, create a new docker-compose.yml file with the following contents:

version: '3'

    image: alejandrodu/microservices-discovery-server
      - "8001:8080"
    command: --spring.cloud.inetutils.preferredNetworks=10.0 --logging.file=application.log
          memory: 128M

    image: alejandrodu/microservices-config-server
      - "8101:8080"
    command: --spring.cloud.inetutils.preferredNetworks=10.0 --spring.cloud.config.server.git.default-label=docker --eureka.client.serviceUrl.defaultZone=http://discovery-server:8080/eureka/ --logging.file=application.log
          memory: 128M

    image: alejandrodu/microservices-biz-application
      - "9001:8080"
    command: ---spring.cloud.inetutils.preferredNetworks=10.0 --eureka.client.serviceUrl.defaultZone=http://discovery-server:8080/eureka/ --logging.file=application.log
      - ~/h2-databases:/root/h2-databases
          memory: 128M

    image: alejandrodu/microservices-admin-application
      - "9101:8080"
    command: ---spring.cloud.inetutils.preferredNetworks=10.0 --eureka.client.serviceUrl.defaultZone=http://discovery-server:8080/eureka/ --logging.file=application.log
          memory: 256M

    image: alejandrodu/microservices-news-application
      - "9201:8080"
    command: ---spring.cloud.inetutils.preferredNetworks=10.0 --eureka.client.serviceUrl.defaultZone=http://discovery-server:8080/eureka/ --logging.file=application.log
          memory: 128M

    image: alejandrodu/microservices-website-application
      - "9301:8080"
    command: ---spring.cloud.inetutils.preferredNetworks=10.0 --eureka.client.serviceUrl.defaultZone=http://discovery-server:8080/eureka/ --logging.file=application.log
          memory: 128M

    image: alejandrodu/microservices-proxy-server
      - "8080:8080"
    command: ---spring.cloud.inetutils.preferredNetworks=10.0 --eureka.client.serviceUrl.defaultZone=http://discovery-server:8080/eureka/ --logging.file=application.log
          memory: 128M

    image: alejandrodu/microservices-monitor-application
      - "8201:8201"
    command: ---spring.cloud.inetutils.preferredNetworks=10.0 --eureka.client.serviceUrl.defaultZone=http://discovery-server:8080/eureka/ --logging.file=application.log
          memory: 128M

The main things to notice in the previous configuration are the usage of a preferred network when running a service, the shared volume in the biz-application, and the Git branch used by the config-server.

Run the stack by executing:

docker stack up -c docker-compose.yml microservices-demo

What's next?

The purpose of this article is not to explain all the concepts and details on Docker and Docker Swarm but rather give you some guidance on how to experiment and learn by yourself.

From here you can experiment with cloud providers several of which ease Docker-based deployments, replicating the Discovery and Config services to avoid having them as single points of failure; and setting up a database cluster for the same reason.


Thursday, January 24, 2019

How to call a Java method from a JavaScript function in the browser

In this video I demonstrate how to call a Java method that runs in the server from a JavaScript function running in the web browser:

In short, you need a Java web application with the Vaadin dependencies (you can quickly create one here), a script file in the webapp/frontend/ directory, and a Java class with a method annotated with @ClientCallable that sends an Element to the JavaScript function. The JavaScript function can use the $server object in the Element instance to call the annotated Java method.

Here's the code:


public class MainView extends Div {
    public MainView() {
                "someJavaScriptFunction($0)", getElement());


    public someJavaMethod(String message) {


function someJavaScriptFunction(element) {
    element.$server.someJavaMethod("Hello server!");

You can read the full step-by-step tutorial here.

Friday, January 18, 2019

Infinite lazy loading

Here's a short excerpt of Chapter 9 Lazy Loading of my book Data-Centric Applications with Vaadin 8.

Even though we have explained lazy loading by using the Grid component, we can use the same backend service method to implement custom UI components that support lazy loading. For example, you can use a VerticalLayout to add sets of, say, 10 components any time the user clicks a load more button at the bottom of the layout. In this case, you would need to keep track of the current offset and keep incrementing it until the service method returns less than 10 items.

The following is a simple UI component that shows how to implement this type of infinite lazy loading:

public class LazyLoadingVerticalLayout extends Composite {

    private CssLayout content = new CssLayout();
    private Button button = new Button("Load more...");
    private int offset;
    private int pageSize;

    public LazyLoadingVerticalLayout(int pageSize) {
        this.pageSize = pageSize;
        VerticalLayout mainLayout = new VerticalLayout(content, button);

        button.addClickListener(e -> loadMore());

    public void loadMore() {
        List<Call> calls = CallRepository.find(
                offset, pageSize, "", new HashMap<>());

        if (calls.size() < pageSize) {

                .map(call -> new Label(call.toString()))

        offset += pageSize;

Notice how the loadMore method keeps adding components to the content layout until there are no more results to add, at which point the Load more... button is hidden from the UI.

The following screenshot shows this component in action:

You can learn more about lazy loading and many other topics related to web development with Vaadin in my book Data-Centric Applications with Vaadin 8 available at amazon.compacktpub.com, and many other online bookstores.

Wednesday, January 2, 2019

Hello, World in Vaadin 10+

Vaadin is a set of tools to create web applications tailored to both, client-side and server-side developers. If you are, say, a JavaScript Developer, you can use Vaadin Components in any HTML document. If you are a Java Developer, you can use the provided Java API and forget about coding any HTML or JavaScript at all.

In this article, I'll show you how to create the famous Hello, World application using the Java Programming Language and Vaadin 12 (also valid for Vaadin 10 and 11). Get comfortable, make sure you have Maven installed, fire up your favorite IDE, and let's get started!

Start with a starter, obviously

Go to https://vaadin.com/start/latest and select Project Base. This is the most straightforward project starter and serves well as an initial point. Click Download and extract the zip file. You should get a directory with a Maven project in it. Import this project into your favorite IDE (mine is IntelliJ IDEA, by the way).

You should get a directory structure that looks similar to the following:

Let's not worry about the resources and webapp subdirectories for now. Also, I want you to get your hands dirty and implement the example app by yourself. However, it turns out the starter includes the MainView class with kind of a Hello, World application in it. So, let's get rid of the code in the MainView class by removing any annotations, extended classes, and code in the constructor. Go ahead and remove code until it looks like the following (or delete the file and create a new one):

package org.vaadin.alejandro; // use yours, of course

public class MainView {

    public MainView() {


The project is ready. Let's add some code to it!

Add UI components to the web page

Think of the MainView class as the web page shown when you request the app in the web browser. Let's start by doing the simplest Hello, World app we can do with Vaadin–a web app that shows a greeting on the screen.

First off, we need the MainView class to be of a type that Vaadin recognizes as a UI component it can deal with. You have many options, but we will extend a popular class called VerticalLayout:

package org.vaadin.alejandro;

import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class MainView extends VerticalLayout {

    public MainView() {


Now the MainView class has more powers. Check in your IDE some of the methods available in VerticalLayout. You can use the autocompletion feature of your IDE to quickly explore what's available:

What is a VerticalLayout, though? A VerticalLayout is a UI component that arranges other UI components (like buttons or grids) in a vertical fashion or a column if you wish. You do this by using the VerticalLayout.add(Component...) method. But first, we need to prepare the component we want to add to the VerticalLayout. Let's use a very simple one: Text. Go ahead and create a new instance of this class inside the constructor:

public MainView() {
    Text text = new Text("Hello, World!");

Now call the add(Component...) method to actually add the text component to the VerticalLayout:

public MainView() {
    Text text = new Text("Hello, World!");

Expose the view as a web page

To serve this class as a web page, you need to tell Vaadin you wish to do so. Doing this is super easy. Just annotate your MainView class with @Route:

public class MainView extends VerticalLayout {

The @Route annotation accepts an optional parameter to specify the actual route (the last part of the URL) you want to use to show this view. For example, @Route("hello") would make the view available at http://localhost:8080/hello. However, Vaadin uses a convention with the class name. Since our class is named MainView, Vaadin exposes the view at the context root (http://localhost:8080/). Moreover, if you add a class named CustomersView, for example, Vaadin exposes the view at http://localhost:8080/customers (note how the "View" part in the class name is ignored). Any other names are exposed using the class name. Just remember that you can override this by using the String parameter in the @Route annotation.

Deploy and run the web application

Since we used a Vaadin starter to create the project, the pom.xml file includes the Jetty Maven plug-in which allows you to use Maven to deploy and run the web application in a local Jetty server. The quickest way to run the application is by using a command line terminal and run:

mvn jetty:run

However, I recommend creating a run configuration in your IDE. A run configuration is like a shortcut inside the IDE to execute an action, for example, a Maven command. Most IDEs offer the possibility to create this from a Maven view that shows all the plugins and its corresponding goals. In IntelliJ IDEA it looks like the following:

You can simply double-click the jetty:run option to deploy the app and start the Jetty server, or you can right-click the option to create a running configuration that will be shown on the top of the IDE's window. This last method has the advantage of offering a keyboard shortcut for the running configuration as well.
You can alternatively use any other server that includes a Web Servlet to deploy and run the application. For example Tomcat or GlassFish. We won't cover this topic here. There are plenty of useful resources on the web that explains how to use these servers.

Once the app is compiled, point your browser to http://localhost:8080 to see the result. Keep in mind that the compilation may take some time the first time you are doing it since you might not have all the Maven dependencies in your hard drive, but this is going to be much faster afterward, for both this project and new ones as well. Here's a screenshot of the application:

Add behavior to the web application

Vaadin includes many ready-to-use UI components. There are buttons, combo boxes, grids, check boxes, text fields, charts, and many others. Let's use the TextField and Button classes to add some interactivity to the web application.

Start by creating instances of these two classes in the constructor:

TextField textField = new TextField("What's your name?");
Button button = new Button("Ok");

We want to show a personalized greeting containing the name introduced in the text field anytime the user clicks the button. The way you react to user actions (like clicking a button) is by adding listeners. In the case of a Button, a click listener:

button.addClickListener(e -> ... your custom code here ...);

Let's use yet another Vaadin UI component to show a message: Notification:

button.addClickListener(e -> Notification.show("Hello"));

The greeting is not personalized yet. We want to use the name introduced in the text field as part of the greeting. We can get this value by using the TextField.getValue() method. Cannot be easier:

button.addClickListener(e -> Notification.show("Hello " + textField.getValue()));

There, you have new components and behavior in your app. We are just missing one last thing–we created and configured UI components, but we never added them into the VerticalLayout. Use the add method to fix this:

add(textField, button);

Restart the Jetty server and go to http://localhost:8080 to see the changes:

What next?

There are many other cool features in Vaadin. I would suggest you continue with the official Vaadin Tutorial at https://vaadin.com/tutorials/getting-started-with-flow which explains how to build a more real-life application. If you want to master Vaadin, I suggest reading the documentation at https://vaadin.com/docs.

Tuesday, July 3, 2018

Data-Centric Applications with Vaadin 10?

I recently got some hard copies of my last book about Vaadin. I love the matte colored look of the cover. Excellent job by Packt Publishing! Anyway, since the feeling of receiving a package with your own books is hard to describe with words, I decided to do it with code.

Although most of the concepts and design ideas that the book covers are valid for any version of Vaadin, I created a Git branch with all the examples migrated to Vaadin 10. At this time, there are certain features that Vaadin 10 doesn't include (yet?) such as Grid editors, Menus, and LAYOUT_COMPONENT_GROUP styles. But besides that, pretty much everything was easy to migrate.

There are some new features in Vaadin 10 that, obviously, I didn't cover in the book–things such as the new Router and the Element API. However, since the book is aimed at developers with basic Vaadin knowledge (i.e., they how to code UIs with the Vaadin Java API), the examples are useful and illustrate techniques you can use in your applications: modularization, authentication, authorization, database connectivity (with JDB, JPA, MyBatis, and jOOQ), CRUD user interfaces design, lazy loading, and reporting with JasperReports.

Keep in mind that this book is not for total beginners. If you don't know what kind of components are available in Vaadin and how to use the basic functionality they provide, you should start with the introduction to Vaadin Flow and the official Vaadin tutorial.

Saturday, May 5, 2018

Responsive embedded YouTube video or playlist online maker

I have to embed YouTube videos or playlists frequently, so I decided to implement this simple tool to generate the HTML code of an embedded responsive YouTube video or playlist:

YouTube video or playlist ID: