Front-end con
Angular y React

(01) — El stack

Con qué construyo, y cuándo elijo cada cosa

Angular

Para aplicaciones con estado de verdad, formularios largos y equipos que necesitan una estructura impuesta por el framework. TypeScript, componentes independientes, servicios y rutas con carga diferida. Es el stack de la reconstrucción de SKÅL Madrid.

React

Para interfaces que se componen de piezas y cambian rápido. React 18, React Router y Vite. Es el stack con el que rehíce la web del Proyecto Djehuty: 1.269 páginas y 38 rutas en 224 KB de JavaScript.

Next.js

React con renderizado en servidor y rutas por archivos, cuando el producto necesita SEO y una carga inicial ligera. Es el stack de la reconstrucción de Retina · GAME TV.

TypeScript

Por defecto en los dos. Un tipo mal puesto se ve al escribirlo; un dato mal puesto se ve en producción.

HTML5 semántico

La base de todo lo demás. Landmarks, encabezados en orden, formularios etiquetados. Es la mitad de la accesibilidad y la mitad del SEO, gratis.

CSS moderno

Grid, container queries, propiedades personalizadas, color-mix, clamp(). Tipografía fluida y temas claro y oscuro desde el mismo juego de tokens.

Tailwind CSS

Utilidades sobre un tema propio: los tokens semánticos del sistema de diseño viven en la configuración, no repartidos por las plantillas. Así está estilada la reconstrucción de Retina.

JavaScript sin librerías

Cuando el proyecto no necesita un framework, no se lo pongo. Este mismo portfolio va sin uno.

Vite · Git

Compilación, control de versiones y despliegue estático. Sitios que se sirven desde un CDN y no se caen un domingo.

GitHub · Vercel

Repositorio con su historial y despliegue continuo: cada cambio publicado se puede ver en vivo, y el código se puede leer, no solo creer.

(02) — Qué incluye

Lo que entra en un encargo de front-end

• Implementación desde el diseño De Figma al navegador, con los estados que la maqueta no enseña: carga, vacío, error, sin conexión, texto larguísimo.
• Librerías de componentes en código El sistema de diseño, construido y documentado. Tokens que salen de un solo sitio y componentes que no se duplican en el tercer sprint.
• Accesibilidad WCAG 2.2 AA Rutas de teclado completas, foco visible, contraste medido y lectores de pantalla probados de verdad, no dados por buenos.
• Rendimiento y Core Web Vitals Peso del JavaScript, imágenes servidas en el formato y tamaño que tocan, fuentes que no bloquean el pintado, LCP y CLS vigilados.
• Animación e interacción Movimiento que explica algo, respetuoso con prefers-reduced-motion, y que no cuesta treinta fotogramas.
• Correos y newsletters responsive El HTML que todavía hay que escribir con tablas para que Outlook no lo rompa. Poco glamuroso, muy necesario.
• Migraciones y rescates Código heredado que hay que mover sin perder ni las URL ni el contenido. Lo he hecho con 1.356 ficheros de PHP.
• SEO técnico Marcado semántico, datos estructurados, hreflang, sitemap y metadatos. Esta misma web es el ejemplo.

(03) — La prueba

(04) — La diferencia

Quien diseña y quien construye son la misma

(FAQ) — Preguntas frecuentes

Lo que me preguntan antes de contratarme

• 01

  ¿Trabajas con Angular, con React, o con los dos?

  Con los dos, en producción. Angular cuando la aplicación tiene estado complejo, formularios largos y un equipo que agradece la estructura que impone el framework; React cuando la interfaz se compone de piezas y cambia deprisa. Si tu equipo ya ha elegido, trabajo con lo que haya elegido: la discusión de framework rara vez es la que decide si el producto sale bien.

• 02

  ¿Puedes entrar en un proyecto de Angular o React que ya está empezado?

  Sí, y suele ser así. Lo primero que hago es leer: la estructura de carpetas, cómo se gestiona el estado, dónde están los componentes duplicados y qué convenciones hay escritas y cuáles solo están en la cabeza de alguien. Trabajo dentro de las convenciones que encuentre; si alguna hay que cambiarla, lo propongo con el porqué y el coste, no lo cambio por gusto.

• 03

  ¿Haces también accesibilidad y rendimiento, o eso va aparte?

  Van dentro. La accesibilidad es un requisito de la entrega, no una fase que se recorta cuando aprieta el calendario: rutas de teclado, foco visible, contraste medido y lectores de pantalla probados. El rendimiento igual: peso del JavaScript, imágenes en el formato correcto y fuentes que no bloquean el pintado. También hago auditorías WCAG 2.2 AA por separado, con la lista de arreglos ordenada por esfuerzo y no por número de apartado.

• 04

  ¿Puedes construir lo que ha diseñado otra persona?

  Sí. Pido acceso al fichero de diseño y a quien lo hizo, porque siempre hay cuatro estados que la maqueta no enseña y es más rápido preguntarlos que inventarlos. Si el diseño tiene problemas que se van a notar en el navegador, los digo antes de construirlos, no después.

• 05

  ¿Qué entregas al terminar?

  El repositorio con su historial, el proyecto compilando y desplegado, la librería de componentes documentada y un documento corto con las decisiones que tomé y las que dejé abiertas. La prueba de que la entrega es completa es sencilla: tu equipo debería poder añadir una pantalla nueva sin escribirme.