Saltar al contenido principal

Estado del Arte

JavaScript​

Resumen de la reunión plenaria de TC39 (febrero 2025)​

  • Propuestas que llegaron a Stage 4 y se incorporan oficialmente a ECMAScript 2025, como Float16Array, RegExp.escape(), y la simplificación de redeclaraciones globales (var vs let/const). Fuente: blogs.igalia.com

  • Cambios de etapa:

    • import defer avanzó a Stage 3, lo que indica que pronto podrá implementarse en navegadores.
    • Math.clamp a Stage 1.
    • Error stack accessor a Stage 2, buscando especificar detalles del acceso a la pila de errores sin forzar un formato común. Fuente: blogs.igalia.com

  • Temporal: se presentó un estado de implementación cercano a 100% en Firefox Nightly, con una pequeña relajación en cálculos de años lunares lejanos. Fuente: blogs.igalia.com

  • ShadowRealm: discutida para permitir ejecución aislada y segura de código, con interés en integración web. Fuente: blogs.igalia.com

  • Otras discusiones:

    • Cómo manejar well-known Symbols en RegExp para evitar vulnerabilidades.
    • Visión unificada para measure y decimal.
    • Error.captureStackTrace().
    • Integridad de objetos (fixed/stable).
    • Control de “thenables” por seguridad. Fuente: blogs.igalia.com

Esta sesión refleja el rumbo de JavaScript: mejorar la librería estándar, reforzar seguridad y avanzar en características de manejo de datos complejos (fechas con Temporal, buffers, decimal/measure).

Arquitecturas modernas de aplicaciones Front-end​

El artículo “Architectures of modern Front-end applications” distingue entre diferentes enfoques:

  • Arquitectura clásica (“sin arquitectura”): Dividir en carpetas como pages, components, helpers; funciona para proyectos pequeños o MVP, pero escala mal y genera “caos” cuando la app crece. Fuente: blog.meetbrackets.com

  • Arquitectura modular: Separación en capas (pages → modules → components → UI), cada módulo con su API pública, evitando dependencias incorrectas y promoviendo reaprovechamiento.

    • Modules no deben usar otros modules.
    • Components deben ser “ligeros”, con la lógica compleja en modules. Fuente: blog.meetbrackets.com

  • Feature Sliced Design (FSD): Organiza por áreas funcionales (features) en lugar de solo capas, evitando crecimiento descontrolado de directorios globales.

    • Niveles: pages → features/widgets → entities → shared.
    • Cada capa solo depende de la inferior.
    • Trabajar “slices” y “segments” para organización clara. Requiere conocimientos y tiempo de integración, pero ofrece estructura robusta y reutilización equilibrada. Fuente: blog.meetbrackets.com

  • Ejemplos de implementación: Repositorios con ejemplos para React, Vue, Next.js y React Native, para ver concreciones de cada arquitectura. Fuente: blog.meetbrackets.com

  • Conclusión: Elegir la arquitectura según tamaño del equipo, ciclo de vida del proyecto y necesidades de escalabilidad; modular y FSD ofrecen claridad y mantenibilidad para apps medianas y grandes.

Novedades de frameworks en Chrome (mayo 2024)​

El blog de Chrome for Developers analiza tendencias en frameworks JS durante el último año:

  • React:

    • Avance en Componentes de Servidor.
    • React Compiler (caché automático).
    • Server Actions (llamadas al servidor integradas).
    • APIs declarativas de carga de recursos.
    • Renderizado fuera de pantalla para mejorar UX y rendimiento. Fuente: developer.chrome.com

  • Remix:

    • Remix 2.0 con compatibilidad con Vite.
    • Modo SPA para sitios estáticos con enrutamiento y splitting. Fuente: developer.chrome.com

  • Next.js:

    • App Router estable.
    • Soporte a nuevas APIs de React (Server Actions, Suspense).
    • Turbopack experimental.
    • Streaming y layouts compartidos. Fuente: developer.chrome.com

  • Vue/Nuxt:

    • Vue 3.4 con mejoras de rendimiento (parser más rápido, reactividad refactorizada).
    • Modo Vapor para compilación orientada a rendimiento.
    • Fin de vida de Vue 2.
    • Nuxt 3.x con lanzamientos frecuentes, compatibilidad con Vite 5, módulos crecientes, experimental Server Components e isla architecture. Fuente: developer.chrome.com

React​

Como nota, sobre la comunidad de React, hay un artículo que explica la situación actual o el descontento que al parecer react esta apoyando completame a vercel y a nextjs, dejando de lado a vite.js o otros frameworks de tipo SPA y apoyando mas a frameworks de tipo SSR o SSG.

Por eso Remix decide pasarse a Preactjs porque es mas ligera y es mucho mas rapida que Reactjs. Fuente: midudev

🔗 midudev 🔗 reactjs.org

Node.js v24.2.0​

Según la nota oficial de lanzamiento:

  • nodejs.org

  • Eliminación de soporte para HTTP/2 priority signaling conforme al RFC 9113, para incorporar versiones recientes de nghttp2.

  • Nueva propiedad import.meta.main en módulos ES para identificar si el módulo es el punto de entrada del proceso.

  • Deprecaciones y documentación:

    • util.isNativeError deprecado en favor de Error.isError.
    • No instanciar ciertas clases de http sin new.
    • Deprecación de pasar string vacío a options.shell.
    • Mejoras en métodos de fs, optimización de cpSync, exposición reducida de constantes internas.

  • Actualizaciones de dependencias:

    • nghttp2 v1.65.0, simdjson v3.12.3, SQLite v3.50.0, OpenSSL en contenedores Ubuntu 22.04. Fuentes:

    • medium.com

  • Canales de diagnóstico HTTP/2 mejorados para observabilidad; gradación de códigos de error más

  • Versiones LTS y actualizaciones de V8: Node 24 trae V8 más reciente con features de ECMAScript recientes (RegExp.escape, Float16Array, etc.). Fuentes:

Trabajar con fechas​

Temporal en JavaScript​

  • Contexto y motivación: El objeto Date nativo en JS arrastra limitaciones (mutabilidad, confusión entre timestamp y componentes, falta de soporte para calendarios distintos al gregoriano, manejo de zonas horarias limitado). Fuentes:

  • Descripción de API: Temporal es un namespace con clases estáticas (no es constructor) como Temporal.Instant, Temporal.ZonedDateTime, Temporal.PlainDate, Temporal.PlainTime, Temporal.PlainDateTime, Temporal.PlainYearMonth, Temporal.PlainMonthDay, Temporal.Duration, y Temporal.Now para obtener instantes o fechas actuales.

  • Clases y métodos comunes:

    • Métodos de construcción (.from()).
    • Lectura de propiedades (año, mes, día, hora, zona).
    • Operaciones de aritmética (.add(), .subtract(), .since(), .until()).
    • Comparaciones (.equals(), .compare()).
    • Serialización (.toString(), .toJSON(), .toLocaleString()).

  • Zonas horarias y calendarios:

    • Temporal.ZonedDateTime para fechas con zona, DST-safe.
    • Temporal.PlainDate y Temporal.PlainTime para fechas y horas sin zona.
    • Soporte para múltiples sistemas de calendario.

  • Ejemplos de uso:

    Temporal.Instant.from('1969-07-20T20:17Z');
    Temporal.PlainDate.from({ year: 2006, month: 8, day: 24 });
    Temporal.Now.instant();

  • Compatibilidad: Actualmente solo soportado en navegadores modernos como Firefox Nightly; en MDN aparece como experimental y no está en todos los navegadores de producción.

  • Recomendación: Usar polyfills o librerías hasta que el soporte generalizado esté disponible; cuando se use en producción, verificar explícitamente compatibilidad y fallback.

CSS​

Técnicas y tendencias clave para 2024/2025​

Las múltiples fuentes coinciden en varias tendencias que mejoran organización, rendimiento y experiencia de desarrollo:

  • Container Queries: Permiten aplicar estilos según el tamaño del contenedor padre, no solo el viewport, facilitando componentes responsivos reutilizables. Fuente: dev.to

  • Cascade Layers (@layer): Organiza estilos en capas (por ejemplo base, components, utilities) para controlar la cascada y evitar conflictos de especificidad.

    1. Declarar el orden de capas

      @layer reset, componentes, utilidades;

      Esto define que “reset” es la capa más baja, “componentes” intermedia y “utilidades” la más alta.

    2. Agregar reglas a cada capa

      • Reset (normalización):

        @layer reset {
          html, body, h1, h2, h3, p {
            margin: 0;
            padding: 0;
          }
        }

      • Componentes (botones, tarjetas, menús):

        @layer componentes {
          .btn {
            padding: 0.5em 1em;
            border: none;
            background: blue;
            color: white;
            border-radius: 4px;
          }
          .tarjeta {
            border: 1px solid #ccc;
            padding: 1em;
            border-radius: 6px;
          }
        }

      • Utilidades (clases pequeñas de ayuda):

        @layer utilidades {
          .mt-1 { margin-top: 0.25rem; }
          .text-center { text-align: center; }
        }

      Fuente: developer.mozilla.org

    3. Importar librerías en capas específicas

      @import url("https://cdn.com/bootstrap.min.css") layer(framework);

      @layer componentes {
        /* Ajustes a componentes basados en Bootstrap */
        .btn { /* ... */ }
      }

      @layer framework, reset, componentes, utilidades;

      Con esto, aunque Bootstrap tenga reglas para .btn, la capa componentes tuya queda por encima de framework y tus estilos ganan sin usar !important.

  • @property y Animation Composition: Definir propiedades CSS tipadas y animables, y combinar animaciones sin conflictos usando animation-composition: add, enriqueciendo animaciones puras en CSS sin JS. Fuente: dev.to

  • Text-wrap: balance: Ajuste automático de saltos de línea en encabezados para mejor legibilidad sin hacks. Fuente: dev.to

  • Scrollbar Gutter y Scrollbar Color: Evitan saltos de layout al aparecer scrollbars y permiten estilizar barras de desplazamiento. Fuente: dev.to/joodi

  • ::target-text: Resalta el texto exacto al que apunta un enlace ancla, mejorando navegación de páginas largas. Fuente: dev.to/joodi

  • Ruby Text Positioning: Control para anotaciones en idiomas como japonés/chino con ruby-align y ruby-position. Fuente: dev.to/joodi

  • Relative Color Syntax & light-dark(): Ajustar colores dinámicamente y soportar dark mode con funciones CSS como light-dark(). Fuente: dev.to/joodi

  • Native Accordions (<details name="…">): Sección expandible exclusiva sin JavaScript, útil en FAQs. Fuente: dev.to/joodi

  • content-visibility: Omite render de contenido fuera de pantalla para mejorar performance en páginas largas. Fuente: dev.to/joodi

  • font-size-adjust, transition-behavior, offset-path: Mejoran control en fallback de fuentes, transiciones y animaciones basadas en rutas sin JS. Fuente: dev.to/joodi

  • CSS Grid y Subgrid: Layouts avanzados y subgrillas heredadas de línea, mejor alineación en diseños complejos. Fuente: medium.com

  • Scope Selector, :has(), Container Units (cqw, cqh, cqi, cqb): Evitan conflictos de estilo, permiten estilos basados en estructura de contenido, y unidades responsivas basadas en contenedor. Fuente: medium.com

  • Nesting nativo: Sintaxis más limpia anidando selectores estilo SCSS directamente en CSS puro. Fuente: medium.com

  • Pseudo-clases modernas :is(), :where(), :not(), :has(), ::target-text, etc., facilitan selectores complejos sin hacks. Fuente: medium.com

  • Nuevas color spaces (HWB, LAB, LCH): Ampliación de paletas de color, aunque aún soporte parcial en algunos navegadores. Fuente: lambdatest.com

  • Viewport Units avanzadas (svw, lvw, dvw) para resolver bugs en móviles y ofrecer medidas más robustas. Fuente: lambdatest.com

  • Content Visibility y Gap: Optimización de performance y espaciados más intuitivos en grid/flex. Fuente: lambdatest.com

  • Object View Box, inset, variable fonts, text overflow, comparison functions: Nuevas propiedades y funciones CSS que permiten manipular vistas de medios, tipografías variables y cálculos en CSS. Fuente: lambdatest.com

  • Scope general: Las fuentes de Medium y Dev.to coinciden en que 2024/2025 es la era de soluciones CSS nativas en lugar de hacks (container queries, cascade layers, subgrid, nesting, :has), haciendo más limpio el código y mejorando experiencia de usuario y rendimiento. Fuentes:

  • Video de referencia: YouTube: jSCgZqoebsM

Ejemplos​

Selects personalizados​

Carruseles​

Mixins y funciones en CSS (al estilo Sass)​

Posicionamiento con anchor​

Transiciones de vista​

text-box-trim​

Funciones avanzadas de attr()​

transition-behavior: allow-discrete y starting-style​

Nuevo concepto de layout unificado​

popover​

scrollbar-width y scrollbar-gutter​

backdrop-filter​

Colores relativos​

Texto alternativo para contenido generado por CSS​

Funciones round(), mod() y rem()​

light-dark()​

text-wrap​

Formato de imagen AVIF​

overflow: clip​

overscroll-behavior​

text-align-last​

:focus-visible​

Cascade Layers (Capas de cascada)​

dialog y modal​

Three.js​

Integración con tecnologías web emergentes y tendencias futuras​

El artículo de MoldStud (“Integrate Three.js with Cutting-Edge Web Technologies”) identifica:

  • WebGPU: API de bajo nivel para acceso GPU, con mejoras de performance significativas frente a WebGL. Permite deferred shading, global illumination en tiempo real y algoritmos GPU-driven (sistemas de partículas, simulaciones físicas) con ganancias de 30–50% en tareas intensivas. Fuente: moldstud.com

  • Offscreen Canvas: Renderizado en hilos separados para liberar hilo principal, mejorando FPS en escenas complejas. Fuente: moldstud.com

  • WebAssembly: Desplazar cálculos pesados (colisiones, procesamiento de texturas, compilación de shaders) a WASM para mejorar FPS (hasta 20× en ciertas tareas) y reducir carga de CPU. Fuente: moldstud.com

  • Ray Tracing en tiempo real: Aprovechar WebGPU + glTF con PBR para implementar trazado de rayos realista, pero requiere hardware con aceleración (NVIDIA RTX, AMD RDNA2) y optimización de shaders. Fuente: moldstud.com

  • Rendering progresivo: Carga prioritaria de elementos visibles (lazy loading), uso de CDN y resource hints para mejorar tiempos de carga y retención de usuarios. Fuente: moldstud.com

  • WebXR: Creación de experiencias AR/VR con Three.js y APIs de WebXR, usando A-Frame o Babylon.js para prototipado rápido, componentes React 360, audio espacial con Web Audio API, y analytics en XR. Fuente: moldstud.com

  • WebGL2: Avanzar a WebGL2 para efectos visuales (MRT, depth textures, SSBOs) con mejoras en FPS hasta 75% en escenas complejas, control de compatibilidad con feature detection. Fuente: moldstud.com

  • Web Components: Encapsular interfaces 3D en custom elements para reuso y mantenimiento de proyectos Three.js. Fuente: moldstud.com

  • CSS y layout para entornos 3D: Uso de CSS Grid/Flexbox para interfaces 3D adaptativas; Intersection Observer para disparar renderizado solo cuando sea necesario; plantillas HTML para definir escenas reutilizables. Fuente: moldstud.com

  • Enfoque general: Mantenerse al día con estándares emergentes, optimizar performance y experiencias inmersivas, colaborando con expertos si fuera necesario. Fuente: moldstud.com

Tailwind​

Sombra de texto y máscaras​

Tailwind v4.1 incorpora utilidades para aplicar sombra al texto (text-shadow-*) y para enmascarar elementos (mask-*). Con text-shadow-2xs hasta text-shadow-lg puedes hacer que los títulos o botones resalten. Además, es posible cambiar el color de la sombra con clases como text-shadow-sky-300, o ajustar la opacidad con modificadores como /50. Las máscaras (mask-*) facilitan usar imágenes o degradados para “recortar” partes de un elemento sin escribir CSS manual complejo.

<!-- Sombra de texto -->
<h1 class="text-3xl font-bold text-shadow-md">
  Título destacado con sombra
</h1>
<p class="text-shadow-sm text-shadow-sky-300/70">
  Párrafo con sombra azul semitransparente
</p>

<!-- Máscara con degradado radial -->
<div class="bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 mask-radial p-4">
  <p class="text-white">Contenido enmascarado con forma radial</p>
</div>

Fuentes:

Transformaciones 3D y degradados avanzados​

En Tailwind v4.0+ se añadieron utilidades para transformaciones en 3D: rotar en los ejes X/Y/Z (rotate-x-*, rotate-y-*, rotate-z-*), desplazar en profundidad (translate-z-*), ajustar perspectiva (perspective-*), etc. También hay degradados con ángulos arbitrarios (bg-linear-45), degradados cónicos (bg-conic-*) y radiales (bg-radial-*), pudiendo incluso seleccionar espacios de color modernos (OKLCH, sRGB).

<div class="perspective-distant">
  <article class="rotate-x-12 rotate-y-6 transform-3d bg-gray-100 p-6">
    Carta con ligera rotación 3D
  </article>
</div>

<!-- Degradado lineal con ángulo libre -->
<div class="bg-linear-45 from-purple-500 to-pink-500 p-4 text-white">
  Degradado en diagonal de 45 grados
</div>

Fuente: tailwindcss.com

Consultas de contenedor (container queries) y responsividad por componente​

Ahora se puede adaptar el estilo basado en el tamaño del contenedor padre, no solo de la ventana. Basta con marcar un elemento con @container y luego usar variantes como @sm:, @md:, @max-md:, etc., para ajustar el diseño en función del ancho del contenedor. Esto permite componentes más modulares y reutilizables.

<div class="@container">
  <div class="grid grid-cols-1 @max-md:grid-cols-2 gap-4">
    <div class="p-4 bg-gray-100">Ítem adaptativo 1</div>
    <div class="p-4 bg-gray-200">Ítem adaptativo 2</div>
  </div>
</div>

<!-- Ejemplo de rango: aplica solo cuando ancho contenedor ≥ md y ≤ lg -->
<div class="@container">
  <div class="flex flex-col @md:@max-lg:flex-row">
    <div class="p-2 bg-blue-100">Columna/Fila según contenedor</div>
    <div class="p-2 bg-blue-200">Otro elemento</div>
  </div>
</div>

Fuentes:

Variantes contextuales y según dispositivo​

Se incorporan variantes que aplican estilos en contextos específicos sin JavaScript extra:

  • noscript: para mostrar/ocultar contenido si JS está deshabilitado.
  • inverted-colors: para estilos cuando el sistema del usuario usa esquema invertido.
  • pointer-fine: o pointer-coarse: para detectar tipo de puntero (ratón vs táctil).
  • user-valid: / user-invalid: para aplicar estilos de validación solo después de la interacción con formularios.
<!-- Mensaje si JavaScript está desactivado -->
<div class="hidden noscript:block bg-red-100 p-2">
  Por favor habilita JavaScript para continuar.
</div>

<!-- Estilo diferente si el usuario tiene colores invertidos -->
<div class="inverted-colors:bg-black bg-white p-4 text-gray-800 inverted-colors:text-white">
  Caja sensible al esquema de color invertido
</div>

<!-- Estilizar inputs tras interacción -->
<input type="email" class="border p-2 user-invalid:border-red-500 user-valid:border-green-500" placeholder="Correo electrónico">

Fuente: linkedin.com

Menos configuración en JavaScript: enfoque CSS-first​

A partir de Tailwind v4, ya no es imprescindible un tailwind.config.js para personalizar fuentes, colores o breakpoints: se pueden definir directamente en CSS con la directiva @theme. La detección de clases se hace automáticamente (escanea según heurísticas y .gitignore), por lo que rara vez se necesita especificar rutas de contenido.

/* styles.css */
@import "tailwindcss";

@theme {
  --font-body: 'Inter', sans-serif;
  --color-primary: hsl(210 100% 50%);
  --breakpoint-lg: 1200px;
}

Fuente: tailwindcss.com

Otras utilidades útiles​

  • Gradientes más flexibles: bg-conic-from-purple/50 to-yellow/70, degradados radiales o cónicos combinados con máscaras.
  • Sombra interna y anillos internos: inset-shadow-*, inset-ring-* para efectos sutiles dentro de cajas.
  • Color scheme y theme-aware utilities: controlar scrollbars, fondos y demás según modo claro/oscuro o preferencias del usuario.
  • Validación de formularios: además de user-valid, hay utilidades para estilos condicionales tras enfoque, desenfoque, etc.
  • Soporte para nuevas propiedades CSS: @property, color-mix(), field-sizing: content, text-wrap: balance, etc., siempre que el navegador lo soporte.
<!-- Ejemplo de degradado cónico y máscara combinados -->
<div class="bg-conic-from-pink-500 via-red-500 to-yellow-500 mask-radial p-6">
  Contenido con degradado cónico y máscara radial
</div>

Fuente: tailkits.com