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.

Transcript

1. Houdini e o futuro das CSS por Rafael Dantas
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
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
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
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
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.
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).
9. Como funciona no caso do JS? Uma nova feature é proposta É possível criar um Polyfill ou Transpilador Usa a feature.
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
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
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?
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.
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
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.
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.
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.
19. Exemplo: CSS Properties and Values API
20. CSS Properties and Values API
21. CSS Properties and Values API
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.
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.
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.
25. CSS Layout API Exemplo:
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
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
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
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.
30. Alguns exemplos práticos
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.
32. Se tiver alguma dúvida @raffaeldantass Agradecimento especial ao Mário Souto pela ajuda. @omariosouto
33. OBRIGADO! :D