¿Qué es Boilerplate Code? Y cómo usarlo a tu favor

Boilerplate code o código de plantilla es un término que se usa para referirse a código que se repite en varios bloques a lo largo de tu proyecto o inclusive en diferentes proyectos.

El boilerplate es código que se mantiene igual en todos los lugares que se utiliza, lo cual hace que nos empiecen a surgir preguntas como:

¿Si el código es el mismo, por qué no lo abstraemos y lo reutilizamos?
¿Si adecúo el código ligeramente, entonces ya no es boilerplate?
¿Usar boilerplate code, es una buena práctica?

Todas estás preguntas son válidas e intentaré responderlas a lo largo de este artículo. Antes de poder responder las preguntas anteriores, es importante que tengamos claro qué es boilerplate code.

Ejemplos de boilerplate

El boilerplate code puede venir en cualquier tamaño y forma, desde unos pocos caracteres, hasta un proyecto completo con diferentes lenguajes de programación y tecnologías. Lo importante, es que es código que nosotros como desarrolladores reutilizamos.

HTML Boilerplate

Probablemente el boilerplate más común que existe es el de HTML. Todos los desarrolladores seguramente hemos escrito el siguiente código en algún momento y tal vez lo hemos escrito más de una vez. Sin el siguiente extracto de código, no podríamos crear una página web.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Viendo el código anterior, algunos podrían pensar que no está tan mal y podría ser escrito rápidamente. Pero, qué pasa si cometemos un ligero error. Por ejemplo, olvidamos agregar el atributo lang en la etiqueta html. O cometemos un error tipográfico with en lugar de width. O a lo mejor no incluimos la etiqueta meta para controlar el comportamiento del viewport. Probablemente los resultados que obtengas no sean los esperados. Esto conllevaría a un tiempo perdido de depuración y corrección de errores.

Probablemente con este ejemplo ya tengas una idea más clara de qué es boilerplate y empieces a ver su importancia. Ahora, y si modifico ligeramente mi boilerplate code diferente para ciertas ocasiones ¿Ya no es boilerplate? ¿Es una mala práctica modificarlo?

Ejemplo, podemos concordar que no siempre queremos que nuestra etiqueta title tenga el mismo valor Document.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>¡Mi nueva e increíble aplicación web!</title>
  </head>
  <body></body>
</html>

El primer extracto de código que les mostré es a lo que llamaríamos nuestro boilerplate. Es inmutable y no deberíamos modificarlo. Por el contrario, este último extracto de código no es boilerplate code en sí. Este segundo extracto es la utilización de nuestro boilerplate code y adecuado a nuestra necesidad.

Entonces respondiendo a la primera pregunta, sí podemos modificar nuestro boilerplate code, pero no deberíamos modificarlo directamente sino que, deberíamos modificarlo en su utilización. Y ¿Es una mala práctica modificarlo? Depende. Si al insertar nuestro boilerplate nos encontramos constantemente modificándolo a valores que son los mismos una y otra vez, entonces probablemente es una mala práctica y deberíamos extraer un nuevo boilerplate code del código modificado. Por el contrario, si el boilerplate code que modificamos es altamente circunstancial y no se repite con frecuencia, entonces definitivamente no sea una mala práctica.

Continuemos expandiendo nuestro entendimiento de boilerplate code con otros ejemplos.

CSS

Todos los que escribimos CSS a diario podemos decir que escribimos el siguiente extracto de código probablemente unas 100 veces al día.

.class {
  /* mis estilos */
}

Pero ¿Son estos pocos caracteres boilerplate code? La respuesta es sí. Este extracto de código es boilerplate code. Pero podríamos argumentar que no es tan útil. El tiempo en el que nos demoraríamos encontrando el extracto de código e insertándolo en nuestro editor es bastante más largo que escribirlo y nos desenfoca.

Como regla general, si el boilerplate code toma más tiempo en insertarlo que escribirlo, es mejor no utilizarlo.

Ahora escribamos un extracto de CSS más útil.

& > *:not(:last-child) {
  margin-right: 1rem;
}

Antes de que CSS nos bendijera con la propiedad gap de grid y flexbox, este extracto de código era bastante útil para espaciar todos los elementos hijos de un elemento padre, sin agregar espaciado después del último hijo.

Creo que podemos concordar que no era un selector que nos gustaba recordar y escribir cada vez que lo necesitábamos, por lo que era un buen candidato para ser extraído como boilerplate code.

Un ejemplo más contemporáneo por ejemplo:

button:has(svg) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

Este selector es útil para estilizar botones que contienen un ícono. Y es un buen candidato para ser extraído como boilerplate code.

React

Que tal si ahora hablamos de react.js

Uso React en mi ejemplo ya que es actualmente el framework más popular de JavaScript. Pero, lo que voy a decir aplica para cualquier framework.

Los frameworks de frontend son perfectos para mostrar el valor del boilerplate code. Un App de un tamaño moderado probablemente contenga cientos de componentes y todos estos componentes probablemente tengan un extracto de código como el siguiente.

import React from "react";
 
const Component = () => {
  return <div>Component</div>;
};
 
export default Component;

Escribirlo cientos de veces no solo es tedioso, es también un distractor constante antes de empezar a desarrollar. Además, cada desarrollador tiene sus preferencias de cómo escribir este extracto. Por ejemplo:

Utilizando funciones tradicionales

import React from "react";
 
function Component() {
  return <div>Component</div>;
}
 
export default Component;

Utilizando named exports

import React from "react";
 
export function Component() {
  return <div>Component</div>;
}

Desde react 17, es posible que no utilices el import de React

export const Component = () => {
  return <div>Component</div>;
};

Un mismo resultado con diferentes matices. Lo lógico sería evitar tener que escribir estos extractos de código cada vez que necesitemos un componente. Y en su lugar utilizar un boilerplate code manteniendo un estándar entre todos los desarrolladores.

Java

Como último ejemplo me gustaría hablar de Java. Java es un lenguaje de programación orientado a objetos. Y como tal, es bastante común que tengamos que escribir clases. Y si has programado en Java, sabrás que sus clases tienen un boilerplate code bastante largo.

public class MyClass {
  private String name;
 
  public MyClass(String name) {
    this.name = name;
  }
 
  public String getName() {
    return name;
  }
 
  public void setName(String name) {
    this.name = name;
  }
}

No es de extrañarse que hayan aparecido nuevos lenguajes de programación como Kotlin que intentan reducir el boilerplate code de Java, aunque no siempre tenemos acceso a nuevas tecnologías.

Si utilizamos boilerplate code esto dolería menos, ya que no perderíamos tanto tiempo escribiendo código repetitivo.

Ahora, recuerda que estos son solo ejemplos básicos de boilerplate code. En tu día día si pones atención encontrarás que podemos extraer mucho más boilerplate code de nuestros proyectos. De hecho te recomiendo que lo hagas. Es una buena práctica. Ahorras tiempo y te enfocas en lo que realmente importa.

¿Qué herramientas de boilerplate existen?

Lo siguiente que tal vez te preguntes es: Ok, extraer boilerplate code y reutilizarlo es una excelente idea. Pero, ¿Donde lo guardo? ¿Cómo lo reutilizo?

Tu editor de código

Si utilizas VSCode, como yo por ejemplo, puedes utilizar los snippets de VSCode para guardar y reutilizar tu boilerplate code. Los snippets son una excelente herramienta para guardar y reutilizar código. VSCode reconoce los textos que escribimos y nos sugiere snippets que podemos utilizar.

Solo da click al engranaje en la rueda de abajo a la izquierda de tu editor y selecciona la opción User Snippets.

Esto te abrirá un archivo de configuración de VSCode. En este archivo puedes agregar tus snippets.

{
  "My Snippets": {
    "prefix": "my-snippet",
    "body": ["Mi snippet"],
    "description": "Mi snippet"
  }
}

Más información aquí: User Snippets

Extensiones para un desarrollador

Ya sean extensiones de tu editor de texto o de tu navegador. Hay algunas opciones gratuitas que satisfacerán tus necesidades de boilerplate code si trabajas solo.

Mi recomendación número uno es la que yo usé por años. Blueprint by teamchilla. Esta extensión te permite guardar boilerplate code e inyectar un valor en lugares previamente indicados antes de insertarlo. Fue mi extensión favorita por años. Pero, lamentablemente no era apta para trabajar en equipo y no era lo suficientemente flexible para mis necesidades.

Extensiones para multiples desarrolladores y equipos

Si trabajas solo en equipo y requires de una herramienta flexible que se acople al funcionamiento de tu editor (VSCode). Te recomiendo Archittect.

Disclaimer: Yo soy uno de los desarrolladores de Archittect. Pero, no es por eso que te la recomiendo. Pasé años intentando encontrar una herramienta con la que mi equipo pudiera compartir boilerplate code. Y no encontré una solución diseñada para este mismo caso.

Archittect es una herramienta que te permite guardar y compartir boilerplate code con tu equipo. No solo te ayudará a mantener tu boilerplate code organizado y actualizado sino que también te ayudará a transformarlo en plantillas dinámicas que se adapten a tus necesidades. Lo utilizo en mi día a día en cosas tan pequeñas como una linea de código molesta fácil de olvidar, hasta estructuras de multiples archivos con muchos valores dinámicos.

Te dejó el link de su extensión por si quieres echarle un vistazo: Archittect VSCode

Boilerplate code dinámico

Tal vez notaste que utilizando ciertas herramientas puedes convertir tu boilerplate code en código dinámico. Si no lo haces ya, te recomiendo que lo hagas. Te ahorrará aún mucho más tiempo que con boilerplate code estático.

Aprendamos un poco más sobre boilerplate code dinámico.

Me gusta pensar que existen 3 categorías de boilerplate dinámico.

Estas definiciones no son oficiales. Son solo una guía para poder entender mejor el concepto.

Snippets

Tan simples como desde una linea hasta un bloque de código. Los snippets son excelentes para guardar extractos de código que solemos olvidar o que utilizamos con mucha frecuencia.

Por ejemplo:

const [value, setValue] = useState(initialValue);

Si utilizamos herramientas como Archittect podemos convertir este snippet en un snippet dinámico. Value pasaría a convertirse en una variable que al momento de insertar el snippet se nos pediría que la reemplacemos por un valor.

Lo importante sobre los Snippets es que pueden ser un arma de doble filo. Recuerda que si escribes el extracto de código más rápido que lo que te toma insertarlo, entonces no deberías utilizarlo. Pero, si tienes una herramienta optimizada para este trabajo, entonces los snippets se convierten en una excelente opción para ahorrar tiempo y mantener un estándar de código.

Templates

Los templates, por otro lado, son más complejos. Pueden extenderse de 1 bloque de código a varios. O visto de otra forma puedes verlos como la combinación de varios de tus snippets a la vez. Este es mi template personal para componentes de React con Typescript y TailwindCSS.

A la hora de insertarlo reemplazo Component por el nombre de mi componente y listo. No importa si en ciertos lugares utilizo la variable en camelCase y en otros en PascalCase. El template se encarga de hacer la transformación por mí.

import React from "react";
import { twMerge } from "tailwind-merge";
 
type Props = {
  className?: string;
};
 
const Component = (props: Props) => {
  return <div className={twMerge("Component", className)}>Component</div>;
};
 
export default Component;

Por ejemplo si quiero crear un componente Hero, el resultado será el siguiente:

import React from "react";
import { twMerge } from "tailwind-merge";
 
type Props = {
  className?: string;
};
 
const Hero = (props: Props) => {
  return <div className={twMerge("Hero", className)}>Hero</div>;
};
 
export default Hero;

Scaffolds

Por último los Scaffolds. Cuando empezamos a hablar de más de un archivo, ya estamos hablando de scaffolds. Los scaffolds son plantillas de código que pueden contener varios archivos y carpetas, pueden ser tan complejos como quieras.

Por ejemplo, tal vez te gusta colocar tus tests unitarios cerca de tus componentes. O tal vez incluso tus types e interfaces de Typescript. Un scaffold puede ayudarte a crear una estructura de carpetas y archivos que se adapte a tus necesidades.

  src/components/Component/
  ├── Component.test.tsx
  ├── Component.tsx
  └── Component.types.ts

O, por ejemplo, la estructura de archivos de tu próximo proyecto.

.env
.eslintrc
.prettierrc
.gitignore
src/
  ├── components
  ├── pages
  ├── styles
  ├── utils
  └── ...
...

Inserta tantas variables dinámicas como quieras:

Nombre del proyecto
Versiones de librerías que quisieras utilizar
Paleta de colores
Archivos de configuración
Tests predefinidos

Las posibilidades no tienen límite.

Conclusión

Escribir boilerplate puede ser una tarea tediosa, pero utilizando las herramientas adecuadas podemos sacarle provecho para ahorrar mucho tiempo y dinero.

El boilerplate code automatizado te ayudará a:

Ahorrar tiempo y dinero
Evitar errores
Mantener un estándar de código

Utilízalo para tu ventaja y la de tu equipo. Transforma tu boilerplate estático en plantillas dinámicas usando herramientas como Archittect.

Espero que este artículo te haya ayudado a entender que es boilerplate code y como puedes utilizarlo a tu favor. Si tienes alguna duda o comentario no dudes en escribirme en Twitter @LuisEduardoDev.

Archittect