La biblioteca UI para una web funcional y comunicativa - Blog IDA Chile | Estrategia para el éxito de tu negocio
Diseño UI

La biblioteca UI para una web funcional y comunicativa

Hybrids es un repositorio cuenta con componentes pragmáticos. Su diseño está basado en objetos comunes y funciones puras.

Biblioteca UI hybrids. para el trabajo en diseño UI.

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)

 

Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.

Comentarios