Herramientas JavaScript útiles para desarrolladores WordPress

Queridos amigos informáticos. Hacedores de webs. Domadores de líneas de código. Picateclas compulsivos amantes del punto y coma. Hackermans del WordPress. ¿En serio todavía tiráis de <table> y sufrís de <div>initis aguda? Tranquilos, afortunadamente hay solución.

Deja atrás los 90 de una vez por todas y conviértete en un programador web hipster con papeles. Ya lo dijo el amado líder Matt Mullenweg hace unos añitos: ¡Aprended JavaScript, profundamente!

El futuro es hoy. Y ya toca salir de nuestra zona de confort PHPlandiense para dar el salto y estar preparado para todo lo que está a punto de llegar al mundo WordPress gracias a la introducción de Gutenberg en particular y de paladas de código JavaScript en general.

Hoy existen multitud de herramientas JavaScript que te permiten hacer virguerías con tu código sin prácticamente esfuerzo. En esta entrada te voy a hacer una breve introducción a algunas de estas. Quizás muchas te suenen pero, ¿sabes realmente para qué sirven?

Ya no tienes excusa. Seguro que después de acabar de leer todo esto te animas a probar alguna de estas herramientas. Tu productividad y hipsterismo programadoril van a dar un salto de calidad increíble. Estate atento que empezamos…

Prettier – Formatea tu código automáticamente

Empecemos por algo sencillito. Estoy seguro de que si llevas un tiempo programando y has trabajado en algún equipo o has tenido que compartir código con alguien más, has sufrido este problema. ¿Tabuladores o espacios? ¿Abrir una llave en la misma línea o en la línea siguiente? ¿Tamaños de línea de 80 caracteres o ilimitados? En definitiva, cómo formateas o indentas tu código puede llevar a discusiones acaloradas…

Para solucionar este tipo de problemas se suelen utilizar guías de estilo. Y WordPress no es diferente en este caso. Si quieres contribuir a WordPress, tu código HTML, CSS, PHP y JavaScript tiene que seguir las guías de estilo definidas.

Lo que hace Prettier es formatear el código según la configuración que tengas elegida. De este modo, una vez guardas tu archivo JavaScript en tu editor (hay varios compatibles con Prettier, entre ellos mi querido Atom), el código se transforma y se estandariza. Por tanto, todos los integrantes de tu equipo, escriban como escriban el código, acabarán generando archivos con el mismo estilo unificado.

Si quieres probarlo tú mismo, sólo has de utilizar su Playground accesible directamente desde la web de Prettier. Escribe allí tu JavaScript y verás cómo queda después de la transformación. Por otro lado, si lo quieres instalar en tu ordenador, con npm es así de fácil:

npm install -g prettier

y para probarlo tienes el comando prettier, tal y como puedes ver:

prettier ./mi/archivo.js

Este comando aplicará la transformación al archivo ./mi/archivo.js y mostrará el resultado en el terminal de línea de comandos.

WordPress se planteó integrar Prettier en Core, pero parece que finalmente no lo ha hecho (puedes ver la discusión aquí). Pero no descartes que una vez añadan soporte para PHP (está en proceso) acabe haciéndose un hueco en el Core de WordPress.

ESLint – Mejora la calidad de tu JavaScript

ESLint permite detectar problemas con tu código JavaScript antes de ejecutarlo para poder solucionarlos a tiempo. Además, también es capaz de indicarte cambios que deberías aplicar a tu código JavaScript a fin de que este sea compatible con ciertas guías de estilo (entre las que también encuentras WordPress).

Puedes echarle un ojo a la demo online que tiene en su página web para así ver los errores típicos que ESLint puede encontrar en tu JavaScript. Por otro lado, si quieres probar ESLint en tu ordenador, tan solo has de utilizar el siguiente comando npm:

npm install -g eslint

Luego, establece un archivo de configuración (.eslintrc, que podrás modificar a tu gusto posteriormente):

eslint --init

Y ya lo tienes. Pruébalo con un archivo JavaScript directamente desde el terminal:

eslint ./mi/archivo.js

Como resultado podrás ver los problemas que tiene ese archivo (errores y advertencias) como resultado de haber aplicado el comando eslint.

Nelio Popups

¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.

Juan Hernando

WordPress.org

Descarga gratis

Versión premium

PostCSS – Transforma tus estilos CSS

Lo confieso. En cuanto a desarrollo web, una de las partes que más odio es tratar con CSS. Y es que puede ser una completa pesadilla tener en cuenta todo para que tu CSS funcione como esperas en todos los navegadores.

Por suerte para mí (y para el resto de desarrolladores, claro), existen herramientas para CSS que son una gran ayuda. La que más usamos en Nelio es PostCSS. Gracias a ella, podemos olvidarnos de los prefijos de compatibilidad con navegadores (-webkit o -moz, por ejemplo).

Además de esto incluye CSSNext, que permite que utilices la sintaxis de CSS del futuro hoy. Es PostCSS el que se encarga de «compilar» tu CSS para que el resultado utilice compatibilidad con la sintaxis de CSS actual, aunque lo que tu escribas sea CSS del futuro.

Para probarlo puedes ir directamente al Playground de su web. Aunque también puedes probar la versión CLI desde tu terminal:

npm install -g postcss-cli
postcss-cli ./mi/archivo.css

Aunque lo más habitual es que incluyas un paquete PostCSS compatible con tu editor de código (otra vez, Atom ?) o que lo incluyas en Gulp o Webpack (o lo que utilices para procesar tus archivos fuente y generar tu código final).

Babel – Usa la siguiente generación de JavaScript hoy

Babel es un transpilador de JavaScript que te permite usar sintaxis futura de JavaScript hoy, sin tener que esperar a que los navegadores le den soporte. Funciona de igual modo que PostCSS para CSS, pero en este caso es para JavaScript.

Por ejemplo, con Babel puedes usar funciones con flechas (arrow functions) en tu código JavaScript. Aquí tienes un ejemplo del código original y el código después de pasar por Babel:

De nuevo, si quieres probar Babel puedes hacerlo directamente desde su propia web donde puedes escribir el JavaScript que quieras y ver el JavaScript resultante de aplicar Babel.

Por otro lado, puedes instalar el paquete Babel y probarlo en tu propio terminal:

npm install -g babel-cli
babel ./mi/archivo.js

El resultado del comando es el código JavaScript transformado para ser compatible con todos los navegadores actuales. Al igual que con PostCSS, mírate las instrucciones para instalarlo de la forma que mejor convenga a tu proyecto (Gulp, Grunt, Webpack…).

Webpack – Organiza tu código mejor

No me quiero dejar en el tintero antes de terminar otra herramienta JavaScript que también está incluida en Gutenberg. Se trata de Webpack, un empaquetador que coge todas las dependencias de tu proyecto, genera un grafo de dependencias y es capaz de crear paquetes con esto para que te sea más sencillo trabajar.

Webpack es un poco complicado de entender al principio, pero para que te quede clara su utilidad, aquí tienes un ejemplo extraído directamente desde su web:

En la imagen puedes ver que tienes dos archivos JavaScript: app.js y bar.js. La cuestión es que app.js tiene como dependencia a bar.js (y este a su vez podría tener muchas otras dependencias). Todo el tema de las dependencias puede ser un martirio, pero con Webpack es mucho más simple.

Has de crear un archivo webpack.config.js como el de la imagen donde se establece que el punto de entrada inicial es app.js y como salida quieres generar un archivo Javascript bundle.js que incluirá todas las dependencias. Una vez definido esto, simplemente ejecutando el comando webpack creamos automáticamente el archivo bundle.js. Y es este archivo bundle.js el que podemos acabar incluyendo en el HTML.

La idea es que defines los bundles (o paquetes) a partir de los entries (o puntos de entrada inicial) y te olvidas. La gestión de dependencias está a cargo del propio Webpack. Algo muy útil cuando tenemos proyectos con multitud de archivos y módulos, como es el caso de Gutenberg.

Opinión personal

Lo quieras o no, hoy en día las probabilidades de que te toque utilizar alguna de estas herramientas JavaScript es enorme. Muchos proyectos web, como por ejemplo temas y plugins de WordPress las incluyen. Incluso Gutenberg hace uso de un montón de utilidades de este tipo.

No hace falta que te pongas a aprenderlas todas de golpe, pero estaría bien que fueras integrando alguna de ellas poco a poco en tus desarrollos. A la larga, valdrá la pena los beneficios que te proporcionan. Y recuerda, si utilizas alguna otra herramienta digna de destacar, déjanos un comentario con tu experiencia.

Entrada escrita con música de Celldweller de fondo. Imagen destacada de Charles Deluvio ?? vía Unsplash