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
Front end architecture
By Mateo Restrepo Restrepo
Front end architecture
- 181