Understanding CSS Houdini: An Authentic Cartoon Introduction

In this talk, unlike any you have come across before, I will deliver funny, unfeigned and dead serious comic strips about CSS Houdini, and the buzz around them. It’ll be hilarious, either intentionally or unintentionally, easy on beginners as well as pros, and will be very informative as a whole.

Transcript

1. Understanding CSS Houdini An Authentic Cartoon Guide. - OhansEmmanuel
3. me You
4. Who am I ? • Ohans Emmanuel @OhansEmmanuel • Lead Frontend Engineer, Kudi.ai • Top Medium Writer in Technology medium profile with over 2M views • Author of over 4 books see my latest books
6. Javascript having a healthy flight to the future?
7. CSS Having a comfortable stroll?
8. The future of web development is super bright! And CSS isn’t t aking a Back seat in all this.
9. Houdini? • A future CSS technology • Some experimental features are going to be discussed • Support’s not that great - yet!
11. Think of it as learning the css grid 3 years ago A glimpse int o the fut ure!
12. What is houdini ?
14. I’m with you on that. It sounds *kinda* strange!?? houdini? magic word used in the Harry Potter series??
15. What’s all this talk about magic anyway?
16. What’s all this talk about magic anyway?
17. CSS Houdini gives you access t o low level css rendering apis THAT ALLOW YOU build magical things!
18. Empty File + Code Editor = Web App
19. Empty File + Code Editor = Web App non-coder
20. Under the hood …
21. Under the hood …
22. Under the hood … Layout, then Paint.
23. 1. Why is this important? • The browser engine is responsible for creating this magic • It follows a pretty daunting list of steps. • The browser engine does all the magic! • You and I are kinda left out on all the good stuff. • Well, not until Houdini!
24. papa, how are babies made? where did i come from? I wish I knew the answer to that!!!
25. papa, how are babies made? where did i come from? Somewhere in mama’s belly
26. 2049 ... hey foetus, get a blonde hair and blue eyes
27. I’ve just being a part of the mostly magical process of creating a child. This is exactly how you’d feel with Houdini!
28. 1. With Houdini … • You don’t just watch the browser engine render your page • You get access to low level APIs that let you tap into several stages in the rendering pipeline • You join the browser engine to create custom made stuff that would otherwise not be possible. • You get to perform your own magic! Not just watch the browser do so!
29. But how is this all possible ?
30. Magic comes at a cost.
31. why can’t we just directly manipulate the DOM? • When the browser rendering process kicks off, it makes certain assumptions • This would have to be carried out on the main thread • Will turn out to be slow and non- performant
32. TO create magic, you need a magic wand In the CSS Houdini world, this magic wand is called a worklet.
33. worklets • Worklets are the underlying foundation upon which Houdini is based. • They let you tap into the CSS engine and at the css engine speed! • Worklets are like web workers. They aren’t defined to run on a particular thread and so the rendering engine may choose to run them anywhere.
34. Main Thread worklet process worklet process worklet process worklet process Browser JS worklet.addModule worklet The Workout Lifecycle
35. worklets • Worklets are like web workers. They aren’t defined to run on a particular thread and so the rendering engine may choose to run them anywhere. • This sort of parallelism makes for a lot of performance gains. I’m talking rendering engine speed! • Worklets use classes which are registered in the global scope, and the methods of these classes get invoked by the rendering engine.
36. Show me the code
37. CSS
38. CSS Flexbox, Grid, Block, Table … LAYOUT background, border, outline … PAINT Transitions, translations, transformations ANIMATION property & VALUES Typed om PARSER FONT METRIcs
39. background, border, outline … CSS Flexbox, Grid, Block, Table … LAYOUT Transitions, translations, transformations ANIMATION property & VALUES Typed om PARSER FONT METRIcs THE PAINT API
40. ckground, border, outline … CSS Flexbox, Grid, Block, Table … LAYOUT ANIMATION property & VALUES Typed om PARSER FONT METRIcs HE PAINT API
41. ckground, border, outline … CSS Flexbox, Grid, Block, Table … LAYOUT ANIMATION property & VALUES Typed om PARSER FONT METRIcs HE PAINT API
42. ckground, border, outline … CSS Flexbox, Grid, Block, Table … LAYOUT ANIMATION property & VALUES Typed om PARSER FONT METRIcs HE PAINT API { } <header ></header>
43. LAYOUT property & VALUES Typed om PARSER FONT METRIcs Html CSS JAVASCRIPT
44. property & VALUES Typed om PARSER FONT METRIcs Html SS SCRIPT <script> if ("paintWorklet" in CSS) { CSS.paintWorklet.addModule(“worklet.js"); } else { document.body.innerHTML = "You need support for CSS Paint API to view this demo :("; } </script>
45. property & VALUES Typed om PARSER FONT METRIcs Html SS SCRIPT <script> if ("paintWorklet" in CSS) { CSS.paintWorklet.addModule(“worklet.js"); } </script>
46. Main Thread worklet process worklet process worklet process worklet process Browser JS worklet.addModule worklet The Workout Lifecycle
47. property & VALUES Typed om PARSER FONT METRIcs SS SCRIPT // declare the custom paint. class CheckerPaint { } // register the custom paint. registerPaint("checker", CheckerPaint);
48. property & VALUES Typed om PARSER FONT METRIcs SS SCRIPT // declare the custom paint. class CheckerPaint { paint () { } } // register the custom paint. registerPaint("checker", CheckerPaint); (ctx, geom, styleMap)
49. property & VALUES Typed om PARSER FONT METRIcs SS SCRIPT // declare the custom paint. class CheckerPaint { paint (ctx, geom, styleMap) { } } // register the custom paint. registerPaint("checker", CheckerPaint);
50. property & VALUES Typed om PARSER FONT METRIcs SS SCRIPT // declare the custom paint. class CheckerPaint { paint (ctx, geom, styleMap) { const colors = ["#f15278", "#fff"]; const size = 32; } } // register the custom paint. registerPaint("checker", CheckerPaint);
51. property & VALUES Typed om PARSER FONT METRIcs SS SCRIPT // declare the custom paint. class CheckerPaint { paint (ctx, geom, styleMap) { const colors = ["#f15278", "#fff"]; const size = 32; for (let y = 0; y < geom.height / size; y++) { for (let x = 0; x < geom.width / size; x++) { } } } } // register the custom paint. registerPaint("checker", CheckerPaint);
52. property & VALUES Typed om PARSER FONT METRIcs SS SCRIPT ... for (let y = 0; y < geom.height / size; y++) { for (let x = 0; x < geom.width / size; x++) { } } ...
53. property & VALUES Typed om PARSER FONT METRIcs SS SCRIPT ... for (let y = 0; y < geom.height / size; y++) { for (let x = 0; x < geom.width / size; x++) { } } ... const color = colors[(x + y) % colors.length]; ctx.beginPath(); ctx.fillStyle = color; ctx.rect(x * size, y * size, size, size); ctx.fill();
54. property & VALUES Typed om PARSER FONT METRIcs Html SS SCRIPT <script> if ("paintWorklet" in CSS) { CSS.paintWorklet.addModule("circle.js"); } else { document.body.innerHTML = "You need support for CSS Paint API to view this demo :("; } </script>
55. property & VALUES Typed om PARSER FONT METRIcs Html SS SCRIPT <body> <header></header> <script> if ("paintWorklet" in CSS) { CSS.paintWorklet.addModule("circle.js"); } else { document.body.innerHTML = "You need support for CSS Paint API to view this demo :("; } </script> </body>
56. property & VALUES Typed om PARSER FONT METRIcs Html SS SCRIPT <head> <style> header { background-image: paint(checker); } </style> </head> <body> <header></header> <script> if ("paintWorklet" in CSS) { CSS.paintWorklet.addModule("circle.js"); } else { document.body.innerHTML = "You need support for CSS Paint API to view this demo :("; } </script> </body>
57. ckground, border, outline … CSS Flexbox, Grid, Block, Table … LAYOUT ANIMATION property & VALUES Typed om PARSER FONT METRIcs HE PAINT API
58. Understanding CSS Houdini - @OhansEmmanuel