How to Architect your Angular App like a PRO

This talk is about how typical Angular application evolve over time. How to organize app structure once your code-base grows over time. I did speak about difference between various types of ngModules (core, shared, feature) explained why ngModules where introduced at first place and why they might disappear in the future Angular versions (9+). In the end I did a quick introduction how to manage complex Angular code-base using monorepo approach.

ref: https://www.meetup.com/ng-sydney/events/266936936 @ ngSydney 10 Dec 2019

Transcript

1. kuncevic.dev How to Architect your Angular App like a PRO by ALIAKSEI KUNCEVIČ talk #24 v 1.0 (10/12/2019)
2. kuncevic.dev TOC ✅ Architecture ✅ App evolution over time ✅ Components ✅ Building blocks ✅ Code-base organization
3. kuncevic.dev ALIAKSEI KUNCEVIČ Angular Expert | Mentor | Consultant https://twitter.com/kuncevic https://github.com/kuncevic https://linkedin.com/in/kuncevic
4. kuncevic.dev @kuncevic Angular Minsk (BY) Frontend Tech (AU) ORGANIZER Angular Workshop
5. kuncevic.dev @kuncevic SPEAKER 20+ Angular-related talks 11 talks at #ngSydney Since 2016
6. kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com
7. kuncevic.dev Let's compare an Angular app with some living organism
8. kuncevic.dev Imagine a Tree
9. kuncevic.dev Tree
10. kuncevic.dev App Module Feature Modules Components Services Pipes etc Angular App
11. kuncevic.dev Seed
12. kuncevic.dev Seed (CLI)
13. kuncevic.dev App Evolution Circle
14. kuncevic.dev Best Practices ✅ Improve code (Refactoring) ✅ Always green (Maintenance) ✅ Don't Repeat Yourself (DRY) ✅ Following Guidelines ✅ Decouple/break/simplify
15. kuncevic.dev Architecture Software architecture refers the fundamental structures of a software system and the discipline of creating such structures and systems. Each structure comprises software elements, relations among them, and properties of both elements and relations. © Wikipedia
16. kuncevic.dev Building blocks
17. kuncevic.dev Process (Best Practices)
18. kuncevic.dev Result (when we put building blocks in the right order )
19. kuncevic.dev Component-based Architecture
20. kuncevic.dev App Module Components Component-based Architecture
21. kuncevic.dev Component-based Architecture ✅ Isolation ✅ Encapsulation ✅ Composition
22. kuncevic.dev Component-based Architecture ✅ Smaller files ✅ Better Maintainability ✅ Testable ✅ Less bugs
23. kuncevic.dev Container vs Presentational
24. kuncevic.dev Container vs Presentational (aka Dumb vs Smart)
25. kuncevic.dev Container vs Presentational Container Presentational Provide data to components Look and feel (css) Data services / business logic No deps to data services Wraps components Displaying data via @input Tightly coupled to app Simple and reusable
26. kuncevic.dev ngModules
27. kuncevic.dev App Module Feature Module X ngModules Feature Module Y
28. kuncevic.dev ngModules ✅ Code splitting (lazy-loading) ✅ Providing Modularity ✅ Declaring dependencies all in one place (metadata) ✅ 3rd party libraries support (providing functionality)
29. kuncevic.dev App Module Root Module
30. kuncevic.dev Disorganized AppModule
31. kuncevic.dev Break your AppModule Shared Module Feature Module Core Module
32. kuncevic.dev Core Module ‍♂ Consider collecting numerous, auxiliary, single-use classes inside a core module to simplify the apparent structure of a feature module. Consider calling the application-wide core module, CoreModule. Importing CoreModule into the root AppModule reduces its complexity and emphasizes its role as orchestrator of the application as a whole. © Angular Guidelines v4-5
33. kuncevic.dev Use 'providedIn' instead Since Angular v6 Core Module have no longer making sense as 'providedIn' came to play https://github.com/angular/angular/issues/17825
34. kuncevic.dev Folders Structure
35. kuncevic.dev Disorganized Folders
36. kuncevic.dev Organized Folders
37. kuncevic.dev Best Practices Do keep a flat folder structure as long as possible. Consider creating sub-folders when a folder reaches seven or more files. Consider configuring the IDE to hide distracting, irrelevant files such as generated .js and .js.map files. Why? No one wants to search for a file through seven levels of folders. A flat structure is easy to scan. On the other hand, psychologists believe that humans start to struggle when the number of adjacent interesting things exceeds nine. So when a folder has ten or more files, it may be time to create subfolders. Base your decision on your comfort level. Use a flatter structure until there is an obvious value to creating a new folder. © Angular Guidelines
38. kuncevic.dev Many projects, multiple teams?
39. kuncevic.dev Scale
40. kuncevic.dev Enterprise Solution
41. kuncevic.dev Monorepo Angular CLI (App+Lib) NX
42. kuncevic.dev Upgrade to Angular 9 https://update.angular.io/#8.0:9.0
43. kuncevic.dev Getting Ready To Update to Angular 9 https://www.youtube.com/watch?v =5wmWtgr7LQ0
44. kuncevic.dev Angular 9 Release Event Coming in 24 hours after Angular 9 release
45. kuncevic.dev Resources angular.io/guide/architecture angular.io/guide/styleguide#flat angular.io/guide/creating-libraries medium.com/@dan_abramov/smart-and-dumb-components-7 ca2f9a7c7d0 medium.com/@cyrilletuzi/architecture-in-angular-projects-242 606567e40 github.com/kuncevic/angular-modular-project-structure github.com/angular/angular/issues/17825 github.com/nrwl/nx youtube.com/watch?v=6REzlUChF3Q
46. kuncevic.dev Th nk you! @kuncevic
47. kuncevic.dev NY QUESTIONS? @kuncevic