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

More Decks by Aliaksei Kuncevič

Other Decks in Programming


  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 @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte

    vs Ember vs Elm vs Angular frontendwatch.com
  4. kuncevic.dev Best Practices ✅ Improve code (Refactoring) ✅ Always green

    (Maintenance) ✅ Don't Repeat Yourself (DRY) ✅ Following Guidelines ✅ Decouple/break/simplify
  5. 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
  6. 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
  7. kuncevic.dev ngModules ✅ Code splitting (lazy-loading) ✅ Providing Modularity ✅

    Declaring dependencies all in one place (metadata) ✅ 3rd party libraries support (providing functionality)
  8. 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
  9. 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
  10. 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