Curso de Sencha ExtAngular para Equipos de Desarrollo

Requisitos de Node.js y Angular CLI

Instalación de dependencias de ExtAngular

Configuración de licencias de Sencha

Uso del Sencha Cmd en proyectos Angular

Configuración de Webpack para ExtAngular

Integración con VSCode y WebStorm

Configuración de ESLint y Prettier

Scripts npm para automatización de tareas

Creación del primer módulo con ExtAngular

Ejemplo práctico: app inicial funcional

Filosofía de los componentes Sencha

Ciclo de vida de un componente en Angular y ExtAngular

Estructura de componentes de ExtAngular

Renderizado dinámico de componentes

Comunicación entre componentes con Inputs/Outputs

Personalización básica de componentes

Creación de un layout con contenedores

Ejemplo práctico: panel con toolbar y contenido

Comparación con Angular Material y PrimeNG

Buenas prácticas de uso de componentes

Principios de diseño con layouts Sencha

Uso de `HBox`, `VBox` y `Grid` layouts

Layouts responsivos en aplicaciones Angular

Nested containers y estructuras jerárquicas

Manejo de flex y proporciones

Layouts dinámicos basados en datos

Ejemplo práctico: dashboard con paneles

Optimización de layouts en aplicaciones grandes

Recomendaciones de rendimiento en layouts

Checklist de diseño visual con ExtAngular

Creación de formularios básicos con ExtAngular

Campos de texto, numéricos y de selección

Integración de validadores en campos

Uso de `FormPanel` en Angular

Validaciones síncronas y asíncronas

Integración con Angular Reactive Forms

Ejemplo práctico: formulario de registro

Envío de formularios a APIs REST

Validación avanzada con mensajes de error

Buenas prácticas en formularios empresariales

Introducción a `Grid` en ExtAngular

Creación de columnas y bindings con datos

Filtrado y ordenación de registros

Paginación de datos en grillas grandes

Integración con stores de datos

Edición en línea dentro de grillas

Exportación de datos a Excel/CSV

Ejemplo práctico: grilla de productos

Optimización de rendimiento en grillas

Personalización visual de columnas y filas

Qué son los `Stores` en ExtAngular

Diferencia entre `MemoryStore` y `AjaxStore`

Integración de stores con APIs REST

Uso de proxies para carga de datos

Sincronización de stores con backend

Actualización en tiempo real con websockets

Ejemplo práctico: store de usuarios conectado a API

Manejo de errores y reintentos de conexión

Integración de stores con RxJS

Buenas prácticas en la gestión de datos

Creación de dashboards con contenedores

Uso de charts de ExtAngular

Gráficos de líneas, barras, pastel y radar

Vinculación de datos entre grillas y charts

Integración con stores en tiempo real

Creación de KPIs y métricas

Ejemplo práctico: dashboard de ventas

Optimización de dashboards interactivos

Comparación con librerías como Chart.js y D3.js

Buenas prácticas en visualización de datos

Uso de `RouterModule` en Angular con ExtAngular

Creación de menús de navegación

Integración de toolbars con rutas

Navegación anidada y lazy loading

Control de rutas protegidas con guards

Ejemplo práctico: aplicación con secciones internas

Manejo de parámetros en rutas dinámicas

Uso de breadcrumbs en interfaces empresariales

Optimización de navegación en proyectos grandes

Checklist de arquitectura de navegación

Introducción al Sencha Themer

Personalización de estilos con CSS y SASS

Aplicación de paletas de colores corporativas

Creación de temas responsivos

Modificación de tipografías y tamaños

Ejemplo práctico: tema corporativo aplicado a una app

Diferencias entre temas de ExtJS y ExtAngular

Reutilización de temas en múltiples proyectos

Optimización del peso de estilos compilados

Buenas prácticas en diseño visual empresarial

Consumo de APIs REST con `HttpClient`

Uso de stores para sincronizar datos con backend

Ejemplo práctico: CRUD de usuarios conectado a API

Integración con backends en Java (Spring Boot)

Integración con Node.js/Express y .NET

Manejo de autenticación con JWT

Gestión de errores en peticiones HTTP

Optimización de llamadas concurrentes

Cacheo de datos en clientes ExtAngular

Buenas prácticas de integración

Principios básicos de seguridad en Angular/ExtAngular

Autenticación con JWT y OAuth2

Control de acceso basado en roles

Protección de rutas en Angular

Prevención de ataques XSS e inyección de datos

Seguridad en formularios y validaciones

Ejemplo práctico: login y control de roles

Logs y auditoría en aplicaciones empresariales

Configuración segura de despliegues

Checklist de seguridad empresarial

Estrategias de testing en Angular y ExtAngular

Test unitarios de componentes ExtAngular

Mocking de stores y datos

Testing de formularios y validaciones

Testing de grillas y eventos interactivos

Integración con Jasmine y Karma

Uso de Cypress para pruebas E2E

Ejemplo práctico: test de un CRUD completo

Automatización de pruebas en CI/CD

Buenas prácticas de QA

Estrategias de optimización de rendimiento

Uso de lazy loading en módulos pesados

Minificación y tree-shaking de bundles

Compresión de assets con gzip y brotli

Monitoreo de rendimiento en producción

Configuración de CI/CD con GitHub Actions

Despliegue en servidores empresariales (Tomcat, Nginx)

Integración con Docker y Kubernetes

Ejemplo práctico: pipeline de despliegue

Buenas prácticas de DevOps con Angular+Sencha

Definición del caso: sistema de gestión de empleados

Creación de módulos principales: login, empleados, informes

Implementación de formularios con validación avanzada

Construcción de grillas de empleados con filtros

Dashboard de métricas en tiempo real

Integración con API REST en backend

Implementación de seguridad con JWT y roles

Testing unitario y E2E de la aplicación

Despliegue en servidor Dockerizado

Presentación del proyecto final