Boilerplate code: Qué es y cómo aplicarlo en WordPress

Si alguna vez has escuchado o leído el término boilerplate code, pero no sabes qué significa, entonces estás en el sitio indicado.

En este post te voy a hablar del concepto boilerplate code o simplemente boilerplate y cómo te puede ayudar en el desarrollo de plugins o temas para WordPress. Te aseguro que si te dedicas al desarrollo con WordPress y aplicas este concepto, puedes ahorrar horas de trabajo.

Antes de comenzar, quiero decirte que este artículo está enfocado a usuarios con conocimientos intermedios o avanzados o que, por lo menos, conozcan las bases del desarrollo de plugins o temas para WordPress. Aunque, igualmente, entender este concepto te puede ayudar para aplicarlo en otras áreas, ya que no es exclusivo de la informática.

Así que, si te interesa agilizar tus desarrollos y mejorar tu productividad, quédate y sigue leyendo.

¿Qué es boilerplate code?

Boilerplate code es un concepto en informática que hace referencia a la repetición de código que se repite constantemente y que presenta cambios mínimos o, directamente, no presentan ningún cambio. Para que lo entiendas mejor, podríamos traducirlo como “plantilla de código”.

Aunque la idea de boilerplate no solo se aplica en el ámbito de la informática, sino que podemos encontrar conceptos como boilerplate text, que son aquellos textos que se repiten de forma constante y que nuevamente sufren alteraciones mínimas o, directamente, no tienen ninguna alteración.

Te voy a poner un ejemplo de esto último para que lo entiendas de forma muy rápida: imagina que una empresa hace firmar a sus empleados un acuerdo de confidencialidad. Como es lógico, la empresa no redactará de cero todo el texto, sino que utilizará una plantilla en la que simplemente modificará los datos del empleado.

Ahora imagina trasladar ese concepto al desarrollo, de forma escalable y organizada. Eso es, ni más ni menos, que boilerplate code.

Un dato peculiar sobre el término boilerplate es su origen. Si eres una persona curiosa o tienes un nivel de inglés envidiable habrás dado con la traducción de “caldera” o “placa de caldera”. Pues bien, efectivamente su origen viene de las placas de acero que se utilizaban en la construcción de calderas y que, posteriormente, fue acuñado por las imprentas que usaban placas para replicar anuncios o columnas.

Ahora que tienes claro el concepto de boilerplate, a continuación te voy a comentar las ventajas de aplicarlo y algunos ejemplos de boilerplate code.

¿Para qué sirve un boilerplate code?

La aplicación de boilerplate code a tus proyectos o desarrollos te puede servir para mejorar los siguientes aspectos:

• Mejora tu productividad: Si reutilizas código te puedes ahorrar horas y horas de trabajo. Quizás pensando en esto te haya venido a la cabeza el concepto de snippets... Por si no sabes lo que es, básicamente son fragmentos de código para copiar y pegar en momentos muy concretos, pero, particularmente, creo que el significado de boilerplate va un poco más allá y nos permite estandarizar toda una estructura base para una cierta tecnología o tipo de proyecto.


• Mejora el mantenimiento: Al trabajar con un mismo esqueleto, te ayuda a mantener y escalar el código de forma más eficiente. Básicamente, si sigues la misma estructura para proyectos del mismo tipo, te permitirá desenvolverte de forma más organizada. Un ejemplo muy básico: imagina que en un proyecto has llamado a la carpeta de recursos “assets” y en otro proyecto la has denominado “resources”, este pequeño cambio ya implica que tengas que estar recordando cómo nombraste a ese recurso en cada proyecto. Con el uso de boilerplate code te ahorrarías este tipo de problemas.


• Mejora la calidad de tu código: Puedes encontrar boilerplate de distintas tecnologías realizados por auténticos profesionales de la materia. Esto te ayuda a partir de una base profesional y te permitirá mejorar tu desarrollo. Esto no quiere decir que no puedas crear tus propios boilerplate y adaptarlos a tus necesidades, esa es una opción perfectamente válida.

Has visto para qué te puede servir el uso de boilerplate. Prácticamente lo puedes encontrar en cualquier tecnología o lenguaje: para PHP, React, Angular, HTML5…

Ejemplos de boilerplate code

Un ejemplo de boilerplate para HTML5 lo puedes encontrar en HTML5 Boilerplate. Una vez descargado, podrás comenzar a trabajar con una base muy sólida, pues este proyecto cuenta con más de 10 años de implementaciones y ha sido trabajado por más de 200 profesionales del sector.

Otro ejemplo de boilerplate code podríamos encontrarlo en React Boilerplate. En este caso, nos proporciona un proyecto de React con algunos componentes ya creados, como títulos, botones o listas. También cuenta con una base para traducir nuestro proyecto, entre otras características.

Boilerplate code aplicado a WordPress

Te voy a mostrar dos boilerplate para WordPress que, personalmente, utilizo con mucha frecuencia cuando me enfrento a un nuevo desarrollo. Uno de ellos es un boilerplate para plugins y, el otro, está enfocado al desarrollo de temas.

Boilerplate code para plugins WordPress

Si ya sabes crear plugins para Wordpress y cuentas con varios a tus espaldas, seguramente alguna vez te has dedicado a copiar y pegar código que era común entre los dos, sobre todo a la hora de replicar la base. Pues bien, para que puedas evitar eso, puedes usar WordPress Plugin Boilerplate Generator.

Si te diriges a su sitio web, encontrarás una serie de campos que debes rellenar. Una vez completados, podrás clicar en el botón de “Build Plugin” y automáticamente te descargará un archivo comprimido con los ficheros necesarios para comenzar a desarrollar, todo ello creado de forma dinámica con los datos que indicaste.



Vamos a ver un poco por encima la estructura más importante del proyecto. En principio, tu plugin se debería ver de la siguiente forma, con algunos cambios en los nombres de los ficheros, pues estos se generan de forma dinámica según los campos que hayas rellenado.

• Carpeta includes: esta carpeta es donde las funcionalidades del área de administración y la parte pública son compartidas. Destacaría el fichero class-nombre-plugin.php, donde podrás agregar tus hooks para la parte de admin y public. Si te fijas en este fichero, encontrarás cuatro hooks ya añadidos para cargar los ficheros css y js, dos de ellos dentro del método define_admin_hooks() para la parte de backend (admin) y los otros dos hooks definidos estarán dentro del método define_public_hooks() para la parte de frontend (public).


• Carpeta admin: en esta carpeta encontrarás la base para trabajar con la parte de administración de tu plugin, encontrarás subcarpetas para alojar los ficheros de css y js que necesites, una carpeta para las vistas o partials y el fichero class-nombre-plugin-admin.php, donde podrás definir las funciones que son llamadas al definir los hooks.


• Carpeta pública: esta carpeta es prácticamente un clon de la carpeta admin, con la diferencia de que está enfocada para trabajar con la parte pública de tu plugin o, lo que es lo mismo, la parte que los usuarios van a ver.


• Carpeta languages: simplemente encontramos un fichero .pot para trabajar con la traducción de nuestro plugin y poder internacionalizarlo. Para editarlo puedes trabajar con Poedit.

Si no sabes muy bien qué acción realiza cada fichero, podrás encontrar comentarios en cada uno de ellos que explican en qué consisten. En ese aspecto, el código está ampliamente comentado para que sepas en todo momento sus funcionalidades.

He de decir que, personalmente, esta base me parece muy sólida, pues está enfocada con programación orientada a objetos, sigue los estándares de WordPress y contiene una buena organización.

Como mención, he de añadir que WordPress Plugin Boilerplate Generator se basa en un proyecto disponible en github denominado WordPress Plugin Boilerplate, que tiene una única pega y es que, si nos descargamos el proyecto desde su repositorio, deberemos cambiar el nombre de forma manual.

Ahora que ya tienes la base del plugin puedes empezar a desarrollar en tu entorno local o tu hosting de pruebas. Si no dispones de un hosting de pruebas, te recomiendo encarecidamente que te hagas con uno, pues nunca deberías desarrollar en producción.

Ahora, simplemente sube la carpeta de tu plugin en /wp-content/plugins y deberías visualizar algo similar a esto:



Con esto ya tienes una base sólida para empezar a desarrollar tu plugin y comenzar a darle forma. Lo mejor de todo es que únicamente has tenido que invertir unos minutos en rellenar los datos del formulario y obtener una estructura personalizada para tu plugin.

Una mención rápida es que con esta base disponemos del fichero uninstall.php situado en la raíz, donde podremos introducir el código que se ejecutará al eliminar el plugin. No deberíamos confundirlo con la activación y desactivación (los ficheros al respecto los encontraremos dentro de includes).

Particularmente, a mí me gusta borrar todo rastro que haya podido generar el plugin, tanto en base de datos como ficheros que hayamos podido generar, pues me resulta molesto que al eliminar un plugin deje “ensuciada” la instalación y tengamos que usar plugins para limpiar la base de datos de WordPress.

Aunque, si vamos a eliminar todo rastro, se lo debemos dejar claro al usuario para que entienda que si elimina el plugin y vamos borrar, por ejemplo, configuraciones en la tabla wp_options que hayamos creado para que nuestro plugin las utilice, el usuario deberá volver a configurarlo de nuevo.

Boilerplate code para themes WordPress

Crear una plantilla desde cero para WordPress puede resultar un tanto tedioso. Tenemos que tener en cuenta varios ficheros que no deberían faltar como el footer.php, header.php, single.php... Nuevamente, podemos ahorrar tiempo haciendo uso de un conocido boilerplate para desarrollar temas para WordPress, te estoy hablando de Underscores.

En este caso, si nos dirigimos a su página web, encontraremos un pequeño input que nos pedirá introducir el nombre del tema.



Aunque, si le damos justo debajo del input en Advanced Options, se nos desplegarán algunos campos más avanzados que podemos configurar. Una vez rellenados los campos según nuestras necesidades, podremos clicar en el botón de “GENERATE”. Una vez hecho, nos descarga un zip con los ficheros del tema.



Si lo abrimos, veremos que contiene todos los ficheros necesarios para que un tema de WordPress funcione correctamente: desde archivos como el search.php hasta directorios para organizar nuestras traducciones o sistemas de layouts.

Un punto destacable de Underscode es que está creado por el propio Automattic que, por si no lo sabes, es la empresa encargada de wordpress.com y wordpress.org. Con esto, nos aseguramos que esta base sigue todos los estándares que utiliza WordPress, además de aportarnos un código limpio y bien estructurado.

Conclusión

Como has podido observar, implementar el uso de boilerplate code en tus desarrollos puede mejorar de forma significativa tu productividad. Aunque, como comenté al principio del post, recomiendo que uses estas herramientas cuando ya estés familiarizado con las bases del desarrollo de plugins o temas para WordPress.

Yo suelo usar esta técnica de boilerplate code muy a menudo para generar plugins personalizados para cada instalación de WordPress, en especial si veo que tiene características complejas.

Por el contrario, si vamos aplicando los hooks directamente en el functions.php suele acabar siendo muy desordenado y caótico (en una ocasión me topé con uno con más de 1000 líneas de código). De esta forma, da un resultado más profesional y es más fácil de leer y mantener.

También quiero aclarar que no es necesario el uso de ello siempre que vayas a desarrollar. Puede ser que, por las características de tu proyecto, no te interese usar estas bases o simplemente prefieras crearlo desde cero, o puede que tengas tu propio boilerplate.

Y tú, ¿utilizas algún otro boilerplate? ¿Prefieres desarrollar desde cero? Házmelo saber en los comentarios.