Clean code y styleguides en SAPUI5

Introducción

Hace ya unas cuantas entradas os hablé de clean code y styleguides en abap. En esta entrada tenemos un segundo capítulo, esta vez nos centramos en SAPUI5.

A parte, si quieres un buen resumen sobre code clean lo encontrarás en el blog de Jorge Motos Parte 1, Parte 2, Parte 3.

Documentación

Style guide en GITHUB

Como en el caso de Abap, para SAPUI5 también existe un grupo de personas que de manera altruista recopila algunas de las mejores prácticas para programar con SAPUI5.

https://github.com/ginthemachine/sapui5-best-practices

En esta página encontraremos algunos consejos de cómo afrontar nuestros desarrollos.

Página oficial de SAPUI5

Pongo el enlace genérico ya que los enlaces no son del tipo deep link y van cambiando a medida que el framework se va actualizando:

https://sapui5.hana.ondemand.com/

Aun así hay varios puntos interesantes que a veces pasamos por alto.

• En «Get Started: Setup, Tutorials, and Demo Apps» > «Best Practices for App Developers» encontraremos ideas y consejos para tener nuestras aplicaciones de manera estandarizada.
• En «Get Started: Setup, Tutorials, and Demo Apps» > «Walkthrough» hay un fabuloso manual para aprender SAPUI5, al final de cada uno de los puntos, se añaden las best practices del punto tratado tales como nomenclatura, sugerencias de puntuación, etc…

Validadores

WEBIDE

A medida que vamos construyendo la aplicación, SAP WebIDE también nos puede ayudar a validar de manera automática si seguimos las buenas prácticas de JS o XML.

Para acceder al informe, podemos lo hacemos activando la siguiente opción:

Una vez abierto nos mostrará el tipo de error, una descripción que nos indicará cual el esl problema con un link para ver más detalles, la localización del problema, y la categoría.

También podemos añadir o quitar reglas… incluso podemos crear nuestra propia regla personalizada (si este post tiene exito haré otro explicando como crear una regla personalizada).

Para poder acceder a la configuración seguiremos estos pasos:

• No situamos en la carpeta del proyecto que queremos modificar y pulsamos botón derecho sobre esa carpeta.
• Allí seleccionamos «Project» > «Project settings»

• Una vez en las opciones del proyecto, podemos seleccionar para javascript o vistas (XML) que tipo de validador y que reglas utilizar. Por defecto, tenemos 2 tipos de validadores. Uno base y otro con añadidos para Fiori.

Mediante esta herramienta podemos ir ajustando nuestro código a medida que vamos cosntruyendo.

Por último comentar que esta validación se basa en eslint, que vamos a ver en la siguiente sección.

Eslint (validación en local)

Eslint es una herramienta de validación de código JavaScript. Para utilizarlo necesitamos tener instalado el gestor de paquetes npm.

Si todavía no lo tienes instalado en tu local a que esperas: https://www.npmjs.com/get-npm 😉

Una vez tengamos instalado el gestor de paquetes NPM es momento de instalar la funcionalidad «eslint», para ello ejecutamos el siguiente comando:

npm i -g eslint

Con el paquete instalado, vamos a preparar nuestro proyecto, solo necesitaremos añadir un par de ficheros, en este caso, voy a utilizar el template de Webide con una aplicación SAPUI5 para Foundry (pero sirve cualquier aplicación UI5)

En la raiz del proyecto SAPUI5 añadiremos un fichero llamado «.eslintrc» (si, sin nombre de fichero, sólo extensión).

En el añadimos las reglas de validación y las carpetas o ficheros que queramos ignorar. Os dejo aquí un ejemplo donde tendréis las mismas reglas que usa SAP WebIDE:

Una vez tengamos los ficheros en el proyecto, tendremos algo muy parecido a esto:

Ya solo nos queda ejecutar el comando que realizará en análisis, aun así, si has utilizado mis ficheros necesitarás una regla extra que he añadido para validar que todas las funciones, loops, if… y en general todas las cláusulas se abren y se cierran. Por lo que antes ejecuta esta sentencia (es para validaciones de React, pero nos va a servir igual):

npm install babel-eslint --save-dev

Ahora si, vamos a lanzar el análisis, para ello, lanzaremos el comando eslint (en la carpeta donde tenemos la parte de SAPUI5 (como vemos en la imagen anterior). También especificaremos que queremos realizar el análisis a los ficheros con extensión «js»

eslint . --ext .js

Aquí vemos el resultado que podemos comparar con el de WebIDE:

---

Hasta aquí unos cuantos consejos para tener vuestro código siempre limpio. Aunque algunas veces con las prisas se os puede pasar alguna cosa, los validadores os ayudarán ajustar el código. A veces son solo 30 segundos la diferencia entre un código limpio o no.

Por último Suscribete y comparte en redes para seguir viendo mas entradas en este blog.