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

Come Javascript ha cambiato il CSS

Come Javascript ha cambiato il CSS

Le nostre applicazioni diventano sempre più Javascript centriche. Dai build tool ai template engine, dai server agli static site generator. Anche il CSS non è stato risparmiato da questa rivoluzione di paradigmi. Vedremo insieme come tool come i CSS modules, gli styled-components e node possono rendere il nostro CSS migliore

Davide Di Pumpo

March 15, 2018
Tweet

More Decks by Davide Di Pumpo

Other Decks in Programming

Transcript

  1. Come JavaScript ha
    CAMBIATO
    CAMBIATO
    IL CSS
    IL CSS
    Davide Di Pumpo

    View Slide

  2. View Slide

  3. LET'S START MEAOW
    LET'S START MEAOW

    View Slide

  4. Parte 1
    IL PASSATO
    IL PASSATO

    View Slide

  5. Disclaimer: family guy css gif is in there for satirical purposes, I
    actually love css in each of its forms

    View Slide

  6. <br/>tags.H1.color = "red";<br/>tags.p.fontSize = "20pt";<br/>with (tags.H3) {<br/>color = "green";<br/>}<br/>

    View Slide

  7. View Slide

  8. GRAZIE A SASS ABBIAMO AVUTO:
    GRAZIE A SASS ABBIAMO AVUTO:
    Le variabili
    Le funzioni
    I mixin

    View Slide

  9. View Slide

  10. View Slide

  11. CON SASS ERAVAMO DIPENDENTI DA RUBY
    CON SASS ERAVAMO DIPENDENTI DA RUBY

    View Slide

  12. View Slide

  13. POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAI
    POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAI
    Era maggio 2009, ma volevo fare la citazione

    View Slide

  14. View Slide

  15. reference

    View Slide

  16. Così importante che Sass lo hanno
    riscritto in Dart

    View Slide

  17. il che ci porta a...

    View Slide

  18. Parte 2
    IL PRESENTE
    IL PRESENTE

    View Slide

  19. Any application that can be written
    in JavaScript, will eventually be
    written in JavaScript.
    ATWOOD'S LAW
    ATWOOD'S LAW

    View Slide

  20. No, non sto parlando di CSS in JS
    Lo faremo presto

    View Slide

  21. La vera domanda è, perchè ho bisogno di JS
    per scrivere del CSS?

    View Slide

  22. PER RISOLVERCI QUALCHE
    PER RISOLVERCI QUALCHE
    PROBLEMA
    PROBLEMA

    View Slide

  23. Problema:
    SCOPING
    SCOPING

    View Slide

  24. .title {
    color: red;
    }
    .title {
    color: green;
    }
    .title {
    color: blue;
    }

    View Slide

  25. Lo abbiamo risolto con:
    BEM, SMACSS, ECC... ECC...
    BEM, SMACSS, ECC... ECC...

    View Slide

  26. GENTLEMEN'S
    GENTLEMEN'S
    AGREEMENT
    AGREEMENT

    View Slide

  27. View Slide

  28. ├── Accordion
    │ ├── Accordion.html
    │ └── Accordion.module.css
    ├── BadgeStep
    │ ├── BadgeStep.html
    │ └── BadgeStep.module.css
    └── BlogPosts
    ├── BlogPosts.html
    └── BlogPosts.module.css

    View Slide

  29. /* Accordion.module.css */
    .title { color: green; }
    /* BadgeStep.module.css */
    .title { color: green; }
    /* BlogPosts.module.css */
    .title { color: green; }

    View Slide

  30. View Slide

  31. /* Accordion.css */
    .Accordion--title--axYow2l { color: gr
    /* BadgeStep.css */
    .BadgeStep--title--9scas2 { color: gre
    /* BlogPosts.css */
    .BlogPosts--title--Fsvloa { color: gre

    View Slide

  32. html
    js
    pug
    postcss-modules
    import styles from "./component.module.css";
    element.innerHTML =
    `postcss-modules`;
    h1(class=css.title) postcss-modules

    View Slide

  33. .

    View Slide

  34. No global scope
    Niente conflitti
    Dipendenze esplicite

    View Slide

  35. Local styling with CSS Modules - Hugo Giraudel @ From the Fron…

    View Slide

  36. E I WEB
    E I WEB
    COMPONENTS?
    COMPONENTS?
    Aspettiamo Max tra qualche decina di
    minuti

    View Slide

  37. Problema:
    CONDIVIDERE
    CONDIVIDERE
    Tipo tra Sass e JS

    View Slide

  38. $breakpoints: (
    small: 640,
    medium: 720,
    large: 1024
    );

    View Slide

  39. COME ACCEDERE A QUESTE PROPERTY
    COME ACCEDERE A QUESTE PROPERTY
    NEL DOM?
    NEL DOM?
    Non renderizzare intere porzioni di
    codice
    Utilizzare element query
    Far partire o meno chiamate ajax

    View Slide

  40. $breakpoints: (
    small: 640,
    medium: 720,
    large: 1024
    );

    View Slide

  41. Come condividerei questo in JS?

    View Slide

  42. export default {
    small: 640,
    medium: 720,
    large: 1024
    }

    View Slide

  43. import breakpoints from "./breakpoints.js"

    View Slide

  44. E probabilmente il nostro compilatore Sass
    viene lanciato da JS (Gulp, Webpack,
    whatelse)

    View Slide

  45. View Slide

  46. import breakpoints from "./design/breakpoints"
    /*...*/
    loader: "sass-loader",
    options: {
    data: `$breakpoints: ${breakpoints}`
    }

    View Slide

  47. View Slide

  48. import breakpoints from "./design/breakpoints"
    import flattenObjSass from "js-to-scss"
    /*...*/
    loader: "sass-loader",
    options: {
    data: `$breakpoints:
    ${flattenObjSass(breakpoints)}`
    }

    View Slide

  49. View Slide

  50. Ad esempio, se volessi condividere quanto
    accade in un foglio Sass con un altro
    foglio Sass?

    View Slide

  51. 'env-map($env-sass-map-name, $map: ())':
    function (envSassMapName, map) {
    if (!env.sass[envSassMapName.getValue()]) {
    env.sass[envSassMapName.getValue()] =
    new nodeSass.types.Map(0);
    }
    if (map.getLength()) {
    env.sass[envSassMapName.getValue()] = map;
    }

    View Slide

  52. E CON ALTRI
    E CON ALTRI
    PROCESSORI CSS?
    PROCESSORI CSS?
    macropodhq/postcss-constants

    View Slide

  53. OK, UN GATTINO PER RIAVERE L'ATTENZIONE:
    OK, UN GATTINO PER RIAVERE L'ATTENZIONE:

    View Slide

  54. Problema:
    CONDIVIDERE A RUNTIME
    CONDIVIDERE A RUNTIME

    View Slide

  55. Aggiornare il CSS tramite JS

    View Slide

  56. Element.style.left = "42px";

    View Slide

  57. ANCORA PIÙ FACILE GRAZIE ALLE
    ANCORA PIÙ FACILE GRAZIE ALLE
    CUSTOM PROPERTIES
    CUSTOM PROPERTIES
    aka CSS variables

    View Slide

  58. Element.style.setProperty(
    `--custom`, '42px'
    )

    View Slide

  59. HOVER ME
    E D I T O N
    HTML CSS JS Result

    View Slide

  60. View Slide

  61. View Slide

  62. Problema:
    CODICE RIPETUTO
    CODICE RIPETUTO

    View Slide

  63. .square {
    height: 10px;
    width: 10px;
    }

    View Slide

  64. // Sass
    .square {
    @include square(10px);
    }

    View Slide

  65. // PostCSS
    .square {
    @mixin square 10px;
    }
    .square2 {
    size: 10px;
    }

    View Slide

  66. module.exports = (mixinNode, value) => {
    return {
    width: value,
    height: value,
    }
    };

    View Slide

  67. Una domanda sorge spontanea
    PERCHÉ POSTCSS?
    PERCHÉ POSTCSS?
    e non uno degli altri?

    View Slide

  68. TEST
    TEST

    View Slide

  69. import size from '../src/mixins/size.js';
    test('Should return CSS rules', () => {
    expect(size(null, '64px')).toEqual({
    width: '64px',
    height: '64px',
    })
    });

    View Slide

  70. Sandrina Pereira: How can Javascript improve your CSS mixins | …

    View Slide

  71. ANCHE SASS È TESTABILE:
    ANCHE SASS È TESTABILE: TRUE
    TRUE

    View Slide

  72. @include test-module('Zip [function]') {
    @include test('Zips multiple lists int
    // Assert the expected results
    @include assert-equal(
    zip(a b c, 1 2 3),
    (a 1, b 2, c 3));
    }

    View Slide

  73. Problema:
    COMPONENTIZZARE
    COMPONENTIZZARE

    View Slide

  74. View Slide


  75. Accattatil

    View Slide

  76. View Slide


  77. Accattatil

    View Slide

  78. const Button = styled.button`
    background: ${props =>
    props.primary
    ? 'palevioletred'
    : 'white'
    };
    color: ${props => props.primary ? 'white' : 'palevi
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    b d 2 lid l i l d

    View Slide

  79. Una domanda sorge spontanea
    PERCHÉ NON LE
    PERCHÉ NON LE
    CLASSI?
    CLASSI?
    meno spontanea di prima

    View Slide

  80. Eliminano il global space
    Le dipendenze sono esplicite
    Condividere costanti è più facile

    View Slide

  81. MA PER ME IL SELLING POINT È...
    MA PER ME IL SELLING POINT È...

    View Slide

  82. suspense

    View Slide

  83. attesa

    View Slide

  84. momento verità

    View Slide

  85. View Slide

  86. L'ASTRAZIONE
    L'ASTRAZIONE

    View Slide

  87. ???
    ???

    View Slide

  88. View Slide

  89. View Slide

  90. Problema:
    REGRESSION TEST
    REGRESSION TEST

    View Slide

  91. COS'È?
    COS'È?

    View Slide

  92. View Slide

  93. BACKSTOPJS
    BACKSTOPJS

    View Slide

  94. {
    "id": "OM Client",
    "viewports": [
    {"label": "main", "width": 1366, "height": 768}
    ]
    {
    "label": "archive",
    "url": "https://localhost:9000/archive",
    "delay": 2000,
    "hideSelectors": ["#loading-bar-new"],
    "onBeforeScript": "helpers/localStorageOM.js"
    }

    View Slide

  95. module.exports = (chromy, scenario) => {
    chromy
    .wait('.ic-app')
    .click('.introjs-skipbutton');
    };

    View Slide

  96. View Slide

  97. Parte 3
    IL FUTURO
    IL FUTURO

    View Slide

  98. WEB COMPONENTS
    WEB COMPONENTS

    View Slide

  99. PROJECT HOUDINI
    PROJECT HOUDINI

    View Slide

  100. View Slide

  101. CSS PARSER API
    CSS PARSER API
    @apply o @extends a run time!

    View Slide

  102. CSS LAYOUT API
    CSS LAYOUT API

    View Slide

  103. View Slide

  104. CSS PAINT API
    CSS PAINT API
    Per farla breve una sorta di Canvas

    View Slide

  105. .bubble {
    background: paint('circle');
    }

    View Slide

  106. A riguardo

    View Slide

  107. Recap
    QUINDI?
    QUINDI?

    View Slide

  108. USIAMO DA ANNI TOOL PER
    USIAMO DA ANNI TOOL PER
    MIGLIORARE IL NOSTRO CSS
    MIGLIORARE IL NOSTRO CSS

    View Slide

  109. JS È GIÀ NELLA NOSTRA BUILD CHAIN,
    JS È GIÀ NELLA NOSTRA BUILD CHAIN,
    USIAMOLO A NOSTRO VANTAGGIO
    USIAMOLO A NOSTRO VANTAGGIO
    Per risolvere alcuni problemi che possiamo
    avere con CSS

    View Slide

  110. DAI RAGA, TUTTE STE
    DAI RAGA, TUTTE STE
    POSSIBILITÀ SONO UNA FIGATA
    POSSIBILITÀ SONO UNA FIGATA

    View Slide

  111. GRAZIE
    GRAZIE
    DAVIDE DI PUMPO
    DAVIDE DI PUMPO
    Technology -
    Co-organizer
    MakhBeth on: , ,
    I like Cats, Drink, Comics and
    Videogames...
    Credimi
    Milano Frontend
    Twitter Github
    Internet

    View Slide