Software Architecture
in practice 👷

Plan

  • Why Architecture is good?
  • Architecture Quality Attributes
  • The Algolia Core API Example
  • Apply QAs to front-end architecture
  • What's next?

Why Architecture is good?

  • We are here to solve problems
  • Architecture solutions strong points:
    • clear structure, easier to document
      •  enhance team work, on-boarding
    • early prediction of system's qualities
    • can be re-usable

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

Performance Quality Attribute is the key

Software Architecture in Practice p.135

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

What's next?

  • Those are thing that we, in part,
    already know
     
  • Discover more Quality Attributes?
     
  • Think Architecture!
Made with Slides.com