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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. kuncevic.dev
    @kuncevic CREATOR

    Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
    frontendwatch.com

    View full-size slide

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

    View full-size slide

  8. kuncevic.dev
    Imagine a Tree

    View full-size slide

  9. kuncevic.dev
    Tree

    View full-size slide

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

    View full-size slide

  11. kuncevic.dev
    Seed

    View full-size slide

  12. kuncevic.dev
    Seed (CLI)

    View full-size slide

  13. kuncevic.dev
    App Evolution Circle

    View full-size slide

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

    View full-size 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 full-size slide

  16. kuncevic.dev
    Building blocks

    View full-size slide

  17. kuncevic.dev
    Process (Best Practices)

    View full-size slide

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

    View full-size slide

  19. kuncevic.dev
    Component-based
    Architecture

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. kuncevic.dev
    Container vs Presentational

    View full-size slide

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

    View full-size 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 full-size slide

  26. kuncevic.dev
    ngModules

    View full-size slide

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

    View full-size 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 full-size slide

  29. kuncevic.dev
    App Module
    Root Module

    View full-size slide

  30. kuncevic.dev
    Disorganized AppModule

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  34. kuncevic.dev
    Folders Structure

    View full-size slide

  35. kuncevic.dev
    Disorganized Folders

    View full-size slide

  36. kuncevic.dev
    Organized Folders

    View full-size 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 full-size slide

  38. kuncevic.dev
    Many projects, multiple
    teams?

    View full-size slide

  39. kuncevic.dev
    Scale

    View full-size slide

  40. kuncevic.dev
    Enterprise Solution

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  46. kuncevic.dev
    Th nk you!
    @kuncevic

    View full-size slide

  47. kuncevic.dev
    NY
    QUESTIONS?
    @kuncevic

    View full-size slide