Leve seu CSS para o futuro

Talk dada no front in Floripa de 2018.

Transcript

1. Leve seu CSS para o futuro com Houdini Por @raffaeldantass
2. Rafael Dantas @RaffaelDantass Organizador do @meetuphtmlsp Instrutor no @Coletividad Front End @valleweb Colaborador no @iMasters
3. Quais empecilhos temos atualmente?
4. Não temos acesso ao CSSOM
5. Inconsistências entre navegadores
6. JS evolui muito rápido, CSS… nem tanto.
7. Como nasce uma propriedade nova em CSS?
8. 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
9. Como funciona com JS?
10. Uma nova feature é proposta Cria-se um Polyfill/Transpilador Se utiliza a nova feature
11. O que é o qual a proposta do Houdini?
12. É uma força tarefa criada pela W3C
13. Tem o objetivo de oferecer API`s para criarmos nossas próprias propriedades
14. https://ishoudinireadyyet.com/
15. 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
16. CSS Typed OM CSS Layout API Painting API Worklets
17. CSS Typed OM - Tipos - Objetos - Métodos Valores são expostos como objetos JS. Evitando concatenação através de strings
18. CSS Typed OM
19. CSS Typed OM
20. CSS Typed OM Quais beneficios isso me traria? Muito verboso? Talvez.
21. CSS Typed OM - Menos erros Valores numéricos são retornados como number, não string.
22. CSS Typed OM - Error handling É possível checar se o valor passado é compatível com o que é esperado.
23. CSS Typed OM - Melhor performance Navegador terá menos trabalho (não vai converter/concatenar strings)
24. Layout API Alguns conceitos importantes sobre como o navegador trabalha com layouts
25. Delimitação do layout Child Layout Layout Child Layout Child Layout Child Layout Child Container (Parent Layout)
26. Child Layout Layout Child styleMap Background-color Color Etc. Layout Fragment Lida com valores intrínsecos de tamanho do Box min-content-size max-content-size
27. HTML
28. JS
29. CSS
30. Exemplo
31. Paint API HTML
32. Paint API HTML
33. Paint API JS
34. Exemplo
35. Worklet - Event Loop Age como uma roda gigante fora da Main Thread
36. Main Thread Event Loop
37. Acesso low-level ao pipeline de renderização Worklet
38. Worklet É possível rodar JS e Web Assembly
39. Worklet Processa renderização de gráfico e áudios com maior performance
40. Worklet Processa renderização de gráfico e áudios com maior performance
41. Worklet Event Loop Worklet
42. Worklet Event Loop Worklet
43. Worklet Event Loop Worklet
44. Worklet Event Loop Worklet
45. Worklet Animation Worklet Layout Worklet Paint Worklet Audio Worklet
46. Em resumo Não vai mais depender da implementação por parte dos vendors
47. Em resumo Não vai mais esperar tanto tempo por uma propriedade nova
48. Em resumo Não haverá mais inconsistências entre navegadores
49. Em resumo Libs para lidar com inconsistências
50. Pra acompanhar https://github.com/w3c/css-houdini-drafts/issues W3C Google Chrome Labs https://github.com/GoogleChromeLabs/houdini-samples https://wiki.mozilla.org/CSS/Houdini Mozzila Houdini Wiki https://drafts.css-houdini.org/ Drafts oficiais
51. @raffaeldantass OBRIGADO! Segue a gente! @valleweb rafa-dantas.com.br