Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Front-End Architecture on Multibrand

Avatar for David Dias David Dias
April 22, 2016
Programming
260
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
210
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
57
Web Accessibility fundamentals (for developers)
Avatar for David Dias thedaviddias
0
95
Web Accessibility fundamentals (for qa and product owners)
Avatar for David Dias thedaviddias
0
62
Accessibility - FEDs Team
Avatar for David Dias thedaviddias
1
79
The Front-End Checklist - A tool for meticulous developer
Avatar for David Dias thedaviddias
0
1.6k
Managing International Teams
Avatar for David Dias thedaviddias
0
78
Tools to develop fast and with efficiency
Avatar for David Dias thedaviddias
1
380

Other Decks in Programming

See All in Programming
AWS DevOps Agentで インシデント対応をAIに任せたい
Avatar for HonMarkHunt honmarkhunt
7
2.9k
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
550
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
380
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.5k
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
2.2k
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
280
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
1
460
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
200
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
240
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
Avatar for Riku Sakamoto riku_sakamoto
0
330
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
250
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
110

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
340
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
910
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
410
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
220
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k

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