Garrus: A Java Spring Rest + Angular 6 ready-to-code scaffold.

It's been a while since I wrote in this blog. My lasts years of work have been more on the managament and team leadership side of software development. But it's time to get hands on code again.

As I want to start to develop apps for local clients and for my own, I needed to update my stack. Primefaces is great, but I wanted to learn Node long ago, so I decided to start with Angular for the frontend. I stuck with Java for the backend for two main reasons: experience and mature frameworks.

After a couple weeks of work I created Garrus, a full stack scaffold, fully funciontal with a couple of CRUDs for example. Just 4 commands are neccesary to get it running.

Stack and details

Backend

• Spring Boot for running and packing.
• Spring Data for data access + Hibernate 5.
• Spring security with JWT (Json web tokens) for the rest services. Includes examples on how to secure the acces to the resources with @PreAuthorize
• Junit with Spring boot.
• MapStruct (a cool mapping tool without using reflection) for mappin data entities and DTOs at rest layer.
• Different maven profiles preconfigured.
• User table for login. Password stored as plain text.
• Vehicles and drivers simple model for reference and example.

Frontend

• Angular 6 . Using Angular CLI 6.0.8
• Angular Materials for components.
• Dashboard layout by Creative Tim.(https://www.creative-tim.com/)
• Toastr: good looking and simple notifications.(https://github.com/scttcper/ngx-toastr)
• Loading spinner.
• Login/logout with secured app route.
• CRUD functionality for vehicles and drivers.

How to get it running

All steps are in the github of the project. If you have any doubt just let me know!

Wrex Update: Primefaces 6 + Spring + Spring Data

After a couple of years with out publishing anything or touching my projects, I once again installed eclipse in my home laptop and started to wonder, what can I do? Without an interesting idea to develop I thought it would be good to refresh Wrex, my quick'n dirty archetype for java applications.

The original idea of Wrex is to avoid the hassle of setting an environment for develop low scale web application or play around with the frameworks. Just a set the connection to the database and in two maven commands you get yourself a 3 tier webapp with spring, primefaces, user login, register, email sending, among other goodies. Neat and quick.

Whats new?

MySQL 8: New hard drive means new installations, so the latest version of MySQL was an obvious choice. Updated dependencies and configurations for this version.

Spring Data: Got rid of those old fashioned DAOs and added Spring Data to the backend. Spring Data is a greet tool to access your data without having to write and implementation.

DTOs: Using database entities in the front layer is really quick, but ugly as hell and can lead to serious problems with persistence. I added a wrex-api project that isolates the backend with the frontend.


MapStruct: While isolation with layers is a good thing, it adds the necessity to map between the persistence classes and the DTOs. Using MapStruct that mapping is done in compile time and you just have to create and interface. No reflection is used in runtime. Dozer, a mapping tool that uses reflection, spent 370ms mapping 10.000 simple object StructMap did the same in 7ms.

Logback: Logging is now done with logback.

Primefaces 6: Updated to PF6.2.

 POM order: I cleaned the poms a little bit.

And that's everything. It didn't take long and now Wrex looks a little more professional without loosing is founding principle.

You can get wrex at https://github.com/konum/wrex/wiki.

Next project is Garrus an Angular JS front end with a Spring Boot backend. Stay tuned!

JUnit + H2 + Spring: Unit testing with in-memory database

Ussually web applications developed with Spring use a database for storing and reading data. Creating unit tests that are A TRIP (See this unit testing cheat sheat) cand turn out to be kind of painfull.

Luckyly for us we can achive that easily with Junit, Spring, Maven and H2. We will use an in-memory database that Spring will create and populate for us before the tests. The database will always be in a known state before and while running the tests, so we don't get nasty fails because of inconsistent data.

pom configuration
 
test-config.xml
In your src/test/resources create a file named test-config.xml.
In this file we are creating a database in the jdbc:embedded-database tag. Spring will create an H2 database instance and execute the scripts test.sql and data.sql when setting up the context.  

h2-persistence.xml
You also need to create the file src/test/resources/META-INF/h2-persistence.xml. Notice that there are no connection configuration on the persistence file.

Database for testing
Create a test.sql and a data.sql files with the ddl and the data for your tests. Notice that h2 sql has it's own markup so you may need adjust the sql generated from your db.  

The tests You just need to annotate your test with @RunWith(SpringJUnit4ClassRunner.class) and @ContextConfiguration(locations = { "classpath:test-config.xml" }). This will get running the spring context for the tests, and the h2 database with it.

Using @Transactional
If you annotate a test with @Transactional the entire unit test will be inside one transaction thath will be rolledback after the test, keeping the database data clean after the test.

Service and DAO tip
If your Service layer is annotated with @Transactional and your Dao layer isn't (daos shouldn't have  @Transactional)  test just one layer on each test case. For example, if you are testing the PartyService don't use the PartyDAO for the asserts, as the PartyDAO won't see changes created at the service functions.

You can view a full working example in wrex https://github.com/konum/wrex/

Wrex: Primefaces (JSF) + Spring + Hibernate archetype.

I decided to get the structure of wiklimb and make a quick and clean maven project out of it so any one can use it. I called Wrex. Wrex may not be beatiful, but it gets the job done fast.

For those that haven't played the great Mass Effect games Wrex won't mean a thing. But those who had played the know that Wrex is one of the last Krogan Battlemaster, likes to get things done, fast and simple. It's bloody, it's frightening, it's brutal and everyone loves it.

One of the more pain in the ass parts in any project, is to get the environment to work, getting all dependecies and stuff working together. So I have decided to get all the stuff together that I learnt building wiklimb.com in one open archetype for everyone to use.

The main technologies are Primefaces, Spring, and Hibernate (using JPA), with maven to do all the building. All using latest stable versions and working out of the box with just database connection configuration.

Github: https://github.com/konum/wrex 

What does includes?

• A backend project for the domain and service layers, with all Database related stuff in it.
• A frontend project for the view and its managedbeans, security, i18n and jetty for runing.
• A basic model for user login, register and update user info.

The good

• Facebook login example and register
• Jetty ready for fast development
• Forgot password email
• Cluster markes for Primefaces map
• Image resize using Clustr library (great open source linrary that uses Java 2D functions for scalign https://github.com/thebuzzmedia/imgscalr)
• Fileupload ready for PF uploadfile
• QueryDSL for writing queries in the DAO layer
• Liquibase for database changes.
• Use of Maven SQL plugin for cleaning and loading the local database.
• Integration Junits to the local database.
• Password encryption
• Async mail sending
• Cron jobs using Spring @Scheduled
• Prettyfaces for permanent URL links and URl rewriting
• Font awsome icons
• Ehcache for Hibernate second level cache
• File service for writing to disk files uploaded by the users.
• Nice js lightbox library included

The bad

Wrex doesn't use DTOs or VO for moving data arount. Domain objets are used directly in the managed beans of the view. Why? Development speed, less code. Maybe it's not a great aproach for big enterprise scale projects, but after a a bunch of months developing like this for wiklimb I found it perfect for smaller projects. No cumberstone code and model changes are trivial to get to the view.

The Ugly

No pretty default template or pretty layout to start working. Just a basic template with a Mainlayout an ui:composition. Some examples are still missing like the lightbox or the cluster marker for gmaps.

Clone it at Github and have fun:
https://github.com/konum/wrex

Desarrollando wiklimb Parte 3

Han sido un par de semanas de desarrollo intensas en wiklimb. Por un lado había que quitarse el oxido de encima, dejar limpio el entorno de desarrollo y borrar mucho código; por otro lado había que desarrollar funcionalidades completamente nuevas, no mejoras sobre las ya existentes. 

La limpieza
Para empezar se refactorizó toda la capa de negocio y datos, dejandolo mas limpio  y sencillo de desarrollar. En un primer momento se usó una herramienta para generar código a partir de una BBDD, pero había demasiado código, algunas cosas era complicadas de seguir y además contenia algunos fallos serios. Estaba bien para probar un concepto, pero si queriamos avanzar había que hacer de tripas corazón y eliminarlo todo.

No fué tan traumático. Cosas del diseño por capas.

La preparación
Había que hacer muchos cambios al modelo así que para no andar peleando con la base de datos decidimos especificar una bbdd de partida y definir los cambios con Liquibase. Liquibase es un una herramienta que te permite definir cambios en la bbdd mediante xml, de forma que cada desarrollador de un equipo puede hacer un cambio que afecte al modelo y subir al repositorio los cambios. Cuando un compañero se actualice los cambios se aplicarán a su bbdd local. Por ejemplo, así se define una creación de tabla con dos FK.

Usamos el plugin SQL de maven para cargar una bbdd limpia y el liquibase para ir creando los cambios para la nueva versión. Un simple mvn clean en el proyecto de negocio aseguraba una bbdd local estable y con datos limpios.

Las mejoras
Si algo bueno tiene trabajar en un proyecto propio es la falta de restricciones, así que nos actualizamos a usar las últimas versiones de las librerias más importantes que usamos en wiklimb.

• Nos pasamos a Java 8 para sacar probecho de sus expresiones lambda y trabajo con streams.
• Spring 4.2.4
• Primefaces 5.3
• Hibernate 5.0.6

Además agregamos la Querydsl. Este fraework permite hacer querys programaticamente sobre las entidades JPA con una facilidad pasmosa. Por ejemplo, si tenemos una entidad Event podemos definir la siguiente consulta:


Nos ha ayudado mucho ahorrando problemas a la hora de acceder a los datos.

El resultado
Tal y como ha quedado el entorno actualmente es muy rápido añadir funcionalidades a wiklimb siendo la parte que se come más tiempo la usabilidad y la correcta muestra en el navegador.

Os invito a registraros en http://wiklimb.com y verlo vosotros mismos.

Guerra contra el RSI

RSI es el acrónimo en inglés de Repetive Strain Injury o lesión por tensión repetitiva (traducción libre) y según la wikipedia está ligado a movimientos repetitivos, esfuerzos, vibraciones o posiciones incómodas. Hace poco menos de un mes empecé a notar una molestía en el dorso de la mano izquierda, a tal punto que era incapáz de pinchar la carne con un tenedor, teniendo que agarrarlo con el puño cerrado.

Dejé de escalar, que apenas estaba volviendo a entrenar sin forzar o hacer sesiones muy largas, y durante los fin de semanas notaba cierta mejoría. Visita al médico, rayos X y una ecotomografía después se confirmó una tendinitis en los extensores de la mano, especialmente el del dedo indice.

Sin tener un motivo puntual claro, y por la mejora en los fin de semanas lejos del ordenador mi sospecha principal es el teclado y mi abuso de la mano izquierda para atajos de teclado. Así que me he puesto manos a la obra y he empezado a usar el siguiente software mientras está de camino  un Microsoft Sculpt para tener en el trabajo.


AutoHotkey - https://autohotkey.com/
Esta herramienta permite cambiar y asignar cualquier combinación de teclas. En mi caso las estoy usando para mapear lo siguiente:
Ctr+c - > F1
Ctr+v - > F2
Ctrl + Shift + R -> F3
Teclado al lado del 1 + 1 -> Alt+tab
Teclado al lado del 1 + 2 -> Alt+shift+tab

Las tres primeras son combinaciones que ocupo mucho en el día a día y que requieren del dedo indice. Se me siguen escapando de vez en cuando, pero usar las nuevas teclas es mucho más relajado para la mano. El cambio de ventana también es mucho más cómodo sin tener que torcer el dedo pulgar.

What Pulse - https://whatpulse.org/

What Pulsees un key logger, que lleva un recuente de que teclas has pulsado y cuantas veces. El objetivo de usar esta aplicación es identificar que teclas y combinaciones uso más y de esta manera estudiar si es recomendable asignarlas a otras teclas con AutoHotkey.


WorkRave - http://www.workrave.org/

Esta herramienta de código libre que te alerta para que hagas micropausas cada pocos minutos y pausas más largas con algunos ejercicios cada más tiempo. Puede parecer un poco pesado, pero el intervalo y duración de los descansos es configurable.




Just Gestures - http://justgestures.com/

Just gestures permite realizar acciones con gestos del ratón. Las acciónes pueden ser casi cualquier cosa, incluyendo simular presiones de teclas.

  

Entre mis configuraciones actuales está Copiar, pegar, guardar, cambiar y cerrar pestañas en eclipse y firefox, buscar con google, minimizar y añgua más. Es realmente útil y evita tener que llevar la mano al teclado y al mismo tiempo me permite ahorrar combinaciones de teclas con la mano izquierda. Por desgracia no funciona para Windows 10.

En un par de semanas más espero recibir el teclado nuevo y entonces realizar una valoración de estas herramientas y si hay mejoría en la mano o no. Lo que puedo asegurar tras una semana de uso es la comodidad que otorga poder asigar las acciones más repetidas de una manera cómoda.

Desarrollando wiklimb: Semana #2

Esta semana ha sido la semana reponsiva. Nunca me había tocado tener que adaptar un diseño a los dispositivos móviles, pero ha sido gratamente fácil. Puede que el resultado no sea perfecto, pero por ahora da respuesta a una de las primeras preguntas que siempre me hacen sobre wiklimb, ¿se puede ver desde el celular?

Ahora ya sí.


Me ha sorprendido lo fácil que ha sido adaptar wiklimb a una experiencia móvil usando únicamente CSS ( si queréis sorprenderos realmente con lo que se puede hacer con css: http://www.species-in-pieces.com/#). El único problema que he tenido ha sido probarlo, ya que no tengo acceso a ningún iPhone o algún Android moderno. Me he tenido que bastar con el emulador de Chrome.


La otra tarea en la que he estado centrado esta semana es mejorar el SEO (serch engine optimization) para que Wiklimb aparezca en los resultados de búsqueda en Google. Integrar PrettyFaces para reescribir las URLS, crear un sitemap según recomienda google y añadir las etiquetas meta correspondientes en cada página debidamente internacionalizadas han sido algunas de las tareas.

Funcionalidades Nuevas

• Se ha agregado un titulo a cada topo/croquis de manera que se pueda identificar cada foto de un sector si es necesario.  
• Página de herramientas: Se ha creado una pequeña página de herramientas con recomendaciones de programas de edición de imágen, online y offline.
• Se ha mejorado el lightbox de las imágenes usando una Magnific Popup. 
• Se ha mejorado la usabilidad al crear rutas: al crear una ruta nueva automáticamente habilita una nueva ruta vacía para ingresarla, lo que hace muy cómodo añadir muchas rutas a una zona nueva.
• Se han corregido algunos errores y mejorado el rendimiento en algunos puntos.

Eso es todo por hoy. Esta semana no habrá desarrollo, ya que me centraré en mejorar la visibilidad y el número de usuarios de wiklimb.

No olvidéis seguirnos en Twitter!