LHCb upgrade Electronics Architecture Review General Architecture & Front-end
Front end architecture
-
Upload
remus-constantin-langu -
Category
Software
-
view
195 -
download
0
Transcript of Front end architecture
![Page 1: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/1.jpg)
FRONT-END ARCHITECTURE
REMUS LANGUQUALITY. PRODUCTIVITY. INNOVATION.
![Page 2: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/2.jpg)
AGENDA
Role
ToolsProcesses
JS
Architecture
CSS
Architecture
![Page 3: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/3.jpg)
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
![Page 4: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/4.jpg)
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
![Page 5: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/5.jpg)
Separation of Concerns
![Page 6: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/6.jpg)
HTML Markup
![Page 7: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/7.jpg)
CSS Architecture
![Page 8: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/8.jpg)
BEM
Block Element Modifier
![Page 9: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/9.jpg)
OOCSS
Object-Oriented CSS
Separatestructure from skin
Separatecontainer from content
![Page 10: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/10.jpg)
1. Base2. Layout3. Module4. State5. Theme
SMACSS
Scalable and Modular Architecture
for CSSTheme
![Page 11: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/11.jpg)
Inverted Triangle CSS Architecture
![Page 12: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/12.jpg)
JavaScript Architecture
![Page 13: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/13.jpg)
Patterns
Model-View-ControllerModel-View-ViewmodelModel-View-Presenter
Presentation-Abstraction-Control
Event-Driven Architecture
![Page 14: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/14.jpg)
Abstractions
Clie
nt
Ser
ver
Endpoints
UI Component
Template Rendering
Server Interaction
State Management
CommunicationComponent
UI Component
Component
![Page 15: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/15.jpg)
Template Rendering
DataModel UI
DOM
TemplateFunction
change
![Page 16: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/16.jpg)
State Management
DataModel
Change Detection
![Page 17: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/17.jpg)
No state changesServer-Side Rendering
State changesManual Re-rendering
DataModel
UIDOM 1
UIDOM 2
DataModel
UIDOM
?
![Page 18: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/18.jpg)
Data BindingModels push updates
Dirty CheckingViews pull updates
UIDOM
DataModel
DataModel
UIDOM
Watchers
![Page 19: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/19.jpg)
Virtual DOMState pushed to view
Immutable & Persistent data structures
DataModel
VirtualDOM
VirtualDOM
UIDOM
Diff
= Om+
DataModel
VirtualDOM
VirtualDOM
UIDOM
DiffReuses
![Page 20: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/20.jpg)
Polyglot Architecture
![Page 21: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/21.jpg)
T3
Minimalist framework for building large-scale
applications
![Page 22: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/22.jpg)
Tools and Processes
![Page 23: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/23.jpg)
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
![Page 24: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/24.jpg)
Q & A
![Page 25: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/25.jpg)
Remus LanguDesign Lead
+40 743 426 760
remus.constantin.langu
QUALITY. PRODUCTIVITY. INNOVATION.
Thank you!
![Page 26: Front end architecture](https://reader031.fdocuments.in/reader031/viewer/2022021919/5884d2cf1a28ab767c8b6989/html5/thumbnails/26.jpg)
Front-End ArchitecturePractice