Curso Avanzado de Angular: Mejora y Optimización de Proyectos

La evolución de un proyecto Angular requiere más que conocimientos básicos; demanda una comprensión profunda de las mejores prácticas, optimización de rendimiento y arquitectura escalable. En este recorrido, aprenderemos a transformar un proyecto base en una aplicación robusta y eficiente, implementando técnicas avanzadas que son esenciales en entornos profesionales de desarrollo.

¿Cómo comenzar con el proyecto base de Angular avanzado?

Para iniciar este viaje de aprendizaje avanzado en Angular, necesitamos partir de un repositorio base que ya contiene una configuración inicial. Este proyecto servirá como nuestro lienzo para implementar mejoras significativas en rendimiento, reactividad y buenas prácticas de ingeniería.

El primer paso es clonar el repositorio "curso Angular avanzado" desde GitHub. Este contiene un proyecto de eCommerce con funcionalidades básicas que transformaremos aplicando conceptos avanzados:

git clone [url-del-repositorio]
cd curso-Angular-avanzado
npm install
ng serve

Una vez completada la instalación de dependencias, podrás ejecutar el proyecto con ng serve. Es importante notar que aunque aparezcan algunas alertas (relacionadas con malas prácticas que corregiremos), el proyecto debería estar accesible en localhost:4200.

¿Qué incluye el proyecto base?

El proyecto base es un eCommerce sencillo pero funcional que incluye:

• Navegación básica entre páginas
• Listado de productos
• Funcionalidad de carrito de compras
• Manejo de rutas, incluyendo página 404

La estructura del proyecto sigue una arquitectura por dominios, donde encontrarás:

• Domains: Organización principal que separa la funcionalidad en áreas como productos, información compartida, etc.
• Componentes compartidos: Elementos reutilizables en toda la aplicación
• Servicios: Conexiones a APIs externas
• Páginas: Vistas principales de la aplicación

¿Cómo está estructurada la arquitectura del proyecto?

La arquitectura del proyecto sigue un enfoque moderno basado en dominios, lo que facilita la escalabilidad y mantenimiento del código. Esta organización refleja buenas prácticas actuales en el desarrollo Angular.

Estructura de carpetas por dominio

El proyecto está organizado en tres dominios principales:

1. Shared: Contiene componentes, directivas y otros elementos reutilizables
2. Products: Incluye todo lo relacionado con productos (listado, detalle, etc.)
3. Info: Contiene páginas informativas como About y la página 404

Cada dominio mantiene su propia estructura interna con:

dominio/
  ├── pages/
  ├── components/
  ├── services/
  ├── models/
  └── directives/

Esta separación por dominios permite un mejor aislamiento de responsabilidades y facilita el trabajo en equipos grandes donde diferentes desarrolladores pueden enfocarse en áreas específicas.

¿Qué API utilizaremos para el desarrollo?

Un aspecto fundamental de este proyecto es su conexión con datos reales. Para ello, utilizaremos la Platzi Fake Store API, una API que proporciona:

• Catálogo de productos
• Categorías
• Órdenes de compra
• Localizaciones

Esta API ofrece funcionalidades avanzadas que implementaremos en nuestro proyecto:

• Filtrado de productos por título
• Paginación
• Ordenamiento
• Búsqueda avanzada

La documentación completa de la API está disponible para explorar todos los endpoints y funcionalidades que podemos aprovechar durante el desarrollo.

Trabajando con código existente

Es importante destacar que este enfoque de trabajo refleja escenarios reales del mundo profesional. Raramente iniciarás proyectos desde cero; lo más común es que te incorpores a equipos que trabajan sobre código existente (Legacy Code).

Este proyecto simula esa realidad: un código funcional pero con oportunidades de mejora que implementaremos aplicando:

• Server Side Rendering
• Nueva reactividad de Angular
• Optimización de rendimiento
• Buenas prácticas de ingeniería de software

Te invito a explorar el código, revisar la documentación de la API y familiarizarte con la estructura del proyecto. Esta exploración inicial es crucial para comprender el punto de partida antes de comenzar a implementar las mejoras avanzadas.

La capacidad de trabajar con código existente, identificar áreas de mejora y aplicar técnicas avanzadas es una habilidad fundamental para cualquier desarrollador Angular que busque destacar en entornos profesionales. ¡Comparte en los comentarios qué aspectos del proyecto te gustaría mejorar primero!