En esta segunda edición hablamos de algunas estrategias y herramientas novedosas para el frontend como monorepos y Motion One.
Foto de Randy Tarampi en Unsplash
En esta segunda edición presentamos las principales novedades que vienen para Javascript, Vitest como herramienta a considerar en los test, nuevas características y guía para migrar React, estrategias a considerar con micro-frontends y monorepos, además de Motion One para animaciones efectivas y algunas herramientas recomendadas.
ECMAScript, como el estándar de Javascript que es, cada año presenta nuevas características que pronto serán parte oficial del lenguaje, por lo que damos un repaso a algunas de las novedades que están por venir:
Obteniendo elementos de un array
Obtener un elemento en base a su índice, ya sea desde el inicio o desde el fin del array:
[1,2,3,4,5].at(3) // returns 4
[1,2,3,4,5].at(-2) // returns 4Causa de error
Al lanzar una excepción ahora es posible indicar la causa del error:
function readFiles(filePaths) {
return filePaths.map(
(filePath) => {
try {
// ···
} catch (error) {
throw new Error(
`While processing ${filePath}`,
{cause: error}
);
}
});
}Top level await modules
Ahora se puede importar módulos sin estar dentro de un async e incluso especificando un fallback:
let lodash;
try {
lodash = await import('https://primary.example.com/lodash');
} catch {
lodash = await import('https://secondary.example.com/lodash');
}Récords y Tuplas
Se añaden nuevas estructuras al lenguaje, las cuales tienen ventajas importantes. Se trata de los récords, similares a objetos, y las tuplas, similares a los array, con la diferencia de ser inmutables. Su sintaxis es la siguiente:
const record = #{ a: 1, b: 2 };
const tupla = #[1, 2];
Jasmin Virdi
Souvik Biswas
De los creadores de Vue, llega esta herramienta especial para tests unitarios que, de inicio, está hecha para adaptarse perfectamente con Vite.
En proyectos hechos con dicho web tooling o que incluso ya usaban Jest, la primera opción será adoptar y migrar a Vitest, pues ya incluye características equivalentes, pero una configuración más sencilla y tests aún más rápidos.
Anthony Fu, Patak, Mohammad Bagher, Vladimir, Ivan Demchuk, Joaquín Sánchez and Vitest contributors
La próxima versión mayor de React está disponible como release candidate.
Algunas de sus nuevas características son:
Y por supuesto, está disponible una guía muy completa para migrar los proyectos.
Si bien es un tema en boga, sigue sin ser del todo claro qué tan micro involucra la expresión. En qué casos es buena idea y cómo prevenir caer en el clásico monolito distribuido, es decir, cómo lograr esa separación que haga sentido para el negocio, trayendo las ventajas de equipos que pueden avanzar sin depender unos de los otros y sin acople de funcionalidades.
El siguiente artículo expone detalladamente algunas claves, como por ejemplo:
Luca Mezzalira
Este concepto, sin ser nuevo, está tomando fuerza recientemente.
Podemos decir que un monorepo es un repositorio que contiene varios proyectos relacionados de forma ordenada, lo opuesto al polyrepo, donde más bien son muchos repositorios aun si se relacionan de alguna forma.
Esto no es sólo que compartan un mismo lugar únicamente separados por carpetas. Debe existir una relación bien definida y clara. Además, contrario a lo que se pueda pensar, un monorepo no es un monolito.
Se insiste en eso, pues es distinto al polyrepo, donde la división está marcada físicamente con la intención de dar autonomía, pero sacrificando colaboración, pues cada proyecto tiene versiones de librerías distintas, así como sus propios mecanismos para compilar o publicar. En contraste, en un monorepo se busca la colaboración cercana de aquello que hace sentido proporcionando más ventajas como:
GitExplorer
Es una interesante herramienta para revisar cualquier comando de git al instante y conocer su funcionamiento y los parámetros que recibe. Por ejemplo:
OverVue
Herramienta de escritorio disponible para Windows y Mac, o vía instalación npm, que permite prototipar y diagramar componentes dinámicamente, así como exportar lo generado.
Es una interesante librería para manejo de animaciones que tiene como clave un bajo peso y mejor performance.
Comenzar a usarla sólo requiere instalarla en el proyecto y elegir con selectores típicos para uno o más elementos, así como la animación a aplicar:
import { animate } from "motion";
animate(".box", { backgroundColor: "red" });También es compatible directamente con Vue 3.
