Angular Architecture.

Gentle introduction

@nikpoltoratsky

By Nikita Poltoratsky

@nikpoltoratsky

@nikpoltoratsky

@nikpoltoratsky

  • High-level Architecture
    • What is architecture?
    • Why do we need it?
    • Clean Architecture
  • Files Structure
    • monorepos
    • nx
    • feature based structure
  • Choose Tooling Wisely (story of misused NGRX)

Agenda

@nikpoltoratsky

@nikpoltoratsky

High Level Architecture

@nikpoltoratsky

What is Architecture?

@nikpoltoratsky

What is Architecture?

Архитектура - набор правил, который позволяет техническому решению быть гибким, безопасным и надежным.

@nikpoltoratsky

Why we need Architecture?

@nikpoltoratsky

Why we need Architecture?

@nikpoltoratsky

Logic is an issue

- Hexagonal Architecture
- Onion Architecture
- Screaming Architecture

- Clean Architecture
- Data, context and interaction
- Boundary Control Entity Architecture
- etc.

@nikpoltoratsky

Approaches to Architecture

@nikpoltoratsky

But all approaches are similar 😅

Separation of concerns

@nikpoltoratsky

Separation of concerns

  1. MV* patterns

  2. NgRx

  3. etc.

@nikpoltoratsky

MVC

@nikpoltoratsky

NgRx

@nikpoltoratsky

But all approaches are similar 😅

Layers

@nikpoltoratsky

Layers

@nikpoltoratsky

Layers

@nikpoltoratsky

Why?

@nikpoltoratsky

  1. Independent of (UI, DB, External agencies, tools and so on)

  2. Testable

  3. Reduce coupling

Why?

@nikpoltoratsky

Clean Architecture 🥳

@nikpoltoratsky

Robert Cecil Martin (Uncle Bob)

@nikpoltoratsky

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Clean Architecture

@nikpoltoratsky

Presentation

@nikpoltoratsky

Domain

@nikpoltoratsky

Entities

@nikpoltoratsky

Use Cases

@nikpoltoratsky

Data

@nikpoltoratsky

Dependency Rule

@nikpoltoratsky

Dependency Rule

@nikpoltoratsky

So, Why do we need it?

  1. Easier to add new functionality
  2. Reusable logic
  3. Easier to test
  4. Easier to modify !!!
  5. Easier to change parts of the system

@nikpoltoratsky

You may not need it

@nikpoltoratsky

Лучше красивый, хорошо работающий код, чем архитектурное спагетти с соусом из недопонимания.

You may not need it

@nikpoltoratsky

@nikpoltoratsky

File Structure

Monorepos

@nikpoltoratsky

Monorepos

@nikpoltoratsky

Pros

  • Simple code reuse
  • Atomic commits
  • Easy dependency management

Simple code reuse

@nikpoltoratsky

Atomic commits

@nikpoltoratsky

Atomic commits

@nikpoltoratsky

Easy dependency management

@nikpoltoratsky

Easy dependency management

Angular V 7

Angular V 6

Angular V 8

+

+

+

=

PAIN

@nikpoltoratsky

Easy dependency management

Angular V 8

Angular V 8

Angular V 8

+

+

+

=

happiness

@nikpoltoratsky

Cons

  • It’s easy to introduce tight coupling

Monorepo for the great good

@nikpoltoratsky

It’s easy to introduce tight coupling

@nikpoltoratsky

@nikpoltoratsky

Nx

Nx - dealing with tight coupling

{
  "nx-enforce-module-boundaries": [
    true,
    {
      "allow": [],
      "depConstraints": [
        {
          "sourceTag": "ui-components",
          "onlyDependOnLibsWithTags": ["ui-components"]
        },
        {
          "sourceTag": "admin",
          "onlyDependOnLibsWithTags": ["ui-components", "admin"]
        },
        {
          "sourceTag": "client",
          "onlyDependOnLibsWithTags": ["ui-components", "client"]
        },
        {
          "sourceTag": "*",
          "onlyDependOnLibsWithTags": ["*"]
        }
      ]
    }
  ]
}

@nikpoltoratsky

@nikpoltoratsky

Feature Based Structure

@nikpoltoratsky

Not Feature Based

@nikpoltoratsky

Feature Based

@nikpoltoratsky

Feature Based

|-- app.component.ts
|-- app.module.ts
|-- app-routing.module.ts

|-- feature-1

|-- feature-2

|-- feature-3

|-- feature-4

@nikpoltoratsky

Feature Based

|-- auth

|-- |-- state

|-- |-- layout

|-- |-- login

|-- |-- register

|-- |-- restore-password

@nikpoltoratsky

Flat File structure

@nikpoltoratsky

Flat File structure

|-- auth

|-- |-- state

|-- |-- layout

|-- |-- login

|-- |-- register

|-- |-- restore-password

|-- |-- password-input

|-- |-- loader-button

@nikpoltoratsky

Shared code

@nikpoltoratsky

Shared code

|-- core
|-- -- [+] authentication
|-- -- [+] footer
|-- -- [+] guards
|-- -- [+] http
|-- -- [+] interceptors
|-- -- [+] mocks
|-- -- [+] services
|-- -- [+] header
|-- -- core.module.ts
|-- -- logger.service.ts

@nikpoltoratsky

  1. SharedModule

  2. CoreModule

  3. Utils

  4. Common

  5. Misc

Shared code

@nikpoltoratsky

Shared code

@nikpoltoratsky

Shared code

|-- core
|-- -- [+] authentication
|-- -- [+] footer
|-- -- [+] guards
|-- -- [+] http
|-- -- [+] interceptors
|-- -- [+] mocks
|-- -- [+] services
|-- -- [+] header
|-- -- core.module.ts
|-- -- logger.service.ts

|-- auth
|-- layout

|-- logger
|-- etc....

@nikpoltoratsky

@nikpoltoratsky

Choose tooling wisely 🤓

@nikpoltoratsky

Angular is Strict Framework

Choose tooling wisely

@nikpoltoratsky

  1. State management​
  2. Charts
  3. Maps
  4. UI Components
  5. Animations
  6. Drag'n'Drop
  7. etc.

Choose tooling wisely

Story about NgRx

@nikpoltoratsky

@nikpoltoratsky

What is NgRx

NgRx everywhere!

@nikpoltoratsky

NgRx

NgRx Everywhere!

NgRx everywhere!

@nikpoltoratsky

NgRx everywhere!

@nikpoltoratsky

NgRx everywhere!

@nikpoltoratsky

Refactoring

NgRx with facades!

@nikpoltoratsky

Behavior Subjects!

@nikpoltoratsky

@nikpoltoratsky

What we learned

  1. Learn Architecture Approaches
  2. App structure
  3. Choose tools wisely
  4. Learn from others
  5. Learn other frameworks
  6. Learn other technologies (backend, mobile)

@nikpoltoratsky

The End!

Thank you for your time!

@nikpoltoratsky

https://t.me/angularbelarus

@nikpoltoratsky

Questions?

Made with Slides.com