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
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
人には人それぞれのサービス層がある
shimabox
3
640
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
130
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
830
Blueskyのプラグインを作ってみた
hakkadaikon
1
450
無関心の谷
kanayannet
0
140
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
21
5.7k
Parallel::Pipesの紹介
skaji
2
900
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
350
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
3
310
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
570
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
720
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.3k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
4 Signs Your Business is Dying
shpigford
183
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Agile that works and the tools we love
rasmusluckow
329
21k
A designer walks into a library…
pauljervisheath
205
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Facilitating Awesome Meetings
lara
54
6.4k
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