8 min lectura • Guide 758 of 877
Gestión de Proyectos de Desarrollo Frontend
El desarrollo frontend involucra complejidad de UI, iteración rápida y colaboración cercana con diseño. GitScrum ayuda a equipos a organizar trabajo frontend y entregar experiencias de usuario pulidas.
Estructura de Tareas Frontend
Trabajo de Componentes vs Features
TIPOS DE TRABAJO FRONTEND:
┌─────────────────────────────────────────────────────────────┐
│ │
│ TRABAJO DE COMPONENTES: │
│ Construir piezas UI reutilizables │
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ UI-100: Crear Componente Button ││
│ │ ││
│ │ Variantes: ││
│ │ ☐ Primary, Secondary, Ghost ││
│ │ ☐ Tamaños Small, Medium, Large ││
│ │ ☐ Estado loading ││
│ │ ☐ Estado disabled ││
│ │ ☐ Soporte de íconos (izquierda, derecha) ││
│ │ ││
│ │ Requerimientos: ││
│ │ ☐ Accesible (teclado, screen reader) ││
│ │ ☐ Stories de Storybook ││
│ │ ☐ Unit tests ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ TRABAJO DE FEATURES: │
│ Implementar funcionalidad de cara al usuario │
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ FE-200: Página de Configuración de Perfil de Usuario ││
│ │ ││
│ │ Usa componentes: ││
│ │ Button, Input, Avatar, Card ││
│ │ ││
│ │ Implementación: ││
│ │ ☐ Layout de formulario de perfil ││
│ │ ☐ Upload de avatar con preview ││
│ │ ☐ Validación de formulario ││
│ │ ☐ Integración con API ││
│ │ ☐ Estados de success/error ││
│ │ ☐ Layout responsive ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ DEPENDENCIAS: │
│ Componentes deben construirse ANTES de features que los │
│ necesiten │
│ │
│ Sprint 1: UI-100 (Button), UI-101 (Input), UI-102 (Card) │
│ Sprint 2: FE-200 (Página Settings usando esos componentes)│
└─────────────────────────────────────────────────────────────┘
Integración de Diseño
HANDOFF DE DISEÑO EN TAREAS:
┌─────────────────────────────────────────────────────────────┐
│ │
│ TAREA CON SPECS DE DISEÑO: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ FE-300: Header del Dashboard ││
│ │ ││
│ │ DISEÑO: ││
│ │ Figma: [link a diseño] ││
│ │ Prototipo: [link a prototipo interactivo] ││
│ │ ││
│ │ BREAKPOINTS: ││
│ │ Desktop: 1200px+ (navegación completa) ││
│ │ Tablet: 768-1199px (nav colapsada) ││
│ │ Mobile: < 768px (menú hamburguesa) ││
│ │ ││
│ │ ESTADOS: ││
│ │ ☐ Default ││
│ │ ☐ Menú de usuario abierto ││
│ │ ☐ Búsqueda expandida ││
│ │ ☐ Badge de notificación (tiene notificaciones) ││
│ │ ☐ Scrolled (sticky con sombra) ││
│ │ ││
│ │ ANIMACIONES: ││
│ │ Menu open: 200ms ease-out ││
│ │ Search expand: 150ms ease-in-out ││
│ │ ││
│ │ ACCESIBILIDAD: ││
│ │ ☐ Skip to main content link ││
│ │ ☐ Navegación por teclado ││
│ │ ☐ ARIA landmarks ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ BUEN HANDOFF INCLUYE: │
│ ✅ Todos los estados visuales │
│ ✅ Comportamiento responsive │
│ ✅ Detalles de interacción │
│ ✅ Tokens de spacing y sizing │
│ ✅ Timing de animación │
│ ✅ Estados de error │
│ ✅ Estados vacíos │
│ ✅ Estados de loading │
└─────────────────────────────────────────────────────────────┘
Factores de Estimación
Complejidad Frontend
FACTORES DE ESTIMACIÓN FRONTEND:
┌─────────────────────────────────────────────────────────────┐
│ │
│ IMPLEMENTACIÓN BASE: │
│ Layout y estructura básica │
│ │
│ MULTIPLICADORES: │
│ │
│ RESPONSIVE: │
│ Solo desktop: 1x │
│ Desktop + Mobile: 1.5x │
│ Desktop + Tablet + Mobile: 2x │
│ │
│ SOPORTE DE NAVEGADORES: │
│ Solo modernos: 1x │
│ + Quirks de Safari: 1.2x │
│ + Navegadores legacy: 1.5x │
│ │
│ INTERACCIONES: │
│ Estático: 1x │
│ Hover/click básico: 1.2x │
│ Animaciones complejas: 1.5-2x │
│ Drag and drop: 2x │
│ │
│ GESTIÓN DE ESTADO: │
│ Estado local simple: 1x │
│ Formularios complejos: 1.5x │
│ Updates en tiempo real: 2x │
│ Soporte offline: 2.5x │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ FRECUENTEMENTE SUBESTIMADO: │
│ │
│ • Casos edge (estados vacíos, errores, loading) │
│ • Polish (animaciones, micro-interacciones) │
│ • Testing cross-browser │
│ • Accesibilidad │
│ • Optimización de rendimiento │
│ • Documentación (Storybook, etc.) │
│ │
│ REGLA DE ORO: │
│ Si "se ve simple," agrega 30% por complejidad oculta │
└─────────────────────────────────────────────────────────────┘
Storybook y Documentación
Documentación de Componentes
WORKFLOW DOCUMENTACIÓN DE COMPONENTES:
┌─────────────────────────────────────────────────────────────┐
│ │
│ REQUERIMIENTO STORYBOOK: │
│ │
│ Cada componente necesita: │
│ ☐ Story default (caso de uso principal) │
│ ☐ Todas las variantes documentadas │
│ ☐ Controles interactivos │
│ ☐ Documentación de uso │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ TAREA INCLUYE STORYBOOK: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ UI-150: Crear Componente Modal ││
│ │ ││
│ │ Implementación: ││
│ │ ☐ Componente modal ││
│ │ ☐ Overlay con click-outside close ││
│ │ ☐ Focus trap ││
│ │ ☐ Tecla Escape cierra ││
│ │ ││
│ │ Storybook: ││
│ │ ☐ Story de modal básico ││
│ │ ☐ Tamaños: small, medium, large ││
│ │ ☐ Con contenido de formulario ││
│ │ ☐ Con contenido scrolleable ││
│ │ ☐ Open/close controlado ││
│ │ ││
│ │ Tests: ││
│ │ ☐ Abre/cierra correctamente ││
│ │ ☐ Gestión de focus ││
│ │ ☐ Comportamiento tecla Escape ││
│ │ ☐ Accesibilidad (role, aria) ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ DEFINITION OF DONE PARA COMPONENTES: │
│ │
│ ☐ Componente funciona según diseño │
│ ☐ Todas las variantes implementadas │
│ ☐ Stories de Storybook completos │
│ ☐ Accesible │
│ ☐ Unit tested │
│ ☐ Responsive (si aplica) │
│ ☐ Documentado │
└─────────────────────────────────────────────────────────────┘
Design System
Desarrollo del Design System
ORGANIZACIÓN DESIGN SYSTEM:
┌─────────────────────────────────────────────────────────────┐
│ │
│ COMPONENTES DESIGN SYSTEM: │
│ │
│ FOUNDATIONS (Prioridad 1): │
│ • Colores / Temas │
│ • Tipografía │
│ • Spacing │
│ • Íconos │
│ │
│ ATOMS (Prioridad 2): │
│ • Button │
│ • Input │
│ • Checkbox │
│ • Radio │
│ • Badge │
│ │
│ MOLECULES (Prioridad 3): │
│ • Form Field (label + input + error) │
│ • Search Bar │
│ • Dropdown │
│ • Toast │
│ │
│ ORGANISMS (Prioridad 4): │
│ • Modal │
│ • Card │
│ • Table │
│ • Navigation │
└─────────────────────────────────────────────────────────────┘
Trabajo de Rendimiento
Rendimiento Frontend
TAREAS DE RENDIMIENTO FRONTEND:
┌─────────────────────────────────────────────────────────────┐
│ │
│ BUDGET DE RENDIMIENTO: │
│ │
│ Tamaño bundle: < 200KB gzipped │
│ First contentful paint: < 1.5s │
│ Time to interactive: < 3s │
│ Largest contentful paint: < 2.5s │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ TAREA DE RENDIMIENTO: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ PERF-100: Reducir Tamaño de Bundle Inicial ││
│ │ ││
│ │ Actual: 450KB gzipped ││
│ │ Meta: < 200KB gzipped ││
│ │ ││
│ │ Análisis: ││
│ │ ☐ Ejecutar bundle analyzer ││
│ │ ☐ Identificar dependencias grandes ││
│ │ ☐ Encontrar oportunidades de code-splitting ││
│ │ ││
│ │ Optimizaciones: ││
│ │ ☐ Lazy load routes ││
│ │ ☐ Reemplazar moment con date-fns ││
│ │ ☐ Tree-shake lodash ││
│ │ ☐ Dynamic import para charts ││
│ │ ││
│ │ Validación: ││
│ │ ☐ Medir antes/después ││
│ │ ☐ Probar en conexión lenta ││
│ │ ☐ Agregar check de bundle size en CI ││
│ └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘
Mejores Prácticas
- Construir componentes primero — Facilita feature development
- Incluir specs de diseño — En cada tarea
- Estimar realísticamente — Incluir polish y edge cases
- Documentar en Storybook — Parte del Definition of Done
- Probar cross-browser — Antes de marcar done