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
230

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
130
My Front-End Developer Career Path
Avatar for David Dias thedaviddias
0
160
Buy & Sell Contest 2022 - Behind the scenes
Avatar for David Dias thedaviddias
0
31
Web Accessibility fundamentals (for developers)
Avatar for David Dias thedaviddias
0
40
Web Accessibility fundamentals (for qa and product owners)
Avatar for David Dias thedaviddias
0
30
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
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
890
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
Avatar for Andrey Chernov inetand
0
2.4k
請來的 AI Agent 同事們在寫程式時，怎麼用 pytest 去除各種幻想與盲點
Avatar for Keith Yang keitheis
0
120
プロポーザル駆動学習 / Proposal-Driven Learning
Avatar for mackey0225 mackey0225
2
1.3k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
Avatar for Tomoya Miwa tomoya0x00
0
3.2k
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
Avatar for teamLab teamlab
PRO
1
130
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
Avatar for Iury Souza iurysza
0
140
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
280
アプリの "かわいい" を支えるアニメーションツールRiveについて
Avatar for 上ちょ / uetyo uetyo
0
270
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
Avatar for Tetta Noguchi tetta_pdnt
0
3.3k
今だからこそ入門する Server-Sent Events (SSE)
Avatar for NearMeの技術発表資料です nearme_tech
PRO
3
240
go test -json そして testing.T.Attr / Kyoto.go #63
Avatar for utagawa kiki utgwkk
3
310

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k

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