Introducción

Para ilustrar un uso avanzado de Spring, veremos algunos elementos de configuración de un proyecto JHipster.

JHipster es un generador de aplicaciones interactivas. Se basa en Spring Boot y Angular con Yeoman, Maven o Gradle. En este capítulo, veremos la parte back de la aplicación y la parte front con Angular. JHipster está evolucionando muy rápidamente, ya que se utiliza mucho y tiene un gran número de colaboradores que contribuyen.

La principal particularidad de este generador es que es open source y que puede modificar fácilmente las plantillas de generación para generar sus propias aplicaciones. Es muy popular y los frameworks que utiliza lo aprovechan para mejorar, tomándolo como vector de mejora y como demostrador. La herramienta JHipster y sus plantillas están escritas en JavaScript.

Solo veremos algunas partes porque esta herramienta, que está orientada a DevOps, es muy modular y cubre muchas combinaciones de tecnologías.

La herramienta JHipster es personalizable, pero esta personalización solo es necesaria si desea crear varias aplicaciones. Para un solo proyecto, hay dos puntos de vista opuestos: comenzar desde cero o partir del código generado por un generador. Siempre es interesante estudiar este código generado para listar los problemas y nada impide personalizarlo. Comenzar desde cero en aplicaciones con este nivel de dificultad...

Aspectos generales

JHipster es una herramienta creada en 2014 por Julien DUBOIS, experto en Spring y Java, entre otros.

Las estadísticas muestran más de 168 000 descargas por mes, 19 335 estrellas en GitHub y más de 800 colaboradores. Más de 300 empresas utilizan oficialmente JHipster. El presupuesto de sponsoring es cercano a los 50 000 $ anuales y se utiliza para financiar costes de alojamiento, los bugs Bounties, correcciones de bugs o evoluciones importantes y complejos.

Está totalmente registrado bajo licencia open source y colaborativa, y la URL del proyecto es https://www.jhipster.tech/. Consiste en un proyecto principal y subproyectos asociados.

El objetivo del proyecto es ayudar a generar una aplicación full stack en un mínimo tiempo, con un sistema de plantillas y preguntas/respuestas. Los aspectos full stacks incluyen el backend basado en Springboot, la base de datos y la parte front, que se basa en SPA (Single Page Applications) con Angular, React o View. También incluye el lado de producción con la posibilidad de preparar entornos cloud y dockerizados. Asimismo, incluye pruebas y, por lo tanto, proporciona una vista de end to end del proyecto.

La adopción de la herramienta por una gran comunidad ha permitido definir una serie de buenas prácticas. La herramienta JHipster está disponible en línea de comandos y como una aplicación web.

La línea de comandos permite hacer todo y es posible crear scripts. La versión web es una versión simplificada que se utiliza bastante para comenzar.

1. JHipster web

A continuación, se muestra un ejemplo sencillo con la versión en línea, disponible en https://start.jhipster.tech/

Esta versión es gratuita y open source. Es muy posible modificarla para ponerla a disposición de los desarrolladores de una empresa, personalizando las plantillas.

Primero se debe registrar y después se le dirigirá a la página principal.

El proyecto se genera en dos pasos:

Creación de un esqueleto de aplicación vacío.
Adición de entidades de negocio.

Podemos pedirle a la herramienta que aloje los archivos fuente generados en GitHub o GitLab.

Posteriormente, hacemos clic en Create application y elegimos la configuración de nuestra aplicación:

Parámetro	Valor
Application name	demo
Repository...

Crear un blueprint

La documentación oficial está en la dirección: https://www.jhipster.tech/modules/creating-a-blueprint

Un blueprint de JHipster es un generador Yeoman que se compone a partir de un subgenerador JHipster específico para ampliar la funcionalidad de este último. El blueprint puede sustituir al getter definido en el subgenerador y proporcionar sus propios modelos y funcionalidades. Los blueprints JHipster se enumeran en el marketplace JHipster con la etiqueta jhipster-blueprint. Esto permite crear blueprints de terceros, que pueden reemplazar una parte específica de JHipster.

Para usar un blueprint, ejecute el siguiente comando:

jhipster --blueprint <nombre del blueprint>

Se debe recordar que un blueprint JHipster tiene las siguientes características:

Es un paquete NPM y es un generador Yeoman.
Sigue una extensión de las reglas Yeoman enumeradas en https://yeoman.io/generators/ y se puede instalar, usar y actualizar usando el comando yo. En lugar de utilizar el prefijo generator-, se utiliza generator-jhipster- y, en lugar de tener solo la palabra clave yeoman-generator debe tener dos palabras clave, a saber, yeoman-generator y jhipster-blueprint.

Un blueprint solo puede extender los siguientes subgeneradores (en la carpeta generadores):

common
client
server
entity
entity-client
entity-server
entity-i18n
languages
spring-controller
spring-service

Si quiere modificar otro pack, tiene que forkear el generador generator-jhipster. Un fork es más complejo de mantener en comparación con las evoluciones de las versiones de JHipster.

1. Blueprint para usar lombok en el dominio

Para crear un blueprint, podemos utilizar el generador de blueprint JHipster o clonar y modificar un blueprint existente tomando, por ejemplo, el blueprint jhipster-kotlin o el blueprint jhipster-nodejs. Para encontrar un proyecto en el que aplicarlo, puede enumerar las extensiones del marketplace https://www.jhipster.tech/modules/marketplace/#/list y filtrar por las etiquetas yeoman-generator jhipster-blueprint, JHipster-5/6/7 o buscar en Github con el criterio «org:jhipster jhipster blueprint».

Por lo tanto, también podemos usar el generador de blueprints JHipster (https://github.com/jhipster/generator-jhipster-blueprint) para ayudarnos a inicializar nuestro blueprint.

Instalación del generador de blueprint:

npm install -g generator-jhipster-blueprint ...

JHipster como herramienta multitecnologías

La herramienta JHipster es una muy buena herramienta para probar tecnologías y ver cómo se relacionan entre sí. Intenta mostrar el estado del arte y las mejores prácticas; JHipster soporta muchos frameworks y tecnologías.

En su versión 7, soporta las siguientes tecnologías:

1. Lado del cliente

Lado del cliente	Funcionalidades
HTML5	HTML5 es la última revisión importante de HTML (un formato de datos diseñado para representar páginas web).
CSS3	Hojas de estilo en cascada versión 3.
Bootstrap	Colección de herramientas para la creación del diseño de sitios web y aplicaciones web.
TypeScript	Un lenguaje de programación que mejora y asegura la producción de código JavaScript.
Angular	Angular es un framework JavaScript para desarrollar páginas web.
React	React es una librería JavaScript para facilitar la creación de aplicaciones web monopage, a través de la creación de componentes dependientes de un estado, que generan una página HTML (o porción) con cada cambio de estado.
Vue	Framework JavaScript para crear interfaces de usuario.
Redux	Redux es un contenedor de estado predecible para aplicaciones JavaScript.
JQuery	JQuery es una librería JavaScript para facilitar el scripting del lado del cliente en el código HTML de las páginas web.
Websocket	WebSocket es un protocolo de red web basado en canales de comunicación full-duplex a través de una conexión TCP.
Yarn	Yarn almacena en caché cada paquete instalado para que ya no tenga que descargarlos.
Webpack	Webpack recupera las dependencias y módulos JavaScript, entre otros, para generar archivos estáticos.
Gulp	Gulp es una herramienta para automatizar las tareas del flujo de trabajo de desarrollo.
Sass	Sass (Syntactically Awesome Stylesheets) es un lenguaje de generación de hojas de estilo.
Browsersync	Browsersync sincroniza las URL, interacciones y cambios de código en un navegador para varios dispositivos.
Test	Herramienta de prueba JavaScript (https://jestjs.io/)
Protractor	Protractor es un framework de pruebas end to end para aplicaciones Angular y AngularJS.

2. Lado del servidor

Lado del servidor	Funcionalidades
Spring Boot	Spring Boot permite crear fácilmente aplicaciones Spring autónomas, que se pueden...

Estructura del proyecto

Vamos a ilustrar la arquitectura de las aplicaciones construidas con JHipster a través del estudio de un caso de generación de aplicación Angular/Spring Boot sencilla.

1. La parte front

La parte front puede utilizar Angular, por ejemplo. Es «responsive», es decir, la pantalla se reorganiza si cambiamos el tamaño del área de visualización del navegador web. Se trata de una Single Page Application, es decir, solo hay que actualizar una única página usando AJAX. La aplicación construida utiliza HTML5 Boilerplate (https://html5boilerplate.com/) y Twitter Bootstrap (http://getbootstrap.com). Se generan pruebas para Karma.

Para el desarrollo de la parte front, JHipster utiliza Yeoman con Angular, React o Vue.

En realidad, este generador utiliza todos los mejores frameworks de cliente, que se usan en la actualidad.

2. Las líneas principales de la parte back

Aquí solo presentamos las líneas principales de la parte back.

Para este ejemplo, vamos a utilizar una aplicación monolítica con una base de datos SQL H2 y un front Angular.

La parte front Angular no se presenta porque está fuera del marco de este libro. El lector se podrá apoyar en el libro Angular - Desarrolle sus aplicaciones web con el framework JavaScript de Google de Sébastien OLLIVIER, Daniel DJORDJEVIC y William KLEIN, publicado por Ediciones ENI.

La parte back utiliza Maven, Spring, Spring MVC REST y Spring Data JPA. Se centra en el uso de Spring.

a. Spring Boot

El generador JHipster aprovecha la posibilidad de generar directamente una aplicación Spring Boot preconfigurada. Es muy fácil cambiar la configuración para estar en un stack Spring clásico en caso de que no pueda usar Spring Boot. Para hacer esto, la forma más sencilla es mirar el pom.xml efectivo generado por su herramienta de desarrollo favorita y rehacer el starter.

Spring Boot permite crear rápidamente una aplicación funcional. La configuración se simplifica.

Sistema de gestión de dependencias

Es posible generar los archivos de configuración de la build para Maven y Gradle. Solo veremos los aspectos de generación de proyectos basados en Maven. JHipster utiliza perfiles para personalizar los elementos externos, como la base de datos, para que tengan valores específicos en desarrollo y producción....

JHipster y WebFlux

WebFlux se ha integrado en JHipster 6 y mejorado en JHipster 7.

Esta adición era muy esperada por los usuarios. Ya es muy completo y permite la experimentación.

A nivel de base de datos, ofrece:

SQL (H2, MySQL, PostgreSQL, MSSQL)
MongoDB
Cassandra
Couchbase
[BETA] Neo4j
No database

Si elegimos SQL, entonces propone usar R2DBC:

MySQL
PostgreSQL
Microsoft SQL Server

Las capas domain, service y web se ajustan a las especificaciones que vimos en el capítulo sobre WebFlux.

Tener una aplicación responsiva cambia un poco algunas clases de configuración.

1. Configuración DatabaseConfiguration

Para las bases de datos SQL, JHipster utiliza R2DBC con la anotación @EnableR2dbcRepositories en la clase DatabaseConfiguration.

Disponemos de convertidores para las fechas:

@Bean 
public R2dbcCustomConversions r2dbcCustomConversions(R2dbcDialect 
dialect) { 
 List<Object> converters = new ArrayList<>(); 
 converters.add(InstantWriteConverter.INSTANCE); 
 converters.add(InstantReadConverter.INSTANCE); 
 converters.add(BitSetReadConverter.INSTANCE); 
 converters.add(DurationWriteConverter.INSTANCE); 
 converters.add(DurationReadConverter.INSTANCE); 
 converters.add(ZonedDateTimeReadConverter.INSTANCE); 
 converters.add(ZonedDateTimeWriteConverter.INSTANCE); 
 return R2dbcCustomConversions.of(dialect, converters); ...

Puntos clave

JHipster genera una aplicación Spring limpia, que puede servir como modelo, y ofrece un buen soporte para hipermedia y HATEOAS.
JHipster permite probar y comparar diferentes opciones de generaciones.
JHipster es muy bueno para descubrir las tecnologías del momento.
Podemos personalizar fácilmente el código generado por JHipster.

Spring y JHipster