Para probar los web components (wc), le di seguimiento al proyecto de Good Morning pero esta vez del lado del frontend. Aviso que no está completo.
No me gusta mucho publicar proyectos incompletos, pero porque no documentar lo que voy aprendiendo.
Proyecto: Good Morning WC
La idea es mostrar en la pantalla la hora y el pronóstico para el día; para lograr esto, voy a utilizar 3 servicios.
- Un servicio que me da mi ip pública.
- Un servicio que al recibir una ip puede determinar la hora actual.
- Un servicio que al recibir un API Key, una ip y la fecha actual puede devolverte el pronóstico.
Para mí este es mi Hello World, un frontend básico debe realizar llamadas, guardar variables de entorno, depender y esperar por otros servicios; y por supuesto, mostrar la información con estilo.
Estructura
En el artículo pasado mostré un poco del CLI de open-wc para crear una app, trae todo listo para empezar a desarrollar:
Como se puede apreciar, hay un archivo HTML donde se carga al final del body un script, ese es el web component. La imagen de arriba es un proyecto de ejemplo solo para mostrar cómo se ve inicialmente, en los próximos ejemplos será el real.
¿Soy el único que le encuentra un parecido a React y Create React App? Hay un src donde esta el primer component, una carpeta de assets, etc ..
Punto de entrada
Logre darme cuenta que puedo importar cualquier cantidad de web components (wc) en el html principal mientras lo importe como script.
En React se puede lograr algo similar, pero quise experimentar un poco ¿qué tal si provoco una estructura como la de React?
- Tener un componente principal (como el clásico App.js) y que sea el único en el index.html
- En ese componente principal, llamar otros componentes como Time.js y Forecast.js
En este caso el componente principal es good-morning-wc
Llamando un web component desde otro
Investigando me encontré que puedo importar los wc a otros wc trayendo todo como se muestra en la linea 2 y 3 a continuación:
Para utilizarlos es como en otras tecnologías que colocas el tag html como lo definiste en alguna parte, en este caso se define con customElements.define como se muestra en la línea 50.
Ciclo de vida
Para poder saber la ip pública y mandársela a los componentes Forecast y Time debo primero ejecutar un servicio; para lograrlo, debo saber un poco del ciclo de vida del wc.
Las funciones estándar son:
connectedCallback: Se ejecuta cuando se carga el wc, es como el ngOnInit (Angular) o el useEffect sin dependencias (React).
disconnectedCallback: Se ejecuta cuando se elimina el wc, es como el ngOnDestroy (Angular) o componentDidUnmount (React).
attributeChangedCallback: Se ejecuta cuando cambia un atributo y es observado? Me lo imagino como un ngOnChanges, pero tal cual como en Angular.. no se suele utilizar mucho.
adoptedCallback: Parece que se utiliza cuando un wc es movido a un nuevo documento ? Esto es nuevo para mi...
Como el proyecto utiliza Lit, tiene ciertos comportamientos adicionales en estas funciones estándar que ayudan mucho, por esto mismo si necesitas modificarlos en un proyecto que utiliza Lit elements debes llamar super.[nombre de función estándar](), para más detalle:
Luego están algunas funciones adicionales como firstUpdated() que se ejecuta después del render y recomiendan que sea la primera opción para inicializar cosas.
Estas funciones que provee Lit son más complejas y por el momento no quiero entrar mucho en detalle, cuando logre lo básico vuelvo a este punto.
Properties y Attributes
Se debe inicializar las propiedades en el constructor y crear un getter para detectar los cambios de cada uno. Lit al crear una funcion properties lo hace por ti...
Si quieres manejar objetos complejos de javascript trabajas con properties, cuando quieres utilizar simples strings o numeros es mejor atributos.
Para las propiedades se coloca un punto antes del atributo en html.
Incluso hay forma de convertirlos, pero en otro momento lo veré.
