Mapa de tecnologías y arquitectura

Frontend

Rendimiento

Que el sitio sea rápido, y que se pueda demostrar.

Rendimiento web medido, no intuido: cuánto JavaScript llega al navegador, cuándo pinta el primer contenido y cuánto tarda el backend en responder. Es mucho más grande que «optimizar imágenes»: cruza frontend, base de datos, caché e infraestructura.

Qué cubre

• Tiempo de carga
• JavaScript enviado al navegador
• SSR / SSG / ISR / CSR
• Code splitting
• Lazy loading
• Optimización de imágenes
• Estrategias de caché
• CDN
• Compresión
• Core Web Vitals (LCP, INP, CLS)
• Consultas lentas
• Consumo de CPU y memoria
• Optimización del backend

Con qué lo trabajo

• Next.js SSR / ISR
• React Server Components
• next/image + sharp
• Code splitting
• Cloudflare CDN
• Redis
• Vercel Edge
• Lighthouse CI

Se superpone con

• Bases de datos
• Infraestructura y DevOps
• SEO técnico
• Observabilidad

Frontend

Estado y datos en cliente

Quién es dueño de cada dato y cuándo deja de ser válido.

En una aplicación grande, la mitad de los bugs son de estado: datos duplicados entre servidor y cliente, cachés que no se invalidan, listas que se desincronizan. Separar estado local, estado global y server state es una decisión de arquitectura, no de librería.

Qué cubre

• Estado local
• Estado global
• Server state
• Caché de datos
• Sincronización
• Actualizaciones optimistas
• Paginación
• Scroll infinito
• WebSockets
• Datos en tiempo real
• Invalidación de caché
• Formularios y validación en cliente

Con qué lo trabajo

• Redux Toolkit
• Zustand
• TanStack Query
• SWR
• React Context
• Server Actions
• WebSockets

Se superpone con

• Arquitectura de software
• APIs e integración
• Rendimiento

Frontend

Accesibilidad

Que el producto funcione sin mouse y sin ver la pantalla.

Tiene una parte de diseño, pero la mayor parte es desarrollo: HTML semántico, orden del foco, roles ARIA sólo donde el HTML no alcanza, y formularios que un lector de pantalla pueda recorrer. Además es lo mismo que necesita Google para entender la página.

Qué cubre

• HTML semántico
• ARIA
• Navegación por teclado
• Lectores de pantalla
• Contraste de color
• Gestión del foco
• Formularios accesibles
• Captchas accesibles
• Tecnologías asistivas
• Texto alternativo
• Jerarquía de encabezados y landmarks
• prefers-reduced-motion

Con qué lo trabajo

• HTML semántico
• ARIA
• shadcn/ui (Radix)
• Lighthouse a11y
• Focus management

Se superpone con

• SEO técnico
• Compatibilidad
• Calidad del código

Frontend

Compatibilidad

«Funciona en Chrome» no es una respuesta.

El mismo código corriendo en navegadores, sistemas operativos, resoluciones y velocidades de conexión distintas. Safari suele ser el que rompe, y las diferencias aparecen recién en producción si no hay una suite que corra en varios motores.

Qué cubre

• Chrome, Firefox, Safari, Edge
• Android e iOS
• Escritorio y móvil
• Distintas resoluciones
• Conexiones lentas
• Diseño responsive
• Polyfills
• Degradación elegante
• Diferencias entre motores de render
• Modo oscuro y preferencias del sistema

Con qué lo trabajo

• Playwright multi-navegador
• Tailwind CSS
• PostCSS / Autoprefixer
• React Native
• Diseño mobile-first

Se superpone con

• Accesibilidad
• Testing y QA
• Rendimiento

Backend y datos

Arquitectura de software

Cómo está construido el sistema, y qué cuesta cambiarlo.

Los límites entre módulos y servicios, quién puede llamar a quién y qué contrato los une. Monolito o microservicios es una decisión de costo, no de moda: lo que importa es que las responsabilidades estén separadas y que los contratos se verifiquen en tiempo de compilación.

Qué cubre

• Arquitectura frontend/backend
• Monolito vs microservicios
• Separación de responsabilidades
• Diseño de APIs
• Modularidad
• Patrones de diseño
• Inyección de dependencias
• Escalabilidad
• Estructura del proyecto
• Comunicación entre servicios
• Límites de dominio
• Contratos compartidos y versionados

Con qué lo trabajo

• NestJS
• Next.js App Router
• gRPC + protobuf
• Monorepo
• Contratos TypeScript
• Prisma ORM
• Laravel
• Docker Compose

Se superpone con

• APIs e integración
• Bases de datos
• Infraestructura y DevOps
• Calidad del código
• Estado y datos en cliente

Backend y datos

APIs e integración

Todo lo que pasa entre dos sistemas que no se conocen.

Diseñar la superficie por la que un sistema habla con otro: contratos, versionado, validación de entrada y qué pasa cuando el otro lado falla o repite el mismo webhook tres veces. La idempotencia deja de ser teórica cuando hay un cobro de por medio.

Qué cubre

• REST
• GraphQL
• gRPC
• WebSockets
• Webhooks
• OAuth 2.0
• Consumo de APIs externas
• Rate limits
• Versionado de API
• Documentación (OpenAPI)
• Validación de entrada
• Serialización
• Idempotencia
• Paginación y filtros
• Manejo y códigos de error

Con qué lo trabajo

• APIs REST
• GraphQL
• gRPC
• Webhooks
• OAuth 2.0 / JWT
• Stripe
• Mercado Pago
• OpenAI API
• Anthropic Claude API
• Zoho CRM API
• OpenAPI / Swagger
• Zod / class-validator

Se superpone con

• Arquitectura de software
• Ciberseguridad
• Confiabilidad
• Estado y datos en cliente

Backend y datos

Bases de datos

Que una búsqueda tarde 20 ms y no 2 segundos.

Es una disciplina propia: modelar el esquema, elegir los índices correctos, entender el plan de ejecución de una consulta y versionar cada migración. La diferencia entre un producto que escala y uno que se cae un martes a la tarde suele estar acá.

Qué cubre

• Diseño del esquema
• Relaciones y normalización
• Índices
• Consultas y planes de ejecución
• Transacciones
• Concurrencia y bloqueos
• Migraciones versionadas
• Integridad referencial
• Replicación
• Backups y restauración
• Optimización de consultas
• Cachés
• SQL vs NoSQL
• Búsqueda full-text

Con qué lo trabajo

• PostgreSQL
• MySQL
• MongoDB
• Supabase
• Prisma ORM
• Redis
• SQLite
• Migraciones SQL
• Full-text search

Se superpone con

• Arquitectura de software
• Rendimiento
• Confiabilidad
• Observabilidad

Infraestructura

Infraestructura y DevOps

Dónde y cómo vive la aplicación.

Contenedores, pipelines, dominios, certificados y CDN. El objetivo es que desplegar sea aburrido: el mismo artefacto en desarrollo y en producción, entornos separados y un pipeline que corra tests antes de dejar pasar nada.

Qué cubre

• Servidores
• Contenedores
• CI/CD
• Despliegues y rollback
• Reverse proxy
• CDN
• DNS
• Balanceo de carga
• Variables de entorno y secretos
• Logs
• Backups
• Escalado horizontal y vertical
• Cloud
• Gestión de dominios
• Certificados SSL/TLS
• Tareas programadas (crons)

Con qué lo trabajo

• Docker
• Docker Compose
• Kubernetes
• GitHub Actions
• Vercel
• Render
• Microsoft Azure
• AWS S3
• Cloudflare (WAF, CDN)
• Nginx
• Vercel Crons

Se superpone con

• Confiabilidad
• Ciberseguridad
• Observabilidad
• Rendimiento
• Arquitectura de software

Infraestructura

Confiabilidad

Distinto de rendimiento: ¿sigue funcionando bien?

Rendimiento pregunta qué tan rápido responde; confiabilidad pregunta si sigue respondiendo cuando algo falla. Reintentos con backoff, timeouts, fallbacks y procesamiento idempotente son lo que separa un incidente de una caída.

Qué cubre

• Manejo de errores
• Reintentos con backoff
• Timeouts
• Circuit breakers
• Fallbacks
• Redundancia
• Backups
• Recuperación ante desastres
• Degradación elegante
• Alta disponibilidad
• Idempotencia
• Colas y reprocesamiento

Con qué lo trabajo

• Webhooks idempotentes
• Reintentos con backoff
• Timeouts
• Health checks
• Backups automatizados
• Entornos dev / tst / prod

Se superpone con

• Infraestructura y DevOps
• APIs e integración
• Observabilidad
• Bases de datos

Capas transversales

Ciberseguridad

Proteger el sistema, los datos y las cuentas.

Validación de todo lo que entra, autenticación y autorización separadas, secretos fuera del repositorio y cabeceras que cierren lo que el navegador deja abierto por defecto. La superficie de ataque incluye las dependencias y la infraestructura, no sólo el código propio.

Qué cubre

• SQL Injection
• XSS
• CSRF
• SSRF
• CORS
• Autenticación
• Autorización y roles
• JWT y sesiones
• Hashing de contraseñas
• Rate limiting
• Protección de APIs
• Gestión de secretos
• Validación de entradas
• Seguridad de dependencias
• Cabeceras de seguridad y CSP
• HTTPS/TLS
• Seguridad de infraestructura

Con qué lo trabajo

• Auth0
• JWT en cookies HTTP-only
• Hashing bcrypt / Argon2
• Cloudflare WAF
• reCAPTCHA v3
• Content Security Policy
• Rate limiting
• HTTPS / TLS

Se superpone con

• APIs e integración
• Infraestructura y DevOps
• Dependencias y supply chain
• Confiabilidad

Capas transversales

Observabilidad

¿Qué está pasando dentro del sistema, ahora mismo?

La mayoría de los sitios chicos no la tienen, y por eso se enteran de los problemas por un mail de un usuario. Con observabilidad la frase deja de ser «va lento» y pasa a ser «el endpoint /laws/search tarda 1,8 s y falla el 4 % de las veces».

Qué cubre

• Logs estructurados
• Seguimiento de errores
• Métricas
• Monitoreo
• Trazas distribuidas
• Latencia por endpoint
• Volumen de requests
• Errores 5xx
• Uso de CPU y memoria
• Rendimiento de la base de datos
• Alertas
• Health checks
• Analítica de producto

Con qué lo trabajo

• Sentry
• Google Analytics 4
• Hotjar
• Vercel Analytics
• Logs estructurados
• Health checks
• Google Search Console

Se superpone con

• Infraestructura y DevOps
• Rendimiento
• Confiabilidad
• Bases de datos

Capas transversales

Testing y QA

Comprobar el recorrido completo, no sólo las funciones.

Tests unitarios sobre la lógica de dominio, de integración sobre las APIs y E2E sobre los recorridos que dan plata: login, checkout, formularios. Un E2E puede recorrer usuario → login → API → base de datos de forma automática en cada push.

Qué cubre

• Tests unitarios
• Tests de integración
• Tests end-to-end
• Tests de APIs
• Tests de componentes
• Tests de regresión
• Tests de carga
• Tests de estrés
• Tests de seguridad
• Cobertura
• Fixtures y mocks
• Tests en CI

Con qué lo trabajo

• Playwright
• Jest
• Vitest
• Cypress
• Testing Library
• PHPUnit
• pytest
• Storybook
• SonarQube

Se superpone con

• Calidad del código
• Compatibilidad
• Infraestructura y DevOps
• Confiabilidad

Capas transversales

SEO técnico

Que Google pueda rastrear, entender e indexar el sitio.

No es escribir contenido: es que la infraestructura del sitio deje que un rastreador lo recorra. Sitemaps, canonical, structured data, códigos de estado correctos, redirecciones 301 en cada migración de URLs y renderizado en servidor de lo que tiene que indexarse.

Qué cubre

• Sitemap XML
• robots.txt
• URL canónica
• Metadata y títulos
• Structured data / JSON-LD
• Estructura de URLs
• Redirecciones 301
• Códigos de estado HTTP
• SSR e indexación
• Crawling y presupuesto de rastreo
• Enlazado interno
• Open Graph y Twitter Cards
• Core Web Vitals
• hreflang e internacionalización

Con qué lo trabajo

• Sitemaps dinámicos
• JSON-LD (schema.org)
• Metadata API de Next.js
• Redirecciones 301
• Open Graph
• hreflang
• Lighthouse + Puppeteer
• Google Search Console

Se superpone con

• Rendimiento
• Accesibilidad
• Arquitectura de software
• Observabilidad

Capas transversales

Calidad del código

La parte que el usuario no ve y paga igual.

Tipos estrictos, convenciones consistentes, revisiones de código y refactors a tiempo. La deuda técnica no es un problema estético: es la razón por la que una funcionalidad que debería tomar dos días termina tomando dos semanas.

Qué cubre

• TypeScript estricto
• Linting
• Formateo automático
• Code review
• Refactoring
• SOLID
• DRY
• Complejidad ciclomática
• Convenciones de nombres
• Documentación técnica
• Deuda técnica
• Git hooks y commits convencionales

Con qué lo trabajo

• TypeScript strict
• ESLint
• Prettier
• Husky
• SonarQube
• Code review

Se superpone con

• Arquitectura de software
• Testing y QA
• Dependencias y supply chain
• Accesibilidad

Capas transversales

Dependencias y supply chain

Un npm install puede traer otras cincuenta librerías.

Cada paquete que se instala entra al build y a producción con los mismos permisos que el código propio. Lockfiles, auditorías, actualizaciones a tiempo y criterio para no adoptar librerías abandonadas son parte del trabajo, no un extra.

Qué cubre

• Paquetes npm
• Vulnerabilidades conocidas (CVE)
• Versionado semántico
• Lockfiles
• Dependencias transitivas
• Actualizaciones y breaking changes
• Licencias
• Supply chain de software
• Dependencias abandonadas
• Auditorías automáticas
• Tamaño del bundle

Con qué lo trabajo

• npm
• Lockfiles
• Dependabot
• npm audit
• Composer
• SemVer

Se superpone con

• Ciberseguridad
• Calidad del código
• Infraestructura y DevOps