Front-end architecture
in practice 🔧
#whoami
Charly POLY - Senior Software Engineer at
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5043686/algolia-white-logo_3x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075490/5841c47ba6515b1e0ad75aa3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5818300/pasted-from-clipboard.png)
Fun fact
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5790581/pasted-from-clipboard.png)
Fun fact
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
- Started to learn JavaScript, 14 years ago, with Prototype
- JavaScript was a nice way to "mimic" Flash ➡️ animations
JavaScript timeline
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
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 |
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Front-end evolution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
From animations to apps
3
20'
1
00'
Modern front-end
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
State management
Crypto
Offline capabilities
Routing
Rendering
PWA
Modern front-end
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Modern front-end is Software
Modern front-end is Software
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Software Architecture in practice
Technical Roadmap
Guidelines
Software Architecture in practice
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075386/software_architecture_in_practice.jpg)
Software Architecture in practice
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5815389/pasted-from-clipboard.png)
What is a Quality Attribute?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075395/software-architecture-in-practice-chapter-7-8-638.jpg)
Modifiability scenario
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Software Architecture in Practice
Quality Attribute sum-up
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Quality Attribute = Definition + Tactics + Scenarios
What Quality Attributes for Front-end applications?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
-
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
How to prioritize Quality Attributes: Start-up stage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Market-fit
Stage
Garage
Early
Growth
Late
-
Garage - Growth
Modifiability
-
Late
Maintainability
How to prioritize Quality Attributes: Product
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5815425/pasted-from-clipboard.png)
-
Security
-
Portability
-
Maintainability
-
Modifiability
-
Maintainability
-
Performance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5815430/pasted-from-clipboard.png)
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
-
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Build a technical roadmap
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Build technical guidelines
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Guidelines for new development: Components naming convention
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5815444/pasted-from-clipboard.png)
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/4735936/Screen_Shot_2018-03-23_at_15.37.01.png)
Guidelines for new development: Components naming convention
[Domain]|[Page/Context]|ComponentName|[Type] Part surrounded by “[]” are optional.
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
From redux + REST to GraphQL
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Strategic Debt
Track it!
Redeem it
Introduce it
1
2
3
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Guidelines for new development: REST to GraphQL migration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5815450/pasted-from-clipboard.png)
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Guidelines for new development: REST to GraphQL migration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5815454/pasted-from-clipboard.png)
Case study: A line front-end architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
Guidelines for new development: REST to GraphQL migration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5815460/pasted-from-clipboard.png)
Conclusion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
- 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
- clear structure, easier to document
Thanks for listening!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075490/5841c47ba6515b1e0ad75aa3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/245259/images/5075491/580b57fcd9996e24bc43c53e.png)
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,104