Front-end architecture
in practice 🔧

#whoami

Charly POLY - Senior Software Engineer at

 


🔗   Writing about Software Eng. on honest.engineering

       Writing about TypeScript and GraphQL on Medium

Fun fact

Fun fact

  • Started to learn JavaScript, 14 years ago, with Prototype
  • JavaScript was a nice way to "mimic" Flash ➡️ animations

JavaScript timeline

1

00'

2

10'

3

20'

Animations era

Interactions era

SPA era

Front-end evolution

JQuery /Prototype
Cross-browsers API
Animations
 
-
-
-
 

3

20'

2

10'

1

00'

Backbone
MVP
Component State management
Templating
 
-
Angular / React
MVV, MV*
Separation of
Concerns
Application State management
modules
DI

Front-end evolution

From animations to apps

3

20'

1

00'

Modern front-end

State management

Crypto

Offline capabilities

Routing

Rendering

PWA

Modern front-end

Modern front-end is Software

Modern front-end is Software

Software Architecture in practice

Technical Roadmap

Guidelines

Software Architecture in practice

Software Architecture in practice

What is a Quality Attribute?

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

Modifiability tactics

Modifiability scenario

Software Architecture in Practice

Quality Attribute sum-up

Quality Attribute = Definition + Tactics + Scenarios

What Quality Attributes for Front-end applications?

  • Modifiability
    Ability to introduce new features, refactor
     
  • Maintainability (Analyzability)
    Ability to onboard new developers, scale the code
     
  • Performance
    User perceived performance
     
  • Portability
    Isomorphism, Browser compatibility, etc ...
     
  • Security

Put Architecture in practice

Product
requirements

Architecture QAs

Technical roadmap

Technical guide

Features updates

New features

Start-up stage
(team size, etc..)

AND /
OR

How to prioritize Quality Attributes

How to prioritize Quality Attributes: Start-up stage

Market-fit

Stage

Garage

Early

Growth

Late

  • Garage - Growth
    Modifiability
     
  • Late
    Maintainability

How to prioritize Quality Attributes: Product

  • Security
     
  • Portability
     
  • Maintainability
     
  • Modifiability
     
  • Maintainability
     
  • Performance
     

Case study: A line front-end architecture

Case study: A line front-end architecture

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

Case study: A line front-end architecture

Build a technical roadmap

Case study: A line front-end architecture

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

Case study: A line front-end architecture

Build technical guidelines

Case study: A line 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

Case study: A line front-end architecture

Guidelines for new development: Components naming convention

Case study: A line front-end architecture

Guidelines for new development: Components naming convention

[Domain]|[Page/Context]|ComponentName|[Type]

Part surrounded by “[]” are optional.

Case study: A line front-end architecture

From redux + REST to GraphQL

Case study: A line front-end architecture

Strategic Debt

Track it!

Redeem it

Introduce it

1

2

3

Case study: A line front-end architecture

Guidelines for new development: REST to GraphQL migration

Case study: A line front-end architecture

Guidelines for new development: REST to GraphQL migration

Case study: A line front-end architecture

Guidelines for new development: REST to GraphQL migration

Conclusion

  • Think architecture, not code
  • Build your roadmap and guidelines by
    using Quality Attributes
  • Architecture good points:
    • clear structure, easier to document
      •  enhance team work, onboarding
    • early prediction of system's qualities
    • can be re-usable

Thanks for listening!

See you at React Europe

🎙️ 🇪🇺

Paris.js #82 - Front-end architecture in practice

By Charly Poly

Paris.js #82 - Front-end architecture in practice

  • 2,249