Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Componenti, pattern e altre robette non semplicissime da gestire

Componenti, pattern e altre robette non semplicissime da gestire

Lavorare in un mondo di componenti è complesso. Tool, framework e design pattern l'hanno reso più accessibile, ma c'è ancora un passaggio che non è gestibile tramite codice: quand'è che un componente diventa un componente? Che valore semantico ha un pattern e come se ne riusa uno in uno scenario leggermente diverso, senza invalidare il concetto stesso di "pattern"?
Un talk che non si propone come soluzione, ma come guida per porre l'attenzione su un problema e capire cosa cerchiamo di fare quando ci sembra di martellare formine triangolari o quadrate in buchi evitendemente rotondi.

Marco Cedaro

March 15, 2019
Tweet

More Decks by Marco Cedaro

Other Decks in Programming

Transcript

  1. Modular
    architecture

    View full-size slide

  2. Modular architecture
    Classi e
    componenti

    View full-size slide

  3. Modular architecture
    classi e
    Componenti
    e modificatori

    View full-size slide

  4. Modular architecture
    classes and
    Componenti,
    modificatori
    e override

    View full-size slide

  5. Modular architecture
    classi,
    modificatori
    and override
    Componenti, 

    pattern e altre robette
    non semplicissime da
    gestire

    View full-size slide

  6. @cedmax
    Webmaster
    before it was cool

    Tech Lead 

    Condé Nast International

    View full-size slide

  7. Componenti,
    pattern e altre
    robette non
    semplicissime da
    gestire

    View full-size slide

  8. o… di come sono riuscito a dare un senso a Lost in Translation
    Componenti,
    pattern e altre
    robette non
    semplicissime da
    gestire

    View full-size slide

  9. Basically
    Lost in Translation?

    View full-size slide

  10. “This movie is an hour and some
    odd minutes of my life I will never
    get back.”
    JoeB. Su Metacritic
    Disclaimer

    View full-size slide

  11. “Meaning is complex and often gets
    lost in translation. Everybody has
    their own mental model of things”
    Alla Kholmatova
    Lost in Translation

    View full-size slide

  12. Modular design

    View full-size slide

  13. Atomic design
    Brad Frost · Ottobre 2013

    View full-size slide

  14. Web components
    annunciati nel Novembre 2011

    View full-size slide

  15. 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

    View full-size slide

  16. SLIDE MANCANTE* SULLE

    PATTERN LIBRARIES
    * di proposito, ve lo giuro

    View full-size slide

  17. 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

    View full-size slide

  18. ReactJS
    Rilascio: March 2013

    View full-size slide

  19. Buongiorno, caffè?

    View full-size slide

  20. Basically
    Inquadrare il problema

    View full-size slide

  21. 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

    View full-size slide

  22. 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?

    View full-size slide

  23. 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?

    View full-size slide

  24. Wish I could sleep

    View full-size slide

  25. 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)

    View full-size slide

  26. Iniettare
    le classi
    I'll be in the bar for the rest of the week

    View full-size slide

  27. className="content-actions__button"
    iconId="close"
    />

    View full-size slide

  28. className="content-actions__button"
    iconId="close"
    />

    View full-size slide

  29. //_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;
    }
    }
    }

    View full-size slide

  30. //_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;
    }
    }
    }

    View full-size slide

  31. //_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?

    View full-size slide

  32. //_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?

    View full-size slide

  33. Si tratta del modo più flessibile di
    gestire eccezioni
    Cosa funziona

    View full-size slide

  34. Cosa decisamente no
    1. Gli stili originali possono essere
    sovrascritti in modi inaspettati.
    2. Creiamo un numero indefinito di
    varianti dei pattern disponibili.

    View full-size slide

  35. - You're too tall.

    - Anybody ever tell you you may be too small?
    Modificatori
    ad hoc

    View full-size slide

  36. className="dialog--user-intent">


    View full-size slide

  37. className="dialog--user-intent">


    View full-size slide

  38. //_dialog.scss
    .dialog {
    //[...]
    &--user-intent {
    width: 43.75rem;
    height: auto;
    }
    }

    View full-size slide

  39. //_dialog.scss
    .dialog {
    //[...]
    &--user-intent {
    width: 43.75rem;
    height: auto;
    }
    }

    View full-size slide

  40. //_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?

    View full-size slide

  41. Questa pratica permette una discreta
    flessibilità, offrendo controllo e
    mantendendo le varianti co-locate nel
    codice.
    Cosa funziona

    View full-size slide

  42. 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

    View full-size slide

  43. Pattern
    specializzati
    I'm special

    View full-size slide

  44. className="dialog--prompt">


    View full-size slide

  45. className="dialog--prompt">


    View full-size slide

  46. //_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;
    }
    }

    View full-size slide

  47. //_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

    View full-size slide

  48. I pattern sono al centro della
    conversazione: non si tratta di casi
    speciali, ma di versioni predefinite dei
    componenti base.
    Cosa funziona

    View full-size slide

  49. Cosa decisamente no
    1. Potrebbe portare ad astrarre troppo
    presto
    2. Copre un numero ridotto di eccezioni

    View full-size slide

  50. type="prompt" />
    className="dialog--prompt">



    View full-size slide

  51. 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

    View full-size slide

  52. Basically
    Sono bloccato

    View full-size slide

  53. Non è così semplice
    “It isn’t really that simple”
    Alla Kholmatova · June 2015

    View full-size slide

  54. Il problema
    Come facciamo a riutilizzare i nostri
    pattern quando l'use case è un po'
    diverso?

    View full-size slide

  55. Cosa sto
    cercando di
    risolvere?

    View full-size slide

  56. Posizionamento
    nel parent
    component

    View full-size slide

  57. className="game-intent__dialog">




    View full-size slide

  58. className="game-intent__dialog">




    View full-size slide

  59. //_dialog.scss
    .dialog {
    width: 100%;
    height: 100%;
    //[...]
    }
    //_game-intent.scss
    .game-intent {
    //[...]
    &__dialog {
    width: 43.75rem;
    height: auto;
    }
    }

    View full-size slide

  60. //_dialog.scss
    .dialog {
    width: 100%;
    height: 100%;
    //[...]
    }
    //_game-intent.scss
    .game-intent {
    //[...]
    &__dialog {
    width: 43.75rem;
    height: auto;
    }
    }
    Ogni component ha le
    sue responsabilità

    View full-size slide

  61. Questa pratica definisce
    responsabilità precise in modo chairo
    e crea la possibilità di avere
    implementazioni specifiche senza
    invalidare i pattern.
    Cosa funziona

    View full-size slide

  62. className="custom-class">




    className="custom-class">


    View full-size slide

  63. Cosa decisamente no
    Si creano una serie di wrapper che non
    sarebbero serviti altrimenti.

    View full-size slide

  64. Posizionamento
    in relazione ad
    altri componenti

    View full-size slide

  65. className="space-max inner-space-min">


    View full-size slide

  66. className="space-max inner-space-min">


    View full-size slide

  67. Riduce la necessità di inventarsi nuove
    classi e sposta la conversazione sui
    rapporti tra gli elementi a livello di
    pattern library.
    Cosa funziona

    View full-size slide

  68. Cosa decisamente no
    1. Le classi "posizionali" potrebbero
    diventare obsolete se non codificate
    appropriatamente nella pattern library
    2. La flessibilità è limitata.
    3. Classi semantiche?

    View full-size slide

  69. Componenti 

    "aperti"

    View full-size slide

  70. //_question-content-block.scss
    .question-content-block {
    //[...]
    &__icon-button {
    //[...]
    .icon {
    width: $content-block-icon-large-size;
    height: $content-block-icon-large-size;
    }
    }

    View full-size slide

  71. //_question-content-block.scss
    .question-content-block {
    //[...]
    &__icon-button {
    //[...]
    .icon {
    width: $content-block-icon-large-size;
    height: $content-block-icon-large-size;
    }
    }

    View full-size slide

  72. //_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;
    }
    }

    View full-size slide

  73. //_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;
    }
    }

    View full-size slide

  74. //_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

    View full-size slide

  75. 1. Ogni componente base può essere
    flessibile quanto necessario.
    2. Gli sviluppatori hanno controllo rispetto a
    quali "specializzazioni" offrire.
    Cosa funziona

    View full-size slide

  76. 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?

    View full-size slide

  77. Basically
    Does it get easier?

    View full-size slide

  78. The more you know who you are and what
    you want, the less you let things upset you

    View full-size slide

  79. I just don't know what I'm supposed to be

    View full-size slide

  80. “A common language is
    a first step towards
    communication across
    cultural boundaries. ”
    Ethan Zuckerman

    View full-size slide

  81. Il problema
    Come facciamo a riutilizzare i nostri
    pattern quando l'use case è un po'
    diverso?

    View full-size slide

  82. Il problema
    Come capire – ed espiremere – il
    significato di un'eccezione nei
    pattern?

    View full-size slide

  83. Cercando ci capire cosa 

    si sta costruendo

    View full-size slide

  84. Facendosi coinvolgere prima

    View full-size slide