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áginas actuales usan uno o más componentes web. Esto convierte a los componentes web en 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 usas todos los días, como YouTube y GitHub. También se usan en muchos sitios de noticias y publicaciones creados con AMP, ya que los componentes de AMP también son componentes web. Además, muchas empresas también están adoptando componentes web.
¿Qué son los componentes web?
Entonces, ¿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 integrado de etiquetas HTML del navegador. Los componentes web proporcionan lo siguiente:
- Es un método común para crear un componente (con 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 hacerlo.
Los autores pueden elegir patrones de renderización funcionales, al igual que 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 y, al mismo tiempo, mantener la interoperabilidad.
¿Para qué sirven los componentes web?
La diferencia clave entre los componentes web y los sistemas de componentes propietarios es la interoperabilidad. Debido a su interfaz estándar, puedes usar componentes web en cualquier lugar en el que 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 usar de forma más amplia, en una variedad más diversa de aplicaciones, sin que los usuarios queden vinculados a un solo framework.
Y, como la interfaz de componentes es estándar, los componentes web implementados con diferentes bibliotecas se pueden combinar en la misma página. Este hecho ayuda a que tus aplicaciones estén preparadas para el futuro cuando actualices tu pila de tecnología. En lugar de un cambio radical entre un framework y otro, en el que reemplazas todos tus componentes, puedes actualizarlos de a uno.
¿Quiénes usan 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 fueron 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 excelente 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 la apariencia y el estilo comunes 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 deben 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 solo conjunto de componentes canónicos.
Los componentes web son la respuesta: un sistema de componentes que se escribe una sola vez y se ejecuta en cualquier lugar, y que, a la vez, les brinda a los equipos de desarrollo de apps la libertad de usar el framework que prefieran.
Empresas como ING, EA y Google están implementando el lenguaje de diseño de sus empresas en componentes web.
Enterprise: Componentes web en Salesforce
Los componentes web también están teniendo un gran éxito en las empresas como una tecnología segura y preparada para el futuro que se puede estandarizar. Caridy Patiño, arquitecta 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 ellos puede ejecutarse en su propia pila de tecnología. Como se compilan en diferentes pilas, es difícil darles a todos el mismo aspecto y la misma sensación. 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ándares en lugar de propietarias, lo que facilita encontrar desarrolladores experimentados y acelerar la incorporación de desarrolladores nuevos
- Un modelo de componentes común, de modo que la personalización de cualquier aplicación de Salesforce funcione de la misma manera
También identificaron algunas cosas que los clientes no querían:
- Cambios rotativos en sus componentes y apps En otras palabras, la retrocompatibilidad era fundamental.
- Quedar atascado con tecnología antigua y no poder evolucionar
- Estar atrapado en un ecosistema cerrado
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 componentes web
Existen muchas formas excelentes de comenzar a usar componentes web.
Si estás compilando 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: Material Web Components.
- Los Wired Elements son un conjunto genial de componentes web que tienen un aspecto bocetado y dibujado a mano.
- Existen excelentes componentes web de propósito especial, como
<model-viewer>, que puedes soltar en cualquier app para agregar contenido en 3D.
Si estás desarrollando un sistema de diseño para tu empresa o vendes un solo componente o biblioteca que deseas que se pueda usar en cualquier entorno, considera crear tus componentes con componentes web. Puedes usar las APIs de componentes web integrados, 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 React.
Otras herramientas y bibliotecas que puedes considerar:
- Stencil es un framework que prioriza los componentes web. Incluye varias funciones populares del framework, como JSX y TypeScript.
- Angular Elements proporciona una forma de empaquetar 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 incluye excelente información para comenzar, así como sugerencias y configuraciones predeterminadas para las herramientas de compilación y desarrollo.
- Fundamentos de la Web proporciona explicaciones sobre las APIs de componentes web básicos 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.