The document discusses front-end architecture, which aims to improve code quality and create an efficient workflow. It outlines the responsibilities of a front-end architect in designing tools and processes. Some common front-end architecture patterns and principles are explained, like separation of concerns, CSS architectures (BEM, OOCSS, SMACSS), JavaScript architectures (MVC, MVP, MVVM), and abstractions (components, templates, state management). Tools and processes for building, testing, deploying code are also covered.

1. FRONT-ENDARCHITECTURE
REMUS LANGU
QUALITY. PRODUCTIVITY. INNOVATION.

2. AGENDA
Role
Tools
Processes
JS
Architecture
CSS
Architecture

3. FRONT-END ARCHITECTURE
is a collection of
tools and processes
that aims to improve the
quality of our front-end code
while creating a more efficient
and sustainable workflow.
Micah
Godbolt

4. The
FRONT-END ARCHITECT
Responsibilities
Makes Decisions
Designs, Plans and Oversees
FacilitatesTools and Processes
Keeps up to date on technologies
Enforces Quality
ManagesTechnical Debt

5. Separation of Concerns

6. HTML Markup

7. CSS Architecture

8. BEM
Block Element Modifier

9. OOCSS
Object-OrientedCSS
Separate
structure from skin
Separate
container from content

10. 1. Base
2. Layout
3. Module
4. State
5. Theme
SMACSS
Scalable and Modular
Architecture
for CSS
Theme

11. InvertedTriangle CSS
Architecture

12. JavaScript Architecture

13. Patterns
Model-View-Controller
Model-View-Viewmodel
Model-View-Presenter
Presentation-Abstraction-Control
Event-Driven Architecture

14. Abstractions
ClientServer
Endpoints
UI
Component
Template
Rendering
Server Interaction
State Management
Communication
Component
UI
Component
Component

15. Template Rendering
Data
Model UI
DOM
Template
Function
change

16. State Management
Data
Model
Change
Detection

17. No state changes
Server-Side Rendering
State changes
Manual Re-rendering
Data
Model
UI
DOM 1
UI
DOM 2
Data
Model
UI
DOM
?

18. Data Binding
Models push updates
Dirty Checking
Views pull updates
UI
DOM
Data
Model
Data
Model
UI
DOM
Watchers

19. Virtual DOM
State pushed to view
Immutable & Persistent
data structures
Data
Model
Virtual
DOM
Virtual
DOM
UI
DOM
Diff
= Om+
Data
Model
Virtual
DOM
Virtual
DOM
UI
DOM
DiffReuses

20. Polyglot Architecture

21. T3
Minimalist framework
for building large-scale
applications

22. Tools and Processes

23. Test Build
Preprocessing
Concatination
Minify
Optimize
Images
Other tasks
Scaffolding
Application Structure
and Boilerplate
Manage
Dependencies
libs &
frameworks
Search
Packages
Download
Packages
Dependency
Management
Deploy
Code
Business Logic
Develop
Watch
Source Files
Preprocessing
Lint JS/CSS
Live Reload
Build System

24. Q & A

25. Remus Langu
Design Lead
remus.langu@endava.com
+40 743 426 760
remus.constantin.langu
code_quality_practice@endava.com
QUALITY. PRODUCTIVITY. INNOVATION.
Thank you!

26. Front-End Architecture
Practice