Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Modular
architecture
Slide 3
Slide 3 text
Modular architecture
Classi e
componenti
Slide 4
Slide 4 text
Modular architecture
classi e
Componenti
e modificatori
Slide 5
Slide 5 text
Modular architecture
classes and
Componenti,
modificatori
e override
Slide 6
Slide 6 text
Modular architecture
classi,
modificatori
and override
Componenti,
pattern e altre robette
non semplicissime da
gestire
Slide 7
Slide 7 text
@cedmax
Webmaster
before it was cool
Tech Lead
Condé Nast International
Slide 8
Slide 8 text
Componenti,
pattern e altre
robette non
semplicissime da
gestire
Slide 9
Slide 9 text
o… di come sono riuscito a dare un senso a Lost in Translation
Componenti,
pattern e altre
robette non
semplicissime da
gestire
Slide 10
Slide 10 text
Basically
Lost in Translation?
Slide 11
Slide 11 text
“This movie is an hour and some
odd minutes of my life I will never
get back.”
JoeB. Su Metacritic
Disclaimer
Slide 12
Slide 12 text
“Meaning is complex and often gets
lost in translation. Everybody has
their own mental model of things”
Alla Kholmatova
Lost in Translation
Slide 13
Slide 13 text
Modular design
Slide 14
Slide 14 text
2013 - 2015
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Atomic design
Brad Frost · Ottobre 2013
Slide 17
Slide 17 text
Web components
annunciati nel Novembre 2011
Slide 18
Slide 18 text
Pattern Library
“Pattern libraries are something I do
a lot for client projects. […]
It’s a
technique I first saw […]
Natalie Downe
develop for client projects back in
2009”
Anna Debenham
Slide 19
Slide 19 text
SLIDE MANCANTE* SULLE
PATTERN LIBRARIES
* di proposito, ve lo giuro
Slide 20
Slide 20 text
Pattern Library
“Pattern libraries are something I do
a lot for client projects. […]
It’s a
technique I first saw […]
Natalie Downe
develop for client projects back in
2009”
Anna Debenham
Slide 21
Slide 21 text
ReactJS
Rilascio: March 2013
Slide 22
Slide 22 text
Buongiorno, caffè?
Slide 23
Slide 23 text
Basically
Inquadrare il problema
Slide 24
Slide 24 text
Non è così semplice
“When you actually try to apply a
modular approach to your day to
day work, it isn’t really that simple”
Alla Kholmatova · June 2015
Slide 25
Slide 25 text
Il problema
Slide 26
Slide 26 text
Il problema
Come organizziamo il nostro
codice, per permetter il riutilizzo di
pattern senza che siano troppo
rigidi per il lavoro di tutti i giorni?
Slide 27
Slide 27 text
Il problema
Come gestiamo il nostro codice, per permetter il
riutilizzo di pattern senza che siano troppo rigidi
per il lavoro di tutti i giorni?
Come facciamo a riutilizzare i nostri
pattern quando l'use case è un po'
diverso?
Slide 28
Slide 28 text
Wish I could sleep
Slide 29
Slide 29 text
NON si tratta di un problema legato a un
framework o a uno stack specifico: molti degli
approcci possono essere applicati con BEM, style
component o css modules indifferentemente
Rigurda la modularità nella sua essenza
Riguarda la responsabilità dei moduli
Rigurda la manutenibilità del codice
(tra le altre cose)
Slide 30
Slide 30 text
Iniettare
le classi
I'll be in the bar for the rest of the week
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Slide 33
Slide 33 text
Slide 34
Slide 34 text
//_content-actions.scss
.content-actions {
//[...]
&__button {
flex: 1 0 auto;
padding: 1rem;
line-height: 1.5;
&:hover, &:focus {
background: $grey-1;
}
&:active {
background: $grey-2;
}
}
}
Slide 35
Slide 35 text
//_content-actions.scss
.content-actions {
//[...]
&__button {
flex: 1 0 auto;
padding: 1rem;
line-height: 1.5;
&:hover, &:focus {
background: $grey-1;
}
&:active {
background: $grey-2;
}
}
}
Slide 36
Slide 36 text
//_content-actions.scss
.content-actions {
//[...]
&__button {
flex: 1 0 auto;
padding: 1rem;
line-height: 1.5;
&:hover, &:focus {
background: $grey-1;
}
&:active {
background: $grey-2;
}
}
}
Quali effetti ha sul
componente base?
Slide 37
Slide 37 text
//_content-actions.scss
.content-actions {
//[...]
&__button {
flex: 1 0 auto;
padding: 1rem;
line-height: 1.5;
&:hover, &:focus {
background: $grey-1;
}
&:active {
background: $grey-2;
}
}
}
Perché questo bottone
è diverso da quelli nella
pattern library?
Slide 38
Slide 38 text
Si tratta del modo più flessibile di
gestire eccezioni
Cosa funziona
Slide 39
Slide 39 text
Cosa decisamente no
1. Gli stili originali possono essere
sovrascritti in modi inaspettati.
2. Creiamo un numero indefinito di
varianti dei pattern disponibili.
Slide 40
Slide 40 text
- You're too tall.
- Anybody ever tell you you may be too small?
Modificatori
ad hoc
Slide 41
Slide 41 text
Slide 42
Slide 42 text
Slide 43
Slide 43 text
//_dialog.scss
.dialog {
//[...]
&--user-intent {
width: 43.75rem;
height: auto;
}
}
Slide 44
Slide 44 text
//_dialog.scss
.dialog {
//[...]
&--user-intent {
width: 43.75rem;
height: auto;
}
}
Slide 45
Slide 45 text
//_dialog.scss
.dialog {
//[...]
&--wizard {
width: 43.75rem;
height: 35rem;
}
&--game-intent {
width: 43.75rem;
height: auto;
}
&--save-results {
width: 23.75rem;
height: auto;
}
}
Quante varianti
dobbiamo considerare?
Slide 46
Slide 46 text
Questa pratica permette una discreta
flessibilità, offrendo controllo e
mantendendo le varianti co-locate nel
codice.
Cosa funziona
Slide 47
Slide 47 text
Cosa decisamente no
1. Le definizioni generiche dei
componenti hanno "nozione" delle
implementazioni specifiche
2. Le dimensioni del css aumentano a
causa di codice inutilizzato
3. Non scala
Slide 48
Slide 48 text
Pattern
specializzati
I'm special
Slide 49
Slide 49 text
Slide 50
Slide 50 text
Slide 51
Slide 51 text
//_dialog.scss
.dialog {
//[...]
&--prompt {
display: block;
overflow: hidden;
max-width: map-get($dialog-prompt, max-width);
height: auto;
margin: map-get($dialog-prompt, margin);
padding: 2rem 0 0;
border-radius: 3px;
}
}
Slide 52
Slide 52 text
//_dialog.scss
.dialog {
//[...]
&--prompt {
display: block;
overflow: hidden;
max-width: map-get($dialog-prompt, max-width);
height: auto;
margin: map-get($dialog-prompt, margin);
padding: 2rem 0 0;
border-radius: 3px;
}
}
Il valore semantico dei
pattern è molto diverso
da quello dei
modificatori ad hoc
Slide 53
Slide 53 text
I pattern sono al centro della
conversazione: non si tratta di casi
speciali, ma di versioni predefinite dei
componenti base.
Cosa funziona
Slide 54
Slide 54 text
Cosa decisamente no
1. Potrebbe portare ad astrarre troppo
presto
2. Copre un numero ridotto di eccezioni
Slide 55
Slide 55 text
Slide 56
Slide 56 text
I still wish I could sleep
Decisamente da
evitare: rende di
fatto inutile il
concetto di pattern
library
Un "code smell": si
tratta di un hack e
andrebbe trattato
come tale
Uno degli approcci
fin qui migliori,
seppur limitato
Iniettare
le classi
Modificatori
ad hoc
Pattern
specializzati
Slide 57
Slide 57 text
Basically
Sono bloccato
Slide 58
Slide 58 text
Non è così semplice
“It isn’t really that simple”
Alla Kholmatova · June 2015
Slide 59
Slide 59 text
Il problema
Come facciamo a riutilizzare i nostri
pattern quando l'use case è un po'
diverso?
Slide 60
Slide 60 text
Cosa sto
cercando di
risolvere?
Slide 61
Slide 61 text
Posizionamento
nel parent
component
Slide 62
Slide 62 text
Slide 63
Slide 63 text
Slide 64
Slide 64 text
//_dialog.scss
.dialog {
width: 100%;
height: 100%;
//[...]
}
//_game-intent.scss
.game-intent {
//[...]
&__dialog {
width: 43.75rem;
height: auto;
}
}
Slide 65
Slide 65 text
//_dialog.scss
.dialog {
width: 100%;
height: 100%;
//[...]
}
//_game-intent.scss
.game-intent {
//[...]
&__dialog {
width: 43.75rem;
height: auto;
}
}
Ogni component ha le
sue responsabilità
Slide 66
Slide 66 text
Questa pratica definisce
responsabilità precise in modo chairo
e crea la possibilità di avere
implementazioni specifiche senza
invalidare i pattern.
Cosa funziona
Slide 67
Slide 67 text
Slide 68
Slide 68 text
Cosa decisamente no
Si creano una serie di wrapper che non
sarebbero serviti altrimenti.
Slide 69
Slide 69 text
Posizionamento
in relazione ad
altri componenti
Slide 70
Slide 70 text
Slide 71
Slide 71 text
Slide 72
Slide 72 text
Riduce la necessità di inventarsi nuove
classi e sposta la conversazione sui
rapporti tra gli elementi a livello di
pattern library.
Cosa funziona
Slide 73
Slide 73 text
Cosa decisamente no
1. Le classi "posizionali" potrebbero
diventare obsolete se non codificate
appropriatamente nella pattern library
2. La flessibilità è limitata.
3. Classi semantiche?
Slide 74
Slide 74 text
Componenti
"aperti"
Slide 75
Slide 75 text
//_question-content-block.scss
.question-content-block {
//[...]
&__icon-button {
//[...]
.icon {
width: $content-block-icon-large-size;
height: $content-block-icon-large-size;
}
}
Slide 76
Slide 76 text
//_question-content-block.scss
.question-content-block {
//[...]
&__icon-button {
//[...]
.icon {
width: $content-block-icon-large-size;
height: $content-block-icon-large-size;
}
}
Slide 77
Slide 77 text
//_question-content-block.scss
.question-content-block {
//[...]
&__icon-button {
//[...]
@include icon-size($content-block-icon-medium-size);
}
}
//_icon.scss
@mixin icon-size($size) {
.icon {
width: $size;
height: $size;
}
}
Slide 78
Slide 78 text
//_question-content-block.scss
.question-content-block {
//[...]
&__icon-button {
//[...]
@include icon-size($content-block-icon-medium-size);
}
}
//_icon.scss
@mixin icon-size($size) {
.icon {
width: $size;
height: $size;
}
}
Slide 79
Slide 79 text
//_question-content-block.scss
.question-content-block {
//[...]
&__icon-button {
//[...]
@include icon-size($content-block-icon-medium-size);
}
}
//_icon.scss
@mixin icon-size($size) {
.icon {
width: $size;
height: $size;
}
}
La responsabilità di
"essere flessibile" è del
componente stesso
Slide 80
Slide 80 text
Slide 81
Slide 81 text
1. Ogni componente base può essere
flessibile quanto necessario.
2. Gli sviluppatori hanno controllo rispetto a
quali "specializzazioni" offrire.
Cosa funziona
Slide 82
Slide 82 text
Cosa decisamente no
1. É una tecnica più complessa delle altre
2. Rischi di prendere una brutta piega
3. Come si può definire un componente
"open" in una pattern library?
Slide 83
Slide 83 text
Basically
Does it get easier?
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
The more you know who you are and what
you want, the less you let things upset you
Slide 86
Slide 86 text
I just don't know what I'm supposed to be
Slide 87
Slide 87 text
“A common language is
a first step towards
communication across
cultural boundaries. ”
Ethan Zuckerman
Slide 88
Slide 88 text
Il problema
Come facciamo a riutilizzare i nostri
pattern quando l'use case è un po'
diverso?
Slide 89
Slide 89 text
Il problema
Come capire – ed espiremere – il
significato di un'eccezione nei
pattern?
Slide 90
Slide 90 text
Cercando ci capire cosa
si sta costruendo
Slide 91
Slide 91 text
Facendosi coinvolgere prima