$30 off During Our Annual Pro Sale. View Details »

Houdini e o Futuro das CSS

Houdini e o Futuro das CSS

Apresentação feita no Meetup de CSS feito no Nubank sobre Houdini, as propostas que são oferecidas pelo pessoal que está nesse projeto e qual será o futuro das CSS.

Rafael Dantas

June 14, 2018
Tweet

More Decks by Rafael Dantas

Other Decks in Technology

Transcript

  1. Houdini e o futuro das CSS
    por Rafael Dantas

    View Slide

  2. Quem sou eu?
    Um bom apreciador
    de memes
    @raffaeldantass
    E na medida do possível
    dev Front End
    Ajudo a organizar o Meetup do
    HTML SP

    View Slide

  3. Sobre o que pretendo falar?
    - Qual o problema?
    - O que o Houdini propõe como solução
    - E o futuro das CSS
    - O que é Houdini

    View Slide

  4. O que é Houdini?
    É uma força tarefa formada pela W3C
    Tem o objetivo de estender o poder dos desenvolvedores
    em relação às CSS
    Propõe a criação de novas API’s que oferecem a
    possibilidade de criar novas propriedades
    Propõe também formas de acessar os vários estágios do
    processo de renderização de uma página

    View Slide

  5. Qual o problema que temos?
    Basicamente
    A evolução das especificações das CSS
    são muito lentas
    E você não consegue controlar o
    CSSOM da mesma forma que o DOM

    View Slide

  6. Qual o processo que temos hoje?
    Propõe uma nova
    especificação
    Escreve a
    especificação
    proposta
    Os browsers vendors
    implementam
    Os navegadores
    fazem a adoção da
    especificação
    A gente usa a
    especificação
    Melhorias e correções são propostas
    Re-implementação é feita
    Depois da implementação.

    View Slide

  7. Quais os problemas que esse processo causa?
    Impossibilidade de usar o que o CSS oferece de novo.
    Não há normalização em Cross-Browsers (O que funciona em
    um, não necessariamente funciona no outro).

    View Slide

  8. View Slide

  9. Como funciona no caso do JS?
    Uma nova feature
    é proposta
    É possível criar um
    Polyfill ou
    Transpilador
    Usa a feature.

    View Slide

  10. View Slide

  11. Então por que não escrever Polyfills?
    Porque não há uma maneira de fazer isso de forma performática
    E mexer no CSSOM é complexo e instável, ou seja, seria uma tarefa
    muito difícil

    View Slide

  12. Processo de renderização
    Parser
    DOM
    Monta o
    Layout
    Processo
    de Paint
    CSSOM
    Finalmente
    exibe o
    resultado
    A única parte do pipeline onde
    você tem acesso é aqui
    E o CSSOM é parcial

    View Slide

  13. Se estamos criando aplicações “comuns”, sem nada muito fora do
    padrão, por que deveríamos pensar API’s para acessar a engine que
    processa a nossa estilização?
    - Normalização de inconsistências dos cross-browsers, como no mundo do
    JS, por exemplo.
    - Possibilitar a criação de Polyfills/Transpiladores para utilizar cada nova
    funcionalidade lançada ou em fase de implementação.
    - Me dá poder para criar as minhas propriedades, mas de maneira mais
    performática.
    Por que eu vou querer mexer nas engines de renderização?

    View Slide

  14. Por que eu vou querer mexer nas engines de renderização?
    Facilitaria para os desenvolvedores se houvesse uma forma de utilizar as
    propriedades sabendo que elas vão funcionar em todos os navegadores.
    Sem contar seria possível usar as coisas mais novas sem ter que esperar
    anos até chegar em peso nos navegadores.
    De uma maneira nativa.
    Performática.
    E mais segura.

    View Slide

  15. Nós não temos acesso a quase nenhum estágio do pipeline de renderização
    e a proposta do houdini é mudar esse cenário.
    O que o houdini propõe como solução?
    Parser
    DOM
    Monta o
    Layout
    Processo
    de Paint
    CSSOM
    Finalmente
    exibe o
    resultado
    CSS
    parser
    API
    CSS
    Typed
    OM
    CSS
    Layout
    API
    Painting
    API
    Animation
    Worklet

    View Slide

  16. Em resumo a ideia é dar API’s que possibilitem acessar os diferentes
    passos do processo de render.
    O que o houdini propõe como solução?
    Criar nossas próprias propriedades ou utilizar bibliotecas que forneçam
    isso.
    Criar nossos próprios transpiladores ou polyfills ou usar bibliotecas que
    façam isso.

    View Slide

  17. Ainda é apenas uma ideia que não foi escrita e por consequência, não
    implementada.
    CSS Parser API
    Mas tem como objetivo oferecer aos desenvolvedores possibilidade de criar
    seus próprios construtores, possibilitando a criação de novos
    pseudo-seletores, media rules etc.
    Com isso, é possível fazer o CSSOM entendê-las, colocando-as no lugar
    certo da árvore, ao invés de simplesmente descartar aquilo que o
    navegador não entende.

    View Slide

  18. Até o momento apenas o Firefox e Chrome estão trabalhando no
    desenvolvimento dessa API (atualmente em Working Draft)
    CSS Properties and Values API
    Em resumo, com essa API será possível registrar o tipo e um valor inicial
    que uma variável pode ter, ou seja, evitando que a propriedade seja
    ignorada pelo navegador, caso seja passado um valor inválido.

    View Slide

  19. Exemplo:
    CSS Properties and Values API

    View Slide

  20. CSS Properties and Values API

    View Slide

  21. CSS Properties and Values API

    View Slide

  22. CSS Typed OM
    É uma espécie de CSSOM evoluído e com correções de alguns erros que
    ocorrem com o CSSOM atualmente.
    Além disso, ele vai trabalhar com as API’s de Parser e Properties and
    Values API
    Ele também é mais performático, pois transforma as strings do CSSOM
    em tipos que significam algo para JavaScript, tornando a montagem da
    árvore mais rápida.

    View Slide

  23. CSS Typed OM
    A especificação do CSS Typed OM apresenta uma forma de criar
    representações através de objetos em JavaScript
    Dessa forma fica mais performático e eficiente, por exemplo, trabalhar
    com valores numéricos, pois não vai ser necessário converter string para
    números tendo em vista que isso já vai estar dentro de um objeto JS
    Essa API é a mais complexa de se entender e que tem mais possibilidades,
    pois ela torna possível mexer com Valores numéricos referentes a
    medidas, valores referentes a Layout e Paint.

    View Slide

  24. CSS Layout API
    Vai possibilitar a criação de qualquer tipo de valor para ser usado no
    Display, ou seja, posso usar o Display: Flex mas com essa API, posso criar
    o Display: layout(‘Rafael’)
    Existem casos onde a gente precisa trabalhar com layouts muito
    complexos e atualmente temos o CSS Grid Layout e Flexbox que podem
    resolver isso em conjunto.
    Mas quando o CSS nativo não nos atende, precisamos utilizar o JS em
    conjunto para criar comportamentos específicos, isso pode ser ruim para
    performance, especialmente em dispositivos mais antigos.

    View Slide

  25. CSS Layout API
    Exemplo:

    View Slide

  26. CSS Paint API
    É bastante similar ao Layout API, há um método registrador que recebe
    parâmetros similares aos da Layout API
    É possível utilizar essa API para criar valores que serão utilizadas em
    propriedades relacionadas a imagens (background-image, border-image)
    Como houve implementação por parte do Chrome, podemos chegar um
    exemplo mais prático

    View Slide

  27. Worklets
    É bem parecido com Web Workers e possibilitam a importação e chamada
    dos scripts mostrados anteriormente.
    Possibilita a execução dos scripts em pontos diferentes do pipeline de
    renderização

    View Slide

  28. Animation Worklets
    Está em desenvolvimento ainda e tem a proposta de oferecer aos
    desenvolvedores API’s que possibilitam mexer com propriedades de
    animação, opacidade, scroll.
    Ou seja, nada que tenha que ser recalculado pelo navegador relacionado
    ao layout ou estilo.
    Isso vai possibilitar criar e trabalhar, por exemplo, com animações com
    substancial melhora na performance

    View Slide

  29. Animation Worklets
    Ele trabalha fora da Main Thread, ou seja, se por alguma razão houver
    algum problema com a execução do script o navegador não vai travar.
    Ou seja, nada que tenha que ser recalculado pelo navegador relacionado
    ao layout ou estilo.
    Isso vai possibilitar criar e trabalhar, por exemplo, com animações com
    substancial melhora na performance de maneira mais segura e com
    amplas possibilidades.

    View Slide

  30. Alguns exemplos práticos

    View Slide

  31. Futuro das CSS
    Acredito que não se trata mais de Se e sim Quando
    Se tivermos mais possibilidades em relação ao que podemos fazer com as
    nossas aplicações, teremos mais performance e mais controle, tudo com
    segurança.
    Pessoalmente, vejo que estamos em um ponto onde as propostas do
    Houdini se tornaram necessidade.
    E se você não usar o que o Houdini oferece, vai se beneficiar
    indiretamente dele de alguma forma em algum futuro.

    View Slide

  32. Se tiver alguma dúvida
    @raffaeldantass
    Agradecimento especial ao Mário Souto pela ajuda.
    @omariosouto

    View Slide

  33. OBRIGADO! :D

    View Slide