Fantastic Web Components and where to find them

Vivimos en un mundo lleno de opciones de frameworks y librerías. Sin embargo, todas tienen algo en común: el concepto del componente como algo primario.

Esto ha abierto un mundo de oportunidades para crear componentes y compartirlos. Y la vez, nos hemos quedado encerrados a que puedan ser usados por otros que compartan estas tecnologías.

Estamos en el 2018. Existe un standard de la web para crear componentes realmente usables y agnósticos al stack?

Hablemos de Web Components.

Background

Trabajo en Wizeline, y tenemos un design system que se usa en varios proyectos, sin importar el framework o librería que tengan.

Agenda

Breve historia de nuestro Design System
- 1ra era: React como base, y la falta de estandarización de nuestra API.
- 2da era: React como base, y la limitante de compartir el design system entre proyectos usando Vue y Angular.
- 3ra era: Web Components como base, a través de herramientas como StencilJS.
Hablemos de Web Components
- Que es un web component?
- Ejemplo de web component
Web components en la vida real
- Opciones para crear un web components
- Polymer
- StencilJS
- Nuestra solución para crear el design system
Demo
QA

Take Away

La audiencia va a aprender porque los web components cambian el panorama al que estamos acostumbrados para crear componentes.

Veremos como, a traves de los estandares, podemos crear algo que puede ser reusado independientemente del stack que se tenga, y las diversas herramientas que existen para crear estos elementos de forma estricta y rápida.

Demo

Voy a mostrar el design system que tenemos, la api que usamos para estandarización y como se reflejan estos web components cuando finalmente llegan al DOM.

gdljs / gdljs