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
130
My Front-End Developer Career Path
thedaviddias
0
160
Buy & Sell Contest 2022 - Behind the scenes
thedaviddias
0
27
Web Accessibility fundamentals (for developers)
thedaviddias
0
34
Web Accessibility fundamentals (for qa and product owners)
thedaviddias
0
25
Accessibility - FEDs Team
thedaviddias
1
52
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
320
Other Decks in Programming
See All in Programming
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
240
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
iOS開発スターターキットの作り方
akidon0000
0
170
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
970
Jakarta EE Meets AI
ivargrimstad
0
260
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
690
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
14k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building Adaptive Systems
keathley
43
2.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing Experiences People Love
moore
142
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
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