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

@whereischarly

Fun fact

@whereischarly

Fun fact

@whereischarly

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

JavaScript timeline

@whereischarly

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

@whereischarly

Front-end evolution

@whereischarly

From animations to apps

3

20'

1

00'

Modern front-end

@whereischarly

State management

Crypto

Offline capabilities

Routing

Rendering

PWA

Modern front-end

@whereischarly

Modern front-end is Software

Modern front-end is Software

@whereischarly

Software Architecture in practice

Technical Roadmap

Guidelines

Software Architecture in practice

@whereischarly

Software Architecture in practice

@whereischarly

What is a Quality Attribute?

@whereischarly

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

@whereischarly

Modifiability scenario

@whereischarly

Software Architecture in Practice

Quality Attribute sum-up

@whereischarly

Quality Attribute = Definition + Tactics + Scenarios

What Quality Attributes for Front-end applications?

@whereischarly

  • 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

@whereischarly

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

@whereischarly

How to prioritize Quality Attributes: Start-up stage

@whereischarly

Market-fit

Stage

Garage

Early

Growth

Late

  • Garage - Growth
    Modifiability
     
  • Late
    Maintainability

How to prioritize Quality Attributes: Product

@whereischarly

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

Case study: A line front-end architecture

@whereischarly

Case study: A line front-end architecture

@whereischarly

  • 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

@whereischarly

Build a technical roadmap

Case study: A line front-end architecture

@whereischarly

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

@whereischarly

Build technical guidelines

Case study: A line front-end architecture

@whereischarly

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

@whereischarly

Guidelines for new development: Components naming convention

Case study: A line front-end architecture

@whereischarly

Guidelines for new development: Components naming convention

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

Part surrounded by “[]” are optional.

Case study: A line front-end architecture

@whereischarly

From redux + REST to GraphQL

Case study: A line front-end architecture

@whereischarly

Strategic Debt

Track it!

Redeem it

Introduce it

1

2

3

Case study: A line front-end architecture

@whereischarly

Guidelines for new development: REST to GraphQL migration

Case study: A line front-end architecture

@whereischarly

Guidelines for new development: REST to GraphQL migration

Case study: A line front-end architecture

@whereischarly

Guidelines for new development: REST to GraphQL migration

Conclusion

@whereischarly

  • 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!


🔗  honest.engineering
@whereischarly

 /wittydeveloper

See you at React Europe

🎙️ 🇪🇺

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

By Charly Poly

Made with Slides.com

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

  • 2,362

More from Charly Poly