by Lauren!  WIESEL

I @LWiese| 
in lwiesel
Hello ! Je suis I:  Chef de projet technique]

Je travaille chez AR Développement,  filiale de Cospirit

Nous construisons ...
The Smelly Code
ll Todo:  refactor this mess

/ I Todo2: take over the world
‘:  5 l |  |l~""

 

x§l. _/ Vlesel
i’Jl'EEl
“Le principe du CSS Orienté Objet est de séparer le
contenu des contenants et de considérer les blocs de
contenus comme de...
navhancss nIain. Css

. na/ bar .  . . 

background-color lightgrey;  @irnport ur1( 'navbar. css')

fonbsize:  1.2em;  @im...
//  Todo:  take over the world

Modulariser le CSS

l: |l: l|: l|j
‘X  2. LES PRE-PROCESSEURS
"1.. +.~: _yr'é}Ir'or: r=s~mar: ru ~f. '&‘?  7,‘-: .=ir~mairani 1i7‘= 'lC: r'.1f'= ' dim : ll; ','li_= ‘ ilu'n. i:: 
lfll l...
Jlavhar.  scss

$navbar~bg-color $theme-color-1;
$navbar~font-size‘ 1.2em; 

$navbar- sea rch~bg-color inve rt($font-base-...
ll Todo:  take over the world

Modulariser le CSS

Améliorer la réutilisabilité du css

El
El
Cl
3. LA NOMENCLATURE
DE CLASSE
“There are only two hard things in Computer Science: 

cache invalidation and naming things. ”
—Martin Fowler
.1 n-Imé-In~: r=. |E: I.I‘'f- El/ =lm
Block Element -- Modifier

menu

. lN€l"lU_ lI: '<l7l

. menu_ _l1e: n- -active
$navbar-bg~color'
Snavbar-font-size 1.2em; 
Snavbar-sea rch-bg-color

$navbar-sea rch-bg-active~color
snavbar-link»color-h...
glam:  httgs: //en. bem. info
;1mIA-’, i81~? - https: //smacss. com
elaifisl-5 httgsz/ /github. com/ rstacruz/ rscss

QLWl...
//  Todo:  take over the world

Modulariser le CSS

Améliorer la réutilisabilité du css
Adopter une nomenclature en compos...
4. ATOMIC DESIGN
“We ’re not designing pages, 

we ’re designing systems of components.  ”
— Stephen Hay on
L'atomic design en 3 niveaux

1. QUARKS
Elements HTML purs

2. ATOMES
Composants ‘stand-alone’

3. MOLECULES
Composants ut...
schéma light
main .  scss

_global_sett1ng .  scss
_global_mixins .  scss

quarksl
I _buttons. scss
I _typography. scss
I ...
schéma colnplet

main. scss

_global_setting .  scss
figlobal_mixins .  scss

quarksl
I _buttons. scss
I _typography. scss
...
Mais
| 'Atomic Design

n'est pas que

pour le CSS !
scnéna ETA complet

main. scss
_global_setting. scss
_g1obal_mixins.5css

atoms/ 
I _buttons. scss
I _typography. scss
I _...
ll Todo:  take over the world

Modulariser Ie CSS
Améliorer la réutilisabilité du css
/ 

Adopter une nomenclature en comp...
5; W359: ‘fl l, IYl, I,? " ml EiliITl'7l
Webcomponents ? 

1. TEMPLATES

2. DECORATORS

3. CUSTOM ELEMENTS
4. SHADOW DOM

5. IMPORTS
will vmlila‘ https: //www. polymer-pro‘ect. org

, Alk‘lG| !ll, ,A =4 https: //angularisorg
VlllilsiiilflmI? '-'Tlfi| ;lBlR...
/I Todo:  take over the world

Modulariser le CSS
Améliorer la réutilisabilité du css

Adopter une nomenclature en composa...
HANG IN THERE! 

there's more. ..AFTER THE PREZ I
,1
.  ‘I.  ‘»
A . . . ... , . ._na|  _
‘ qr‘  _.  §‘. ..—-
T‘ _ "‘ l

I .112 I I ‘I

21' ' /  

‘II .  I  II
 l

VAN ,  , ...
by Laurent WIESEL

I Qlwiesel
in lwiesel
Pimp My Front
Pimp My Front
Prochain SlideShare
Chargement dans…5
×

Pimp My Front

149 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
149
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
1
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

×