Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-End Architecture on Multibrand
Search
David Dias
April 22, 2016
Programming
0
240
Front-End Architecture on Multibrand
David Dias
April 22, 2016
Tweet
Share
More Decks by David Dias
See All by David Dias
Tailwind CSS - Transitioning Away from Styled Components
thedaviddias
0
140
My Front-End Developer Career Path
thedaviddias
0
170
Buy & Sell Contest 2022 - Behind the scenes
thedaviddias
0
33
Web Accessibility fundamentals (for developers)
thedaviddias
0
43
Web Accessibility fundamentals (for qa and product owners)
thedaviddias
0
32
Accessibility - FEDs Team
thedaviddias
1
56
The Front-End Checklist - A tool for meticulous developer
thedaviddias
0
1.5k
Managing International Teams
thedaviddias
0
64
Tools to develop fast and with efficiency
thedaviddias
1
330
Other Decks in Programming
See All in Programming
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Developer Joy - The New Paradigm
hollycummins
1
290
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
CSC305 Lecture 09
javiergs
PRO
0
280
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
190
iOSでSVG画像を扱う
kishikawakatsumi
0
140
AkarengaLT vol.38
hashimoto_kei
1
110
XP, Testing and ninja testing ZOZ5
m_seki
3
780
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
モテるデスク環境
mozumasu
3
140
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
320
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
6.3k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
We Have a Design System, Now What?
morganepeng
53
7.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Building Applications with DynamoDB
mza
96
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The Pragmatic Product Professional
lauravandoore
36
7k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Docker and Python
trallard
46
3.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Transcript
The Front-End architecture on Multibrand David Dias - Front-End architect
April 2016 / Proximity BBDO Indian Ocean
front-end Architecture is important...
... and it's not just about HTML and CSS.
We faced daily a lot of challenges
Accessibility SEO Quality Performance Maintainability *Browser compatibility
Martin Golding « Always code as if the guy who
ends up maintaining your code will be a violent psychopath who knows where you live. »
But in 2013, we faced a new challenge (at that
time, lot of new tools come out into the front-end world)
Build few projects with same code base?
None
We decide to use the best of the front-end technologies
None
None
First, we needed to automate tasks To work better, faster
and maintain the code...
2015 2013 2016 +
None
- Build fonts: convert icons in SVG to .ttf, .woff,
.eot webfonts - Build images: optimize all layout's images (performance) - Dev reload: reload automatically the page after modifications - Dev js: concatenate and minify all JavaScript files - ...
Extend the possibilities of simple HTML files
PUG
None
PUG (jade) HTML
Dynamise our CSS files
None
CSS culture • Strong nomenclature: c- (component), l- (layout), u-
(utility)... • CSS guidelines rules • Based on OOCSS, SMACSS and BEM
Modularize all the JS files
2015 2014 2016
None
Bring NODE.js advantages to the browser (Modularity, NPM import packages...)
None
A day with a FRONT-END
specifications wireframes technical documentation creatives (+ styleguide)
creative analysis and feedbacks creation component / page styling and
dynamise regression testing
How we see the futur? (next weeks)
new RULES
ECMAScript 6 A bright new future is coming...
None
more MODULARITY
HTML (Pug) + CSS (PostCSS) + JS (React.js?) = ONE
component / ONE folder
None
None
page.psd component A.psd component B.psd component C.psd component A.pug component
B.pug component C.pug + css + js + css + js + css + js styleguide Score - Sitecore
component A + component B.1 + component C component A1
+ component B + component C3 Article page styleguide Static page
None
more AUTOMATION
Replace manual FTP update with continuous integration
None
more TESTING / QUALITY
JavaScript Unit Testing
None
Demos
Questions?
Thank you Obrigado Merci