Buenas practicas a la hora de implementar Angular

1. Arquitectura en aplicaciones
Angular y buenas practicas.
• Germán Küber
• Software Architect & Developer
NET-Baires
http://germankuber.com.ar
@germankuber

2. >_

5. Nomenclatura

6. Servicios

7. Selector de componentes

8. Directivas

9. Nombre de componentes

10. Nombre de componentes

11. Pipelines

12. Organización de Features y
Módulos

14. K
I
S
S
eep
t
imple
tupid

16. Do structure the app such that you can
Locate quickly, Identify the code at a glance ,
keep the Flattest structure you can, and Try
to be DRY
Angular Style Guide
https://angular.io/guide/styleguide
LIFT

17. Estructura CHATA

18. Shared feature module
• Crear un ShearedModule
• Crear
• Componentes
• Directivas
• Pipelines
• Solo declarar servicios sin estado

19. Módulos

20. Componentes

21. Componentes
• Extraer estilos y template en .css y .html
• Utilizar @Input() y @Ouput en la misma línea

22. @Input @Output misma línea

23. Evitar alias en los @Input()

24. Orden interno del componente
export class ToastComponent implements OnInit {
message: string;
private toastElement: string;
activate(message ) {}
ngOnInit() {
}
private hide() {
}
}

25. Delegar lógica de componentes
complejos a servicios

26. Evitar prefijos On en @output()

27. Comunicación entre
componentes

28. Servicios Observable
• Patrón Observer
• Servicio expone un observable
• Los componentes saben a que tipo de dato se suscriben
• Acoplamiento entre componentes y servicios
• Se utiliza subject/observable

29. De suscribirse de los observables
•ngOnDestroy
•Decorador AutoUnsuscribe

30. https://github.com/NetanelBasal/ngx-auto-unsubscribe
Usar decorador AutoUnsubscribe

31. Servicios

32. Servicios
•Responsabilidad única
•Compartir datos y funcionalidad
•Utilizar decorador @Injectable
•Utilizar servicios para llamadas de infraestructura

33. Life Hooks

34. Implementar Interfaces

35. Otros

36. Remplazar funciones con Pipes
{{ addTax(product.price) | currency }}
{{ product.price | addtax | currency }}

37. HTTP Intercerptors
Centralizar lo referente a CORS, cookies, credenciales

38. NO usar any

39. GRACIAS!!!
• Germán Küber
• Software Architect & Developer
Net-Baires
http://germankuber.com.ar
@germankuber