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!

Transcript

1. Houdini e o futuro mágico do CSS CEJS 2018
2. Rafael Dantas @RaffaelDantas Dev Front End na Valle Sistemas Co-organizador do Meetup do HTML SP Instrutor no Coletividad
3. Quais problemas temos com CSS hoje em dia? Evolução das especificações do CSS são muito lentas
4. Quais problemas temos com CSS hoje em dia? Inconsistências entre navegadores
5. Quais problemas temos com CSS hoje em dia? Não temos acesso ao CSSOM da mesma forma que o DOM
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
7. Quais problemas isso causa? Demora no lançamento de qualquer nova especificação
8. Quais problemas isso causa? Não há como criar transpiladores/polyfills
9. Como funciona no caso do JS Uma nova feature é proposta Cria-se um Polyfill/Transpilador Se utiliza a nova feature
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?
11. O que é Houdini CSS? É uma força tarefa formada pela W3C
12. O que é Houdini CSS? Tem a proposta de estender o poder dos Devs em relação a CSS
13. O que é Houdini CSS? Propõe a criação de API’s para criarmos novas propriedades
14. Qual o processo do Pipeline? Parser DOM CSSOM Monta o layout Processo de Paint Processo de Composite Processo de Cascata Exibe o Resultado
15. Qual o processo do Pipeline? DOM CSSOM Só temos acesso completo ao DOM E parcial ao CSSOM
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
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
18. Por que eu querer fazer o trabalho do engenheiro de browser? Garantia de funcionamento de todos as propriedades sem quebra
19. Por que eu querer fazer o trabalho do engenheiro de browser? Usar coisas novas sem ter que esperar por suporte dos navegadores
20. Por que eu querer fazer o trabalho do engenheiro de browser? Consumir libs que resolvem inconsistências (DE VERDADE)
21. CSS Parser API Possibilidade de criar seus próprios construtores (Media Types, Pseudo-Classes etc)
22. CSS Parser API CSSOM passará a entender sem descartar esses construtores
23. CSS Parser API Começou a ser escrito faz pouco tempo, está em estágio inicial
24. Properties and Values API Possibilitará o tipo e o valor inicial de uma variável CSS
25. Properties and Values API Exemplo: HTML:
26. Properties and Values API Exemplo: CSS:
27. Properties and Values API Exemplo: Resultado:
28. Properties and Values API Exemplo: CSS:
29. Properties and Values API Exemplo: Resultado:
30. Properties and Values API Exemplo: JS (registrando a propriedade):
31. Properties and Values API Exemplo: Resultado:
32. CSS Layout API Vai possibilitar a criação de propriedades Display
33. CSS Layout API Exemplo: JS (registrando a propriedade):
34. CSS Layout API Exemplo: CSS (usando a propriedade):
35. CSS Paint API Parecido com o Layout API (contém um um registrador similar)
36. CSS Paint API Cria-se valores que serão utilizados em imagens
37. CSS Paint API Border-image ou background-image são exemplos disso
38. Animation Worklet Possibilitará o controle de propriedades de animação, scroll etc
39. Animation Worklet Substancial melhora de performance e mais seguro
40. Worklets Similar aos Web Workers
41. Worklets Possibilitam a importação e chamada dos scripts das API’s
42. Worklets É possível utilizar JS e Web Assembly (render Audio e Gráficos)
43. Worklets Animation Worklet, Paint Worklet, Layout Worklet e AudioWorklet
44. E qual o futuro? Não se trata mais de “se” e sim “quando”. Em algum ponto, iremos nos beneficiar dessa iniciativa.
45. Quer acompanhar o projeto? Repositório do Houdini: https://github.com/w3c/css-houdini-drafts
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
47. @RaffaelDantas @valleweb OBRIGADO!