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
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
55
Web Accessibility fundamentals (for developers)
Avatar for David Dias thedaviddias
0
88
Web Accessibility fundamentals (for qa and product owners)
Avatar for David Dias thedaviddias
0
56
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.5k
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
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
180
AIを紡ぐPMのお話
Avatar for swdtkuy swdtkuy
0
110
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
630
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
280
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
550
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.8k
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
220
引き算の組織 ― アウトカムとAIに全振りするために辞めたこと ― / Organization by Subtraction
Avatar for ヤマモトヒロキ hirokiyamamoto14
PRO
0
160
freeeにおけるEvalsの実践例の紹介
Avatar for freee freee
PRO
0
120
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
1
140
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
Avatar for Kanaru kanaru0928
0
230
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
750

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Done Done
Avatar for chrislema chrislema
186
16k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
400
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
610
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
240
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
490
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
280
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
240

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