Understanding CSS Houdini
An Authentic Cartoon Guide.
- OhansEmmanuel
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
me
You
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Javascript having a healthy
flight to the future?
Slide 7
Slide 7 text
CSS Having a comfortable stroll?
Slide 8
Slide 8 text
The future of web development is super bright!
And CSS isn’t t
aking a Back seat in all this.
Slide 9
Slide 9 text
Houdini?
• A future CSS technology
• Some experimental features are going to be discussed
• Support’s not that great - yet!
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Think of it as learning the css grid 3 years ago
A glimpse int
o the fut
ure!
Slide 12
Slide 12 text
What is houdini ?
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
I’m with you on that. It sounds *kinda* strange!??
houdini?
magic word used in the
Harry Potter series??
Slide 15
Slide 15 text
What’s all this talk about magic anyway?
Slide 16
Slide 16 text
What’s all this talk about magic anyway?
Slide 17
Slide 17 text
CSS Houdini gives you access t
o low
level css rendering apis THAT ALLOW
YOU build magical things!
Slide 18
Slide 18 text
Empty File
+ Code Editor = Web App
Slide 19
Slide 19 text
Empty File
+ Code Editor = Web App
non-coder
Slide 20
Slide 20 text
Under the hood …
Slide 21
Slide 21 text
Under the hood …
Slide 22
Slide 22 text
Under the hood …
Layout, then Paint.
Slide 23
Slide 23 text
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!
Slide 24
Slide 24 text
papa, how are
babies made?
where did i
come from?
I wish I knew
the answer to that!!!
Slide 25
Slide 25 text
papa, how are
babies made?
where did i
come from?
Somewhere in
mama’s belly
Slide 26
Slide 26 text
2049 ...
hey foetus, get
a blonde hair
and blue eyes
Slide 27
Slide 27 text
I’ve just being a part of the
mostly magical process of
creating a child.
This is exactly how
you’d feel with Houdini!
Slide 28
Slide 28 text
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!
Slide 29
Slide 29 text
But how is this all possible ?
Slide 30
Slide 30 text
Magic comes at a cost.
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
TO create magic,
you need a magic wand
In the CSS Houdini world, this magic wand
is called a worklet.
Slide 33
Slide 33 text
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.
Slide 34
Slide 34 text
Main Thread
worklet process
worklet process
worklet process
worklet process
Browser JS
worklet.addModule
worklet
The Workout Lifecycle
Slide 35
Slide 35 text
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.
background, border, outline …
CSS
Flexbox, Grid, Block, Table …
LAYOUT
Transitions, translations, transformations
ANIMATION
property & VALUES Typed om
PARSER
FONT METRIcs
THE PAINT API
Slide 40
Slide 40 text
ckground, border, outline …
CSS
Flexbox, Grid, Block, Table …
LAYOUT
ANIMATION
property & VALUES Typed om
PARSER
FONT METRIcs
HE PAINT API
Slide 41
Slide 41 text
ckground, border, outline …
CSS
Flexbox, Grid, Block, Table …
LAYOUT
ANIMATION
property & VALUES Typed om
PARSER
FONT METRIcs
HE PAINT API
Slide 42
Slide 42 text
ckground, border, outline …
CSS
Flexbox, Grid, Block, Table …
LAYOUT
ANIMATION
property & VALUES Typed om
PARSER
FONT METRIcs
HE PAINT API
{ }
Slide 43
Slide 43 text
LAYOUT
property & VALUES Typed om
PARSER
FONT METRIcs
Html
CSS
JAVASCRIPT
Slide 44
Slide 44 text
property & VALUES Typed om
PARSER
FONT METRIcs
Html
SS
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 :(";
}
Slide 45
Slide 45 text
property & VALUES Typed om
PARSER
FONT METRIcs
Html
SS
SCRIPT
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule(“worklet.js");
}
Slide 46
Slide 46 text
Main Thread
worklet process
worklet process
worklet process
worklet process
Browser JS
worklet.addModule
worklet
The Workout Lifecycle
Slide 47
Slide 47 text
property & VALUES Typed om
PARSER
FONT METRIcs
SS
SCRIPT
// declare the custom paint.
class CheckerPaint {
}
// register the custom paint.
registerPaint("checker", CheckerPaint);
Slide 48
Slide 48 text
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)
Slide 49
Slide 49 text
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);
Slide 50
Slide 50 text
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);
Slide 51
Slide 51 text
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);
Slide 52
Slide 52 text
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++) {
}
}
...
Slide 53
Slide 53 text
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();
Slide 54
Slide 54 text
property & VALUES Typed om
PARSER
FONT METRIcs
Html
SS
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 :(";
}
Slide 55
Slide 55 text
property & VALUES Typed om
PARSER
FONT METRIcs
Html
SS
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 :(";
}
Slide 56
Slide 56 text
property & VALUES Typed om
PARSER
FONT METRIcs
Html
SS
SCRIPT
header {
background-image: paint(checker);
}
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule("circle.js");
} else {
document.body.innerHTML =
"You need support for CSS Paint API to view this demo :(";
}
Slide 57
Slide 57 text
ckground, border, outline …
CSS
Flexbox, Grid, Block, Table …
LAYOUT
ANIMATION
property & VALUES Typed om
PARSER
FONT METRIcs
HE PAINT API