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

Front-End Architecture on Multibrand

Avatar for David Dias David Dias
April 22, 2016
Programming
0
240

Front-End Architecture on Multibrand

Avatar for David Dias

David Dias

April 22, 2016
Tweet

More Decks by David Dias

See All by David Dias
Tailwind CSS - Transitioning Away from Styled Components
Avatar for David Dias thedaviddias
0
140
My Front-End Developer Career Path
Avatar for David Dias thedaviddias
0
170
Buy & Sell Contest 2022 - Behind the scenes
Avatar for David Dias thedaviddias
0
33
Web Accessibility fundamentals (for developers)
Avatar for David Dias thedaviddias
0
43
Web Accessibility fundamentals (for qa and product owners)
Avatar for David Dias thedaviddias
0
32
Accessibility - FEDs Team
Avatar for David Dias thedaviddias
1
56
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
64
Tools to develop fast and with efficiency
Avatar for David Dias thedaviddias
1
330

Other Decks in Programming

See All in Programming
Flutterで分数(Fraction)を表示する方法
Avatar for kouki.miura koukimiura
0
140
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
290
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
410
CSC305 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
280
なぜGoのジェネリクスはこの形なのか？ - Featherweight Goが明かす設計の核心
Avatar for QualiArts qualiarts
0
190
iOSでSVG画像を扱う
Avatar for Kishikawa Katsumi kishikawakatsumi
0
140
AkarengaLT vol.38
Avatar for hashimoto-kei hashimoto_kei
1
110
XP, Testing and ninja testing ZOZ5
Avatar for seki at druby.org m_seki
3
780
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
180
モテるデスク環境
Avatar for mozumasu mozumasu
3
140
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
Avatar for uMa uma31
0
320
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
15
6.3k

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
600
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k

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