Software Architecture
in practice 👷

Architecture Quality Attributes

A Quality Attribute (QA) is a measurable or testable property of a system that is used to indicate how well the system satisfies the needs of its stakeholders

Software Architecture in Practice, p.63

Architecture Quality Attributes

Software Architecture in Practice, p.194

Architecture Scenario

Software Architecture in Practice

Modifiability Tactics

Software Architecture in Practice

Quality Attributes recap

Quality Attribute

Scenario

Tactics

Design

Algolia Core API example

Performance is key

Julien Lemoine in #SousLeCapot

Algolia Core API example

Software Architecture in Practice

Algolia Core API example

Software Architecture in Practice

Product
requirements +
constraints

Architecture QAs

Technical roadmap

Technical guide

Features updates

New features

Apply QAs to front-end architecture

A example of front-end architecture

• Modifiability
  Ability to introduce new features, refactor
   
• Maintainability
  Ability to onboard new developers, scale the code
   
• Performance
  User perceived performance

Build a technical roadmap

• TypeScript with types missing everywhere
  ❌ Modifiability, Maintainability ➡️ type everything!
• REST API, local custom redux cache
  ❌ Performance ➡️ GraphQL migration
• Components with bad naming
  ❌ Maintainability ➡️ better naming
• Complex generic class based components
  ❌ Modifiability, Maintainability ➡️ refactor
• Complex generic "models" with cache system
  ❌ Modifiability, Maintainability ➡️ refactor

A example of front-end architecture

Guidelines for new development

➡️ Enhance Modifiability, so :
reduce module size, increase cohesion and reduce coupling

- Components naming convention

- Redux as event-bus to defer binding of components

- Components refactoring to follow SRP principles

- Data HoC in order to prepare GraphQL migration

A example of front-end architecture