Componentes web en I/O 2019
Publicado el 18 de junio de 2019
En Google I/O 2019, Kevin Schaaf, del proyecto Polymer, y Caridy Patiño, de Salesforce, hablaron sobre el estado de los componentes web.
¿Qué tan populares son los componentes web?
Si usaste la Web hoy, es probable que hayas usado componentes web. Según nuestros cálculos, entre el 5% y el 8% de todas las cargas de página actuales usan uno o más componentes web. Esto hace que los componentes web sean una de las funciones nuevas de la plataforma web más exitosas que se lanzaron en los últimos cinco años.
Puedes encontrar componentes web en sitios que probablemente uses todos los días, como YouTube y GitHub. También se usan en muchos sitios de noticias y publicaciones creados con AMP (los componentes de AMP también son componentes web). Y muchas empresas también están adoptando componentes web.
¿Qué son los componentes web?
¿Qué son los componentes web? Las especificaciones de los componentes web proporcionan un conjunto de APIs de bajo nivel que te permiten extender el conjunto de etiquetas HTML integrado del navegador. Los componentes web proporcionan lo siguiente:
- Un método común para crear un componente (con las APIs de DOM estándar)
- Es una forma común de recibir y enviar datos (con propiedades o eventos).
Fuera de esa interfaz estándar, los estándares no dicen nada sobre cómo se implementa realmente un componente:
- Qué motor de renderización usa para crear su DOM
- Cómo se actualiza en función de los cambios en sus propiedades o atributos
En otras palabras, los componentes web le indican al navegador cuándo y dónde crear un componente, pero no cómo crearlo.
Los autores pueden elegir patrones de renderización funcionales, como React, para compilar sus componentes web, o bien pueden usar plantillas declarativas, como las que se encuentran en Angular o Vue. Como autor, tienes total libertad para elegir la tecnología que usas dentro del componente, sin perder la interoperabilidad.
¿Para qué sirven los componentes web?
La diferencia clave entre los componentes web y los sistemas de componentes de propiedad exclusiva es la interoperabilidad. Debido a su interfaz estándar, puedes usar componentes web en cualquier lugar donde usarías un elemento integrado, como <input> o <video>.
Como se pueden expresar como HTML real, todos los frameworks populares pueden renderizarlos. De esta manera, tus componentes se pueden consumir de forma más amplia, en una variedad más diversa de aplicaciones, sin bloquear a los usuarios en un solo framework.
Y, como la interfaz de componentes es estándar, los componentes web implementados con diferentes bibliotecas se pueden mezclar en la misma página. Esto ayuda a preparar tus aplicaciones para el futuro cuando actualizas tu pila tecnológica. En lugar de un cambio radical entre un framework y otro, en el que reemplazas todos tus componentes, puedes actualizarlos uno por uno.
¿Quién usa los componentes web?
Por todos estos motivos, los componentes web están teniendo un gran éxito en una variedad de casos de uso diferentes. Tres casos de uso han sido especialmente populares: sitios de contenido, sistemas de diseño y aplicaciones empresariales.
Sitios de contenido
Los componentes web son la tecnología perfecta para mejorar el contenido de forma progresiva, ya que una cantidad incontable de sistemas de CMS ya los pueden generar como HTML estándar.
AMP es un gran ejemplo de la rapidez y facilidad con la que los componentes web se integraron en la infraestructura de la industria editorial para publicar contenido.
Sistemas de diseño
Cada vez más empresas unifican la forma en que se presentan con un sistema de diseño, un conjunto de componentes y lineamientos que definen el aspecto común de los sitios y las aplicaciones de una organización. Los componentes web también son una excelente opción en este caso.
A menudo, los diseñadores tienen que lidiar con muchos equipos que crean sus propias versiones de los componentes del sistema de diseño sobre React, Angular y todos los demás frameworks, en lugar de tener un único conjunto de componentes canónicos.
Los componentes web son la respuesta: un sistema de componentes que realmente se escribe una vez y se ejecuta en todas partes, y que, además, les da a los equipos de apps la libertad de usar el framework que prefieran.
Empresas como ING, EA y Google implementan el lenguaje de diseño de su empresa en componentes web.
Enterprise: Componentes web en Salesforce
Los componentes web también están ganando un terreno notable dentro de las empresas como una tecnología segura y preparada para el futuro en la que se puede estandarizar. Caridy Patiño, arquitecto de la plataforma de IU de Salesforce, explicó por qué crearon su plataforma de IU con componentes web.
Salesforce es una colección de aplicaciones, muchas de las cuales provienen de adquisiciones. Cada uno de estos puede ejecutarse en su propia pila tecnológica. Como se compilan en diferentes pilas, es difícil darles a todos el mismo aspecto. Además, Salesforce permite que los clientes creen sus propias aplicaciones personalizadas con la plataforma de Salesforce. Por lo tanto, lo ideal es que los desarrolladores externos también puedan usar los componentes.
Salesforce identificó un conjunto de necesidades de los clientes de su plataforma:
- Soluciones estándar, en lugar de propietarias, para que sea más fácil encontrar desarrolladores con experiencia y más rápido incorporar a los nuevos.
- Un modelo de componentes común, por lo que personalizar cualquier aplicación de Salesforce funciona de la misma manera.
También identificaron algunas cosas que los clientes no querían:
- Cambios rotundos en sus componentes y apps En otras palabras, la retrocompatibilidad era un requisito indispensable.
- Quedarse con tecnología antigua y no poder evolucionar
- Quedar atrapado en un jardín amurallado
El uso de componentes web como base para la nueva plataforma de IU satisfizo todas estas necesidades, y el resultado son los nuevos Lightning Web Components.
Comienza a usar los componentes web
Existen muchas formas excelentes de comenzar a usar los componentes web.
Si estás creando una app web, considera usar algunos de los muchos componentes web estándar disponibles. A continuación, presentamos algunos ejemplos:
- Google vende su propio sistema de Material Design como componentes web: Componentes web de Material.
- Los Wired Elements son un conjunto genial de componentes web que tienen un aspecto de boceto dibujado a mano.
- Existen excelentes componentes web de uso especial, como
<model-viewer>, que puedes colocar en cualquier app para agregar contenido 3D.
Si estás desarrollando un sistema de diseño para tu empresa o vendes un solo componente o biblioteca que quieres que se pueda usar en cualquier entorno, considera crear tus componentes con componentes web. Puedes usar las APIs de componentes web integradas, pero son de nivel bastante bajo, por lo que hay varias bibliotecas disponibles para facilitar el proceso.
Para comenzar a crear tus propios componentes, puedes consultar LitElement, una clase base de componentes web desarrollada por Google que tiene una excelente experiencia de renderización funcional similar a la de React.
Otras herramientas y bibliotecas que debes tener en cuenta:
- Stencil es un framework que prioriza los componentes web. Incluye varias funciones de frameworks populares, como JSX y TypeScript.
- Los elementos de Angular proporcionan una forma de unir componentes de Angular como componentes web.
- El wrapper de componentes web de Vue.js proporciona una forma de empaquetar componentes de Vue como componentes web.
Más recursos:
- open-wc.org ofrece excelente información para comenzar, así como sugerencias y parámetros de configuración predeterminados para las herramientas de compilación y desarrollo.
- En Fundamentos de la Web, se proporcionan guías básicas sobre las APIs de componentes web y las prácticas recomendadas para diseñar componentes web.
- MDN proporciona documentos de referencia para las APIs de componentes web, además de algunos instructivos.