Saltar al contenido
< samuelsantana.dev />

Ingeniería de Software,
Arquitectura & Código.

samuelsantana.dev es un blog personal sobre ingeniería de software, arquitectura y código — notas de alguien que construye productos reales día a día.

AngularPerformanceTypeScript
Leer Rendimiento con RxJS, medido: el cuello de botella casi nunca es el operador

Rendimiento con RxJS, medido: el cuello de botella casi nunca es el operador

Una pregunta que aparece bajo "RxJS performance" es si RxJS es lento. Lo medí. En mi máquina, cada operador de una cadena cuesta entre 8 y 12 nanosegundos por valor. No es gratis,…

14 min
Diagrama de marbles del typeahead: siete teclas de 'a' a 'angular', seis peticiones canceladas por switchMap y solo la respuesta 'angular@520ms' llegando a la pantalla.
Las cinco etapas del login OAuth en una línea de diagnóstico, cada una con su error típico; el flujo se detiene en la etapa 3, OAUTH_STATE_MISMATCH, marcada con un sello rojo "AQUÍ".
Leer Error al inicializar OAuth: cómo descubrir en qué etapa se rompió el login
15 min

Error al inicializar OAuth: cómo descubrir en qué etapa se rompió el login

"Error al inicializar OAuth", "No se pudo iniciar sesión", "Login failed". El mensaje que le llega al usuario casi nunca dice dónde se detuvo el flujo, y un login OAuth tiene al me…

OAuthSecurity+1
Dos relojes: 21:00 en el navegador en Brasilia y 00:00 en el servidor en UTC, con el diff de fechas del error React #418 entre ellos.
Leer React #418 solo después de las 21 h: en el servidor ya era mañana
10 min

React #418 solo después de las 21 h: en el servidor ya era mañana

De día, nada. A partir de las 21 h, cada carga del panel y de la página de demostración de BolsoVerde, la app de control de ventas que construyo para pequeños vendedores en Brasil…

ReactNext.js+1
Árbol src/app de Angular 22 con cada feature conectada a su chunk lazy de ng build (product-list 796 bytes, cart 498 bytes) y el import de checkout a catalog bloqueado por el lint de fronteras.
Leer Estructura de carpetas en Angular 22: features lazy y fronteras que el lint garantiza
13 min

Estructura de carpetas en Angular 22: features lazy y fronteras que el lint garantiza

En julio escribí un panorama de arquitectura de carpetas para React, Angular y Node.js. La parte de Angular envejeció mal. Recomendaba checkout.component.ts y auth.guard.ts, carpet…

AngularSoftware Architecture+1
Diagrama: dos intentos de charge_customer cobran la misma factura dos veces; con deduplicación por clave de idempotencia, el segundo intento se descarta y la factura se cobra una vez.
Leer Idempotencia en Tool Calls: el Bug Que Nadie Ve Hasta Que el Agente de IA Duplica un Cobro
7 min

Idempotencia en Tool Calls: el Bug Que Nadie Ve Hasta Que el Agente de IA Duplica un Cobro

Un agente de IA llama a la herramienta charge_customer. La llamada HTTP tarda más de lo esperado, salta el timeout, y el propio modelo (no un script, el modelo) decide intentarlo d…

IANodeJS
Lista Memory files de /context: dos archivos CLAUDE.md cargados dentro de la ventana de contexto y AGENTS.md tachado, afuera, no cargado.
Leer Ingeniería de contexto en la práctica: lo que el agente no carga no existe
15 min

Ingeniería de contexto en la práctica: lo que el agente no carga no existe

El 19 de agosto descubrí que las reglas que había escrito para todos mis repositorios nunca habían valido en ninguna sesión. Estaban en un AGENTS.md en la carpeta que reúne mis pro…

IASoftware Architecture
Diagrama: instancias Lambda con max 5 conexiones convergen en el pooler, que abre pocas conexiones reales con Postgres.
Leer Connection Pooling en Postgres Serverless: Por Qué Tu API se Cae en Producción
7 min

Connection Pooling en Postgres Serverless: Por Qué Tu API se Cae en Producción

Funciona perfectamente en tu localhost. Pasa el CI. Funciona en staging con dos usuarios de prueba. Después subes a producción, el tráfico crece un poco y la API empieza a devolver…

PostgreSQLNodeJS+1
Diagrama: withLoading → catchToState → bindTo; comprobando .set antes del typeof, setLoading(value) de React y loading.set(value) de Angular escriben el valor
Leer RxJS Ya Sabe Hacer loading/error/data: los Operators Detrás de rx-state-bridge
5 min

RxJS Ya Sabe Hacer loading/error/data: los Operators Detrás de rx-state-bridge

Toda pantalla que busca datos tiene el mismo esqueleto: un loading que pasa a true antes del request y a false después, un error que captura lo que salió mal, un data que recibe el…

TypeScriptAngular+2
Diagrama: typeof === 'function' es true para el setLoading de React y para el signal() de Angular; en el signal, la llamada lee el valor en vez de escribirlo
Leer signal() También Es una Función: el Bug Que Dejaba Mudo Todo Operator de rx-state-bridge con Angular
6 min

signal() También Es una Función: el Bug Que Dejaba Mudo Todo Operator de rx-state-bridge con Angular

rx-state-bridge es una librería que escribí para resolver un problema tedioso y repetitivo: cada fetch en una UI termina con el mismo trío de loading/error/data reescrito a mano, s…

AngularReact+2
Portada: una URL de callback con ?token= que se ramifica en logs de acceso, historial, header Referer y SDK de analytics; al lado, el flujo seguro: ?code=, POST /auth/exchange y cookie httpOnly.
Leer El Error Silencioso del OAuth: Por Qué el Token Nunca Debería Pasar por la URL
5 min

El Error Silencioso del OAuth: Por Qué el Token Nunca Debería Pasar por la URL

El login OAuth funciona. El popup se abre, el usuario aprueba en Google, el popup se cierra, y tu aplicación recibe ?token=eyJhbGciOi... en la URL de callback. Lees el token de la…

OAuthSecurity+1
Diagrama: un árbol src/ organizado por tipo de archivo (components/, services/, types/, hooks/, utils/) se refactoriza en carpetas por feature: checkout/, billing/ y catalog/.
Leer Arquitectura de Carpetas a Escala: Cómo organizar proyectos React, Angular y Node.js con SOLID y Clean Architecture
8 min

Arquitectura de Carpetas a Escala: Cómo organizar proyectos React, Angular y Node.js con SOLID y Clean Architecture

Actualización: ¿buscas solo Angular? La estructura de carpetas en Angular 22 se probó con el CLI actual, con los nombres de archivo de hoy (sin .component.ts), rutas lazy por featu…

AngularReact+1
Ilustración de un robot de IA operando un panel de Angular en el navegador: activa el tema oscuro, ajusta el filtro de precio máximo y dispara un aviso para el lector de pantalla.
Leer El Frontend Guiado por IA: WebMCP, Tools y Accesibilidad en Angular
6 min

El Frontend Guiado por IA: WebMCP, Tools y Accesibilidad en Angular

Durante años, el papel del frontend estuvo muy claro: consumir datos de una API (REST o GraphQL), gestionar el estado local y renderizar HTML. Construíamos aplicaciones "tontas" qu…

AngularIA
JWT, con candado y token, frente a Server-Side Sessions, con base Redis y llave; logos de Next.js y NestJS en ambos lados.
Leer Autenticación y Seguridad: JWT vs. Server-Side Sessions en el ecosistema Next.js + NestJS
6 min

Autenticación y Seguridad: JWT vs. Server-Side Sessions en el ecosistema Next.js + NestJS

Si hay un tema en la ingeniería de software capaz de generar más discusiones que la elección entre espacios y tabs, es la autenticación. Durante años, la comunidad frontend adoptó…

NestJSNext.js+1
El logotipo de RxJS enredado en cables, a la izquierda, frente al escudo de Angular que emite haces rotulados Signals y computed, a la derecha
Leer RxJS vs. Signals: El impacto en el rendimiento y la arquitectura de aplicaciones Angular
6 min

RxJS vs. Signals: El impacto en el rendimiento y la arquitectura de aplicaciones Angular

Cualquiera que lleve construyendo aplicaciones Angular por más de un par de años probablemente haya desarrollado una especie de Síndrome de Estocolmo con RxJS. Lo amamos por su rob…

Angular
Ilustración isométrica: el distrito legado GA2 en ruinas, con una alerta de race condition, conectado mediante un "Tenant Context Gatekeeper" al distrito moderno GA3, que un brazo robótico "Migration Orchestrator" va ensamblando.
Leer Estrategias Reales para la Migración de Frontends Complejos
7 min

Estrategias Reales para la Migración de Frontends Complejos

El Fin del "Big Bang" Todo dev senior ha estado en esta reunión. El legado ha acumulado una deuda técnica impagable, el tiempo de build toma minutos dolorosos, cada nueva feature r…

Software ArchitectureMicro-frontends
Ilustración: tokens que entran en una ventana de contexto, engranajes de habilidades (tool use, análisis de datos, razonamiento, generación de código) y, arriba, un agente autónomo.
Leer Arquitectura de LLMs: Tokens, Contexto, Skills y Agentes
5 min

Arquitectura de LLMs: Tokens, Contexto, Skills y Agentes

La integración de IA generativa ha dejado de ser solo sobre interfaces de chat y se ha convertido en un desafío directo de arquitectura de software. Entender el funcionamiento del…

IA
Portada: a la izquierda, vertex-web y vertex-api con la cookie atrapada en el dominio de la API; a la derecha, la API devuelve un code, vertex-web llama a POST /auth/exchange y se queda con la cookie.
Leer Por qué mi login OAuth funcionaba en dev y fallaba en producción
6 min

Por qué mi login OAuth funcionaba en dev y fallaba en producción

Durante semanas el inicio de sesión con Google y GitHub de samuelsantana.dev funcionó perfectamente — en mi entorno local. En producción, el popup se abría, el usuario autorizaba,…

Next.jsNestJS+4
Diagrama: Zone.js verifica cinco componentes (header, cart, sidebar, footer, modal); con signal(), solo se actualiza cart
Leer El Renacimiento de Angular: Signals y el Nuevo Enfoque HTTP
4 min

El Renacimiento de Angular: Signals y el Nuevo Enfoque HTTP

Si sigues de cerca el ecosistema de Angular, sabes que el framework está viviendo su mayor renacimiento desde la reescritura de AngularJS a Angular 2. Con la llegada de las version…

AngularPerformance
Diagrama: un bundle monolítico (app.bundle.js) con checkout, cart, billing, profile y admin se federa en un shell con tres micro-frontends —checkout, billing y profile—, cada uno con su propio despliegue.
Leer ¿El Frontend Se Convirtió en el Nuevo Monolito? Cómo la Arquitectura Impacta la Escala del Negocio
3 min

¿El Frontend Se Convirtió en el Nuevo Monolito? Cómo la Arquitectura Impacta la Escala del Negocio

Durante mucho tiempo, el término "monolito legado" fue una pesadilla exclusiva de los equipos de backend. Pero con el aumento de la complejidad de las aplicaciones web modernas, la…

Software ArchitectureMicro-frontends