Polymer con lit-element y lit-html
Esta semana he estado creando una POC con Polymer.
Esta semana he estado creando una POC con Polymer.
- Como template del proyecto he usado el starter kit de Polymer con PWA.
- La app utiliza la API de reservas de vuelos.
- Se puede realizar una búsqueda por ciudades (Madrid, Barcelona, San Sebastian, Berlin, New York, Amsterdam)
- La respuesta de la API se está imprimiendo en la consola.
- La librería de UI se llama UI5 Web Components, es lo mejor que he podido encontrar. La librería oficial de Google aún esta en fase experimental y tiene muy pocos componentes.
¿Que he aprendido?
- El entorno de desarrollo esta muy verde. Me ha tocado hacer muchas cosas a mano que en React o Vue simplemente ya funcionan.
- Aún no hay librerías de UI 100% funcionales para Web Components. Las que hay son muy simples y limitan mucho el desarrollo.
- El equipo de Polymer ha creado un par de librerías para trabajar con Web Components
- lit-element: para crear etiquetas custom (por ejemplo
Hello World ) - lit-html: es un motor de plantillas para pintar dichas etiquetas en el DOM.
- lit-element: para crear etiquetas custom (por ejemplo
- Lo bueno: estas etiquetas custom son nativas, o sea que cualquier navegador puede renderizarlas sin necesidad de pasar por un framework JS.
- Ojo: sigue siendo necesario pasar por un proceso de build (de esto se encarga Polymer).
- Importante: las etiquetas custom creadas con Polymer se pueden usar directamente en proyectos Angular, React o Vue.