Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-End Architecture on Multibrand

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for David Dias David Dias
April 22, 2016
Programming
250
0

Front-End Architecture on Multibrand

Avatar for David Dias

David Dias

April 22, 2016

More Decks by David Dias

See All by David Dias
Tailwind CSS - Transitioning Away from Styled Components
Avatar for David Dias thedaviddias
0
190
My Front-End Developer Career Path
Avatar for David Dias thedaviddias
0
200
Buy & Sell Contest 2022 - Behind the scenes
Avatar for David Dias thedaviddias
0
53
Web Accessibility fundamentals (for developers)
Avatar for David Dias thedaviddias
0
80
Web Accessibility fundamentals (for qa and product owners)
Avatar for David Dias thedaviddias
0
52
Accessibility - FEDs Team
Avatar for David Dias thedaviddias
1
76
The Front-End Checklist - A tool for meticulous developer
Avatar for David Dias thedaviddias
0
1.5k
Managing International Teams
Avatar for David Dias thedaviddias
0
74
Tools to develop fast and with efficiency
Avatar for David Dias thedaviddias
1
370

Other Decks in Programming

See All in Programming
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
120
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
650
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
180
OSもどきOS
Avatar for Sora Arakawa arkw
0
480
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
390
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
140
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
910
LLMによるContent Moderationの本番運用の裏側と品質担保への挑戦
Avatar for suikabar suikabar
2
520
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
230
Copilot CLI の継戦能力を高める コンテキスト管理
Avatar for Nozomuts nozomutu
1
1.2k
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
700
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
250

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.4k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
160
Done Done
Avatar for chrislema chrislema
186
16k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
250
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1.1k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
600
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
44k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
400

Transcript

  1. The Front-End architecture on Multibrand David Dias - Front-End architect

    April 2016 / Proximity BBDO Indian Ocean

  2. front-end Architecture is important...

  3. ... and it's not just about HTML and CSS.

  4. We faced daily a lot of challenges

  5. Accessibility SEO Quality Performance Maintainability *Browser compatibility

  6. Martin Golding « Always code as if the guy who

    ends up maintaining your code will be a violent psychopath who knows where you live. »

  7. But in 2013, we faced a new challenge (at that

    time, lot of new tools come out into the front-end world)

  8. Build few projects with same code base?

  9. None

  10. We decide to use the best of the front-end technologies

  11. None
  12. None

  13. First, we needed to automate tasks To work better, faster

    and maintain the code...

  14. 2015 2013 2016 +

  15. None

  16. - 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 - ...

  17. Extend the possibilities of simple HTML files

  18. PUG

  19. None

  20. PUG (jade) HTML

  21. Dynamise our CSS files

  22. None

  23. CSS culture • Strong nomenclature: c- (component), l- (layout), u-

    (utility)... • CSS guidelines rules • Based on OOCSS, SMACSS and BEM

  24. Modularize all the JS files

  25. 2015 2014 2016

  26. None

  27. Bring NODE.js advantages to the browser (Modularity, NPM import packages...)

  28. None

  29. A day with a FRONT-END

  30. specifications wireframes technical documentation creatives (+ styleguide)

  31. creative analysis and feedbacks creation component / page styling and

    dynamise regression testing

  32. How we see the futur? (next weeks)

  33. new RULES

  34. ECMAScript 6 A bright new future is coming...

  35. None

  36. more MODULARITY

  37. HTML (Pug) + CSS (PostCSS) + JS (React.js?) = ONE

    component / ONE folder
  38. None
  39. None

  40. 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

  41. component A + component B.1 + component C component A1

    + component B + component C3 Article page styleguide Static page
  42. None

  43. more AUTOMATION

  44. Replace manual FTP update with continuous integration

  45. None

  46. more TESTING / QUALITY

  47. JavaScript Unit Testing

  48. None

  49. Demos

  50. Questions?

  51. Thank you Obrigado Merci