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
210
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
96
My Front-End Developer Career Path
thedaviddias
0
120
Buy & Sell Contest 2022 - Behind the scenes
thedaviddias
0
22
Web Accessibility fundamentals (for developers)
thedaviddias
0
20
Web Accessibility fundamentals (for qa and product owners)
thedaviddias
0
17
Accessibility - FEDs Team
thedaviddias
1
45
The Front-End Checklist - A tool for meticulous developer
thedaviddias
0
1.4k
Managing International Teams
thedaviddias
0
59
Tools to develop fast and with efficiency
thedaviddias
1
300
Other Decks in Programming
See All in Programming
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Writing documentation can be fun with plugin system
okuramasafumi
0
120
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Ruby on cygwin 2025-02
fd0
0
140
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
時計仕掛けのCompose
mkeeda
1
280
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Into the Great Unknown - MozCon
thekraken
35
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Building Your Own Lightsaber
phodgson
104
6.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How STYLIGHT went responsive
nonsquared
98
5.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fireside Chat
paigeccino
34
3.2k
Thoughts on Productivity
jonyablonski
69
4.5k
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