Descargado 14 veces
Arquitectura en aplicaciones Angular y buenas practicas.
- 1. Arquitectura en aplicaciones Angulary buenas practicas. • Germán Küber • Software Architect & Developer NET-Baires http://germankuber.com.ar @germankuber
- 2.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. Organización de Featuresy Módulos
- 14.
- 16. Do structure theapp 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.
- 18. Shared feature module •Crear un ShearedModule • Crear • Componentes • Directivas • Pipelines • Solo declarar servicios sin estado
- 19.
- 20.
- 21. Componentes • Extraer estilosy template en .css y .html • Utilizar @Input() y @Ouput en la misma línea
- 22. @Input @Output mismalínea
- 23. Evitar alias enlos @Input()
- 24. Orden interno delcomponente export class ToastComponent implements OnInit { message: string; private toastElement: string; activate(message ) {} ngOnInit() { } private hide() { } }
- 25. Delegar lógica decomponentes complejos a servicios
- 26. Evitar prefijos Onen @output()
- 27.
- 28. Servicios Observable • PatrónObserver • 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 delos observables •ngOnDestroy •Decorador AutoUnsuscribe
- 30.
- 31.
- 32. Servicios •Responsabilidad única •Compartir datosy funcionalidad •Utilizar decorador @Injectable •Utilizar servicios para llamadas de infraestructura
- 33.
- 34.
- 35.
- 36. Remplazar funciones conPipes {{ addTax(product.price) | currency }} {{ product.price | addtax | currency }}
- 37. HTTP Intercerptors Centralizar loreferente a CORS, cookies, credenciales
- 38.
- 39. GRACIAS!!! • Germán Küber •Software Architect & Developer Net-Baires http://germankuber.com.ar @germankuber
Notas del editor
- #12 lowerCamelCase UpperCamelCase
- #18 Do create an NgModule for all distinct features in an application; for example, a Heroes feature. Do place the feature module in the same named folder as the feature area; for example, in app/heroes. Do name the feature module file reflecting the name of the feature area and folder; for example, app/heroes/heroes.module.ts. Do name the feature module symbol reflecting the name of the feature area, folder, and file; for example, app/heroes/heroes.module.ts defines HeroesModule.
- #37 Función no existe cache de pipeline
- #40 El componente solo puede conocer las capas del sistema en el que vive Esto permite agregar caches,. Proxys. Balanceadores de carga Entiende que los servidores estan en constante cambio Entiende que la red no es segura por lo que limita los contextos. Puede administrarse mejor dado que cada persona puede administrar su propio contexto. Escalabilidad Manajabilidad Cliente > proovedor > empresa > base de datos