Creación de Web Component de Contador de Personas en Linea
2021-11-30
No necesitas un framework completo cuando solo quieres un pequeño componente dinámico en tu pagina web.
En este proyecto, el cliente necesitaba un contador para mostrar cuántas personas estaban en linea.
En vez de cargar una biblioteca o framework completo, optamos por un web-component nativo.
Los web components son elementos que se escriben directamente en Javascript y están soportados por todos los navegadores modernos.
El component tenia la opcion de asignar titulo, color, icono y contador a su estructura, y se podía actualizar el contador en cualquier momento usando setAttribute desde una función JS. Cada 30 segundos, hicimos una petición al servidor para confirmar el número de alumnos y profesores en linea, y actualizamos los contadores.
Cuándo se actualizó el contador, se iniciaba una peqeña animación que contaba de 0 al número recibido.
El peso total del archivo era 3KB sin tener que añadir los 30KB de React o 20KB de Vue.
Para elementos sencillos, un WebComponent nativo puede ser una buena opción que te ayudará a optimizar el tiempo de carga de tu página web.