FE Architecture

Architecture

What Is our Long-term Plan When Changes are Required?

Organizations which design systems … are constrained to produce designs which are copies of the communication structures of these organizations.

-Melvin Conway

Architecture

In April 1968, Melvin Conway submitted a paper to Harvard Business Review called, “How Do Committees Invent?”

As Conway notes, when technologists break down problems into smaller chunks to delegate they are more succesful

  • Incremental change

  • Fitness functions

  • Appropriate coupling

Angular

Structure:

  • Module
  • Service
  • Component
  • Directive

Module

Grouping unit

different parts of the app are organized into modules

Component

Template and Class

Service

Injectable Class

Directive

Class with access to injectables

Has a selector and may use inputs

doesn't have a template

Angular Connections

Expanding Angular Architecture

  • NGRX
  • Separation of concerns
  • Subdivision of services

NGRX

A state manager that uses RxJs

 

Main concepts:

  • action
  • reducer
  • effect

Redux + RxJS + Angular

Action

What is going to be done
The data that is required to do it

Reducer

What changes on the state

The modifications and operations required to update the state

Effects

Side effects

Actions or functions triggered on certain moments

How it Connects

Separation of concerns

Everyone has its own responsability

Each piece of the application is responsable for a specific part of the proccess, and it is expert at it

Services become experts

Subdivision of services to make a separation of concerns

 

Types of services:

  • component services
  • conectors
  • adapters
  • adapter implementations

Component service

It is in charge of dispatching actions

Connector

It is responsable for the injectable used in the effects

Adapter

It is responsable of the contracts with the conectors

Adapter Implementation

It is responsable of the code used to fulfill an adapter contract

Map of usage

component

service

effect

connector

adapter

implementation

action

calls

dispatches

triggers

calls

uses

is override by

returns

dispatches

reducer

is used by

state

changes

changes

Why?

  • Adaptability

  • Mantainability

  • Separation of concerns

  • Code quality

Disadvantages

  • Complex

  • Dificult to learn

  • More folders

Questions

References

  • https://www.oreilly.com/library/view/building-evolutionary-architectures/9781491986356/ch01.html
  • http://farside.ph.utexas.edu/teaching/301/lectures/node3.html
  • http://www.melconway.com/research/committees.html
  • https://angular.io/guide/architecture

Thank you :D

Made with Slides.com