Componentes web en I/O 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 nuestro recuento, entre el 5% y el 8% de todas las cargas de página en la actualidad usan uno o más componentes web. Eso 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, 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:
- 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 un componente:
- El motor de renderización que 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.
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 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 donde usarías un elemento integrado, como <input> o <video>.
Dado que 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 gama más diversa de aplicaciones, sin restringir a los usuarios a 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 que tus aplicaciones estén preparadas para el futuro cuando actualizas tu pila de tecnología. En lugar de un cambio drástico entre un framework y otro, en el que 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 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 incalculable de sistemas de CMS pueden generarlos como HTML estándar.
AMP es un excelente ejemplo de la rapidez y facilidad con la que los componentes web se incorporaron a 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 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 en 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 vez y se ejecuta en todas partes, y que aún les brinda a los equipos de apps la libertad de usar el framework que elijan.
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 dando un paso importante dentro de las empresas como una tecnología segura y preparada para el futuro para 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 ellos puede ejecutarse en su propia pila de tecnología. Debido a que se compilan en pilas diferentes, es difícil darles a todos el mismo aspecto. Además, Salesforce permite a los clientes crear sus propias aplicaciones personalizadas con la plataforma de Salesforce. Por lo tanto, lo ideal es que los componentes también puedan ser utilizados por desarrolladores externos.
Salesforce identificó un conjunto de necesidades de los clientes de su plataforma:
- Soluciones estándar en lugar de soluciones propietarias, por lo que es más fácil encontrar desarrolladores experimentados y más rápido incorporar a los nuevos.
- Un modelo de componentes común, por lo que la personalización de cualquier aplicación de Salesforce funciona de la misma manera.
También identificaron algunos aspectos que los clientes no querían:
- Cambios drásticos en sus componentes y apps En otras palabras, la retrocompatibilidad era obligatoria.
- Quedarse estancado con tecnología antigua y no poder evolucionar
- Quedarse atrapado en un jardín cercado
El uso de componentes web como base para la nueva plataforma de IU cumplió con todas estas necesidades, y el resultado son los nuevos componentes web de Lightning.
Comienza a usar los 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 listos para usar disponibles. A continuación, presentamos algunos ejemplos:
- Google vende su propio sistema de diseño de Material como componentes web: Material Web Components.
- Wired Elements es un conjunto genial de componentes web que tienen un aspecto esbozado y dibujado a mano.
- Existen excelentes componentes web de propósito 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 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 bajo nivel, por lo que hay varias bibliotecas disponibles para facilitar el proceso.
Para comenzar a compilar tus propios componentes, puedes consultar LitElement, una clase base de componentes web desarrollada por Google que tiene una gran experiencia de renderización funcional similar a React.
Estas son 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.
- Angular Elements proporciona 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 información excelente para comenzar, así como sugerencias y parámetros de configuración predeterminados para las herramientas de compilación y desarrollo.
- Fundamentos de la Web proporciona información básica 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. \
Imagen hero de Jason Tuinstra en Unsplash.
Nota del editor: Se actualizó el gráfico de uso de elementos personalizados para mostrar los datos de uso mensuales completos, como se informa en chromestatus.com. Una versión anterior de esta publicación incluía un gráfico con una granularidad de 6 meses, sin los meses más recientes. Las series V0 y V1 del gráfico original estaban apiladas; ahora se muestran sin apilar con una línea de total para quitar la ambigüedad. El aumento repentino a fines 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 generó mediciones más precisas en el futuro.