O mágico mundo de Houdini

Muitas pessoas acham o CSS totalmente mágico, tanto quando ele funciona, mas principalmente quando ele não funciona! Já imaginou se conseguíssemos ter as nossas próprias mágicas? Nessa talk falarei sobre as mágicas que vieram com o Houdini e o mundo que está se abrindo com essa nova forma de desenvolver CSS.

Transcript

1. O mágico mundo de Houdini by Fernanda Bernardo
2. Houdini ?
3. Renderização Música Mágico
4. Harry Houdini “O Grande Houdini” 1874 - 1926 Escapologista Ilusionista
8. Jogos com CSS
9. FERNANDA BERNARDO Engenheira de Software @Elo7 @help4papers http://fernandabernardo.com.br @fembernardo
14. Try it!
15. Burlar?
17. https://2019.stateofcss.com/
19. Javascript CSS Suporte de browsers Polyfill / Use! Mata polyfill Reclama dos browsers Perda de interesse Suporte de alguns browsers
20. Javascript CSS Browsers podem adotar Faça! Tente usar! …
21. Polyfill CSS
23. CSS { ; } { ; } AST JS () { } () { }
24. body { background-color: red; font-size: 1em; } Abstract Syntax Tree AST https://astexplorer.net/
25. body { background-color: red; font-size: 1em; } Abstract Syntax Tree AST https://astexplorer.net/ background-color: red;
26. body { background-color: red; font-size: 1em; } Abstract Syntax Tree AST https://astexplorer.net/ font-size: 1em;
27. CSS { ; } { ; } AST JS () { } () { }
28. .bla { width: calc(random * 100%); } .bla { width: calc(0.35746 * 100%); } https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/
30. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Pipeline de Renderização
31. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM HTML DOM CSSOM
32. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM
33. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM 122px 122px 58px 58px
34. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM
35. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM
36. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM
37. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM POLYFILL
38. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Sem controle Controle Limitado Com controle
42. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Sem controle Controle Limitado Com controle
43. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM
44. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Parser Typed OM Font Metrics Worklets Box Tree Properties and Values Layout Paint Animation Scroll Custom.
45. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Parser Typed OM Font Metrics Worklets Box Tree Properties and Values Layout Paint Animation Scroll Custom.
46. Houdini CSS Força tarefa da W3C para definir APIs de baixo nível para nós, desenvolvedores, podermos criar, controlar e extender nossas propriedades CSS
47. https://extensiblewebmanifesto.org/
50. https://ishoudinireadyyet.com/
51. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM
52. CSSOM? CSS Object Model
53. element.style.width = ‘100px’; element.style.height = num + ‘px’; Hoje em dia…
54. element.style.width = ‘100px’; element.style.height = num + ‘px’; Hoje em dia… ‘100px’; String
55. element.style.width = ‘100px’; element.style.height = num + ‘px’; Hoje em dia… num + ‘px’; Concatenação
56. element.style.width = ‘100px’; element.style.height = num + ‘px’; Hoje em dia… element.style.width element.style.height Estilo inline
57. element.style.width = ‘100px’; element.style.height = num + ‘px’; Hoje em dia… Performance :(
58. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Typed OM Worklets Properties and Values Layout Paint Animation
59. Typed OM
71. CSS.number CSS.percent // <time> CSS.s CSS.ms // <frequency> CSS.Hz CSS.kHz // <resolution> CSS.dpi CSS.dpcm CSS.dppx // <angle> CSS.deg CSS.grad CSS.rad CSS.turn // <length> CSS.em CSS.ex CSS.ch CSS.ic CSS.rem CSS.lh CSS.rlh CSS.vw CSS.vh CSS.vi CSS.vb CSS.vmin CSS.vmax CSS.cm CSS.mm CSS.Q CSS.in CSS.pt CSS.pc CSS.px // <flex> CSS.fr
72. calc(2px + 10 * 6vw); new CSSMathSum( CSS.px(2), new CSSMathProduct(10, CSS.vw(6)) );
73. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Typed OM Worklets Properties and Values Layout Paint Animation
74. Properties and Values
75. CSS custom properties body { --theme-color: cornflowerblue; background-color: var(--theme-color); } body.dark-theme { --theme-color: midnightblue; }
77. CSS custom properties body { --theme-color: cornflowerblue; background-color: var(—theme-color); } body.dark-theme { --theme-color: midnightblue; } transition: --theme-color 1s ease-in-out;
78. CSS custom properties body { --theme-color: background-color: var(—theme-color); transition: --theme-color 1s ease-in-out; } body.dark-theme { --theme-color: midnightblue; } url(‘oi.png');
80. Properties and Values API window.CSS.registerProperty({ name: '--theme-color', syntax: '<color>', inherits: false, initialValue: ‘tomato' });
81. window.CSS.registerProperty({ name: '--theme-color', syntax: '<color>', inherits: false, initialValue: ‘tomato' }); name: '--theme-color', Properties and Values API
82. window.CSS.registerProperty({ name: '--theme-color', syntax: '<color>', inherits: false, initialValue: ‘tomato' }); syntax: '<color>', <length> <number> <percentage> <url> <angle> … Properties and Values API
83. window.CSS.registerProperty({ name: '--theme-color', syntax: '<color>', inherits: false, initialValue: ‘tomato' }); initialValue: ‘tomato' Properties and Values API
84. body { --theme-color: background-color: var(—theme-color); transition: --theme-color 1s ease-in-out; } body.dark-theme { --theme-color: midnightblue; } url(‘oi.png'); Properties and Values API
86. window.CSS.registerProperty({ name: '--theme-color', syntax: '<color>', inherits: false, initialValue: ‘tomato' }); initialValue: ‘tomato' Properties and Values API
87. Sempre preciso de JS?
88. https://github.com/w3c/css-houdini-drafts/issues/137 @property —highlight-color { syntax: “<color>”; initial-value: red; inherits: true; }
89. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Typed OM Worklets Properties and Values Layout Paint Animation
90. Worklets Workers pequenos, bem específicos e leves. Eles ajudam o dev a ter acesso ao processo de renderização do navegador. “mini web workers”
91. Main thread Web Worker Service Worker Worklet
92. Worklets Fora da main thread Inicialização rápida Paralelos Seguro (https ou local) Acesso ao DOM
93. Tipos de Worklets Layout Worklet Paint Worklet Animation Worklet Audio Worklet
94. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Typed OM Worklets Properties and Values Layout Paint Animation
95. Paint API
96. if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('worklet.js'); } *.js registerPaint('circle', class { static get inputProperties() {} paint(ctx, geom, properties) {} }); worklet.js .circle { background-image: paint(circle); } *.css
97. registerPaint('circle', class { static get inputProperties() {} paint(ctx, geom, properties) { const x = size.width / 2, y = size.height / 2, radius = Math.min(x, y); ctx.fillStyle = ‘pink'; ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI); ctx.fill(); } }); const x = size.width / 2, y = size.height / 2, radius = Math.min(x, y); ctx.fillStyle = ‘pink'; ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI); ctx.fill();
98. animation Properties and Values canvas
99. https://houdini.glitch.me/paint
100. https://github.com/GoogleChromeLabs/css-paint-polyfill Houdini's CSS Paint Polyfill
101. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Typed OM Worklets Properties and Values Layout Paint Animation
102. Layout API
103. CSS Flexbox CSS Grid Layout
104. Masonry Layout
106. if ('layoutWorklet' in CSS) { CSS.layoutWorklet.addModule('worklet.js'); } *.js registerLayout(‘masonry', class { static get inputProperties() {} layout(children, edges, constraints, properties) {} }); worklet.js .container { display: layout(masonry); } *.css
107. https://github.com/GoogleChromeLabs/houdini-samples/tree/master/layout-worklet/masonry
108. PARSER CASCADE LAYOUT COMPOSITE PAINT DOM CSSOM Typed OM Worklets Properties and Values Layout Paint Animation
109. Animation API
110. Parallax
112. if ('animationWorklet' in CSS) { CSS.animationWorklet.addModule('worklet.js'); } *.js registerAnimator(‘parallax', class { constructor(options) {} animate(currentTime, effect) { effect.localTime = currentTime; } }); worklet.js
113. new WorkletAnimation( 'parallax', effectKeyframes, scrollTimeline, {}, ).play(); *.js
114. new WorkletAnimation( 'parallax', effectKeyframes, scrollTimeline, {}, ).play(); *.js effectKeyframes, const effectKeyframes = new KeyframeEffect( elem, [ {transform: 'scale(1)'}, {transform: 'scale(.25)'}, {transform: 'scale(1)'} ], { duration: timeRange } );
115. new WorkletAnimation( 'parallax', effectKeyframes, scrollTimeline, {}, ).play(); *.js effectKeyframes, const effectKeyframes = new KeyframeEffect( elem, [ {transform: 'scale(1)'}, {transform: 'scale(.25)'}, {transform: 'scale(1)'} ], { duration: timeRange } ); elemento que queremos animar elem,
116. new WorkletAnimation( 'parallax', effectKeyframes, scrollTimeline, {}, ).play(); *.js effectKeyframes, const effectKeyframes = new KeyframeEffect( elem, [ {transform: 'scale(1)'}, {transform: 'scale(.25)'}, {transform: 'scale(1)'} ], { duration: timeRange } ); Animação por Keyframe que queremos aplicar [ {transform: 'scale(1)'}, {transform: 'scale(.25)'}, {transform: 'scale(1)'} ],
117. new WorkletAnimation( 'parallax', effectKeyframes, scrollTimeline, {}, ).play(); *.js effectKeyframes, const effectKeyframes = new KeyframeEffect( elem, [ {transform: 'scale(1)'}, {transform: 'scale(.25)'}, {transform: 'scale(1)'} ], { duration: timeRange } ); duração da animação { duration: timeRange }
118. new WorkletAnimation( 'parallax', effectKeyframes, scrollTimeline, {}, ).play(); *.js scrollTimeline, const scrollTimeline = new ScrollTimeline( scrollSource, timeRange );
119. new WorkletAnimation( 'parallax', effectKeyframes, scrollTimeline, {}, ).play(); *.js scrollTimeline, const scrollTimeline = new ScrollTimeline( scrollSource, timeRange ); scrollSource, Elemento que queremos ver o scroll
120. new WorkletAnimation( 'parallax', effectKeyframes, scrollTimeline, {}, ).play(); *.js scrollTimeline, const scrollTimeline = new ScrollTimeline( scrollSource, timeRange ); timeRange Passos da nossa animação
122. Prós <div> ::after ::before
123. Contras
124. A mágica… …e o futuro
125. Links * Artigos https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/ https://blog.logrocket.com/new-horizons-in-css-houdini-and-the-paint-api-8b307cf387bb/ https://imasters.com.br/css/houdini-e-os-problemas-css-atualmente-parte-01 https://medium.com/norigintech/playing-with-houdini-css-part-two-typed-om-4ce39e2479dc https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/ https://dassur.ma/things/houdini-intro/ https://medium.com/free-code-camp/a-guide-to-understanding-css-houdini-with-the-help-of-cartoons-f40af2540093 * Documentações https://developers.google.com/web/updates/2016/05/houdini https://developers.google.com/web/updates/2018/03/cssom https://developers.google.com/web/fundamentals/performance/rendering/ https://drafts.css-houdini.org/
126. Links * Exemplos https://css-houdini.rocks/ https://houdini.glitch.me/ https://extra-css.netlify.com/ https://github.com/nucliweb/awesome-css-houdini https://github.com/w3c/css-houdini-drafts * Talks State of Houdini - Surma - https://www.youtube.com/watch?v=lK3OiJvwgSc How to Be #Extra with CSS Houdini - Una Kravetz - https://www.youtube.com/watch?v=qY0UF7jaqfs Extendendo o CSS com JavaScript e magia - Mario Souto - https://www.youtube.com/watch?v=qFYHOkuy35A * Slides https://ibevanmeenen.me/houdini/ https://jef.binomed.fr/binomed_docs/Prezs/HoudiniCss
127. OBRIGADA! http://fernandabernardo.com.br @fembernardo