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
200
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
84
My Front-End Developer Career Path
thedaviddias
0
110
Buy & Sell Contest 2022 - Behind the scenes
thedaviddias
0
22
Web Accessibility fundamentals (for developers)
thedaviddias
0
19
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
290
Other Decks in Programming
See All in Programming
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.2k
103 Early Hints
sugi_0000
1
320
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
210
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
490
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
8
1.8k
Compose UIテストを使った統合テスト
hiroaki404
0
120
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
130
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.6k
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
270
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
0
150
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
6
1.3k
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
360
Featured
See All Featured
It's Worth the Effort
3n
183
28k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Writing Fast Ruby
sferik
628
61k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
1
150
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
112
50k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
171
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Code Reviewing Like a Champion
maltzj
521
39k
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