$30 off During Our Annual Pro Sale. View Details »

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 ALIAKSEI KUNCEVIČ Angular Expert | Mentor | Consultant https://twitter.com/kuncevic

    https://github.com/kuncevic https://linkedin.com/in/kuncevic
  4. kuncevic.dev @kuncevic Angular Minsk (BY) Frontend Tech (AU) ORGANIZER Angular

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

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

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

  8. kuncevic.dev Imagine a Tree

  9. kuncevic.dev Tree

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

  11. kuncevic.dev Seed

  12. kuncevic.dev Seed (CLI)

  13. kuncevic.dev App Evolution Circle

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

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

  17. kuncevic.dev Process (Best Practices)

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

    order )
  19. kuncevic.dev Component-based Architecture

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

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

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

    Testable ✅ Less bugs
  23. kuncevic.dev Container vs Presentational

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

  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
  26. kuncevic.dev ngModules

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

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

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

  30. kuncevic.dev Disorganized AppModule

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

  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
  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
  34. kuncevic.dev Folders Structure

  35. kuncevic.dev Disorganized Folders

  36. kuncevic.dev Organized Folders

  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
  38. kuncevic.dev Many projects, multiple teams?

  39. kuncevic.dev Scale

  40. kuncevic.dev Enterprise Solution

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

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

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

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

    Angular 9 release
  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
  46. kuncevic.dev Th nk you! @kuncevic

  47. kuncevic.dev NY QUESTIONS? @kuncevic