ultra-performance-resilience-specialist

Responsabilidad Única

Optimización de rendimiento a nivel técnico. NO incluye features de negocio, UI/UX específico, ni integraciones de servicios externos.

Objetivo de Performance

• 60 FPS constantes: Ninguna operación debe bloquear el UI thread
• Memoria eficiente: Liberar recursos no utilizados proactivamente
• Battery optimization: Minimizar uso de CPU/GPU en background
• Smooth animations: Todas las animaciones deben ser fluidas sin drops

Isolates para Operaciones Pesadas

Cuándo Usar Isolates

• Decodificación de JSONs grandes (>100KB)
• Cálculos matemáticos complejos (optimización de rutas)
• Procesamiento de imágenes
• Búsquedas en listas grandes (>1000 items)
• Mapeo de datos pesados entre capas (Data → Domain)

Implementación con Isolate.run()

// Para operaciones one-shot
final result = await Isolate.run(() {
  // Operación pesada aquí
  return heavyComputation(data);
});

Isolates de Larga Duración

// Para operaciones continuas (ej: procesamiento de stream)
final receivePort = ReceivePort();
await Isolate.spawn(_isolateEntry, receivePort.sendPort);

static void _isolateEntry(SendPort sendPort) {
  // Lógica del isolate
}

Reglas de Isolates

• Nunca pasar objetos complejos entre isolates, solo primitivos o JSON
• Usar compute() para operaciones simples (wrapper de Isolate.run)
• Cerrar isolates cuando no se necesiten para liberar memoria

Optimización de Widgets

RepaintBoundary

Aplicar en widgets que se redibujan frecuentemente pero son independientes:

// En mapas
RepaintBoundary(
  child: MapWidget(...),
)

// En animaciones complejas
RepaintBoundary(
  child: AnimatedNeonGlow(...),
)

// En listas con items complejos
ListView.builder(
  itemBuilder: (context, index) {
    return RepaintBoundary(
      child: ComplexListItem(...),
    );
  },
)

Const Widgets

• Uso obligatorio de const en widgets estáticos
• Reduce rebuilds innecesarios
• Mejora performance de comparación de widgets

// ✅ Correcto
const Text('Label');
const Icon(Icons.check);

// ❌ Incorrecto
Text('Label');
Icon(Icons.check);

Keys para Optimización

• ValueKey: Para items en listas que pueden reordenarse
• GlobalKey: Solo cuando necesites acceder al state desde fuera (usar con moderación)
• ObjectKey: Para items complejos en listas

Optimización de Rebuilds

Provider/Riverpod Optimization

// ✅ Escuchar solo lo necesario
final name = ref.watch(userProvider.select((user) => user.name));

// ❌ Escuchar todo el objeto
final user = ref.watch(userProvider);

Bloc Optimization

// Usar Equatable para comparación eficiente
class PackageState extends Equatable {
  final List<Package> packages;
  
  @override
  List<Object?> get props => [packages];
}

Evitar Rebuilds Innecesarios

• Extraer widgets que no dependen del estado
• Usar const constructors
• Implementar shouldRebuild en custom widgets cuando sea necesario

Gestión de Memoria

Dispose de Recursos

@override
void dispose() {
  _controller.dispose();
  _subscription.cancel();
  _focusNode.dispose();
  super.dispose();
}

Streams y Subscriptions

• Siempre cancelar subscriptions en dispose()
• Usar StreamSubscription para mantener referencia
• Considerar StreamBuilder para manejo automático

Imágenes

// Usar cache de imágenes
Image.network(
  url,
  cacheWidth: 400, // Limitar tamaño en memoria
  cacheHeight: 400,
)

// Limpiar cache cuando sea necesario
imageCache.clear();

Lazy Loading y Pagination

Lazy Loading de Listas

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    // Solo construir items visibles
    return ItemWidget(items[index]);
  },
)

Infinite Scroll

ScrollController _scrollController = ScrollController();

@override
void initState() {
  super.initState();
  _scrollController.addListener(_onScroll);
}

void _onScroll() {
  if (_scrollController.position.pixels >= 
      _scrollController.position.maxScrollExtent * 0.8) {
    // Cargar más items
    _loadMore();
  }
}

Optimización de Animaciones

GPU Acceleration

// Usar Transform en lugar de Container para animaciones
Transform.translate(
  offset: Offset(x, y),
  child: child,
)

// Usar Opacity con cuidado (costoso)
// Preferir AnimatedOpacity que optimiza internamente
AnimatedOpacity(
  opacity: isVisible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 300),
  child: child,
)

Curves Optimizadas

• Usar curves predefinidas (más eficientes que custom)
• Curves.easeOutQuint para transiciones suaves
• Evitar curves muy complejas en animaciones continuas

Profiling y Debugging

Performance Overlay

// En MaterialApp
MaterialApp(
  showPerformanceOverlay: true, // Solo en debug
  // ...
)

DevTools

• Timeline: Identificar frames lentos (>16ms)
• Memory: Detectar memory leaks
• CPU Profiler: Identificar funciones costosas

Logging de Performance

import 'dart:developer' as developer;

void measurePerformance(String name, Function() fn) {
  final stopwatch = Stopwatch()..start();
  fn();
  stopwatch.stop();
  developer.log('$name took ${stopwatch.elapsedMilliseconds}ms');
}

Optimización de JSON Parsing

Usar Isolates para JSON Grande

Future<List<Package>> parsePackages(String jsonString) async {
  return await Isolate.run(() {
    final List<dynamic> jsonList = jsonDecode(jsonString);
    return jsonList.map((json) => PackageModel.fromJson(json).toEntity()).toList();
  });
}

Code Generation

• Usar json_serializable para parsing eficiente
• Evitar parsing manual cuando sea posible

Battery Optimization

Location Updates

// Ajustar frecuencia según necesidad
LocationSettings(
  accuracy: LocationAccuracy.high,
  distanceFilter: 10, // Solo actualizar cada 10 metros
  timeLimit: Duration(seconds: 5), // Timeout
)

Background Tasks

• Minimizar trabajo en background
• Usar WorkManager para tareas diferibles
• Pausar animaciones cuando app está en background

Checklist de Optimización

Antes de considerar una feature "completa", verificar:

• No hay operaciones pesadas en UI thread
• Isolates usados para JSON parsing >100KB
• RepaintBoundary en widgets complejos/animados
• Const usado en todos los widgets estáticos
• Subscriptions canceladas en dispose()
• Imágenes con cacheWidth/cacheHeight
• Lazy loading implementado en listas largas
• Animaciones usando Transform (GPU accelerated)
• 60 FPS en dispositivos de gama media
• Sin memory leaks detectados en DevTools

Ejemplo de Implementación Optimizada

class OptimizedPackageList extends StatefulWidget {
  const OptimizedPackageList({super.key});

  @override
  State<OptimizedPackageList> createState() => _OptimizedPackageListState();
}

class _OptimizedPackageListState extends State<OptimizedPackageList> {
  final ScrollController _scrollController = ScrollController();
  
  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }
  
  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
  
  void _onScroll() {
    if (_scrollController.position.pixels >= 
        _scrollController.position.maxScrollExtent * 0.8) {
      // Load more
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: packages.length,
      itemBuilder: (context, index) {
        return RepaintBoundary(
          key: ValueKey(packages[index].id),
          child: const PackageCard(package: packages[index]),
        );
      },
    );
  }
}