Angular | Web Workers

Este proyecto es una demo práctica y didáctica que muestra cuándo y por qué usar Web Workers en Angular, comparando directamente el cálculo en el hilo principal (main thread) vs cálculo en un Web Worker, y cómo esto impacta la experiencia de usuario (UI).

La demo está pensada para:

• Aprender Web Workers en Angular
• Entender problemas de CPU-bound tasks
• Mostrar diferencias reales de UX (UI bloqueada vs fluida)
• Usarse en charlas técnicas, workshops o entrevistas

Caso de Uso

Cálculo de N números primos

El usuario puede:

• Elegir cuántos números primos calcular
• Ejecutar el cálculo:
  • En el Hilo Principal (dependiendo la cantidad es posible que se bloquee la UI)
  • En un Web Worker (UI fluida)

Mientras el cálculo se ejecuta:

• Un contador detectan si la UI se congela
• Se mide el tiempo total de ejecución

¿Qué demuestra esta demo?

Aspecto	Main thread	Web worker
UI fluida	No	Si
Tiempo de cálculo	Similar	Similar
UX	Mala	Excelente

Conclusión: Los Web Workers no hacen el código más rápido, hacen la experiencia de usuario viable.

Tecnologías utilizadas

• Angular 20
• Signals
• Zoneless Angular
• Web Workers nativos
• TypeScript
• CSS puro

Estructura del proyecto

src/
└── app/
    ├── app.component.ts       # UI + lógica de comparación
    ├── app.component.html     # Interfaz gráfica
    ├── app.component.css      # Estilos
    ├── prime.worker.ts        # Cálculo pesado (Web Worker)
    └── services/
        └── prime-worker.service.ts

Development server

Para levantar el proyecto en local:

ng serve

Luego abre: http://localhost:4200/. La aplicación se recargará automáticamente al modificar archivos.

O si prefieres usar Docker:

docker compose up -d

Luego abre: http://localhost:4210/

Cómo probar la diferencia

1. Introduce un número alto (ej: 500000 o más)

2. Pulsa Calcular con Hilo principal

   • El contador se congela
   • La animación se detiene

3. Pulsa Calcular con Web worker

   • El contador sigue
   • La animación continúa
   • La UI responde

La diferencia se percibe inmediatamente

Crear un nuevo Web Worker

Angular CLI facilita la creación de workers:

ng generate web-worker nombre-worker

Esto genera automáticamente el archivo y la configuración necesaria.

Recursos adicionales

• Angular Web Workers: https://angular.dev/ecosystem/web-workers
• Angular Signals: https://angular.dev/guide/signals
• Angular CLI: https://angular.dev/tools/cli

Autor

Angel Lucero

---

Siéntete libre de forkear, experimentar y extender esta demo 🚀

Happy coding! 😄