Boilerplate code: Qué es y cómo aplicarlo en WordPress
Fecha:
24/11/2021
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.
[elementor-template id="80835"]
¿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.
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.
Marcos
27/11/2021 a las 17:37Responder a Marcos
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *