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 full-size slide

  2. LET'S START MEAOW
    LET'S START MEAOW

    View full-size slide

  3. Parte 1
    IL PASSATO
    IL PASSATO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. CON SASS ERAVAMO DIPENDENTI DA RUBY
    CON SASS ERAVAMO DIPENDENTI DA RUBY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. il che ci porta a...

    View full-size slide

  11. Parte 2
    IL PRESENTE
    IL PRESENTE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. PER RISOLVERCI QUALCHE
    PER RISOLVERCI QUALCHE
    PROBLEMA
    PROBLEMA

    View full-size slide

  16. Problema:
    SCOPING
    SCOPING

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. GENTLEMEN'S
    GENTLEMEN'S
    AGREEMENT
    AGREEMENT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. No global scope
    Niente conflitti
    Dipendenze esplicite

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Problema:
    CONDIVIDERE
    CONDIVIDERE
    Tipo tra Sass e JS

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide

  31. Come condividerei questo in JS?

    View full-size slide

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

    View full-size slide

  33. import breakpoints from "./breakpoints.js"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. '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 full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Problema:
    CONDIVIDERE A RUNTIME
    CONDIVIDERE A RUNTIME

    View full-size slide

  42. Aggiornare il CSS tramite JS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Problema:
    CODICE RIPETUTO
    CODICE RIPETUTO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. ANCHE SASS È TESTABILE:
    ANCHE SASS È TESTABILE: TRUE
    TRUE

    View full-size slide

  56. @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 full-size slide

  57. Problema:
    COMPONENTIZZARE
    COMPONENTIZZARE

    View full-size slide

  58. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. momento verità

    View full-size slide

  63. L'ASTRAZIONE
    L'ASTRAZIONE

    View full-size slide

  64. Problema:
    REGRESSION TEST
    REGRESSION TEST

    View full-size slide

  65. COS'È?
    COS'È?

    View full-size slide

  66. BACKSTOPJS
    BACKSTOPJS

    View full-size slide

  67. {
    "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 full-size slide

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

    View full-size slide

  69. Parte 3
    IL FUTURO
    IL FUTURO

    View full-size slide

  70. WEB COMPONENTS
    WEB COMPONENTS

    View full-size slide

  71. PROJECT HOUDINI
    PROJECT HOUDINI

    View full-size slide

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

    View full-size slide

  73. CSS LAYOUT API
    CSS LAYOUT API

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  76. Recap
    QUINDI?
    QUINDI?

    View full-size slide

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

    View full-size slide

  78. 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 full-size slide

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

    View full-size slide

  80. 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 full-size slide