Frontend Architecture
ArchitectureDecisiones de estructura que convierten una aplicación en un sistema: modularidad, límites claros, gestión del estado y evolución sin reescribir.
Frontend Architecture / Design Systems
Arquitectura frontend y sistemas de diseño que se mantienen.
Diseño y construyo la estructura sobre la que crecen las aplicaciones web: arquitecturas frontend, sistemas de diseño y experiencias escalables, accesibles y con criterio técnico en cada decisión.
01 / Sobre mí
La estructura antes que el código
Mi trabajo consiste en tomar decisiones de estructura: cómo se organiza una aplicación frontend, cómo se componen los sistemas de diseño y cómo se garantiza que el código que escribimos hoy pueda cambiarse mañana sin miedo.
Llevo años especializándome en arquitectura frontend, sistemas de diseño y desarrollo de aplicaciones web con TypeScript, Angular y React. Me interesan los problemas de fondo: escalabilidad, mantenibilidad, calidad de código y la forma en que los equipos colaboran sobre una misma base técnica.
Más allá del frontend, trabajo con Node.js, automatización e integración de IA en procesos de desarrollo. Para mí la tecnología no es un fin, sino una forma de resolver problemas reales de manera sostenible.
Arquitectura
Design Systems
Calidad
Automatización
02 / Especialidades
En qué puedo aportar
Cinco áreas donde la experiencia se nota en la calidad de las decisiones.
Design Systems
Design SystemsTokens, componentes, documentación y gobierno. La interfaz como sistema coherente, no como una colección de pantallas.
Microfrontends
MicrofrontendsArquitecturas basadas en microfrontends, Module Federation y Web Components: equipos independientes trabajando sobre una experiencia única.
Engineering
EngineeringTypeScript, Angular, React y testing al servicio de la calidad: código que se puede cambiar sin romperse.
Automation & AI
Automation / AIAutomatización de procesos e integración de IA en workflows de desarrollo: menos fricción, más valor.
03 / Tecnologías
Stack tecnológico
Las herramientas que uso con criterio, agrupadas por dominio. No por moda, sino por lo que resuelven.
Frontend
- Lit
- Angular
- React
- TypeScript
- Vite
- PWA
Architecture
- Microfrontends
- Module Federation
- Web Components
- Design Systems
Backend
- Node.js
- NestJS
- PostgreSQL
- Prisma
Infra & Automation
- Docker
- n8n
- Git
- CI/CD
AI
- LLMs
- AI workflows
- Prompt engineering
- AI automation
04 / Trabajo seleccionado
Casos de estudio
Cada proyecto se presenta como caso de estudio: problema, enfoque, arquitectura,
tecnología y resultado. Los proyectos se añaden desde js/content.js.
05 / Cómo trabajo
Principios que guían mi ingeniería
No son eslóganes: son criterios que aplico en cada decisión técnica.
Entender antes de construir
Think before buildingPensar antes de actuar cuando la decisión importa. La complejidad que no responde a un problema real es deuda.
Simplicidad con evidencia
Simplicity firstNo construyo para problemas hipotéticos. Resuelvo el problema de hoy dejando una base que permita evolucionar cuando haya evidencia real.
Evidencia antes que suposiciones
Evidence over assumptionsLas decisiones se toman con datos y con el código delante, no con intuición. Primero evidencia, después diagnóstico, después solución.
La causa, no el síntoma
Root cause over quick fixesUn parche rápido es deuda con nombre propio. Prefiero resolver la causa raíz aunque exija un poco más de trabajo.
El código se mantiene
Maintainability mattersLo que escribo hoy lo leeré yo mañana. La mantenibilidad no es un extra: es parte de la definición de «terminado».
Pensamiento crítico
Critical thinkingLa primera solución rara vez es la mejor. Cuestiono los planteamientos, incluidos los míos, antes de comprometerlos.
06 / Design System
El sistema que sostiene esta página
Un sistema de diseño no es una librería de componentes: es el contrato visual y técnico que mantiene un producto coherente a medida que crece. Esta sección se construye con los mismos tokens que usa la web.
design-tokens / v1
en uso en esta página
Color
bg / papel
ink / tinta
accent
line
ink-2
Tipografía
AaArchivo / display
AaInter / título
Aamono / etiquetas
Espaciado
0.5
1
2
4
8
12
Componentes
Conceptos que gobiernan el sistema
TokensLos valores primitivos: color, tipo, espacio.
ComponentsPiezas reutilizables y accesibles.
PatternsComposiciones que resuelven casos reales.
AccessibilityContraste, foco y semántica desde el inicio.
DocumentationPara que el sistema se pueda usar y mantener.
GovernanceQuién decide los cambios y cómo se aprueban.
07 / IA y automatización
La IA como herramienta de proceso
Para mí la IA no es un chatbot: es una herramienta de proceso. La integro donde elimina fricción real — automatización de tareas repetitivas, análisis de información, generación de contenido y creación de workflows — con criterio sobre dónde aporta valor y dónde no.
Input
IA
Proceso
Automatización
Output
01
Automatizar procesos
Eliminar tareas repetitivas con flujos reproducibles.
02
Analizar información
Extraer conclusiones de documentos y datos, no opiniones.
03
Integrar modelos
Incorporar IA dentro de aplicaciones y workflows reales.
04
Generar contenido
Crear material de calidad que después se revisa con criterio.
08 / Notas
Pensamientos y notas técnicas
Apuntes sobre frontend, arquitectura, sistemas de diseño, IA y automatización. Los artículos se añaden desde js/content.js.
09 / Principios
Criterios que se mantienen
Build less. Think more.
Menos código, más criterio. El código que no existe no hay que mantenerlo.
Evidence over assumptions.
Decidir con datos y con el código delante, no con intuición.
Simple until complexity is justified.
La complejidad se gana, no se asume. Se introduce cuando hay evidencia.
Fix the cause, not the symptom.
La causa raíz antes que el parche. El síntoma vuelve siempre.
Good architecture enables change.
La arquitectura se demuestra cuando algo cambia sin romperse.
10 / Contacto
¿Tienes un problema complejo de frontend?
Si necesitas criterio para una decisión de arquitectura, un sistema de diseño o un frontend que se mantenga en el tiempo, hablemos.