swl-ses 3.3.2

package/habilidades/frontend-avanzado/SKILL.md

@@ -0,0 +1,555 @@
+---
+name: frontend-avanzado
+description: >
+  Frontend avanzado: Web Workers, Service Workers, PWA, WebSockets, SSE, IndexedDB,
+  Web Components, Shadow DOM, CSS Container Queries, CSS Layers, View Transitions API.
+  Patrones de optimización de rendimiento.
+---
+
+# Frontend Avanzado — APIs Nativas y Rendimiento
+
+## Por qué importan las APIs nativas del navegador
+
+Los frameworks abstraen muchas APIs del navegador, pero conocerlas directamente permite:
+- Descargar trabajo pesado del hilo principal (Web Workers).
+- Ofrecer experiencias offline (Service Workers + IndexedDB).
+- Actualización en tiempo real sin polling (WebSockets/SSE).
+- Estilos que responden al contenedor, no sólo a la pantalla (Container Queries).
+
+---
+
+## Web Workers — Cómputo en Hilo Separado
+
+### MAL: cálculo pesado en el hilo principal
+
+```typescript
+// MAL — bloquea el hilo principal, congela la UI
+function calcularEstadisticas(datos: number[]): EstadisticasResultado {
+  // Operación O(n²) — bloquea la UI durante segundos
+  const correlaciones = datos.flatMap((a, i) =>
+    datos.slice(i + 1).map(b => calcularCorrelacion(a, b))
+  );
+  return { correlaciones, promedio: datos.reduce((s, n) => s + n, 0) / datos.length };
+}
+
+// En el componente — BLOQUEA renderizado
+const stats = calcularEstadisticas(misMuchosDatos); // ❌ Freeze de UI
+```
+
+### BIEN: Worker con comunicación tipada
+
+```typescript
+// estadisticas.worker.ts
+/// <reference lib="webworker" />
+
+interface MensajeEntrada {
+  tipo: "CALCULAR";
+  datos: number[];
+  id: string;
+}
+
+interface MensajeSalida {
+  tipo: "RESULTADO" | "ERROR" | "PROGRESO";
+  id: string;
+  payload: EstadisticasResultado | string | number;
+}
+
+self.addEventListener("message", (event: MessageEvent<MensajeEntrada>) => {
+  const { tipo, datos, id } = event.data;
+
+  if (tipo === "CALCULAR") {
+    try {
+      // Reportar progreso cada 10%
+      const total = datos.length;
+      const correlaciones: number[] = [];
+
+      for (let i = 0; i < total; i++) {
+        for (let j = i + 1; j < total; j++) {
+          correlaciones.push(calcularCorrelacion(datos[i], datos[j]));
+        }
+        if (i % Math.floor(total / 10) === 0) {
+          self.postMessage({
+            tipo: "PROGRESO",
+            id,
+            payload: Math.round((i / total) * 100),
+          } satisfies MensajeSalida);
+        }
+      }
+
+      self.postMessage({
+        tipo: "RESULTADO",
+        id,
+        payload: { correlaciones, promedio: datos.reduce((s, n) => s + n, 0) / total },
+      } satisfies MensajeSalida);
+    } catch (e) {
+      self.postMessage({ tipo: "ERROR", id, payload: String(e) } satisfies MensajeSalida);
+    }
+  }
+});
+
+// servicio-worker.service.ts (Angular)
+@Injectable({ providedIn: "root" })
+export class ServicioEstadisticas {
+  private worker = new Worker(
+    new URL("../workers/estadisticas.worker", import.meta.url),
+    { type: "module" }
+  );
+
+  calcular(datos: number[]): Observable<EstadisticasResultado> {
+    const id = crypto.randomUUID();
+
+    return new Observable(observer => {
+      const manejador = (event: MessageEvent<MensajeSalida>) => {
+        if (event.data.id !== id) return;
+
+        switch (event.data.tipo) {
+          case "PROGRESO":
+            // Emitir progreso si se requiere
+            break;
+          case "RESULTADO":
+            observer.next(event.data.payload as EstadisticasResultado);
+            observer.complete();
+            this.worker.removeEventListener("message", manejador);
+            break;
+          case "ERROR":
+            observer.error(new Error(event.data.payload as string));
+            this.worker.removeEventListener("message", manejador);
+            break;
+        }
+      };
+
+      this.worker.addEventListener("message", manejador);
+      this.worker.postMessage({ tipo: "CALCULAR", datos, id });
+
+      return () => this.worker.removeEventListener("message", manejador);
+    });
+  }
+}
+```
+
+---
+
+## Service Workers — Estrategias de Caché
+
+```typescript
+// service-worker.ts
+const CACHE_VERSION = "v3";
+const CACHE_ESTATICO = `estatico-${CACHE_VERSION}`;
+const CACHE_DINAMICO = `dinamico-${CACHE_VERSION}`;
+
+const RECURSOS_PRECACHEADOS = [
+  "/",
+  "/manifest.json",
+  "/offline.html",
+];
+
+// Instalación — precachear recursos estáticos
+self.addEventListener("install", (event: ExtendableEvent) => {
+  event.waitUntil(
+    caches.open(CACHE_ESTATICO).then(cache => cache.addAll(RECURSOS_PRECACHEADOS))
+  );
+  (self as ServiceWorkerGlobalScope).skipWaiting();
+});
+
+// Activación — limpiar cachés viejos
+self.addEventListener("activate", (event: ExtendableEvent) => {
+  event.waitUntil(
+    caches.keys().then(claves =>
+      Promise.all(
+        claves
+          .filter(c => c !== CACHE_ESTATICO && c !== CACHE_DINAMICO)
+          .map(c => caches.delete(c))
+      )
+    )
+  );
+  (self as ServiceWorkerGlobalScope).clients.claim();
+});
+
+// Estrategias de fetch
+self.addEventListener("fetch", (event: FetchEvent) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // API calls — Network First (con fallback a caché)
+  if (url.pathname.startsWith("/api/")) {
+    event.respondWith(networkFirst(request));
+    return;
+  }
+
+  // Recursos estáticos — Cache First
+  if (request.destination === "image" || url.pathname.endsWith(".js")) {
+    event.respondWith(cacheFirst(request));
+    return;
+  }
+
+  // HTML — Stale While Revalidate
+  event.respondWith(staleWhileRevalidate(request));
+});
+
+async function networkFirst(request: Request): Promise<Response> {
+  try {
+    const respuesta = await fetch(request.clone());
+    const cache = await caches.open(CACHE_DINAMICO);
+    cache.put(request, respuesta.clone());
+    return respuesta;
+  } catch {
+    const cached = await caches.match(request);
+    return cached ?? caches.match("/offline.html") as Promise<Response>;
+  }
+}
+
+async function cacheFirst(request: Request): Promise<Response> {
+  const cached = await caches.match(request);
+  if (cached) return cached;
+
+  const respuesta = await fetch(request);
+  const cache = await caches.open(CACHE_DINAMICO);
+  cache.put(request, respuesta.clone());
+  return respuesta;
+}
+
+async function staleWhileRevalidate(request: Request): Promise<Response> {
+  const cache = await caches.open(CACHE_DINAMICO);
+  const cached = await caches.match(request);
+
+  const fetchPromise = fetch(request).then(respuesta => {
+    cache.put(request, respuesta.clone());
+    return respuesta;
+  });
+
+  return cached ?? fetchPromise;
+}
+```
+
+---
+
+## WebSockets — Conexión Robusta con Reconexión
+
+```typescript
+// websocket.service.ts
+@Injectable({ providedIn: "root" })
+export class WebSocketService {
+  private socket: WebSocket | null = null;
+  private reintentos = 0;
+  private readonly MAX_REINTENTOS = 5;
+  private readonly DELAY_BASE_MS = 1000;
+
+  private readonly _mensajes$ = new Subject<MensajeWS>();
+  private readonly _estado$ = new BehaviorSubject<"conectando" | "conectado" | "desconectado">("desconectado");
+
+  readonly mensajes$ = this._mensajes$.asObservable();
+  readonly estado$   = this._estado$.asObservable();
+
+  conectar(url: string): void {
+    this._estado$.next("conectando");
+    this.socket = new WebSocket(url);
+
+    this.socket.onopen = () => {
+      this.reintentos = 0;
+      this._estado$.next("conectado");
+    };
+
+    this.socket.onmessage = (event: MessageEvent) => {
+      try {
+        const mensaje = JSON.parse(event.data) as MensajeWS;
+        this._mensajes$.next(mensaje);
+      } catch {
+        console.warn("Mensaje WS no parseado:", event.data);
+      }
+    };
+
+    this.socket.onclose = (event: CloseEvent) => {
+      this._estado$.next("desconectado");
+
+      // No reconectar si fue cierre limpio
+      if (event.wasClean || this.reintentos >= this.MAX_REINTENTOS) return;
+
+      const delay = this.DELAY_BASE_MS * 2 ** this.reintentos;
+      this.reintentos++;
+
+      setTimeout(() => this.conectar(url), delay);
+    };
+
+    this.socket.onerror = () => {
+      // onclose se llamará después del error
+    };
+  }
+
+  enviar<T>(tipo: string, payload: T): void {
+    if (this.socket?.readyState !== WebSocket.OPEN) {
+      throw new Error("WebSocket no conectado");
+    }
+    this.socket.send(JSON.stringify({ tipo, payload, timestamp: Date.now() }));
+  }
+
+  desconectar(): void {
+    this.reintentos = this.MAX_REINTENTOS; // Prevenir reconexión automática
+    this.socket?.close(1000, "Cierre normal");
+  }
+}
+```
+
+---
+
+## Server-Sent Events — Para Flujos Unidireccionales
+
+```typescript
+// sse.service.ts — más simple que WS para flujos del servidor al cliente
+@Injectable({ providedIn: "root" })
+export class SSEService {
+
+  escuchar<T>(url: string): Observable<T> {
+    return new Observable<T>(observer => {
+      const fuente = new EventSource(url, { withCredentials: true });
+
+      fuente.onmessage = (event: MessageEvent) => {
+        try {
+          observer.next(JSON.parse(event.data) as T);
+        } catch {
+          observer.error(new Error(`SSE: JSON inválido: ${event.data}`));
+        }
+      };
+
+      fuente.onerror = () => {
+        observer.error(new Error("Conexión SSE perdida"));
+      };
+
+      // Cleanup al desuscribirse
+      return () => fuente.close();
+    }).pipe(
+      // Reconexión automática con delay
+      retryWhen(errores =>
+        errores.pipe(
+          delayWhen((_, intento) => timer(Math.min(1000 * 2 ** intento, 30000)))
+        )
+      )
+    );
+  }
+}
+
+// Uso en componente
+export class NotificacionesComponent {
+  private sseService = inject(SSEService);
+  private destroy$ = new Subject<void>();
+
+  readonly notificaciones = signal<Notificacion[]>([]);
+
+  ngOnInit(): void {
+    this.sseService
+      .escuchar<Notificacion>("/api/notificaciones/stream")
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(notificacion => {
+        this.notificaciones.update(lista => [notificacion, ...lista].slice(0, 50));
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+```
+
+---
+
+## IndexedDB — Almacenamiento Estructurado Offline
+
+```typescript
+// idb.service.ts — usando la librería `idb` para API promisificada
+import { openDB, DBSchema, IDBPDatabase } from "idb";
+
+interface EsquemaBD extends DBSchema {
+  pedidos: {
+    key: string;
+    value: { id: string; datos: object; sincronizado: boolean; timestamp: number };
+    indexes: { "por-sincronizado": boolean };
+  };
+  cache_respuestas: {
+    key: string;  // URL
+    value: { url: string; datos: unknown; expira: number };
+  };
+}
+
+@Injectable({ providedIn: "root" })
+export class AlmacenamientoLocalService {
+  private db!: IDBPDatabase<EsquemaBD>;
+
+  async inicializar(): Promise<void> {
+    this.db = await openDB<EsquemaBD>("mi-app-db", 2, {
+      upgrade(db, versionAnterior) {
+        if (versionAnterior < 1) {
+          const storePedidos = db.createObjectStore("pedidos", { keyPath: "id" });
+          storePedidos.createIndex("por-sincronizado", "sincronizado");
+          db.createObjectStore("cache_respuestas", { keyPath: "url" });
+        }
+        if (versionAnterior < 2) {
+          // Migraciones incrementales por versión
+        }
+      },
+    });
+  }
+
+  async guardarPedidoOffline(pedido: object & { id: string }): Promise<void> {
+    await this.db.put("pedidos", {
+      id: pedido.id,
+      datos: pedido,
+      sincronizado: false,
+      timestamp: Date.now(),
+    });
+  }
+
+  async sincronizarPendientes(): Promise<void> {
+    const pendientes = await this.db.getAllFromIndex("pedidos", "por-sincronizado", false);
+
+    for (const pendiente of pendientes) {
+      try {
+        await fetch("/api/pedidos", {
+          method: "POST",
+          body: JSON.stringify(pendiente.datos),
+          headers: { "Content-Type": "application/json" },
+        });
+        await this.db.put("pedidos", { ...pendiente, sincronizado: true });
+      } catch {
+        // Sin red — se reintentará en la próxima sesión
+      }
+    }
+  }
+}
+```
+
+---
+
+## CSS Container Queries
+
+```css
+/* ANTES: media queries globales — el componente depende del viewport */
+@media (max-width: 768px) {
+  .tarjeta-producto { flex-direction: column; }
+}
+
+/* AHORA: container queries — el componente responde a su contenedor */
+.contenedor-tarjetas {
+  container-type: inline-size;
+  container-name: tarjetas;
+}
+
+/* El componente es reutilizable en cualquier contexto */
+@container tarjetas (min-width: 400px) {
+  .tarjeta-producto {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+}
+
+@container tarjetas (max-width: 399px) {
+  .tarjeta-producto {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+/* Container queries con unidades de contenedor */
+.titulo-tarjeta {
+  font-size: clamp(0.875rem, 4cqi, 1.25rem); /* cqi = % del ancho del contenedor */
+}
+```
+
+---
+
+## CSS Cascade Layers
+
+```css
+/* Orden de capas: menor a mayor especificidad */
+@layer reset, base, componentes, utilidades, sobreescrituras;
+
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; margin: 0; }
+}
+
+@layer base {
+  body { font-family: system-ui, sans-serif; line-height: 1.5; }
+  h1, h2, h3 { line-height: 1.2; }
+}
+
+@layer componentes {
+  .btn {
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+  }
+  .btn-primario { background: var(--color-primario); color: white; }
+}
+
+@layer utilidades {
+  /* Las utilidades siempre ganan sobre componentes */
+  .mt-4 { margin-top: 1rem; }
+  .hidden { display: none; }
+}
+
+@layer sobreescrituras {
+  /* Personalizaciones específicas de tema/cliente */
+  .btn-primario { border-radius: 9999px; } /* Botones pill para cliente X */
+}
+```
+
+---
+
+## View Transitions API
+
+```typescript
+// view-transitions.service.ts
+@Injectable({ providedIn: "root" })
+export class TransicionesService {
+  private router = inject(Router);
+
+  inicializarTransiciones(): void {
+    if (!("startViewTransition" in document)) return; // Fallback
+
+    this.router.events
+      .pipe(filter(e => e instanceof NavigationStart))
+      .subscribe(() => {
+        (document as any).startViewTransition(() =>
+          // El router navega dentro de la transición
+          new Promise<void>(resolve => {
+            const sub = this.router.events
+              .pipe(filter(e => e instanceof NavigationEnd), take(1))
+              .subscribe(() => { sub.unsubscribe(); resolve(); });
+          })
+        );
+      });
+  }
+}
+```
+
+```css
+/* Transición de vista personalizada */
+::view-transition-old(root) {
+  animation: desvanece-sale 0.3s ease-out;
+}
+
+::view-transition-new(root) {
+  animation: desvanece-entra 0.3s ease-in;
+}
+
+/* Transición específica para elemento */
+.tarjeta-detalle {
+  view-transition-name: tarjeta-activa;
+}
+
+@keyframes desvanece-sale  { to   { opacity: 0; transform: translateX(-20px); } }
+@keyframes desvanece-entra { from { opacity: 0; transform: translateX( 20px); } }
+```
+
+---
+
+## Checklist de Revisión — Frontend Avanzado
+
+- [ ] Cálculos que toman >50ms están en un Web Worker, no en el hilo principal.
+- [ ] El Service Worker implementa la estrategia correcta por tipo de recurso (Cache First, Network First, SWR).
+- [ ] IndexedDB tiene esquema versionado con migraciones incrementales.
+- [ ] Las conexiones WebSocket/SSE tienen reconexión automática con backoff exponencial.
+- [ ] Los Container Queries se usan en lugar de media queries para componentes reutilizables.
+- [ ] CSS Layers están definidas con orden explícito (`@layer reset, base, componentes, utilidades`).
+- [ ] View Transitions tiene fallback para navegadores sin soporte.
+- [ ] El Service Worker se actualiza correctamente al publicar nuevas versiones (`skipWaiting` + `clients.claim`).