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)
   

   View Slide

2. kuncevic.dev
   TOC
   ✅ Architecture
   ✅ App evolution over time
   ✅ Components
   ✅ Building blocks
   ✅ Code-base organization
   

   View Slide

3. kuncevic.dev
   ALIAKSEI KUNCEVIČ
   Angular Expert | Mentor | Consultant
   https://twitter.com/kuncevic
   https://github.com/kuncevic
   https://linkedin.com/in/kuncevic
   

   View Slide

4. kuncevic.dev
   @kuncevic
   Angular Minsk (BY)
   Frontend Tech (AU)
   ORGANIZER
   Angular Workshop
   

   View Slide

5. kuncevic.dev
   @kuncevic SPEAKER
   20+ Angular-related talks
   11 talks at #ngSydney
   Since 2016
   

   View Slide

6. kuncevic.dev
   @kuncevic CREATOR
   
   Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
   frontendwatch.com
   

   View Slide

7. kuncevic.dev
   Let's compare an Angular app
   with some living organism
   

   View Slide

8. kuncevic.dev
   Imagine a Tree
   

   View Slide

9. kuncevic.dev
   Tree
   

   View Slide

10. kuncevic.dev
    App Module
    Feature Modules
    Components
    Services
    Pipes
    etc
    Angular App
    

    View Slide

11. kuncevic.dev
    Seed
    

    View Slide

12. kuncevic.dev
    Seed (CLI)
    

    View Slide

13. kuncevic.dev
    App Evolution Circle
    

    View Slide

14. kuncevic.dev
    Best Practices
    ✅ Improve code (Refactoring)
    ✅ Always green (Maintenance)
    ✅ Don't Repeat Yourself (DRY)
    ✅ Following Guidelines
    ✅ Decouple/break/simplify
    

    View Slide

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
    

    View Slide

16. kuncevic.dev
    Building blocks
    

    View Slide

17. kuncevic.dev
    Process (Best Practices)
    

    View Slide

18. kuncevic.dev
    Result (when we put building
    blocks in the right order )
    

    View Slide

19. kuncevic.dev
    Component-based
    Architecture
    

    View Slide

20. kuncevic.dev
    App Module
    Components
    Component-based Architecture
    

    View Slide

21. kuncevic.dev
    Component-based Architecture
    ✅ Isolation
    ✅ Encapsulation
    ✅ Composition
    

    View Slide

22. kuncevic.dev
    Component-based Architecture
    ✅ Smaller files
    ✅ Better Maintainability
    ✅ Testable
    ✅ Less bugs
    

    View Slide

23. kuncevic.dev
    Container vs Presentational
    

    View Slide

24. kuncevic.dev
    Container vs Presentational
    (aka Dumb vs Smart)
    

    View Slide

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
    

    View Slide

26. kuncevic.dev
    ngModules
    

    View Slide

27. kuncevic.dev
    App Module
    Feature Module X
    ngModules
    Feature Module Y
    

    View Slide

28. kuncevic.dev
    ngModules
    ✅ Code splitting (lazy-loading)
    ✅ Providing Modularity
    ✅ Declaring dependencies all in one place (metadata)
    ✅ 3rd party libraries support (providing functionality)
    

    View Slide

29. kuncevic.dev
    App Module
    Root Module
    

    View Slide

30. kuncevic.dev
    Disorganized AppModule
    

    View Slide

31. kuncevic.dev
    Break your AppModule
    Shared Module
    Feature Module
    Core Module
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. kuncevic.dev
    Folders Structure
    

    View Slide

35. kuncevic.dev
    Disorganized Folders
    

    View Slide

36. kuncevic.dev
    Organized Folders
    

    View Slide

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
    

    View Slide

38. kuncevic.dev
    Many projects, multiple
    teams?
    

    View Slide

39. kuncevic.dev
    Scale
    

    View Slide

40. kuncevic.dev
    Enterprise Solution
    

    View Slide

41. kuncevic.dev
    Monorepo
    Angular CLI (App+Lib)
    NX
    

    View Slide

42. kuncevic.dev
    Upgrade to Angular 9
    https://update.angular.io/#8.0:9.0
    

    View Slide

43. kuncevic.dev
    Getting Ready To Update to Angular 9
    https://www.youtube.com/watch?v
    =5wmWtgr7LQ0
    

    View Slide

44. kuncevic.dev
    Angular 9 Release Event
    Coming in 24 hours after Angular 9
    release
    

    View Slide

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
    

    View Slide

46. kuncevic.dev
    Th nk you!
    @kuncevic
    

    View Slide

47. kuncevic.dev
    NY
    QUESTIONS?
    @kuncevic
    

    View Slide