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

Houdini e o futuro mágico do CSS

Houdini e o futuro mágico do CSS

Mostrei o que é o projeto Houdini, quais são as propostas e como isso poderá mudar a forma de pensarmos e construirmos o nosso CSS. Chega de inconsistências, bem vindo ao futuro com Houdini!

Rafael Dantas

October 06, 2018
Tweet

More Decks by Rafael Dantas

Other Decks in Technology

Transcript

  1. Houdini
    e o futuro mágico
    do CSS
    CEJS 2018

    View full-size slide

  2. Rafael Dantas
    @RaffaelDantas
    Dev Front End na Valle Sistemas
    Co-organizador do Meetup do HTML SP
    Instrutor no Coletividad

    View full-size slide

  3. Quais problemas temos com CSS hoje em dia?
    Evolução das especificações do CSS
    são muito lentas

    View full-size slide

  4. Quais problemas temos com CSS hoje em dia?
    Inconsistências entre navegadores

    View full-size slide

  5. Quais problemas temos com CSS hoje em dia?
    Não temos acesso ao CSSOM da
    mesma forma que o DOM

    View full-size slide

  6. O processo de criação de uma propriedade CSS
    Nova especificação
    é proposta
    Especificação
    é escrita
    Os vendors
    implementam
    Melhorias e correções são propostas
    Re-implementação e correções são feitas
    Quando os vendors consideram a propriedade madura o suficiente
    Os navegadores
    Adotam a especificação
    Nós (Devs) usamos
    a especificação

    View full-size slide

  7. Quais problemas isso causa?
    Demora no lançamento de qualquer
    nova especificação

    View full-size slide

  8. Quais problemas isso causa?
    Não há como criar
    transpiladores/polyfills

    View full-size slide

  9. Como funciona no caso do JS
    Uma nova feature
    é proposta
    Cria-se um
    Polyfill/Transpilador
    Se utiliza a
    nova feature

    View full-size slide

  10. Mas o que o Houdini CSS tem a ver com isso?
    Qual é a proposta que ele traz?
    Aliás, o que diabos é Houdini CSS?

    View full-size slide

  11. O que é Houdini CSS?
    É uma força tarefa formada
    pela W3C

    View full-size slide

  12. O que é Houdini CSS?
    Tem a proposta de estender o poder
    dos Devs em relação a CSS

    View full-size slide

  13. O que é Houdini CSS?
    Propõe a criação de API’s para
    criarmos novas propriedades

    View full-size slide

  14. Qual o processo do Pipeline?
    Parser
    DOM
    CSSOM
    Monta o
    layout
    Processo
    de Paint
    Processo de
    Composite
    Processo
    de Cascata
    Exibe o
    Resultado

    View full-size slide

  15. Qual o processo do Pipeline?
    DOM
    CSSOM
    Só temos acesso completo ao DOM
    E parcial ao CSSOM

    View full-size slide

  16. Qual a proposta do Houdini CSS?
    Parser
    DOM
    CSSOM
    Monta o
    layout
    Processo
    de Paint
    Processo de
    Composite
    Processo
    de Cascata
    CSS
    Parser
    API
    CSS
    Typed
    OM
    CSS
    Layout
    API
    Painting
    API
    Animation
    Worklet
    Worklets
    Properties and Values API

    View full-size slide

  17. Em resumo as propostas são:
    Dar acesso aos diferentes estágios
    do Pipeline de renderização
    Normalizar possíveis inconsistências
    (escrevendo polyfills/transpiladores)
    Não depender mais do processo de
    evolução de uma spec pelo W3C

    View full-size slide

  18. Por que eu querer fazer o trabalho do engenheiro de browser?
    Garantia de funcionamento de todos
    as propriedades sem quebra

    View full-size slide

  19. Por que eu querer fazer o trabalho do engenheiro de browser?
    Usar coisas novas sem ter que esperar
    por suporte dos navegadores

    View full-size slide

  20. Por que eu querer fazer o trabalho do engenheiro de browser?
    Consumir libs que resolvem
    inconsistências (DE VERDADE)

    View full-size slide

  21. CSS Parser API
    Possibilidade de criar seus
    próprios construtores
    (Media Types, Pseudo-Classes etc)

    View full-size slide

  22. CSS Parser API
    CSSOM passará a entender sem
    descartar esses construtores

    View full-size slide

  23. CSS Parser API
    Começou a ser escrito faz pouco
    tempo, está em estágio inicial

    View full-size slide

  24. Properties and Values API
    Possibilitará o tipo e o valor
    inicial de uma variável CSS

    View full-size slide

  25. Properties and Values API
    Exemplo:
    HTML:

    View full-size slide

  26. Properties and Values API
    Exemplo:
    CSS:

    View full-size slide

  27. Properties and Values API
    Exemplo:
    Resultado:

    View full-size slide

  28. Properties and Values API
    Exemplo:
    CSS:

    View full-size slide

  29. Properties and Values API
    Exemplo:
    Resultado:

    View full-size slide

  30. Properties and Values API
    Exemplo: JS (registrando a propriedade):

    View full-size slide

  31. Properties and Values API
    Exemplo:
    Resultado:

    View full-size slide

  32. CSS Layout API
    Vai possibilitar a criação de
    propriedades Display

    View full-size slide

  33. CSS Layout API
    Exemplo: JS (registrando a propriedade):

    View full-size slide

  34. CSS Layout API
    Exemplo: CSS (usando a propriedade):

    View full-size slide

  35. CSS Paint API
    Parecido com o Layout API
    (contém um um registrador similar)

    View full-size slide

  36. CSS Paint API
    Cria-se valores que serão
    utilizados em imagens

    View full-size slide

  37. CSS Paint API
    Border-image ou background-image
    são exemplos disso

    View full-size slide

  38. Animation Worklet
    Possibilitará o controle de
    propriedades de animação, scroll etc

    View full-size slide

  39. Animation Worklet
    Substancial melhora de
    performance e mais seguro

    View full-size slide

  40. Worklets
    Similar aos Web Workers

    View full-size slide

  41. Worklets
    Possibilitam a importação e
    chamada dos scripts das API’s

    View full-size slide

  42. Worklets
    É possível utilizar JS e Web Assembly
    (render Audio e Gráficos)

    View full-size slide

  43. Worklets
    Animation Worklet, Paint Worklet,
    Layout Worklet e AudioWorklet

    View full-size slide

  44. E qual o futuro?
    Não se trata mais de “se” e sim
    “quando”.
    Em algum ponto, iremos nos
    beneficiar dessa iniciativa.

    View full-size slide

  45. Quer acompanhar o projeto?
    Repositório do Houdini:
    https://github.com/w3c/css-houdini-drafts

    View full-size slide

  46. “Abracem o fracasso como se abraça o
    sucesso. Desafiem-se a explorar o
    desconhecido, e a evolução será uma
    consequência.”
    Tentem mais. Errem mais.
    Rafael Dantas

    View full-size slide

  47. @RaffaelDantas @valleweb
    OBRIGADO!

    View full-size slide