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
220
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
30
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
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
150
漸進。
ssssota
0
1.7k
Use Perl as Better Shell Script
karupanerura
0
680
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
100
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
430
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
250
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
150
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
590
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
720
Using AI Tools Around Software Development
inouehi
0
990
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
100
Featured
See All Featured
Bash Introduction
62gerente
614
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What's in a price? How to price your products and services
michaelherold
245
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Raft: Consensus for Rubyists
vanstee
138
7k
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