Starting a new frontend application project, we usually ask ourselves questions like: Which framework should we use? Do we even need a framework? Which technologies and approaches should we choose this time to create the perfect application? Unfortunately, there is no clear-cut answer to the above question, but there are certain patterns and factors that can help us make the right choices. In the presentation, I will take you on a journey through the architectural drivers of the frontend. Zero theory, only practical examples from the experience of a Frontend Architect.

1. xebia.com
Marcin Milewicz
Principal Developer, Frontend
Architect in Xebia
Architectural drivers in
modern frontend
development

2. xebia.com
New project…,
New adventure…,
New me…

3. xebia.com
Let’s choose
fancy frontend
framework
ASAP!

4. xebia.com
…and add as
technologies
as possible

5. xebia.com
…or start
doing it
correctly!

6. xebia.com
Stop doing HDD, let's talk
about software
development
* HDD – Hype Driven Development

7. xebia.com
Software
development is
about real
problem solving

8. xebia.com
#1 Ask and listen business, try
to understand and familiarize
yourself with the backlog

9. xebia.com
Time to
market
User
Feedback
and
Adaptability
Branding
and
Aesthetic
Business fit
Internationali
zation (i18n)
Localization
(L10n)
Budget
Stakeholder
concerns

10. xebia.com
Functional
requirements
User
Interactions
Data
Presentation
Integration
Points
Offline
capabilities
Navigation
Content
Management
Other parts
of the system
API
Data type
Interaction
characteristics

11. xebia.com
Constraints
Browser
Compatibility
Device
Compatibility
Developer
Skillset
Team
Building and
Scaling
Regulatory &
Compliance
In-house
Technology
Pre-existing
Technology
Stack
Adaptability
on User
Feedback
Market
Trends
Competition
Economic
Factors
Developer
Community
& Ecosystem

12. xebia.com
#2 Determine the non-
functional needs, present
alternatives instead of asking
about priorities

13. xebia.com
Scalability
Testability
Accessibility Resiliency Security
Usability
Extensibility
Performance
Maintainability
Auditability
Flexibility &
Adaptability
Quality Attributes
Portability

14. xebia.com
#3 Understanding drivers is
the starting point to making
architectural choices

15. xebia.com
Architecture
Pattern
SSR SSG
SPA
PWA
Microfrontends
Principles of Frontend
Architecture

16. xebia.com
Architecture
Pattern
SSR SSG
SPA
PWA
Microfrontends
User Interface &
User-centered
Design
Design
System
Principles of Frontend
Architecture

17. xebia.com
Architecture
Pattern
SSR SSG
SPA
PWA
Microfrontends
Principles of Frontend
Architecture
Consistency
Technology
Consistency
Ubiquitous
language
Domain
Consistency
User Interface &
User-centered
Design
Design
System

18. xebia.com
Architecture
Pattern
SSR SSG
SPA
PWA
Microfrontends
Principles of Frontend
Architecture
Consistency
Technology
Consistency
Ubiquitous
language
Domain
Consistency
User Interface &
User-centered
Design
Design
System
Tools
Building
tools and
processes
Frameworks
Libraries
Feedback
loop tooling

19. xebia.com
Complex
Frontend Logic
Architecture
Pattern
Tools
Separation of
concerns
Building
tools and
processes
Frameworks
SSR
Layering
Code
Conventions
State
Management
& Data Flow
Modularity
SSG
SPA
PWA
Microfrontends
Libraries
Feedback
loop tooling
Principles of Frontend
Architecture
Consistency
Technology
Consistency
Ubiquitous
language
Domain
Consistency
User Interface &
User-centered
Design
Design
System

20. xebia.com
Decisions in Frontend Architecture
• Time dependent
• Always have trade-offs
• Written in ADR, not in stone

21. xebia.com
Let’s summarize
takeaways!

22. xebia.com
#1 Ask and listen business, try
to understand and familiarize
yourself with the backlog

23. xebia.com
#2 Determine the non-
functional needs, present
alternatives instead of asking
about priorities

24. xebia.com
#3 Understanding drivers is
the starting point to making
architectural choices

25. xebia.com
Let’s
LinkedIn!
Q&A Marcin Milewicz @Xebia
Principal Developer / Frontend Architect
Google Developer Expert (Web Technologies)
www.marcinmilewicz.pl