How to Architect your Angular App like a PRO

Slide 1

Slide 1 text

kuncevic.dev How to Architect your Angular App like a PRO by ALIAKSEI KUNCEVIČ talk #24 v 1.0 (10/12/2019)

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

kuncevic.dev Imagine a Tree

Slide 9

Slide 9 text

kuncevic.dev Tree

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

kuncevic.dev Seed

Slide 12

Slide 12 text

kuncevic.dev Seed (CLI)

Slide 13

Slide 13 text

kuncevic.dev App Evolution Circle

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

kuncevic.dev Building blocks

Slide 17

Slide 17 text

kuncevic.dev Process (Best Practices)

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

kuncevic.dev Component-based Architecture

Slide 20

Slide 20 text

kuncevic.dev App Module Components Component-based Architecture

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

kuncevic.dev Component-based Architecture ✅ Smaller ﬁles ✅ Better Maintainability ✅ Testable ✅ Less bugs

Slide 23

Slide 23 text

kuncevic.dev Container vs Presentational

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

kuncevic.dev ngModules

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

kuncevic.dev ngModules ✅ Code splitting (lazy-loading) ✅ Providing Modularity ✅ Declaring dependencies all in one place (metadata) ✅ 3rd party libraries support (providing functionality)

Slide 29

Slide 29 text

kuncevic.dev App Module Root Module

Slide 30

Slide 30 text

kuncevic.dev Disorganized AppModule

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

kuncevic.dev Folders Structure

Slide 35

Slide 35 text

kuncevic.dev Disorganized Folders

Slide 36

Slide 36 text

kuncevic.dev Organized Folders

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

kuncevic.dev Many projects, multiple teams?

Slide 39

Slide 39 text

kuncevic.dev Scale

Slide 40

Slide 40 text

kuncevic.dev Enterprise Solution

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

kuncevic.dev Resources angular.io/guide/architecture angular.io/guide/styleguide#ﬂat 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