Close

Vaadin + jOOQ: Implementing Business Web Applications in Plain Java

When speaking about business applications, you might find that a lot of them fall into the “data-centric” kind of application where SQL is frequently the key technology. Similarly, when speaking about web applications, you’ll end up with HTML rendered on the browser, most likely with the help of JavaScript. If we put this into the context of Java, web business applications can be implemented by directly using SQL, HTML, JavaScript, and of course Java. Vaadin and jOOQ enable you to implement data-centric web applications using only one language: Java.

This step by step guide shows you how to implement a Spring-based web application that connects to a MySQL server in order to query data that can be filtered from the UI. This guide assumes you know the very basics of Maven and Spring Framework (particularly the concept of dependency injection).

Step 1: Create a Spring-based project

Create a new Spring Boot application by going to http://start.spring.io and adding the Vaadin, jOOQ, and MySql dependencies as shown in the following figure:

Screen Shot 2016-10-04 at 14.38.32.pngClick the Generate Project button and extract the generated zip file. You should get a Maven project you can import into your favorite IDE.

Step 2: Create a MySQL database

Connect to the MySQL instance and create a new schema:

CREATE SCHEMA demo;

Create the following table:

CREATE TABLE customer(
    id SERIAL, first_name VARCHAR(255),
    last_name VARCHAR(255)
);

Add some test data, such as the following:

INSERT INTO customer(first_name, last_name) VALUES('Lukas', 'Eder');
INSERT INTO customer(first_name, last_name) VALUES('Mario', 'Fusco');
INSERT INTO customer(first_name, last_name) VALUES('Edson', 'Yanaga');
INSERT INTO customer(first_name, last_name) VALUES('Anton', 'Arhipov');
INSERT INTO customer(first_name, last_name) VALUES('Andres', 'Almiray');

Step 3: Configure the database connection

jOOQ allows you to reverse-engineer the database into a set of Java classes modelling the tables, sequences and stored procedures, among other database objects.

Start by configuring the database connection in the application.properties file inside the src/main/resources directory:

spring.datasource.url=jdbc:mysql://localhost/demo
spring.datasource.username=user
spring.datasource.password=password
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jooq.sql-dialect=MySQL

Remember to change the username and password used to connect to your own database.

Step 4: Reverse-engineer the database

Add the Properties Maven plugin and the jOOQ Code Generator plugin for Maven in the plugins section of the pom.xml file:

<plugin>
   <groupId>org.codehaus.mojo</groupId>
   <artifactId>properties-maven-plugin</artifactId>
   <version>1.0.0</version>
   <executions>
       <execution>
           <phase>initialize</phase>
           <goals>
               <goal>read-project-properties</goal>
           </goals>
           <configuration>
               <files>
                   <file>src/main/resources/application.properties</file>
               </files>
           </configuration>
       </execution>
   </executions>
</plugin>
<plugin>
   <groupId>org.jooq</groupId>
   <artifactId>jooq-codegen-maven</artifactId>
   <version>3.8.4</version>
   <executions>
       <execution>
           <goals>
               <goal>generate</goal>
           </goals>
       </execution>
   </executions>
   <configuration>
       <jdbc>
           <url>${spring.datasource.url}</url>
           <user>${spring.datasource.username}</user>
           <password>${spring.datasource.password}</password>
           <driver>${spring.datasource.driver}</driver>
       </jdbc>
       <generator>
           <database>
               <name>org.jooq.util.mysql.MySQLDatabase</name>
               <inputSchema>demo</inputSchema>
           </database>
           <target>
               <packageName>com.example</packageName>
               <directory>target/generated-sources/jooq</directory>
           </target>
       </generator>
   </configuration>
</plugin>

The previous snippet uses the connection properties defined in the application.properties file to avoid duplicating this configuration. Make sure the <inputSchema> element contains the name of the MySQL database you previously created.

Run the following Maven command:

    mvn clean install

This will reverse-engineer the database and generate the corresponding Java classes in the /target/generated-sources/jooq/ directory.

Note that if you are using Eclipse, you have to give it an extra “hint” for it to pick the generated sources directory and not to complain about missing “m2e connectors”.

Step 5: Create a back-end service class

Create the following CustomerService class:

package com.example;

import com.example.tables.records.CustomerRecord;
import org.jooq.DSLContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.util.List;

import static com.example.Tables.*;

@Component
public class CustomerService {

    @Autowired
    private DSLContext dslContext;

    public List<CustomerRecord> searchByName(String name) {
        String filter = name + "%";
        return dslContext
            .selectFrom(CUSTOMER)
            .where(CUSTOMER.FIRST_NAME.likeIgnoreCase(filter)
            .or(CUSTOMER.LAST_NAME.likeIgnoreCase(filter)))
            .fetchInto(CustomerRecord.class);
    }
}

Spring Boot will automatically create a bean of type DSLContext that you can use to query the database using plain Java but in a way that resembles SQL. Visit the official documentation site of jOOQ for more information about the capabilities of its API.

Step 6: Implement the UI

Create a Vaadin UI by implementing the VaadinUI class:

package com.example;

import com.example.tables.records.CustomerRecord;
import com.vaadin.annotations.Theme;
import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Grid;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@SpringUI
@Theme("valo")
public class VaadinUI extends UI {

    @Autowired
    private CustomerService service;

    private Grid grid = new Grid();

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        TextField filter = new TextField("Filter by name:");
        filter.addTextChangeListener(e -> updateGrid(e.getText()));

        VerticalLayout layout = new VerticalLayout(filter, grid);
        layout.setMargin(true);
        layout.setSpacing(true);
        setContent(layout);
        updateGrid("");
        grid.setColumns("firstName", "lastName");
    }

    private void updateGrid(String filter) {
        List<CustomerRecord> customers = service.searchByName(filter);
        grid.setContainerDataSource(
                new BeanItemContainer<>(CustomerRecord.class, customers));
    }
}

This class creates a UI containing a Grid component to show all the customers in the database and a filter to search by first or last name. Notice how the VaadinUI class is annotated with @SpringUI. This means we can inject the CustomerService bean in this class and use it to fetch customers.

Step 7: Run the application

Spring Initializr created the Application class with a standard main method defining the entry point of the Java application. When you run the application using this method, Spring Boot configures and runs a Tomcat server on port 8080 (all this can be configured).

Before running the application you have to build it. You can use the following command to build and run the application:

    mvn install spring-boot:run

The following is a screenshot of the application:

Screen Shot 2016-10-04 at 16.50.49.png

Check out the full jOOQ + Vaadin example from GitHub

Progressive Web Apps on the Road

Progressive Web Apps have lately been the subject of a lot of discussion in the web development world. While some tout Progressive Web Apps (PWAs) as the future of the web, others are more skeptical, while the majority of developers probably don’t even know what they are! Progressive Web Apps are an emerging technology that is already ready for business today with Vaadin Elements through a framework such as Polymer. It will certainly be the future for any framework - including Vaadin Framework in the very near future.

To further explore the world of Progressive Web Apps, my colleague Marcus and I had the great pleasure to go to a few PWA focused events in the past week, and I even got to speak about them.

What are Progressive Web Apps?

“Progressive Web Applications are a new level of caring about the quality of your user experience.”
--Chris Wilson, Developer Advocate at Google

Firstly, what are Progressive Web Apps? Progressive Web Apps are apps that use the latest web technologies to create high quality web experiences across platforms. High quality web apps are those that are reliable in all connectivity conditions, secure from end to end, and engaging to customers on all platforms and devices. The term Progressive Web App was coined by Frances Berriman and Alex Russell to describe “websites that took all the right vitamins.” These are apps that push the web further into creating great experiences. 

Learn more about Progressive Web Apps at the Google Developers site

Progressive Web Apps Roadshow

Last week, Marcus and I attended the Progressive Web Apps Roadshow, which toured the country and the world this autumn. Run by the Google developer relations team, these events were well organized and very informative. The event was split into two parts: a series of talks followed by codelabs. At Vaadin we have been closely tracking Progressive Web Apps, but we still learned a lot from this event. There was a strong focus on PWAs as -quality- applications. From the talks, we learned how to bake in security and and performance rather than leaving those as nice-to-haves. After the presentations were a series of codelabs, which were really useful, especially since we could ask follow-up questions of the facilitators.

Try the codelabs yourself at the Google Developers Codelabs page

Vaadin is committed to enabling developers to create powerful web apps, and we are going to put a lot more energy into teaching and presenting Progressive Web Apps as a better way to make web apps.

Progressive Web Apps Roadshow
Progressive Web Apps Roadshow

GDG Devfest San Francisco

The following weekend I spoke at the GDG Devfest event in San Francisco, one of a number of events happening this Autumn. It was a great event with a really diverse set of people from all levels of education, experience, and industries.

I gave a talk about Progressive Web Apps titled “Why (not) build Progressive Web Apps.” I presented the case for Progressive Web Apps as a cross platform -alternative- to native apps. PWAs are a powerful tool for building apps on all platforms, but they are not going to simply replace all native apps. When you go to build an application for multiple devices, whether you choose to build a PWA or a native app or both remains as a decision for the architect. 

Click here to view my slide deck

My talk was fairly well received, but as expected, there is still quite some confusion about what Progressive Web Apps are and why someone would build them. The Q and A session after my talk was quite lively and I took many great questions to hopefully elucidate some of the finer points of PWAs. I will also be giving my talk at the GDG Devfest event in Orlando this November, so it’ll be great to talk to even more people about Progressive Web Apps.

GDG Devfest SF
GDG Devfest SF

Progressive Web Apps Workshop

Then this past Monday, Marcus and I went to a Progressive Web App workshop hosted by Microsoft and Mozilla. While much of the conversation today about PWAs has come from Google, it was really wonderful to see the work Microsoft Edge and Mozilla Firefox teams. At the workshop we learned about service workers from some of the people who are actually on the specifications committee! Most of the workshop was codelabs, but there was plenty of time for us to mingle and make connections in the Progressive Web App world. Sometimes it’s not merely about what you learn at these events, but who you meet and can collaborate with in the future. It’ll be great to hear more about Progressive Web Apps from the Mozilla and Microsoft teams.

PWA Workshop
PWA Workshop with Mozilla and Microsoft

Progressive Web Apps and Vaadin

We’re always trying to stay up to date to help our teams at Vaadin create the most relevant and useful products that people use today. We think that Progressive Web Apps are a great new way to write high quality web apps for business, especially with Vaadin Elements and Polymer. Look forward to hearing more about Progressive Web Apps at Vaadin.

Learn more about Vaadin Elements

Vaadin Dev Day videos published

Vaadin Dev Day

Vaadin Dev Day Raleigh and Dev Day Munich are just around the corner, so we wanted to release the material from the previous Dev Days. Those Vaadin Dev Days were held in Berlin and New York in May. If you couldn’t attend then, we now have made the video recordings available for you. The topics were:

   

So sit back, enjoy, learn and please share your comments in the videos.

If you are eager to learn more with Vaadin, the Vaadin Dev Day series continues with fresh topics on November 29th in Munich, Germany and December 1st  in Raleigh, NC, United States. Make sure to reserve your seat and learn how to really master Vaadin.

Vaadin Dev Days are one-time events organized around the world. This is the third time we organize a Vaadin DevDay.

Read more about Vaadin Dev Day