front end architecture
TRANSCRIPT
FRONT-END ARCHITECTURE
REMUS LANGUQUALITY. PRODUCTIVITY. INNOVATION.
AGENDA
Role
ToolsProcesses
JS
Architecture
CSS
Architecture
FRONT-END ARCHITECTUREis a collection of
tools and processesthat aims to improve the
quality of our front-end code while creating a more efficient
and sustainable workflow.Micah Godbolt
TheFRONT-END ARCHITECT
Responsibilities
Makes Decisions
Designs, Plans and Oversees
Facilitates Tools and Processes
Keeps up to date on technologies
Enforces Quality
Manages Technical Debt
Separation of Concerns
HTML Markup
CSS Architecture
BEM
Block Element Modifier
OOCSS
Object-Oriented CSS
Separatestructure from skin
Separatecontainer from content
1. Base2. Layout3. Module4. State5. Theme
SMACSS
Scalable and Modular Architecture
for CSSTheme
Inverted Triangle CSS Architecture
JavaScript Architecture
Patterns
Model-View-ControllerModel-View-ViewmodelModel-View-Presenter
Presentation-Abstraction-Control
Event-Driven Architecture
Abstractions
Clie
nt
Ser
ver
Endpoints
UI Component
Template Rendering
Server Interaction
State Management
CommunicationComponent
UI Component
Component
Template Rendering
DataModel UI
DOM
TemplateFunction
change
State Management
DataModel
Change Detection
No state changesServer-Side Rendering
State changesManual Re-rendering
DataModel
UIDOM 1
UIDOM 2
DataModel
UIDOM
?
Data BindingModels push updates
Dirty CheckingViews pull updates
UIDOM
DataModel
DataModel
UIDOM
Watchers
Virtual DOMState pushed to view
Immutable & Persistent data structures
DataModel
VirtualDOM
VirtualDOM
UIDOM
Diff
= Om+
DataModel
VirtualDOM
VirtualDOM
UIDOM
DiffReuses
Polyglot Architecture
T3
Minimalist framework for building large-scale
applications
Tools and Processes
Test Build
Preprocessing
Concatination
Minify
Optimize Images
Other tasks
Scaffolding
Application Structureand Boilerplate
ManageDependencies
libs & frameworks
Search Packages
Download Packages
DependencyManagement
DeployCode
Business Logic
Develop
WatchSource Files
Preprocessing
Lint JS/CSS
Live Reload
Build System
Q & A
Remus LanguDesign Lead
+40 743 426 760
remus.constantin.langu
QUALITY. PRODUCTIVITY. INNOVATION.
Thank you!
Front-End ArchitecturePractice