Vue.js and Spring Boot - A Perfect Combination

Last week while working for my client I had the problem that after a deployment not all services were running. We don't have a monitoring in place because the system isn't in production right now. So what to do?

After looking at several monitoring tools I came to the conclusion that there is no easy to use health check tool out there. So I decided to implement a small health checker by myself.

I call it Simon (funny name, isn't it :-). Simon stands for SImpleMONitoring. I know it's more a health checker and not a fully featured monitoring tool but for the sake of the name...

Btw. you can find the source code on GitHub.

The backend

I wanted to create a few REST services and some persistence to store the monitoring data.

First I started with Spark Framework but this wasn't the right tool. It may be great for fast and small stuff but there is missing to much. So I move to Spring Boot.

As a Java EE consultant and trainer it took some effort but I realized that Spring Boot is a fantastic framework with so many convenient features.

What I really like is the default behavior. 

For example JPA. No data source configuration, no persistence.xml. Just add entities and define your JDBC url and Spring Boot know where to store the data. That's it.

spring.datasource.url=jdbc:derby:/var/simon/simondb;create=true

The other thing that is great is the Spring Boot Actuator.

It has everything you need to monitor your application in production and you can hook in you own health check.

But the most surprising feature that I found is the ability to generate an executable JAR that can be run as a Linux service.

By simply adding some configuration to the Spring Boot Maven plugin you get a jar that contains the bash script and all the Java class:

<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <configuration>
        <executable>true</executable>
    </configuration>
</plugin>

Simply put the jar on the Linux box and create a symbolic link in init.d and you are done!

Now after having my REST services up and running Simon needs a frontend.

The Frontend

On the start page you see all the servers Simon is checking.

There is also a detail page showing the last results in a graph

So how to create such an UI?

I was used to develop web applications with JSF. The good thing about JSF is the great IDE support because of the backing bean. 

But the days of component based web frameworks are over. These days fully featured JavaScript frameworks Angular and ReactJS are used to create single page applications (SPA). 

But do I really need that? 

I first had a look at Angular2 and was overwhelmed by the features. 

I'm a quite experienced HTML developer and like to write the HTML code by my self. And for only two pages I didn't want all the build stuff like npm, bower, gulp, webpack etc. I just wanted to embed my UI into the Spring Boot application.

After some googleing I found Vue.js. It promises "Reactive Components for Modern Web Interfaces". Vue.js represents the view model and does exactly what I need. 

I used data binding in the HTML page. To create a table row it looks the HTML looks like this:

<tr v-for="host in group.host" class="{{host.status == '200' ? 'success' : 'danger'}}">
  <td width="200">{{host.name}}</td>
  <td width="300"><a href="{{host.url}}">{{host.url}}</a></td>
  <td width="100">{{host.status}}</td>
  <td width="100"><a href="detail.html?url={{host.url}}">{{host.duration}} ms</a></td>
  <td width="200">{{host.timestamp}}</td>
</tr>

There is the mustache syntax and also some directives starting with v-.

But where comes the data from? you have to create an instance of Vue and add data and functions.

That's it!

Vue.js also have some plugins where I used vue resources to get an easy to use http client.

(function (exports) {
    exports.app = new Vue({
        el: '#content',
        data: {
            hosts: null,
            dataReady: false,
            interval: null,
            autoRefresh: false,
            lastRefresh: null
        },
        ready: function () {
            this.fetchData();
        },
        methods: {
            fetchData: function () {
                var vm = this;
                this.$http.get('check/latest').then(function (response) {
                    vm.hosts = response.body;
                    vm.lastRefresh = formatTimestamp(new Date());
                    vm.dataReady = true;
                }, function (response) {
                    console.log(response.status);
                });
            },
            switchAutoRefresh: function () {
                this.autoRefresh = !this.autoRefresh;

                if (this.autoRefresh) {
                    var vm = this;
                    this.interval = setInterval(function () {
                        vm.fetchData();
                    }, 10000);
                } else {
                    clearInterval(interval);
                }
            }
        }
    });
})(window);

Conclusion

Spring Boot and Vue.js are both fantastic frameworks with really good documentation. 

The startup was really fast and I'm very happy with the solution so far.

With Spring Boot it's very easy to create fully featured self contained applications.

Self contained means that they don't need to be deployed in a application server. So they are easier to install and with the executable jar I even don't need any additional startup scripts on a Linux box.

Vue.js brought the missing dynamic stuff to my HTML pages. It is straight forward to use and because of the minimal dependencies you can just add one or two JavaScript files to your application.