17 September 2016

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.


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:


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>

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 () {
        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) {
            switchAutoRefresh: function () {
                this.autoRefresh = !this.autoRefresh;

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


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.

19 Januar 2016

How to Send Mails in ASP .NET 5 on Azure

Unfortunately neither SendGrid nor System.Net.Mail is supported in the actual version of ASP .NET 5 (RC).

So how to send mails then?
One solution is to use MailKit https://github.com/jstedfast/MailKit

To use MailKit just add "MailKit": "1.3.0-beta5" to your project.json

What you need is an SMTP server. On Azure you can create a SendGrid account and use the host name and the credentials provided in the Configurations section. SendGrid on Azure is free for up to 25'000 mails per month!

The code to send a mail is straight forward.

private void SendEmail()
  var message = new MimeMessage();
  message.From.Add(new MailboxAddress("Peter Muster", "peter@muster.ch"));
  message.To.Add(new MailboxAddress("Petra Muster", "petra@muster.ch"));
  message.Subject = "Some Subject";

  message.Body = new TextPart("plain")
    Text = string.Format(@"Hello,

Just a little message for you"

  using (var client = new SmtpClient())
    client.Connect("smtp.sendgrid.net", 587, false);
    client.Authenticate("your_id@azure.com", "password");


18 Januar 2016

Logging in ASP .NET 5 on Azure

Currently ASP .NET 5 is not able to log on Azure.

Fortunately there is a workaround described here https://github.com/aspnet/Home/issues/773

The trick is to use Serilog an open source logging framework for the .NET platform.

12 Januar 2016

ASP .NET 5 Continuous Deployment from Visual Studio Online to Azure

ASP .NET 5 uses DNX and the standard build in Visual Studio Code does not work.

You have to create your on build as describe in this article:

But in the tutorial there is missing one important step:
In the Visual Studio Build Step you have to uncheck "Restore NuGet Packages"

Without this you will get

##[error]Error parsing solution file at C:\a\1\s\src\simashr\simashr.xproj: Exception has been thrown by the target of an invocation.
##[error]Unexpected exit code 1 returned from tool NuGet.exe

21 August 2015

Rules for Programmers and Does the Developers Age Matter

I found two very interesting articles.

The first one (in German) discusses if the age of a developer matters and what the pros and cons are of young or old. https://jaxenter.de/aeltere-pogrammierer-jugend-versus-erfahrung-16464

In the second you will find 11 rules for better code. I completely agree on all 11 rules!

11 Dezember 2014

Which parts of Java EE belong to the application server?

Yesterday I was at the Developer Day of Swiss Railways.

Florian Seidl talked about future enterprise software architecture where he doubt that the application still plays a central role in Java EE.

A lot of people argue that it is a pain to relay on a out dated full blown Java EE application server and therefore use a Spring/Tomcat stack or simply use Spring on top of the application server.

It seems that there is a problem in how Java EE is defined. In my opinion it would make sense to divide all the Java EE specs in two parts.

One part should contain all the specs that are directly related to the application server and on the other side there should be the specs where the application code is built on top.

App server related topics are web containter, threading, JTA, JCA, JAAS, JMS etc.
Application related are i.e. JPA, CDI, EJB, JSF.

The idea behind the separation is that one could update the application related implementations without changing the application server version.

For example I don't see any reason for not using JPA 2.1 in a Java EE 5 application server.

Sure these lists are just a first guess and incomplete but I would be interested what you think.

06 Dezember 2014

Contract First Web Service with NetBeans

From time to time I have to implement some SOAP based web services. Usually these web services are used for application integration so the contract first approach is used where one creates the WSDL  document first.

To create the server stub from the WSDL document I found out that using Maven in combination with NetBeans is the most straight forward approach.

Just choose "New File" from the menu:

After clicking on Next you need to enter the name of the service to create and provide the WSDL document:

Now just hit finish and have a look at what the wizard has generated.

First the web service server stub:

package ch.simas.demo.ws;

import javax.ejb.Stateless;
import javax.jws.WebService;

@WebService(serviceName = "CalculatorService", portName = "ICalculator", endpointInterface = "org.example.ICalculator", targetNamespace = "http://Example.org", wsdlLocation = "META-INF/wsdl/calculator.wsdl")
public class CalculatorService {

    public java.lang.Integer add(java.lang.Integer a, java.lang.Integer b) {
        //TODO implement this method
        throw new UnsupportedOperationException("Not implemented yet.");

    public java.lang.Integer subtract(java.lang.Integer a, java.lang.Integer b) {
        //TODO implement this method
        throw new UnsupportedOperationException("Not implemented yet.");

That's not very impressive but let's have a look at the pom.xml

  <configuration>                          <sourceDestDir>${project.build.directory}/generated-sources/jaxws-wsimport</sourceDestDir>

As you can see all the necessary configuration for the jaxws-maven-plugin is done!

In my opinion NetBeans has far the best integration of Maven and you don't have to configure both your IDE and Maven because NetBeans relays on the configuration in the pom.xml.