Curso de Buenas Prácticas en Angular

FrontEnd

Una revisión exhaustiva de las buenas prácticas para la programación de aplicaciones bajo el framework Javascript Angular.

Intermedio Corto (hasta 8 horas)

59€ Comprar (o suscribirse a 100+ cursos online)

El curso de buenas prácticas en Angular ofrece a los desarrolladores una formación detallada sobre las mejores recomendaciones, tanto a la hora de organizar su código, como estructurar un proyecto o sacar partido a las herramientas disponibles en el framework.

El estudiante aprenderá a organizar un proyecto Angular, desde su estructura y disposición de carpetas, conceptos de estructura de código, hasta cómo organizar las piezas de software dentro de los propios archivos: single responsability, nombrado, etc.

Lógicamente, nos basaremos principalmente en las prácticas contenidas en la “Guía de estilos de Angular”, pero desde un enfoque crítico, ofreciendo incluso alternativas a sus planteamientos. De manera adicional, durante el curso se abordarán diversos ejemplos extra, de buenas prácticas que no se encuentran en la guía de estilos oficial y que son indispensables para el desarrollo de aplicaciones con elevados estándares de calidad.

El contenido del curso de Buenas prácticas se abordará a partir de ejemplos y al final veremos una aplicación que resume de manera global el conocimiento impartido durante las clases y la estructura de programación MVC con Angular.

Qué aprenderás en el curso de buenas prácticas en Angular

๏ Conceptos básicos de estructura de código

๏ Organización de un proyecto Angular

๏ Disposición de árbol de carpetas y archivos

๏ Pautas de nombrado

๏ Guía de estilos para cada elemento o herramienta que nos ofrece Angular

๏ Otra alternativa de esqueleto de carpetas

๏ Repaso de “buenas prácticas” extra, no contenidas en las guías oficiales de Angular

๏ Un ejemplo de aplicación MVC con Angular

Por qué debes aprender buenas prácticas con Angular

El curso de buenas prácticas en Angular está orientado a desarrolladores profesionales que ya conocen Angular de antemano y desean adquirir rápidamente conocimientos adicionales que les permitan elevar la calidad de su código y sus proyectos.

Angular se está convirtiendo en el framework más usado, sobre todo en proyectos de gran tamaño, por su robustez, versatilidad, y por la empresa que le da soporte (Google). Al usarse en proyectos de gran magnitud es muy importante hacer hincapié en la estructuración, tanto de carpetas como de código, y de su forma de programarlo, creando convenciones que deberían aplicarse por cada uno de los miembros del equipo de desarrolladores del proyecto.

Con este curso revisaremos las buenas prácticas para el desarrollo, con convenciones oficiales ofrecidas por el equipo de Angular en su “Guía de estilo”, aportando nuevas soluciones que añaden un contenido indispensable para la elaboración de grandes proyectos. Gracias al curso de buenas prácticas, en pocas horas, un desarrollador Angular podrá adquirir gran cantidad de conocimiento, que de otra manera requeriría años de experiencia para su obtención.

Índice del contenido del curso

A continuación puedes encontrar un resumen de los puntos que vamos a tratar en este curso.

1. John Papa

2. Única responsabilidad

2.1. Regla de uno

2.2. Funciones pequeñas

3. Nombrado

3.1. Nombrado general

3.2. Separar nombres de archivos con puntos y guiones

3.3. Símbolos en nombres de archivos

3.4. Nombrado de servicios

3.5. Bootstrapping de Angular

3.6. Selector de componentes

3.7. Prefijo personalizado para componentes

3.8. Selector en directivas

3.9. Prefijo personalizado para directivas

3.10. Nombres de pipes

3.11. Nombrado de tests unitarios

3.12. Nombrado de tests End‐to‐End (E2E)

3.13. Nombres para Angular NgModule

4. Convenciones para el código

4.1. Clases

4.2. Constantes

4.3. Interfaces

4.4. Propiedades y métodos

4.5. Espaciado de líneas en imports

5. Estructura de aplicación y módulos

5.1. LIFT

5.2. Locate

5.3. Identify

5.4. Flat

5.5. T‐DRY (Try "intentar ser" DRY)

5.6. Directrices estructurales

5.7. Estructura de carpetas por funcionalidad

5.8. Estructura de carpetas por funcionalidad versus estructura de carpetas por herramientas Angular

5.9. Módulo "App root"

5.10. Módulos de funcionalidades

5.11. Módulos con funcionalidades compartidas

5.12. Módulo con las funcionalidades "core"

5.13. Prevención del re-importado de los módulos

5.14. Carpetas con carga perezosa (Lazy Load)

5.15. No importar nunca directamente carpetas destinadas a carga perezosa

6. Componentes

6.1. Componentes como elementos

6.2. Extraer templates y estilos a sus propios archivos

6.3. Decorar propiedades input y output

6.4. Evitar "aliasing" de inputs y outputs

6.5. Secuencia de miembros

6.6. Delegar lógica compleja de componentes a servicios

6.7. No usar prefijos en las propiedades output

6.8. Poner la lógica de presentación en la clase del componente

7. Directivas

7.1. Usar directivas para mejorar elementos

7.2. Decoradores HostListener / HostBinding versus host metadata

8. Servicios 8.1. Servicios son singletons

8.2. Responsabilidad única

8.3. Proporcionar un servicio

8.4. Usar la el decorador de clase @Injectable()

9. Servicios de datos

9.1. Comunicaciones con el servidor a través de servicios

10. Hooks del ciclo de vida

10.1. Implementar interfaces del ciclo de vida

11. Apéndice 11.1. Codelyzer

11.2. Plantillas de ficheros y snippets

12. Más buenas prácticas usando Angular

12.1. PROHIBIDO el uso de los “BARREL”

12.2. Uso de los “COMENTARIOS”

12.3. Tipificar

12.4. Constructor()

12.5. .toPromise()

12.6. Hacer uso de takeUntil()

12.7. trackBy()

12.8. Árbol de carpetas “Plana”

12.9. Estructura de los “imports”

12.10. Estructura “interna” de la “class”

13. Ejemplo MVC

Requisitos de conocimientos para el aprovechamiento del curso

Para poder aprovechar el curso de buenas prácticas en Angular es necesario disponer de conocimientos básicos de Angular, ya que no es un curso del framework desde cero, sino de estructuración y buenas prácticas.