¿Qué es la arquitectura basada en componentes y por qué es importante?
Los componentes web le permiten crear elementos HTML personalizados. Encontrará los componentes web que se utilizan con mayor frecuencia en los marcos de trabajo JavaScript de front-end modernos. Pero "Web Components" es en realidad un estándar web del W3C y no necesita un marco para ser útil.
¿Qué son los componentes web?
Los componentes web funcionan como Lego para HTML. Son una colección de tecnologías que ayudan a que HTML sea más útil y reutilizable. Para obtener más información, consulte la especificación de W3 Web Components y la página de Mozilla Developer Network sobre Web Components .
Estas tecnologías son:
- Elementos personalizados
- Plantillas HTML
- El DOM de la Sombra
- Módulos ES
Echemos un vistazo a estos a su vez.
Elementos personalizados
Los elementos personalizados son elementos HTML especiales que JavaScript hace más funcionales. Se utilizan mejor para mostrar datos siempre actualizados sin devoluciones de llamada. También puede nombrarlos como desee.
Plantillas HTML
Las plantillas son fragmentos reutilizables de HTML. Son ideales para elementos que se encuentran en varios lugares o en varias páginas, como encabezados, pies de página y menús.
El DOM de la Sombra
El DOM es el pegamento que une lo que ve en el navegador con el código HTML. El DOM Shadow es una parte del DOM que le permite mantener el marcado, el estilo y la funcionalidad separados.
Al usar el DOM de sombra, cada elemento personalizado puede obtener su propio DOM. Hacer esto evita que las funciones de estilo y JavaScript modifiquen elementos que no desea que se vean afectados.
Módulos ES
Estas son las bibliotecas especiales de JavaScript que hacen que los componentes web funcionen.
Una de las principales ventajas de los componentes web es que puede reutilizar su HTML personalizado en cualquier lugar. Debido a que los componentes web son HTML y JavaScript simples, son compatibles con las aplicaciones de JavaScript vanilla, así como con los marcos. Puede obtener más información en webcomponents.org .
Componentes web con un marco
La forma más sencilla de empezar a utilizar componentes web es con un marco. Antes de que existieran los componentes web, Angular.js proporcionaba una funcionalidad similar llamada directivas. Hicieron mucho del mismo trabajo que los componentes, antes de que los componentes se convirtieran en un estándar.
Ahora que los componentes son un estándar, existen otros marcos que se basan en el concepto de componente web. Hacen que el uso de componentes web sea más fácil y simplificado, además de abstraer gran parte de la complejidad del uso de JavaScript de bajo nivel.
Vue
Vue.js es un popular framework de front-end basado en componentes que es uno de los favoritos entre los desarrolladores. Vue es fácil de aprender y de programar. El marco también facilita la adición de componentes simples a sitios web HTML básicos.
Reaccionar
React es un marco de interfaz de usuario que ha sido ampliamente adoptado comercialmente. Este marco también es uno de los favoritos entre los desarrolladores. React es mejor conocido por simplificar el desarrollo web al poner HTML, CSS y JavaScript en un solo script.
Para obtener más información, eche un vistazo a nuestro resumen de tutoriales para aprender a reaccionar para crear aplicaciones web .
Componentes web sin marco
Puede escribir componentes web en JavaScript simple. Pero es difícil hacerlo, especialmente para principiantes. Sin embargo, existen bibliotecas ligeras que puede agregar a su código existente. Le brindan la facilidad de las prácticas modernas de JavaScript sin la gran sobrecarga de un marco completo.
Polímero
Polymer es la contribución de Google al movimiento de componentes web. Es una colección de bibliotecas ligeras que facilitan la creación de elementos personalizados que con JavaScript simple. Tiene bibliotecas para crear elementos personalizados y plantillas.
Polymer tiene una biblioteca de polyfills para garantizar la compatibilidad con navegadores más antiguos. También hay una versión temprana de componentes de diseño de materiales para agregar diseño de materiales a HTML simple.
Delgado
Otra opción es Slim.js, una biblioteca todo en uno que facilita la adición a un sitio web simple. Agiliza el proceso de creación de elementos personalizados y proporciona acceso directo al DOM en la sombra.
Plantilla
Por último, pero no menos importante, está la excelente plantilla, que le ofrece lo mejor de ambos mundos. Es similar a React y proporciona muchas de las mismas funciones. Pero le brinda esa funcionalidad de nivel de marco sin encerrarlo en un marco de trabajo pesado.
Stencil también precompila sus componentes, lo que los hace más livianos. Por el contrario, los marcos como React cargan todo el marco en el navegador y compilan los componentes sobre la marcha. En el momento en que los componentes de Stencil llegan al navegador, son solo JavaScript y HTML vanilla sin equipaje adicional.
Componentes web y diseño web
Uno de los principales obstáculos del uso de componentes es la pérdida de marcos de diseño, como Bootstrap . Técnicamente, puede usar Bootstrap con un sitio web basado en componentes. Y hay un puerto Bootstrap para React. Pero si desea utilizar algo como Stencil o Vue, es posible que no esté satisfecho con la falta de compatibilidad entre sus componentes y el marco.
Marcos de diseño web tradicionales
La buena noticia es que hay varios marcos de diseño para elegir. Vaadin proporciona algunos componentes hermosos. Para un sabor empresarial, existe OpenUI5 . Y como ya se mencionó, Polymer de Google también ofrece componentes Material UI .
La mala noticia es que no encontrará la misma experiencia que obtiene de Bootstrap en ninguno de esos marcos. Y les faltan muchos elementos que ves en la mayoría de los marcos de diseño, como la tipografía.
¿Qué es el enfoque del marco de diseño basado en componentes?
Una tecnología diferente, como los componentes web, merece un enfoque diferente. Taquiones es el mejor enfoque. Es más fácil de usar para los diseñadores, pero puede brindarles a los desarrolladores una base sólida y limpia. Tachyons es móvil primero y proporciona una consistencia de diseño que es sutil pero genera hermosos resultados.
Tachyons divide las clases de CSS en el menor uso posible. Por ejemplo, así es como creas un botón usándolo:
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>En la mayoría de los marcos de diseño, le daría al enlace una clase de botón y otra clase para redondear las esquinas. En Tachyons, usted elige su relleno, borde, color, etc. sobre la marcha. Todas las abreviaturas pueden parecer complicadas al principio, pero siguen un patrón de nomenclatura consistente que es fácil de aprender.
La clase más pequeña posible es un enfoque que no funciona para sitios web tradicionales porque obstruye sus clases HTML. Pero con la arquitectura basada en componentes, probablemente usará el mismo botón una y otra vez en toda su aplicación. Eso significa que solo necesita crear ese botón una vez para todo su sitio web.
Pensando en componentes
Otro obstáculo es hacer que su cerebro cambie de marcha de los diseños de sitios web tradicionales a la estructura basada en componentes. Hay dos técnicas que le ayudarán a aprender a pensar en componentes.
El enfoque atómico
Piense en una página web como un organismo. Las partes como la sección de héroes, la guía de precios y las reseñas de los usuarios son como las células del organismo. Se trata de piezas que puede trasladar de forma segura a sus propios componentes, tanto si los reutiliza como si no.
Los botones, encabezados y comillas son como átomos. Los átomos son la parte más pequeña posible. Cuando no tiene sentido descomponer más un componente, eso es un átomo. Por lo general, estos son componentes que usará una y otra vez a lo largo de su proyecto y posiblemente entre proyectos.
El enfoque DRY
O simplemente puede olvidar todas esas tonterías de organismos, células y átomos y mantenerlo SECO . DRY son las siglas de Don't Repeat Yourself.
Cualquier cosa, grande o pequeña, puede ser un componente. Así que escribe tu HTML como de costumbre. Cuando encuentre algo que desee reutilizar, como una galería o un pie de página, divídalo en su propio componente.
¿Debería utilizar componentes web en su próximo proyecto?
Los puntos principales a considerar son su equipo y los estándares web.
Todos los principales navegadores han adoptado componentes web. CanIUse califica los componentes personalizados con una tasa de adopción del 93 por ciento y las plantillas con un 95 por ciento , por lo que su uso es seguro. Y hay polyfills para los pocos rezagados que no admiten componentes web. Eso significa que el cumplimiento no es un problema.
Si tiene un equipo sin experiencia en frameworks o JavaScript, es posible que tenga dificultades para adoptar esta nueva tecnología. Pero probablemente tendrían problemas para adoptar cualquier tecnología nueva si ese fuera el caso. Y si estás solo, ¡adelante! Siempre es una buena idea desarrollar sus habilidades.
Las partes más difíciles de adoptar componentes web son la escasez de marcos de diseño y aprender a pensar en términos de componentes. Pero hemos cubierto ambos. Los componentes web existen desde 2014, por lo que no son una tecnología nueva. Pero son una mejor tecnología.