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
230
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
120
My Front-End Developer Career Path
thedaviddias
0
150
Buy & Sell Contest 2022 - Behind the scenes
thedaviddias
0
24
Web Accessibility fundamentals (for developers)
thedaviddias
0
31
Web Accessibility fundamentals (for qa and product owners)
thedaviddias
0
22
Accessibility - FEDs Team
thedaviddias
1
49
The Front-End Checklist - A tool for meticulous developer
thedaviddias
0
1.5k
Managing International Teams
thedaviddias
0
61
Tools to develop fast and with efficiency
thedaviddias
1
310
Other Decks in Programming
See All in Programming
Gleamという選択肢
comamoca
6
670
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
490
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
280
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.3k
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
2.9k
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
3
320
XSLTで作るBrainfuck処理系
makki_d
0
180
20250528 AWS Startupイベント登壇資料:AIコーディングの取り組み
procrustes5
0
160
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
440
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
200
イベントストーミングから始めるドメイン駆動設計
jgeem
4
800
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
4 Signs Your Business is Dying
shpigford
183
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
For a Future-Friendly Web
brad_frost
179
9.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Experiences People Love
moore
142
24k
Optimizing for Happiness
mojombo
379
70k
A Tale of Four Properties
chriscoyier
159
23k
Practical Orchestrator
shlominoach
188
11k
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