Save 37% off PRO during our Black Friday Sale! »

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: @ ngSydney 10 Dec 2019


Aliaksei Kuncevič

December 10, 2019


  1. How to Architect your Angular App like a PRO

    by ALIAKSEI KUNCEVIČ talk #24 v 1.0 (10/12/2019)
  2. TOC ✅ Architecture ✅ App evolution over time ✅

    Components ✅ Building blocks ✅ Code-base organization
  3. ALIAKSEI KUNCEVIČ Angular Expert | Mentor | Consultant
  4. @kuncevic Angular Minsk (BY) Frontend Tech (AU) ORGANIZER Angular

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

    Since 2016
  6. @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte

    vs Ember vs Elm vs Angular
  7. Let's compare an Angular app with some living organism

  8. Imagine a Tree

  9. Tree

  10. App Module Feature Modules Components Services Pipes etc Angular

  11. Seed

  12. Seed (CLI)

  13. App Evolution Circle

  14. Best Practices ✅ Improve code (Refactoring) ✅ Always green

    (Maintenance) ✅ Don't Repeat Yourself (DRY) ✅ Following Guidelines ✅ Decouple/break/simplify
  15. 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. Building blocks

  17. Process (Best Practices)

  18. Result (when we put building blocks in the right

    order )
  19. Component-based Architecture

  20. App Module Components Component-based Architecture

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

  22. Component-based Architecture ✅ Smaller files ✅ Better Maintainability ✅

    Testable ✅ Less bugs
  23. Container vs Presentational

  24. Container vs Presentational (aka Dumb vs Smart)

  25. 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. ngModules

  27. App Module Feature Module X ngModules Feature Module Y

  28. ngModules ✅ Code splitting (lazy-loading) ✅ Providing Modularity ✅

    Declaring dependencies all in one place (metadata) ✅ 3rd party libraries support (providing functionality)
  29. App Module Root Module

  30. Disorganized AppModule

  31. Break your AppModule Shared Module Feature Module Core Module

  32. 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. Use 'providedIn' instead Since Angular v6 Core Module have

    no longer making sense as 'providedIn' came to play
  34. Folders Structure

  35. Disorganized Folders

  36. Organized Folders

  37. 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 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. Many projects, multiple teams?

  39. Scale

  40. Enterprise Solution

  41. Monorepo Angular CLI (App+Lib) NX

  42. Upgrade to Angular 9

  43. Getting Ready To Update to Angular 9 =5wmWtgr7LQ0

  44. Angular 9 Release Event Coming in 24 hours after

    Angular 9 release
  45. Resources ca2f9a7c7d0 606567e40
  46. Th nk you! @kuncevic

  47. NY QUESTIONS? @kuncevic