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

Tu chiamalo se vuoi EmotionJS

Tu chiamalo se vuoi EmotionJS

Nella lotta ai vari modi di scrivere CSS, tra gemme ruby e utility atomiche, io ho trovato il mio vincitore. EmotionJS è un tool CSS-in-JS che permette in semplicità di scrivere 'stile in linea' e trasformarlo 'automagicamente' in classi univoche. Con un sacco di idee prese dai concorrenti come styled component, pieno supporto a TypeScript e un ecosistema ormai maturo, vedremo un paio di use case e come mai lo reputo il vincitore... per ora. Perché altri concorrenti come Vanilla-Extract potrebbero presto prendere il suo posto.

Davide Di Pumpo

April 01, 2022
Tweet

More Decks by Davide Di Pumpo

Other Decks in Technology

Transcript

  1. Tu chiamalo se vuoi EmotionJs

    View full-size slide

  2. Chi sono
    Mi trovate ovunque col nick:
    @makhbeth
    Frontend @Tot.money
    CSS enthusiast
    Father of one
    (the best one)

    View full-size slide

  3. Questo non è un talk su EmotionJS!
    È un viaggio che include EmotionJS!

    View full-size slide

  4. Agenda
    1. Intro - già fatta
    2. Come mai? - ma soprattutto perché?
    3. Cos'è? - oltre al readme c'è di più
    4. Trick AND treats!
    5. È tutto oro quello che luccica?- lessons learned
    6. Cosa c'è lì fuori? - il prossimo tool!

    View full-size slide

  5. Let's start now!

    View full-size slide

  6. Come mai?
    Era il marzo del 2020!

    View full-size slide

  7. E niente
    Stavo per diventare papà!

    View full-size slide

  8. La tua vita finirà

    View full-size slide

  9. TEMPO PER UN SIDE
    PROJECT!!!1!

    View full-size slide

  10. Piccolo guaio a Porta Romana

    View full-size slide

  11. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    6
    6
    7
    7
    8
    8
    9
    9
    10
    10
    11
    11
    12
    12
    13
    13
    14
    14
    15
    15
    16
    16
    17
    17
    18
    18
    19
    19
    20
    20
    21
    21
    22
    22
    23
    23
    export
    export const
    const neutral
    neutral:
    : Colors
    Colors =
    = {
    {



    main
    main:
    : {
    {



    lowest
    lowest:
    : '#1FB8A1'
    '#1FB8A1',
    ,



    low
    low:
    : '#70EEDB'
    '#70EEDB',
    ,



    neutral
    neutral:
    : '#28EBCD'
    '#28EBCD',
    ,



    }
    },
    ,



    neutral
    neutral:
    : {
    {



    lowest
    lowest:
    : '#202020'
    '#202020',
    ,



    low
    low:
    : '#202020'
    '#202020',
    ,



    neutral
    neutral:
    : '#DEDEDE'
    '#DEDEDE',
    ,



    high
    high:
    : '#F7F7F7'
    '#F7F7F7',
    ,



    highest
    highest:
    : '#ffffff'
    '#ffffff',
    ,



    }
    },
    ,



    skin
    skin:
    : {
    {



    lowest
    lowest:
    : '#BA926F'
    '#BA926F',
    ,



    low
    low:
    : '#F3DCBC'
    '#F3DCBC',
    ,



    neutral
    neutral:
    : '#FFEEDC'
    '#FFEEDC',
    ,



    accent
    accent:
    : '#EDA6B4'
    '#EDA6B4',
    ,



    }
    },
    ,



    accent
    accent:
    : {
    {



    neutral
    neutral:
    : '#F6D65D'
    '#F6D65D',
    ,



    low
    low:
    : '#CCAA3E'
    '#CCAA3E',
    ,



    }
    }



    View full-size slide

  12. Questo è un lavoro per...
    Css in JS

    View full-size slide

  13. Perchè tra tutti EmotionJS?

    View full-size slide

  14. There are only two hard things in Computer Science: cache
    invalidation and naming things.
    -- Phil Karlton

    View full-size slide

  15. 1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    10
    10



    11
    11



    12
    12



    const
    const style
    style =
    = css
    css`
    `



    color
    color:
    : pink
    pink;
    ;



    padding
    padding:
    : 1
    1rem
    rem;
    ;



    justify-content
    justify-content:
    : center
    center;
    ;



    align-items
    align-items:
    : center
    center;
    ;



    font-weight
    font-weight:
    : bold
    bold;
    ;



    font-size
    font-size:
    : 3
    3rem
    rem;
    ;



    `
    `



    const
    const element
    element =
    = document
    document.
    .createElement
    createElement(
    ("div"
    "div")
    )



    element
    element.
    .innerText
    innerText =
    = "CSS DAY!!!"
    "CSS DAY!!!"



    element
    element.
    .classList
    classList.
    .add
    add(
    (style
    style)
    )



    document
    document.
    .body
    body.
    .appendChild
    appendChild(
    (element
    element)
    )
    CSS DAY!!!

    View full-size slide

  16. 1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    10
    10



    11
    11



    <
    div



    className
    className=
    ={
    {css
    css`
    `



    color
    color:
    : pink
    pink;
    ;



    padding
    padding:
    : 1
    1rem
    rem;
    ;



    justify-content
    justify-content:
    : center
    center;
    ;



    align-items
    align-items:
    : center
    center;
    ;



    font-weight
    font-weight:
    : bold
    bold;
    ;



    font-size
    font-size:
    : 3
    3rem
    rem;
    ;



    `
    `}
    }>
    >



    CSS DAY!!!
    CSS DAY!!!




    div>
    >
    CSS DAY!!!

    View full-size slide

  17. 1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    10
    10



    11
    11



    12
    12



    <
    div



    className
    className=
    ={
    {css
    css`
    `



    label
    label:
    : CSSDAY
    CSSDAY;
    ;



    color
    color:
    : pink
    pink;
    ;



    padding
    padding:
    : 1
    1rem
    rem;
    ;



    justify-content
    justify-content:
    : center
    center;
    ;



    align-items
    align-items:
    : center
    center;
    ;



    font-weight
    font-weight:
    : bold
    bold;
    ;



    font-size
    font-size:
    : 3
    3rem
    rem;
    ;



    `
    `}
    }>
    >



    CSS DAY!!!
    CSS DAY!!!




    div>
    >
    CSS DAY!!!

    View full-size slide

  18. 1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    const
    const CSSDAY
    CSSDAY =
    = css
    css`
    `...
    ...`
    `



    <
    div



    className
    className=
    ={
    {CSSDAY
    CSSDAY}
    }>
    >



    CSS DAY!!!
    CSS DAY!!!




    div>
    >
    CSS DAY!!!

    View full-size slide

  19. Il senso non era non dare un nome alle cose?
    Ma c'è un plugin per tutto!
    https://emotion.sh/docs/@emotion/babel-plugin#labelformat
    const
    const brownStyles
    brownStyles =
    = css
    css(
    ({
    { color
    color:
    : 'brown'
    'brown' }
    })
    )

    const
    const brownStyles
    brownStyles =
    = /*#__PURE__*/
    /*#__PURE__*/ css
    css(
    ({
    { color
    color:
    : 'brown'
    'brown' }
    },
    , 'label:brownStyles;'
    'label:brownStyles;')
    )

    View full-size slide

  20. REACT!
    1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    10
    10



    11
    11



    12
    12



    /** @jsxImportSource @emotion/react */
    /** @jsxImportSource @emotion/react */



    <
    div



    css
    css=
    ={
    {css
    css`
    `



    color
    color:
    : pink
    pink;
    ;



    padding
    padding:
    : 1
    1rem
    rem;
    ;



    justify-content
    justify-content:
    : center
    center;
    ;



    align-items
    align-items:
    : center
    center;
    ;



    font-weight
    font-weight:
    : bold
    bold;
    ;



    font-size
    font-size:
    : 3
    3rem
    rem;
    ;



    `
    `}
    }>
    >



    CSS DAY!!!
    CSS DAY!!!




    div>
    >
    CSS DAY!!!

    View full-size slide

  21. Bene, abbiamo finito!

    View full-size slide

  22. Mucho Gusto
    O dell'opinionismo prematurato a destra

    View full-size slide

  23. Object styles!
    1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    10
    10



    11
    11



    <
    div



    css
    css=
    ={
    {{
    {



    color
    color:
    : 'pink'
    'pink',
    ,



    padding
    padding:
    : '1rem'
    '1rem',
    ,



    justifyContent
    justifyContent:
    : 'center'
    'center',
    ,



    alignItems
    alignItems:
    : 'center'
    'center',
    ,



    fontWeight
    fontWeight:
    : 'bold'
    'bold',
    ,



    fontSize
    fontSize:
    : '3rem'
    '3rem',
    ,



    }
    }}
    }>
    >



    CSS DAY!!!
    CSS DAY!!!




    div>
    >
    CSS DAY!!!

    View full-size slide

  24. Styled components
    1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    const
    const Styled
    Styled =
    = styled
    styled.
    .div
    div`
    `



    color
    color:
    : pink
    pink;
    ;



    padding
    padding:
    : 1
    1rem
    rem;
    ;



    justify-content
    justify-content:
    : center
    center;
    ;



    align-items
    align-items:
    : center
    center;
    ;



    font-weight
    font-weight:
    : bold
    bold;
    ;



    font-size
    font-size:
    : 3
    3rem
    rem;
    ;



    `
    `



    <
    Styled>
    >CSS DAY
    CSS DAY
    Styled>
    >
    CSS DAY!

    View full-size slide

  25. Composition
    1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    10
    10



    <
    Styled className
    className=
    ='
    'qualcosa
    qualcosa'
    ' css
    css=
    ={
    {[
    [



    css
    css`
    `



    💲
    💲{
    {CSSDAY
    CSSDAY}
    }



    color
    color:
    : green
    green;
    ;



    `
    `,
    ,



    css
    css`
    `color
    color:
    : blue
    blue;
    ;`
    `,
    ,



    CSSDAY
    CSSDAY



    ]
    ]}
    }>
    >



    CSS DAY
    CSS DAY




    Styled>
    >
    CSS DAY

    View full-size slide

  26. What about... cascading?
    Emotion className > Emotion prop
    Le className fuori dall'ecosistema Emotion vengono
    semplicemente aggiunte
    Una nuova classe viene forgiata!

    View full-size slide

  27. 1
    1



    2
    2



    3
    3



    4
    4



    const
    const a
    a =
    = css
    css`
    `color
    color:
    : red
    red;
    ; border
    border:
    : 1
    1px
    px solid pink
    solid pink;
    ;
    const
    const b
    b =
    = css
    css`
    `color
    color:
    : pink
    pink;
    ; padding
    padding:
    : 1
    1rem
    rem;
    ;`
    `



    <
    div css
    css=
    ={
    {[
    [a
    a,
    , b
    b]
    ]}
    }>
    >CSSDAY
    CSSDAY
    div>
    >



    <
    div css
    css=
    ={
    {css
    css`
    `
    💲
    💲{
    {a
    a}
    }
    💲
    💲{
    {b
    b}
    }`
    `}
    }>
    >CSSDAY
    CSSDAY
    div>
    >
    CSSDAY CSSDAY

    View full-size slide

  28. Classi ripetute? E le performance??!1!

    View full-size slide

  29. Nesting & Parent selector

    View full-size slide

  30. 1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    10
    10



    11
    11



    12
    12



    13
    13



    14
    14



    15
    15



    16
    16



    17
    17



    18
    18



    <
    div css
    css=
    ={
    {css
    css`
    `



    font-size
    font-size:
    : 2
    2rem
    rem;
    ;



    text-align
    text-align:
    : center
    center;
    ;



    color
    color:
    : pink
    pink;
    ;



    section, span
    section, span {
    {



    display
    display:
    : inline
    inline;
    ;



    }
    }



    div
    div {
    {



    color
    color:
    : white
    white;
    ;



    &
    &:first-of-type
    :first-of-type {
    {



    font-size
    font-size:
    : 1
    1rem
    rem;
    ;



    }
    }



    }
    }



    `
    `}
    }>
    >



    <
    div>
    >This is
    This is
    div>
    >



    <
    section>
    >CSS
    CSS
    section>
    >



    <
    span>
    >DAY!!!
    DAY!!!
    span>
    >




    div>
    >
    This is
    CSSDAY!!!

    View full-size slide

  31. Animation
    1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    7
    7



    8
    8



    9
    9



    10
    10



    11
    11



    const
    const rotate
    rotate =
    = keyframes
    keyframes`
    `



    from
    from {
    {



    transform
    transform:
    : rotateX
    rotateX(
    (0
    0deg
    deg)
    );
    ;



    }
    }



    to
    to {
    {



    transform
    transform:
    : rotateX
    rotateX(
    (360
    360deg
    deg)
    );
    ;



    }
    }



    `
    `



    <
    Styled css
    css=
    ={
    {css
    css`
    `



    animation:
    💲
    animation:
    💲{
    {rotate
    rotate}
    } 2
    2s
    s linear infinite
    linear infinite;
    ;



    `
    `}
    }>
    >CSS DAY!
    CSS DAY!
    Styled>
    >
    CSS DAY!

    View full-size slide

  32. Media Queries
    1
    1



    2
    2



    3
    3



    4
    4



    5
    5



    6
    6



    <
    Styled css
    css=
    ={
    {css
    css`
    `



    color
    color:
    : red
    red;
    ;



    @media
    @media (
    (min-width
    min-width:
    : 20
    20rem
    rem)
    ) {
    {



    color
    color:
    : white
    white;
    ;



    }
    }



    `
    `}
    }>
    >CSS DAY!
    CSS DAY!
    Styled>
    >
    CSS DAY!

    View full-size slide

  33. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    6
    6
    7
    7
    8
    8
    9
    9
    const
    const size
    size =
    = born
    born ?
    ? 40
    40 :
    : 60
    60



    export
    export const
    const Cockade
    Cockade:
    : React
    React.
    .FunctionComponent
    FunctionComponent =
    = (
    ()
    ) =>
    => (
    (



    <
    div



    css
    css=
    ={
    {css
    css`
    `



    max-height:
    💲
    max-height:
    💲{
    {size
    size}
    }vh
    vh;
    ;



    max-width:
    💲
    max-width:
    💲{
    {size
    size}
    }vh
    vh;
    ;



    `
    `}
    }



    />
    />



    )
    )

    View full-size slide

  34. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    6
    6
    7
    7
    8
    8
    9
    9
    const
    const generateAppearCss
    generateAppearCss =
    = (
    (delay
    delay:
    : number
    number,
    , moreCss
    moreCss?
    ?:
    : string
    string)
    ) =>
    => css
    css`
    `



    animation:
    💲
    animation:
    💲{
    {appear
    appear}
    } 0.5
    0.5s
    s;
    ;



    animation-delay:
    💲
    animation-delay:
    💲{
    {delay
    delay}
    }ms
    ms;
    ;



    animation-fill-mode
    animation-fill-mode:
    : backwards
    backwards;
    ;



    animation-timing-function
    animation-timing-function:
    : cubic-bezier
    cubic-bezier(
    (0.175
    0.175,
    , 0.885
    0.885,
    , 0.32
    0.32,
    , 1.275
    1.275)
    );
    ;



    transform-origin
    transform-origin:
    : center center
    center center;
    ;



    will-change
    will-change:
    : transform
    transform,
    , opacity
    opacity;
    ;



    💲
    💲{
    {moreCss
    moreCss}
    }



    `
    `

    View full-size slide

  35. Trick AND Treats

    View full-size slide

  36. Media Query Hook
    * short version, for long one, ask me!

    View full-size slide

  37. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    6
    6
    7
    7
    8
    8
    9
    9
    10
    10
    11
    11
    12
    12
    export
    export const
    const breakpoints
    breakpoints =
    = {
    {



    min
    min:
    : 0
    0,
    ,



    xxxs
    xxxs:
    : 480
    480,
    ,



    xxs
    xxs:
    : 600
    600,
    ,



    xs
    xs:
    : 720
    720,
    ,



    sm
    sm:
    : 840
    840,
    ,



    md
    md:
    : 960
    960,
    ,



    lg
    lg:
    : 1024
    1024,
    ,



    xl
    xl:
    : 1248
    1248,
    ,



    xxl
    xxl:
    : 1440
    1440,
    ,



    max
    max:
    : 1920
    1920



    }
    }
    https://github.com/MakhBeth/js-to-scss

    View full-size slide

  38. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    6
    6
    7
    7
    8
    8
    9
    9
    10
    10
    11
    11
    export
    export const
    const emBreakpoints
    emBreakpoints =
    = Object
    Object.
    .keys
    keys(
    (breakpoints
    breakpoints)
    )



    .
    .reduce
    reduce(
    ((
    (aggr
    aggr,
    , key
    key)
    ) =>
    => {
    {



    aggr
    aggr[
    [key
    key]
    ] =
    = emCalc
    emCalc(
    (breakpoints
    breakpoints[
    [key
    key]
    ])
    )



    return
    return aggr
    aggr



    }
    },
    , {
    {}
    }



    )
    )







    // FP-TS version
    // FP-TS version



    export
    export const
    const emBreakpoints
    emBreakpoints =
    = pipe
    pipe(
    (breakpoints
    breakpoints,
    ,



    R
    R.
    .map
    map(
    ((
    (value
    value)
    ) =>
    => emCalc
    emCalc(
    (value
    value)
    ))
    )



    )
    )

    View full-size slide

  39. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    <
    div css=
    ={
    {css
    css`
    `



    💲
    💲{
    {mq
    mq.
    .xs
    xs}
    } {
    {



    display
    display:
    : none
    none;
    ;



    }
    }



    `
    `}
    }/
    />
    >

    View full-size slide

  40. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    6
    6
    7
    7
    8
    8
    9
    9
    10
    10
    11
    11
    12
    12
    13
    13
    14
    14
    15
    15
    16
    16
    export
    export function
    function useMedia
    useMedia (
    (query
    query:
    : string
    string)
    ):
    : boolean
    boolean {
    {



    const
    const [
    [matches
    matches,
    , setMatches
    setMatches]
    ] =
    = useState
    useState(
    (false
    false)
    )



    const
    const [
    [media
    media,
    , setMedia
    setMedia]
    ] =
    = useState
    useState<
    MediaQueryList |
    | null
    null>
    >(
    (null
    null)
    )



    useEffect
    useEffect(
    ((
    ()
    ) =>
    => {
    {



    const
    const media
    media =
    = window
    window.
    .matchMedia
    matchMedia(
    (query
    query)
    )



    setMedia
    setMedia(
    (media
    media)
    )



    }
    },
    , [
    []
    ])
    )



    useEffect
    useEffect(
    ((
    ()
    ) =>
    => {
    {



    if
    if (
    (!
    !media
    media ||
    || !
    !media
    media.
    .addEventListener
    addEventListener)
    ) return
    return



    if
    if (
    (media
    media.
    .matches
    matches !==
    !== matches
    matches)
    ) setMatches
    setMatches(
    (media
    media.
    .matches
    matches)
    )



    const
    const listener
    listener =
    = (
    ()
    ) =>
    => {
    { setMatches
    setMatches(
    (media
    media.
    .matches
    matches)
    ) }
    }



    media
    media.
    .addEventListener
    addEventListener(
    ('change'
    'change',
    , listener
    listener)
    )



    return
    return (
    ()
    ) =>
    => media
    media.
    .removeEventListener
    removeEventListener(
    ('change'
    'change',
    , listener
    listener)
    )



    }
    },
    , [
    [matches
    matches,
    , query
    query,
    , media
    media]
    ])
    )



    return
    return matches
    matches



    }
    }

    View full-size slide

  41. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    6
    6
    7
    7
    8
    8
    9
    9
    10
    10
    11
    11
    12
    12
    import
    import {
    { mq
    mq,
    , useMedia
    useMedia }
    } from
    from './previousSlide'
    './previousSlide'







    export
    export function
    function useMediaQuery
    useMediaQuery (
    (bp
    bp:
    : keyof
    keyof typeof
    typeof mq
    mq)
    ):
    : boolean
    boolean {
    {



    const
    const query
    query =
    = mq
    mq[
    [bp
    bp]
    ].
    .replace
    replace(
    ('@media '
    '@media ',
    , ''
    '')
    )



    return
    return useMedia
    useMedia(
    (query
    query)
    )



    }
    }







    // use it like:
    // use it like:



    const
    const Component
    Component:
    : VFC
    VFC =
    = (
    ()
    ) =>
    => {
    {



    const
    const mq
    mq =
    = useMediaQuery
    useMediaQuery(
    ('md'
    'md')
    )



    return
    return <
    div>
    >{
    {mq
    mq ?
    ? 1
    1 :
    : 2
    2}
    }<

    /div
    div>
    >



    }
    }

    View full-size slide

  42. cerca
    Bruce Wayne
    Michele Brucia
    Way Home
    Michele Wayne
    Bruce Banner
    Bruce Lee

    View full-size slide

  43. 1
    1
    2
    2
    3
    3
    4
    4
    5
    5
    6
    6
    7
    7
    8
    8
    9
    9
    10
    10
    11
    11
    12
    12
    13
    13
    14
    14
    15
    15
    16
    16
    17
    17
    18
    18
    19
    19
    const
    const friends
    friends =
    = [
    ['Bruce Wayne'
    'Bruce Wayne',
    ,'Michele Brucia'
    'Michele Brucia',
    ,'Way Home'
    'Way Home',
    ,'Michele Wayne'
    'Michele Wayne',
    ,'Bruce Banner'
    'Bruce Banner',
    ,'Bruco Lì
    'Bruco Lì
    const
    const mkSearchable
    mkSearchable =
    = (
    (e
    e:
    : string
    string)
    ) =>
    => e
    e.
    .replace
    replace(
    (/
    /s
    s/
    /g
    g,
    , ''
    '')
    ).
    .toLowerCase
    toLowerCase(
    ()
    )



    const
    const Search
    Search =
    = (
    ()
    ) =>
    => {
    {



    const
    const [
    [s
    s,
    , setS
    setS]
    ] =
    = useState
    useState(
    (''
    '')
    )



    return
    return <
    div css
    css=
    ={
    {css
    css`
    `



    ul li
    ul li[
    [data-searchablefor
    data-searchablefor*=
    *="
    💲{mkSearchable(s)}"
    "
    💲{mkSearchable(s)}"]
    ] {
    {color
    color:
    : pink
    pink;
    ; text-decoration
    text-decoration:
    : underline
    underline;
    ;}
    }



    `
    `}
    }>
    >



    <
    input



    type
    type=
    ="
    "search
    search"
    "



    placeholder
    placeholder=
    ="
    "cerca
    cerca"
    "



    onChange
    onChange=
    ={
    {(
    ({
    {target
    target}
    })
    ) =>
    => setS
    setS(
    (target
    target.
    .value
    value)
    )}
    }



    />
    />



    <
    UnorderedList>
    >



    {
    {friends
    friends.
    .map
    map(
    (e
    e =>
    =>



    <
    ListItem key
    key=
    ={
    {e
    e}
    } data-searchablefor
    data-searchablefor=
    ={
    {mkSearchable
    mkSearchable(
    (e
    e)
    )}
    }>
    >{
    {e
    e}
    }
    ListItem>
    >)
    )



    }
    }




    UnorderedList>
    >




    div>
    >



    }
    }

    View full-size slide

  44. È tutto oro quello che luccica?
    NO!

    View full-size slide

  45. Cosa non mi è piaciuto?
    1. Runtime: veloce ma presente
    2. Updates: fragile
    3. Labels non sempre perfette

    View full-size slide

  46. Per cosa non lo userei?
    1. Siti editoriali con poche pagine mastro
    2. Design Systems generici
    3. Ambienti non JS centrici

    View full-size slide

  47. Ma allora perchè lo usi?
    1. Landing page
    2. SSR/SSG (Next, Nuxt, Gatsby ecc...)
    3. React CRUD app con sezioni "atomiche"

    View full-size slide

  48. NON ESISTE IL SILVER BULLET!

    View full-size slide

  49. Cosa voglio provare la prossima
    volta?

    View full-size slide

  50. Uscire sempre dalla comfort
    zone!
    Per crearne di nuove
    😁

    View full-size slide

  51. Grazie
    Matteo per avermi fatto uscire dalla comfort zone e tornare sul
    palco
    Claudia per avermi fatto uscire dalla comfort zone e dato una figlia
    Gaia per avermi fatto uscire dalle comfort zone, tutte le comfort
    zone

    View full-size slide