Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Architect your Angular App like a PRO

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

Aliaksei Kuncevič

December 10, 2019
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

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