front end architecture

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

remus.langu@endava.com

+40 743 426 760

remus.constantin.langu

code_quality_practice@endava.com

QUALITY. PRODUCTIVITY. INNOVATION.

Thank you!

Front-End ArchitecturePractice