O mágico mundo de Houdini

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.

393a8afb36c128e762e5130549d22dbe?s=128

Fernanda Bernardo

July 10, 2019
Tweet

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

  5. None
  6. None
  7. None
  8. Jogos com CSS

  9. FERNANDA BERNARDO Engenheira de Software @Elo7 @help4papers http://fernandabernardo.com.br @fembernardo

  10. None
  11. None
  12. None
  13. None
  14. Try it!

  15. Burlar?

  16. None
  17. https://2019.stateofcss.com/

  18. None
  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

  22. None
  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/
  29. None
  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
  39. None
  40. None
  41. None
  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/

  48. None
  49. None
  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

  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  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; }
  76. None
  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');
  79. None
  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
  85. None
  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

  105. None
  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

  111. None
  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
  121. None
  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