Diseño UI

La biblioteca UI para una web funcional y comunicativa

Los componentes web son una excelente herramienta al trabajar con HTML. Se trata de una suite que permite crear elementos personalizables y reutilizables. Sus funcionalidades se encuentran separadas del código, simplificando aún más su uso.

Hybrids recoge esta premisa para entregar un compendio que incluye objetos, funciones y otras herramientas de desarrollo. Su nombre, que se traduce del inglés “híbridos” proviene de la idea de que es una mezcla de arquitectura funcional. 

Se concentra en objetos con un enfoque único para definir elementos personalizados. Aquí te contamos todo lo que trae el paquete:

• Definiciones simples, solo objetos simples y funciones puras, sin sintaxis class ni this
• Propiedades independientes con sus propios métodos de ciclo de vida simplificados.
• Fácil reutilización, fusión o división de definiciones de propiedades.
• Detección de cambios y un mecanismo de caché para simplificar el ciclo de vida de cada componente.
• Plantillas sin herramientas externas. El motor de plantillas está basado en literales de plantillas etiquetadas.
• También se incluyen herramientas para programadores: soporte de reemplazo de módulo activo para un desarrollo rápido y agradable.

¿Cómo utilizarlo?

El paquete se instala con NPM o Yarn. Luego, se deben importar las características requeridas y definir un elemento personalizable. Para finalizar, solo basta con utilizar este último en HTML. 

Como resultado, la biblioteca nos permite crear estructuras de componentes como lista de propiedades -inputs- y funciones de renderizado puro -output- que reflejan el estado actual del componente para el dominio.

Fuentes:

“Web Components API in a Nutshell” por BetterProgramming (Medium)

hybrids.js — Declarative and Functional Web Components por BetterProgramming (Medium)