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
220

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
120
My Front-End Developer Career Path
Avatar for David Dias thedaviddias
0
150
Buy & Sell Contest 2022 - Behind the scenes
Avatar for David Dias thedaviddias
0
24
Web Accessibility fundamentals (for developers)
Avatar for David Dias thedaviddias
0
30
Web Accessibility fundamentals (for qa and product owners)
Avatar for David Dias thedaviddias
0
22
Accessibility - FEDs Team
Avatar for David Dias thedaviddias
1
49
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
61
Tools to develop fast and with efficiency
Avatar for David Dias thedaviddias
1
310

Other Decks in Programming

See All in Programming
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
150
漸進。
Avatar for TOMIKAWA Sotaro ssssota
0
1.7k
Use Perl as Better Shell Script
Avatar for karupanerura karupanerura
0
680
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
Avatar for hatsu hatsu38
1
100
JSAI2025 RecSysChallenge2024 優勝報告
Avatar for kami unonao
1
430
Webからモバイルへ Vue.js × Capacitor 活用事例
Avatar for Naoki Haba naokihaba
0
250
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
Avatar for lni_T lnit
1
150
関数型まつり2025登壇資料「関数プログラミングと再帰」
Avatar for Taison Tsukada taisontsukada
2
590
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
Avatar for moznion moznion
1
130
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
Avatar for Yuuki Tsubouchi (yuuk1) yuukit
3
720
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
990
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
Avatar for kuro kuro_kurorrr
0
100

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
2
110
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
138
7k

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