Constant discussions about the state of frontend development are going for a while now. And they all touched a nerve or two for everyone. The amount of tools and libraries you need to integrate and keep track of is increasing rapidly. Mix it with the efforts of trying to fix javascript (ES6+) and you forget what you were going to do in the first place.

So I was looking for a way back to the old ways of <script src=”jquery.js”/> but still be able to use a modern library employing aproaches like javascript components, one way data flow, easy and fast dom updates.

I believe my search is over. Vue.js is a frontend framework that can be directly included from your html files, and it is comparable to Angular and React. In this post I want to describe how I use it to have a modern environment without dealing with the likes of npm, webpack, babel, typescript etc..

To go over the specifics of my setup, I put together a simple Google Keep clone just for this post. The code is on github, and there is a running demo that you can check out. The demo does not save anything for obvious reasons.

UI Components

To implement the very basic functionality of Google Keep, three components seems enough. One to view notes, one to create and another one to wrap the note editor in a modal box. Their code can be found from the same github repository.

Backend

Coming from a long Java background, my backend of choice is Spring Boot. It has all the goodies of spring with none of the configuration hassle. But I am not going into any details as it is not the intent of this post. We will also use Thymeleaf as the server side template engine. It will help with the methods used in the next two sections.

Preloading Data

To decrease the number of requests going to the server, you can insert the list of notes to the initial page. Just loading the notes from DB and adding to the mvc model, they will be converted to JSON with thymeleaf’s inline javascript function.

/*[[${notes}]]*/

This line is replaced with the JSON representation of the notes when thymeleaf processes the template.

Single File Components

Vue.js has a feature called single file components. The idea is to keep the template, style and the javascript of a component together. This can be partially done with thymeleaf includes. Since style tags outside of head tag works in recent browsers, it usually works. Unlike .vue files, this approach does not solve name collisions, so be careful.

Here is the simple code for the note view component.

The Future

I am using this approach on a medium sized project and wish to avoid the dark side of javascript for as long as possible. And the trends looks good too.

Suppose you want to build a java maven project, but you don't have the correct environment to do so. Or you just don't want to mess up your local machine. You can use docker to do the build without installing JDK or Maven.

We are going to use Spring PetClinic application as a sample for this post. Let's start by checking out the sources from github.

git clone https://github.com/spring-projects/spring-petclinic.git

Change into the directory.

cd spring-petclinic

Now for the magic part:

docker run -it --rm -v "$PWD":/work -w /work \
  maven:3.3.9-jdk-7 mvn package

Here we are running the maven docker image maven:3.3.9-jdk-7. You can choose different java and maven versions from the docker repository according to your project needs. We also added the current directory as a volume mounted to /work.

Docker command will take some time to complete. It will get the container image first, if its not downloaded before. The container just runs mvn package when the image is downloaded and started. Than maven will fetch all its dependencies, run the tests and build the project artifacts. petclinic.war in this case. After the build is complete the container will exit and remove itself (-rm) from the docker server.

Build results will be inside the target directory on your local file system:

$ ls -1 target/
classes
generated-sources
generated-test-sources
maven-archiver
maven-status
petclinic
petclinic.war
surefire-reports
test-classes

Persistent Maven Repository

Above procedure can be optimized by making the maven repository persistent between further runs. You'll save loads of time and bandwith by not downloading all the dependencies for every build.

Docker volumes to the rescue.

docker volume create --name m2repo

And add this volume when running the container.

docker run -it --rm -v "$PWD":/work -v m2repo:/root/.m2 -w /work \
  maven:3.3.9-jdk-7 mvn package

only difference here is the second -v parameter that maps the volume we just created to /root/.m2 directory.

This optimization dropped the build time to 90 seconds from 200 seconds on my old mac with a decent network.

So you want some initial data to be available to your spring project. You can use Hibernate's import.sql but let's do it with Java 8 and Spring Data JPA Repositories.

Case: Make sure there is an admin user, if not create one with desired roles. (Sample Data: username: admin, password:admin and has ROLE_USER, ROLE_ADMIN roles)

Model:

@Entity
public class Role {
    @Id
    private Long id;
    private String name;
    private String description;
}

@Entity
public class User {
    @Id
    private Long id;
    private String username;
    private String password;
    @ManyToMany
    private Set<Role> roles = new HashSet<>();
}

Data JPA Repositories:

public interface RoleRepository extends CrudRepository<Role, Long> {
    Optional<Role> findByName(String name);
}

public interface UserRepository extends CrudRepository<User, Long> {
    Optional<User> findByUsername(String username);
}

Initialize Data:

@Component
public class Bootstrap implements InitializingBean {

    @Autowired RoleRepository roleRepo;
    @Autowired UserRepository userRepo;

    @Override
    public void afterPropertiesSet() throws Exception {
        Role roleUser= roleRepo.findByName("ROLE_USER")
                .orElseGet(() -> 
                    roleRepo.save(new Role("ROLE_USER", "User Role description"))
                );

        Role roleAdmin = roleRepo.findByName("ROLE_ADMIN")
                .orElseGet(() -> 
                    roleRepo.save(new Role("ROLE_ADMIN", "Administrator Role description"))
                );

        User user = userRepo.findByUsername("admin").orElseGet(() -> {
            User u = new User("admin", "admin");
            u.getRoles().add(roleUser);
            u.getRoles().add(roleAdmin);
            return userRepo.save(u);
        });
    }
}

• We make the class a @Component implementing InitializingBean interface. This will make sure afterPropertiesSet() method will be called for each startup, after the injections are complete.

• Since our repositories return Optional values, we can use orElseGet on them to create domain objects if they don't already exist in the database. This was the Grails' way of writing bootstrap.groovy files. Don't know if it is still the case.

• Above classes are simplified to give you the main point. Real life code probably will use Spring Security GrantedAuthority and UserDetails interfaces, and a password encoder.

For the past couple of weeks I've been working on a pre-configured Jenkins Docker image. I thought it should be easier to get started than the official jenkins image.

Ultimate goal is to get the image to a point where no configuration, package management etc. is needed to add a new Jenkins item, point to one of my repositories over at Bitbucket, make a maven build, and produce either a runnable jar or even better, another docker image that runs the jar.

You can check it out from dockerhub or github.

Installed Packages

Below packages are pre-installed:

• Java 8 JDK
• Maven 3
• Git
• Mercurial
• Docker

Features

Jenkins Configuration

Jenkins is auto configured to use JDK and Maven installations of the system. Plugins for Git and Mercurial is also installed.

SSH Client

Upon first start, the image generates an ssh key pair and prints the public key to the docker console. This is useful if your SCM provider requires public key cryptography for code checkouts. For example you can add this to your Bitbucket repository as a deployment key.

There is also an environment variable KNOWN_HOSTS. You can set comma separated list of host names to it, and their fingerprints are added to ~/.ssh/known_hosts. This prevents your first checkout over ssh asking to add the host, thus blocking Jenkins.

Docker by Docker

Finally, we want our image to able to build docker images. Instead of using docker in docker we can mount the unix socket file of the host docker deamon to this container, and build our images there. You can read more about how to access host docker, and why it is better than "docker in docker" in this blog post.

Volumes

There are two volumes that you can mount to host, Jenkins data directory and root's .ssh directory.

/var/jenkins_home
/root/.ssh

Running

Basic:

docker run -p 8080:8080 -v taypo/jenkins

or with host mounted volumes, docker link and Bitbucket added to known hosts:

docker run -p 8080:8080 \
-v /var/run/docker.sock:/var/run/docker.sock \
-v /home/docker/data/jenkins:/var/jenkins_home \
-v /home/docker/data/jenkins/.ssh:/root/.ssh \
-e KNOWN_HOSTS=bitbucket.org \
taypo/jenkins

This will store image data in /home/docker/data/jenkinsdirectory of the host.

Cheers..

Update:
This is an older post. There are now better ways to containerize your java applications such as Jib and BuildPack.

In this post we will be creating a docker container that will run the sample application from the spring boot getting started guide.

Checkout the Sample

We start with downloading the source code from github.

git clone https://github.com/spring-guides/gs-spring-boot.git

Change into the project directory, and build it.

cd gs-spring-boot/complete/
mvn package

Now we will create a dockerfile to describe our container image. You can create this file in the project root for now.

Dockerfile

FROM java:8
EXPOSE 8080
CMD java -jar -Djava.security.egd=file:/dev/./urandom gs-spring-boot-0.1.0.jar
ADD target/gs-spring-boot-0.1.0.

Let's look at each line

FROM java:8

This tells docker to base this container from the official java container tagged with "8". More specifically OpenJDK 8. You can check out other options from the offical java repository.

EXPOSE 8080

Expose tells docker what network ports the container will be listening at runtime. You can than make this port available to the host or other containers. More common scenario is to use a reverse proxy container, and forward requests coming to a specific domain name to this port. I will cover this in a later post.

CMD java -jar -Djava.security.egd=file:/dev/./urandom gs-spring-boot-0.1.0.jar

CMD specifies the command that will run when the container is initialized. We just run our spring boot application with a security setting that will speed up tomcat startup.

ADD target/gs-spring-boot-0.1.0.jar .

This will just add our application jar file inside the container.

Check out the Dockerfile reference for other options.

The Container

Let's first build the docker container that we just defined.

docker build -t spring-boot-docker .

spring-boot-docker is the name that we have given our container. We are going to use this name in future docker commands.

Running it All

docker run -p 8080:8080 -t spring-boot-docker

You can browse to http://localhost:8080 to see it in action.

Note to OSX and Windows users. docker is not native to your operating system. You are most probably using boot2docker. If so, use the ip address of your docker virtual machine instead of localhost