Componentes web en I/O 2019
En Google I/O 2019, Kevin Schaaf del proyecto Polymer y Caridy Patiño de Salesforce conversaron sobre el estado de los componentes web.
¿Qué tan populares son los componentes web?
Si hoy usaste la Web, probablemente hayas usado componentes web. Según nuestro recuento, entre el 5% y el 8% de todas las cargas de páginas actualmente usan uno o más componentes web. Esto convierte a los componentes web en una de las nuevas funciones de plataforma web más exitosas que se han comercializado 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. 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 integrado de etiquetas HTML del navegador. Los componentes web proporcionan lo siguiente:
- Un método común para crear un componente (con las APIs de DOM estándar).
- Una forma común de recibir y enviar datos (mediante propiedades o eventos).
Fuera de esa interfaz estándar, los estándares no indican nada sobre cómo se implementa un componente:
- Motor de renderización que usa para crear su DOM.
- Cómo se actualiza a sí misma 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 debe crear un componente, pero no cómo.
Los autores pueden elegir patrones de renderización funcionales, como React, para compilar sus componentes web, o pueden usar plantillas declarativas como las que podrían encontrar en Angular o Vue. Como autor, tienes libertad total para elegir la tecnología que utilizas 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 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>.
Dado que se pueden expresar como HTML real, se pueden procesar con todos los frameworks populares. Así, tus componentes se pueden consumir más ampliamente, en un rango más diverso de aplicaciones, sin limitar a los usuarios a ningún framework.
Además, como la interfaz de componentes es estándar, los componentes web implementados con diferentes bibliotecas se pueden mezclar en la misma página. Este hecho ayuda a preparar tus aplicaciones para el futuro cuando actualizas tu pila tecnológica. En lugar de un gran cambio de pasos entre un framework y otro, donde reemplazas todos tus componentes, puedes actualizarlos uno a la vez.
¿Quién usa componentes web?
Por todos estos motivos, los componentes web están teniendo un gran éxito en varios 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, debido a que una cantidad incalculable de sistemas CMS ya los puede mostrar como HTML estándar.
AMP es un excelente ejemplo de la facilidad y rapidez con la que los componentes web se incorporaron a la infraestructura de la industria editorial para entregar contenido.
Sistemas de diseño
Cada vez más empresas unifican la forma en que se presentan mediante un sistema de diseño, es decir, un conjunto de componentes y pautas que definen la apariencia común de los sitios y las aplicaciones de una organización. Los componentes web también son una gran opción aquí.
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 solo conjunto de componentes canónicos.
Los componentes web son la respuesta: un sistema de solo escritura una vez que se ejecuta en todas partes y que sigue dando a los equipos 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 su empresa en los componentes web.
Empresa: Componentes web en Salesforce
Los componentes web también están teniendo un avance notable dentro de las empresas como una tecnología segura y preparada para el futuro con la que se pueden 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 propio componente tecnológico. Debido a que se crean en pilas diferentes, es difícil que tengan el mismo aspecto. Además, Salesforce permite que los clientes compilen sus propias aplicaciones personalizadas mediante la plataforma Salesforce. Por lo tanto, lo ideal sería que desarrolladores externos también pudieran usar los componentes.
Salesforce identificó un conjunto de necesidades de los clientes de su plataforma:
- Soluciones estándar en lugar de propias, por lo que es más fácil encontrar desarrolladores experimentados y acelerar la incorporación de desarrolladores 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 funciones que los clientes no querían:
- Cambios rotundos en sus componentes y apps En otras palabras, la retrocompatibilidad era imprescindible.
- Estar atascado con tecnología antigua y no poder evolucionar.
- Estar atrapado en un jardín amurallado.
El uso de componentes web como base de la nueva plataforma de IU satisface todas estas necesidades y el resultado son los nuevos componentes web Lightning.
Cómo comenzar a usar componentes web
Existen muchas formas excelentes de comenzar a usar los componentes web.
Si estás compilando una app web, considera usar algunos de los numerosos componentes web listos para usar disponibles. A continuación, presentamos algunos ejemplos:
- Google vende su propio sistema de Material Design como componentes web: los componentes web de Material.
- Los elementos con cable son un conjunto genial de componentes web con un estilo esbozado y dibujado a mano.
- Existen excelentes componentes web con propósitos especiales, como
<model-viewer>, que puedes colocar en cualquier app para agregar contenido en 3D.
Si estás desarrollando un sistema de diseño para tu empresa, o si vendes un solo componente o una biblioteca que deseas que se pueda utilizar en cualquier entorno, considera crear tus componentes utilizando componentes web. Puedes usar las APIs de componentes web integradas, pero son bastante de bajo nivel, por lo que hay una serie de bibliotecas disponibles para facilitar el proceso.
Para comenzar a compilar tus propios componentes, puedes probar 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 debes tener en cuenta:
- Stencil es un framework que prioriza los componentes web. Incluye varias funciones populares del framework, como JSX y TypeScript.
- Elementos de Angular proporciona una manera de unir los componentes de Angular como componentes web.
- El wrapper de componentes web de Vue.js permite empaquetar los componentes de Vue como componentes web.
Más recursos:
- open-wc.org cuenta con información muy útil 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, encontrarás guías sobre las APIs de componentes web básicos, así como prácticas recomendadas para diseñar componentes web.
- MDN proporciona documentos de referencia para las APIs de componentes web, además de algunos instructivos. \
Hero image de Jason Tuinstra en Unsplash.
Nota del editor: El gráfico de uso de elementos personalizados se actualizó para mostrar los datos de uso mensual completos, como se informa en chromestatus.com. Una versión anterior de esta publicación incluía un gráfico con un nivel de detalle de 6 meses, sin los meses más recientes. Las series V0 y V1 del gráfico original se apilaron; ahora se muestran no apiladas con una línea total para quitar la ambigüedad. El aumento abrupto a finales de 2017 se debe a un cambio en el sistema de recopilación de datos de chromestatus.com. Este cambio afectó las estadísticas de todas las funciones de la plataforma web y dio como resultado mediciones más precisas de aquí en adelante.