Javascript on Commentary of Takao

React 19: Novedades que los desarrolladores deben conocer

Wed, 08 Jul 2026 10:00:00 +0900

Qué cambió en React 19

React 19 no es una actualización menor sino un cambio de paradigma. Server Components estables, nuevos hooks y el React Compiler cambian fundamentalmente cómo se escriben las aplicaciones.

Server Components estables

Los React Server Components (RSC) ahora están listos para producción. Al renderizar en el servidor y enviar HTML al cliente, reducen significativamente el tamaño del bundle. Los componentes que usan useState o useEffect deben declarar “use client”.

Reemplazando localStorage: localForage como wrapper de IndexedDB

Fri, 20 Feb 2026 00:00:00 +0900

Introducción

El almacenamiento del lado del cliente es fundamental. localStorage tiene límites dolorosos: ~5 MB, API síncrona, solo strings.

IndexedDB: Potente pero complejo

Ofrece almacenamiento virtualmente ilimitado, API asíncrona, datos estructurados y consultas indexadas. Pero es notoriamente verboso.

localForage: Lo mejor de ambos mundos

Wrapper ligero que envuelve IndexedDB (con WebSQL y localStorage como respaldo) tras una API simple basada en promesas, inspirada en localStorage.

await localforage.setItem('user', { name: 'Alice', role: 'admin' });
const user = await localforage.getItem('user');

Detección del mejor driver disponible: 1. IndexedDB, 2. WebSQL, 3. localStorage. Para la mayoría de necesidades de almacenamiento, localForage es la elección pragmática.

Potenciando tus expresiones regulares con el flag v

Wed, 15 Oct 2025 00:00:00 +0900

Introducción

ES2024 introduce el flag v, un superconjunto del flag u que permite notación de conjuntos, resta de clases, intersección y coincidencia de emojis Unicode.

Resta de clases (`--`)

const re = /[\p{Letter}--[aeiouAEIOU]]/v; // letras excepto vocales

Intersección (`&&`)

const re = /[\p{Letter}&&\p{Script=Greek}]/v; // solo letras griegas

Clases anidadas

El flag v permite anidar clases con corchetes, eliminando secuencias de escape confusas.

Coincidencia de emojis

Nuevas propiedades: \p{RGI_Emoji}, \p{Basic_Emoji}, \p{Emoji_Keycap_Sequence}, etc.

Migración desde flag u

El flag v es estrictamente un superconjunto pero tiene cambios disruptivos: \d dentro de clase no está permitido, -- y && son operadores.

Reglas para crear hooks personalizados en React

Sun, 10 Aug 2025 00:00:00 +0900

Los hooks personalizados son la forma principal de extraer lógica con estado en React. Deben seguir las mismas reglas que los hooks integrados.

Reglas fundamentales

Solo llama hooks en el nivel superior (no en condicionales, bucles o funciones anidadas).
Solo llama hooks desde componentes React o desde otros hooks.

Patrones de hooks personalizados

Un hook debe comenzar con use. Debe devolver un objeto o array con valores y funciones. La lógica de efecto debe limpiarse en el cleanup.

Interoperabilidad ESM y CJS en Node.js

Fri, 25 Jul 2025 00:00:00 +0900

Node.js soporta dos sistemas de módulos: CommonJS (require) y ES Modules (import). La interoperabilidad entre ambos tiene reglas específicas.

Detección del tipo de módulo

.mjs siempre ESM. .cjs siempre CJS. .js depende del package.json más cercano: "type": "module" para ESM, "type": "commonjs" o sin campo para CJS.

Importar CJS desde ESM

Los módulos CJS se importan con import desde ESM. Node.js envuelve module.exports como default export. Named exports requieren análisis estático limitado.

Optimizaciones con requestIdleCallback

Fri, 25 Jul 2025 00:00:00 +0900

requestIdleCallback programa tareas no urgentes para cuando el navegador está inactivo. Mejora la capacidad de respuesta de la página.

Cómo funciona

El navegador ejecuta callbacks en los tiempos muertos entre frames. requestIdleCallback(callback, { timeout: 2000 }). IdleDeadline.timeRemaining() indica el tiempo disponible.

Casos de uso

Análisis (analytics), logging, precarga de datos no críticos, cleanups, procesamiento diferido, renderizado de contenido secundario.

Alternativas

setTimeout con 0: menos eficiente. Scheduler.postTask (experimental) con prioridades. requestAnimationFrame para animaciones. Elige según la urgencia.

Novedades emocionantes en ECMAScript 2025 (ES16)

Thu, 15 May 2025 00:00:00 +0900

Introducción

Cada año, el comité TC39 actualiza las especificaciones ECMAScript. Para ECMAScript 2025 (ES16), varias propuestas han alcanzado Stage 3 o 4.

Promise.try

Unifica el manejo de errores síncronos y asíncronos. Si el callback lanza una excepción síncrona, Promise.try() la captura y retorna una Promise rechazada, permitiendo un solo .catch().

Iterator Helpers

Añade .map() y .filter() a todos los objetos iterables (Set, Map, etc.). Evaluación perezosa: los elementos se procesan solo cuando se solicitan.

Lanzamiento oficial de React 19 y guía de funcionalidades prácticas

Wed, 05 Mar 2025 00:00:00 +0900

Introducción

React 19 representa un cambio de paradigma importante. Funciones antes restringidas a meta-frameworks como Next.js ahora están integradas en el núcleo estable de React.

Actions API y useActionState

Simplifica la gestión de mutaciones asíncronas. useActionState enlaza manejadores asíncronos directamente a atributos de formulario nativos, manejando automáticamente indicadores de carga.

useOptimistic

Para acciones interactivas como “me gusta” o envío de chats. Actualiza la IU instantáneamente antes de que la solicitud al servidor se complete, con capacidad de rollback integrada.

Patrones a evitar con async/await en JavaScript

Sat, 15 Feb 2025 00:00:00 +0900

Introducción

async/await hizo la programación asíncrona más intuitiva, pero puede ocultar problemas de rendimiento y errores.

Antipatrón 1: Serialización innecesaria

No uses await secuencial para tareas independientes. Usa Promise.all para ejecución en paralelo.

Antipatrón 2: Bloques try-catch anidados

El anidamiento profundo derrota el propósito de async/await. Usa un solo bloque try-catch al más alto nivel.

Antipatrón 3: async callbacks en forEach

forEach con async callback ejecuta los callbacks síncronamente. Usa for...of para secuencial o Promise.all con map para paralelo.

File System Access API: Acceso a archivos en el navegador

Sat, 28 Dec 2024 00:00:00 +0900

La File System Access API permite a las aplicaciones web leer, escribir y gestionar archivos y directorios en el sistema local del usuario.

Lectura de archivos

window.showOpenFilePicker() devuelve un FileSystemFileHandle. Lee con getFile() y file.text() o file.stream(). Múltiples archivos con multiple: true.

Escritura de archivos

window.showSaveFilePicker() permite guardar archivos. handle.createWritable() devuelve un writable stream. Escritura segura con permisos del usuario.

Directorios

window.showDirectoryPicker() permite seleccionar directorios. Iteración con dir.entries(). Creación de archivos y subdirectorios.

Métodos de arrays JavaScript: De básicos a patrones avanzados

Thu, 12 Dec 2024 00:00:00 +0900

Los arrays de JavaScript son el pilar de la manipulación de datos en el desarrollo web moderno. Con ES2023 introduciendo alternativas inmutables a métodos mutantes, es momento de revisar cómo trabajamos con arrays.

Panorama de métodos de array

Los métodos se dividen en mutantes y no mutantes. ES2023 introdujo cuatro métodos inmutables: toSorted(), toReversed(), toSpliced(), with(). Estos crean nuevos arrays sin modificar el original, ideal para React o Redux.

Map, Filter y Reduce en profundidad

map transforma cada elemento, filter selecciona elementos, reduce es el más versátil. Una anti-patrón común es encadenar map seguido de filter cuando un solo flatMap sería suficiente.

Typed Arrays en JavaScript: Procesamiento de datos binarios en el navegador

Tue, 10 Sep 2024 00:00:00 +0900

El tipo Number nativo de JavaScript es ineficiente para datos binarios. Los Typed Arrays (ES2015) traen gestión de memoria tipo C al navegador.

ArrayBuffer

Buffer binario raw de longitud fija. No se puede leer/escribir directamente — debe usarse una vista.

Vistas TypedArray

Int8Array, Uint8Array, Float32Array, etc. Cada vista interpreta los bytes como un tipo numérico específico. subarray() crea una subvista sin copia.

DataView para estructuras complejas

Permite lectura/escritura en offsets arbitrarios con tipo y endianness explícitos. Ideal para formatos binarios como BMP, PNG, WAV.

Module Federation: Micro-frontends con Webpack 5

Tue, 09 Jul 2024 00:00:00 +0900

Module Federation permite cargar código JavaScript desde otra aplicación en tiempo de ejecución. Es la base de los micro-frontends modernos.

Cómo funciona

Una aplicación expone módulos via ModuleFederationPlugin. Otra aplicación los consume como si fueran locales. Los módulos compartidos se cargan una sola vez.

Configuración expósitor

new ModuleFederationPlugin({
 name: 'app1',
 exposes: { './Button': './src/Button' },
 shared: { react: { singleton: true } }
})

Configuración consumidor

remotes: { app1: 'app1@http://...' }. Importa import('app1/Button'). React y otras librerías compartidas como singletons.

API Proxy y Reflect de JavaScript: Patrones de metaprogramación

Tue, 04 Jun 2024 00:00:00 +0900

Proxy y Reflect permiten interceptar y personalizar operaciones fundamentales en objetos: acceso a propiedades, asignación, enumeración, invocación de funciones y llamadas a constructores.

Los 13 traps de Proxy

Desde get/set (lectura/escritura) hasta apply/construct (llamadas de función/constructor). Cada trap debe cumplir invariantes.

API Reflect

Los métodos de Reflect reflejan cada trap de Proxy. Usar Reflect dentro de traps asegura propagación correcta del argumento receiver.

Validación e integridad

El trap set puede imponer restricciones de esquema. Proxy de solo lectura bloquea todos los traps de mutación.

WebSockets: Comunicación en tiempo real

Tue, 14 May 2024 00:00:00 +0900

WebSocket proporciona un canal de comunicación bidireccional full-duplex sobre una sola conexión TCP. Ideal para aplicaciones en tiempo real.

Diferencias con HTTP

HTTP es request-response. WebSocket es persistente y bidireccional. Menos overhead (sin headers en cada mensaje). Latencia reducida.

API JavaScript

const ws = new WebSocket('wss://server.com');
ws.onmessage = (event) => console.log(event.data);
ws.send(JSON.stringify({ type: 'chat', text: 'Hola' }));

Casos de uso

Chat, notificaciones en vivo, colaboración en tiempo real (Google Docs), juegos multijugador, datos financieros, paneles de monitoreo.

Consideraciones

Reconexión automática. Heartbeats/pings para mantener conexión. Escalado: sticky sessions o pub/sub (Redis). Seguridad: WSS (WebSocket Secure).

Worker Threads en Node.js: Paralelismo real

Tue, 23 Apr 2024 00:00:00 +0900

Worker Threads permite ejecutar JavaScript en múltiples hilos, descargando tareas CPU-intensive del event loop principal.

Cuándo usar workers

Cálculos matemáticos pesados, procesamiento de imágenes, parsing de archivos grandes, compresión, cifrado. No para operaciones I/O (ya son asíncronas).

API básica

const { Worker } = require('worker_threads');
const worker = new Worker('./worker.js', { workerData: data });
worker.on('message', result => {});

Comunicación

postMessage: copia estructurada (serializable). SharedArrayBuffer: memoria compartida. parentPort.postMessage desde el worker. Atomics para sincronización.

Pool de workers

Crear workers por tarea tiene overhead. Usa workerpool o piscina para pooling. Mantén un número fijo de workers (CPU cores - 1).

Novedades de ES2024 en JavaScript

Tue, 12 Mar 2024 00:00:00 +0900

ES2024 (ES15) introduce nuevas funcionalidades al lenguaje, centradas en async, arrays y gestión de datos.

Promise.withResolvers()

Crea una promesa con sus funciones resolve y reject expuestas externamente. Útil para promisificar APIs callback sin anidar constructores.

Array Grouping

Object.groupBy() y Map.groupBy() agrupan elementos de un array según una función callback. Reemplaza implementaciones manuales con reduce.

Well-formed Unicode Strings

String.prototype.isWellFormed() y toWellFormed() para manejar cadenas Unicode mal formadas. Previene errores en APIs que requieren Unicode válido.

ESLint Flat Config: La nueva configuración

Mon, 26 Feb 2024 00:00:00 +0900

ESLint Flat Config (v9+) reemplaza el formato jerárquico .eslintrc con un sistema de configuración plano basado en arrays de objetos.

Diferencias clave

Un solo archivo eslint.config.js. Sin herencia de configuraciones anidadas. Las reglas se evalúan en orden. Adiós a .eslintrc, extends, overrides.

Sintaxis

export default [
 { rules: { 'no-unused-vars': 'error' } },
 { files: ['**/*.ts'], rules: { '@typescript-eslint/no-explicit-any': 'error' } }
];

Migración

Usa eslint --flag unstable_flat_config para probar. @eslint/migrate-config convierte .eslintrc. Las configuraciones populares (typescript-eslint, eslint-plugin-react) ya soportan flat config.

Profundizando en el Event Loop de JavaScript: Microtasks, Macrotasks y más

Mon, 19 Feb 2024 00:00:00 +0900

El event loop de JavaScript es uno de los conceptos más importantes y menos entendidos. A pesar de ser single-threaded, su event loop permite concurrencia no bloqueante mediante un sistema de colas.

Call Stack

Estructura LIFO. Principio de run-to-completion: cada función se ejecuta hasta completarse antes de que otro código la interrumpa.

Cola de Macrotasks

Origen: setTimeout, setInterval, I/O, eventos UI. El event loop toma UNA macrotask por iteración, la ejecuta, luego procesa la cola de microtasks.

Desarrollo de plugins para Vite

Mon, 05 Feb 2024 00:00:00 +0900

Los plugins de Vite transforman código en tiempo de build y desarrollo. Siguen la interfaz de Rollup con hooks específicos de Vite.

Hooks básicos

resolveId, load, transform son los hooks universales. handleHotUpdate para HMR personalizado. config para modificar la configuración de Vite.

Ejemplo de plugin

export function myPlugin() {
 return {
 name: 'my-plugin',
 transform(code, id) {
 if (id.endsWith('.special')) {
 return transformSpecial(code);
 }
 }
 };
}

Hooks de Vite

configResolved, configureServer, transformIndexHtml, closeBundle. Cada hook se ejecuta en una fase específica del pipeline.

Streams en Node.js: Procesamiento eficiente de datos

Wed, 20 Dec 2023 00:00:00 +0900

Los streams de Node.js permiten procesar datos en fragmentos (chunks) sin cargar todo en memoria. Esencial para archivos grandes y redes.

Tipos de streams

Readable: fuente de datos. Writable: destino de datos. Transform: transforma datos (compress, encrypt). Duplex: ambos (net socket).

Pipe y pipeline

readable.pipe(writable) encadena streams. pipeline (recomendada) maneja errores y limpia correctamente: pipeline(readable, transform, writable, callback).

Backpressure

Cuando el writable es más lento que el readable, se aplica backpressure. highWaterMark controla el buffer interno. El stream pause automáticamente.

Patrones avanzados de Promises en JavaScript: Dominio del flujo asíncrono

Tue, 05 Dec 2023 00:00:00 +0900

Las Promises son fundamentales en JavaScript moderno. Más allá de cadenas básicas .then(), existen patrones avanzados para control de concurrencia, manejo de errores y cancelación.

Combinadores de Promises

Promise.all resuelve cuando todas resuelven. Promise.allSettled cuando todas se settling (nunca rechaza). Promise.race con la primera que se settling. Promise.any con la primera que resuelve.

Control de concurrencia

Un limitador de concurrencia encola tareas y asegura que solo un número específico se ejecute simultáneamente. El patrón pMap con Promise.race soporta contrapresión.

Javascript on Commentary of Takao

React 19: Novedades que los desarrolladores deben conocer

Qué cambió en React 19

Server Components estables

Reemplazando localStorage: localForage como wrapper de IndexedDB

Introducción

IndexedDB: Potente pero complejo

localForage: Lo mejor de ambos mundos

Potenciando tus expresiones regulares con el flag v

Introducción

Resta de clases (--)

Intersección (&&)

Clases anidadas

Coincidencia de emojis

Migración desde flag u

Reglas para crear hooks personalizados en React

Reglas fundamentales

Patrones de hooks personalizados

Interoperabilidad ESM y CJS en Node.js

Detección del tipo de módulo

Importar CJS desde ESM

Optimizaciones con requestIdleCallback

Cómo funciona

Casos de uso

Alternativas

Novedades emocionantes en ECMAScript 2025 (ES16)

Introducción

Promise.try

Iterator Helpers

Lanzamiento oficial de React 19 y guía de funcionalidades prácticas

Introducción

Actions API y useActionState

useOptimistic

Patrones a evitar con async/await en JavaScript

Introducción

Antipatrón 1: Serialización innecesaria

Antipatrón 2: Bloques try-catch anidados

Antipatrón 3: async callbacks en forEach

File System Access API: Acceso a archivos en el navegador

Lectura de archivos

Escritura de archivos

Directorios

Métodos de arrays JavaScript: De básicos a patrones avanzados

Panorama de métodos de array

Map, Filter y Reduce en profundidad

Typed Arrays en JavaScript: Procesamiento de datos binarios en el navegador

ArrayBuffer

Vistas TypedArray

DataView para estructuras complejas

Module Federation: Micro-frontends con Webpack 5

Cómo funciona

Configuración expósitor

Configuración consumidor

API Proxy y Reflect de JavaScript: Patrones de metaprogramación

Los 13 traps de Proxy

API Reflect

Validación e integridad

WebSockets: Comunicación en tiempo real

Diferencias con HTTP

API JavaScript

Casos de uso

Consideraciones

Worker Threads en Node.js: Paralelismo real

Cuándo usar workers

API básica

Comunicación

Pool de workers

Novedades de ES2024 en JavaScript

Promise.withResolvers()

Array Grouping

Well-formed Unicode Strings

ESLint Flat Config: La nueva configuración

Diferencias clave

Sintaxis

Migración

Profundizando en el Event Loop de JavaScript: Microtasks, Macrotasks y más

Call Stack

Cola de Macrotasks

Desarrollo de plugins para Vite

Hooks básicos

Resta de clases (`--`)

Intersección (`&&`)