Pimp My Front

160 vues

Publié le

Apprenez à structurer votre frontend en adoptant une approche composant. Keep calm and follow the lead!

Cette présentation vous montre comment faire évoluer votre vieux codebase en un code propre et pleinement réutilisable.

Conférence donnée au BlendWebMix in Lyon - 29 oct. 2015.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
160
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Pimp My Front

  1. 1. by Lauren! WIESEL I @LWiese| in lwiesel
  2. 2. Hello ! Je suis I: Chef de projet technique] Je travaille chez AR Développement, filiale de Cospirit Nous construisons une application e-commerce BtoB basée sur Symfony Z, en Micraservices + CQRS + DDD I in QLWiesel lwiesel
  3. 3. The Smelly Code
  4. 4. ll Todo: refactor this mess / I Todo2: take over the world
  5. 5. ‘: 5 l | |l~"" x§l. _/ Vlesel i’Jl'EEl
  6. 6. “Le principe du CSS Orienté Objet est de séparer le contenu des contenants et de considérer les blocs de contenus comme des objets réutilisables auxquels nous appliquons un habillage graphique. ” —— Nicole Sullivan
  7. 7. navhancss nIain. Css . na/ bar . . . background-color lightgrey; @irnport ur1( 'navbar. css') fonbsize: 1.2em; @import ur1( 'sidemenu. css') . nav—search float: right; sidelllenu. :55 l , nav—5earch input . s1demenu color white; background-color none; .navbar p a , .s1demenu a font»sty1e: underline; color. cyan; .navbar p a: hover . sidemenu p + p , color- black; margin-top: 2em; @LWiesel lwiesel
  8. 8. // Todo: take over the world Modulariser le CSS l: |l: l|: l|j
  9. 9. ‘X 2. LES PRE-PROCESSEURS
  10. 10. "1.. +.~: _yr'é}Ir'or: r=s~mar: ru ~f. '&‘? 7,‘-: .=ir~mairani 1i7‘= 'lC: r'.1f'= ' dim : ll; ','li_= ‘ ilu'n. i:: lfll lmgmgis ‘f‘1CJi(. =‘ var r: ,o: mi:1:; . c'n'tu_; -zilqnrif _-an ~f‘. '.; ’lr? ; -fivqlrflqliilari -'L': i,‘lI! 'lF‘3.l! l.Viy‘-' -". -'3uI. vi‘r. o~«ci,1‘rqIiTl. c:i1 —«/ klllInllli‘| 'IIH. ~“nll Blend WebMix 2015 - Lyon @LWlese| Iwiesel
  11. 11. Jlavhar. scss $navbar~bg-color $theme-color-1; $navbar~font-size‘ 1.2em; $navbar- sea rch~bg-color inve rt($font-base-color) $navbar-link-color-hover black; , na/ ba r background-color snavbar-bg-color. font-size snavbar-font-size; . nav-search , float right: , nav—scarch input color $navbar-search-bg-color; navbar p a font-style underline; navbar p a: hovcr color black: $sidemenu-bg-color none; fisidemenu-link-color: $theme-color-2; sidemenu background~color ssidemenu-bg—culor, sidcmcnu £1 color $sideInenu-link-color sidememi p A p margin-top, Zem; main . scss $theme-color-1: $theme-color-2. @impo rt settings @impo rt navbar @import sidemenu $font-base~color _sidemenu. scss _settings. scss lightg ray; cyan : black; «; {LIJ_i_ese_l i. ’JlF3SC‘_i
  12. 12. ll Todo: take over the world Modulariser le CSS Améliorer la réutilisabilité du css El El Cl
  13. 13. 3. LA NOMENCLATURE DE CLASSE
  14. 14. “There are only two hard things in Computer Science: cache invalidation and naming things. ” —Martin Fowler
  15. 15. .1 n-Imé-In~: r=. |E: I.I‘'f- El/ =lm Block Element -- Modifier menu . lN€l"lU_ lI: '<l7l . menu_ _l1e: n- -active
  16. 16. $navbar-bg~color' Snavbar-font-size 1.2em; Snavbar-sea rch-bg-color $navbar-sea rch-bg-active~color snavbar-link»color-hover black; . navbar background-color snavbar-bg-color: font-size $navbar-font-size; . navbar_ search float right; . navbar__ scarchlnput color $navbar-search-bg-color; . navbar link font - style underline; navbar, link——activc, .navbar47l1nk: hover color black; stheme-color-1, _navbar. scss inve rt($font-base-color) inve rt ($fnnt—base-color) ssidemenu-bg-color none; $sidemenu-link-color $theme-color-2; . sidemenu backg round-color $sidemenu-bg-color. . sidcrnenu_linK color ssidemenu-link-color. . sidemenu_ item e . sidemenu item margin»top: Zeln; isidemenu. scss maimscss $theme-color-1. $theme-color-2. I1-Jimport settings @impo rt navbar @import sidernenu, Sfont-base-color _settings. scss lightg ray : cyan , black: £~LWI. ese, l Iwlesel
  17. 17. glam: httgs: //en. bem. info ;1mIA-’, i81~? - https: //smacss. com elaifisl-5 httgsz/ /github. com/ rstacruz/ rscss QLWle_se| Iwiesel
  18. 18. // Todo: take over the world Modulariser le CSS Améliorer la réutilisabilité du css Adopter une nomenclature en composants E El
  19. 19. 4. ATOMIC DESIGN
  20. 20. “We ’re not designing pages, we ’re designing systems of components. ” — Stephen Hay on
  21. 21. L'atomic design en 3 niveaux 1. QUARKS Elements HTML purs 2. ATOMES Composants ‘stand-alone’ 3. MOLECULES Composants utilisants d'autres composants
  22. 22. schéma light main . scss _global_sett1ng . scss _global_mixins . scss quarksl I _buttons. scss I _typography. scss I _h_titles. scss components] I _footer. scss I _navbar. scss I _search. scss I _sidemenu. scss I _tabs. scss _—‘fj*‘L_IVI‘:5€I lwiesel
  23. 23. schéma colnplet main. scss _global_setting . scss figlobal_mixins . scss quarksl I _buttons. scss I _typography. scss I _h_titles. scss atomesl I _search. scss I _tabs. scss moleculesl I _navhar. scss I _sidemenu. scss I _footer. scss '. §~‘L_I. 'ge5e1 lwiezsel
  24. 24. Mais | 'Atomic Design n'est pas que pour le CSS !
  25. 25. scnéna ETA complet main. scss _global_setting. scss _g1obal_mixins.5css atoms/ I _buttons. scss I _typography. scss I _h_titles. scss moleculesl I searchl I I _search. scss I I search. html I search. js I I tabs/ I _tabs. scss I tabs. html I tabs. js organisms/ I navbar/ I I _navbar. scss I I navbar. html I I navbar. js I sidemenul I I _sidemenu. scss I I sidemenu. html I footer/
  26. 26. ll Todo: take over the world Modulariser Ie CSS Améliorer la réutilisabilité du css / Adopter une nomenclature en composants Structurer Ie code par niveaux de composants El
  27. 27. 5; W359: ‘fl l, IYl, I,? " ml EiliITl'7l
  28. 28. Webcomponents ? 1. TEMPLATES 2. DECORATORS 3. CUSTOM ELEMENTS 4. SHADOW DOM 5. IMPORTS
  29. 29. will vmlila‘ https: //www. polymer-pro‘ect. org , Alk‘lG| !ll, ,A =4 https: //angularisorg VlllilsiiilflmI? '-'Tlfi| ;lBlR. .*fl: (G http: //webcomponentsorg Wiesel lwiesel
  30. 30. /I Todo: take over the world Modulariser le CSS Améliorer la réutilisabilité du css Adopter une nomenclature en composants Structurer Ie code par niveaux de composants Se preparer pour les webcomponents
  31. 31. HANG IN THERE! there's more. ..AFTER THE PREZ I
  32. 32. ,1 . ‘I. ‘» A . . . ... , . ._na| _ ‘ qr‘ _. §‘. ..—- T‘ _ "‘ l I .112 I I ‘I 21' ' / ‘II . I II l VAN , , FLlJRENCEI~ -~_ _ " "ALntfizA? '|”
  33. 33. by Laurent WIESEL I Qlwiesel in lwiesel

×