Houdini — великий разоблачитель

Конвейер рендеринга в браузере

The Extensible Web Manifesto

JavaScript

Полифил

(function(self) {
	'use strict';
	if (self.es2020feature) {
		return;
	}
	self.es2020feature = function() {
		// Do some magic
	};
	self.es2020feature.polyfill = true;
})(this);

Понифил 🦄

ponyfill.com

// is-nan-ponyfill.js
module.exports = function (value) {
	return value !== value;
};

// app.js
var isNanPonyfill = require('is-nan-ponyfill');
isNanPonyfill(5);

Транспайлер

// ES6
let point = { x: 0, y: 0 };
const {x, y} = point;
const arrowFunction = (a) => a ** 2;

// ES5
"use strict";
var point = { x: 0, y: 0 };
var x = point.x,
    y = point.y;
var arrowFunction = function arrowFunction(a) {
  return Math.pow(a, 2);
};

CSS

Ошибки в проектировании CSS

• box-sizing должен быть border-box по умолчанию.
• z-index следовало назвать z-order или depth и он должен Просто Работать для всех элементов (как для flex-элементов).
• margin-top и margin-bottom никогда не должны схлопываться автоматически, так как это корень всего margin-collapse зла.
• border-radius должен был называться corner-radius.
• size должен был быть сокращением для width и height, а не отдельным свойством @page для обозначения размера листа.

Polyfill.js 🎉

Polyfill({
		declarations:["position:sticky"]
	})
	.doMatched(function(rules) {
		/* add styles */
	 })
	.undoUnmatched(function(rules) {
		/* reset styles */
	});

Василий Ванчук — Отполифиль свой CSS на MinskCSS Meetup #2

CSS-TAG Houdini Task Force 🎉

CSS Custom Properties

/* CSS */
:root {
	--r: 255;
	--g: 20;
	--b: 147;
	--deeppink-color: rgb(var(--r), var(--g), var(--b));
}

.pink-element {
	--element-width: 200px;
	--element-border-width: 20px;
	background-color: var(--deeppink-color);
	width: calc(var(--element-width) + var(--element-border-width));
}

// JavaScript
const isSupported = CSS.supports('--custom', 'property');

// Получить значение custom property
const pinkElement = document.querySelector('.pink-element');
const elementWidth = window
   .getComputedStyle(pinkElement)
   .getPropertyValue('--element-width');

// Изменить custom property для узла
pinkElement.style.setProperty('--element-width', '300px');

// Изменить custom property в :root
document.documentElement.style.setProperty('--r', 190);

CSS Parser API

CSS Parser API

var background = window.cssParse.rule("background: green");
console.log(background.styleMap.get("background").value) // "green"

var styles = window.cssParse
	.ruleSet(".foo { background: green; margin: 5px; }");
console.log(styles.length) // 5
console.log(styles[0].styleMap.get("margin-top").value) // 5
console.log(styles[0].styleMap.get("margin-top").type) // "px"

const style = fetch("style.css")
	.then(response => CSS.parseStylesheet(response.body));
style.then(console.log);

CSS Typed OM

Проблема

const example = document.querySelector('.slide');
const elementFontSize = parseFloat(
	window.getComputedStyle(example).getPropertyValue('font-size')
);
console.log(elementFontSize); // 25

example.style.setProperty(
	'transform',
	'translate(50px, calc(1em + 5px))'
);

Решение

const exampleStyleMap = document.querySelector('.slide').styleMap;
const fontSizeValue = exampleStyleMap.get('font-size').value;
console.log( exampleStyleMap.get('font-size') );
// CSSUnitValue {value: 25, unit: "px", type: "length"}

const calcValue = new CSSMathSum(CSS.em(1), CSS.px(5));
const transformValue = new CSSTransformValue([
	new CSSTranslation(
		new CSSUnitValue(50, 'px'),
		calcValue
	)]);
exampleStyleMap.set('transform', transformValue);

typed-om

chrome://flags

CSS Properties and Values API

// JavaScript
CSS.registerProperty({
	name: '--sidebar-width',
	syntax: '<length>',
	inherits: true,
	initialValue: '80px'
});

/* CSS */
@property --sidebar-width {
	syntax: "<length>",
	inherits: true,
	initialValue: "80px"
}

Синтаксис

<length>
<number>
<percentage>
<length-percentage>
<color>
<image>
<url>
<integer>
<angle>
<time>
<resolution>
<transform-function>

<length | number>
<length+>
small | smaller

Демо sidebar

Worklets

// app.js — псевдокод
window.someWorklet
	.addModule('some-worklet.js')
	.then(_ => {
		console.log('some-worklet — loaded');
	});

// some-worklet.js — псевдокод
registerSomeWorklet('some-worklet-name', class {
	process(arg) {
		// делаем магию
	}
});

CSS Painting API 🎨

CSS Painting API

Можно применять для отрисовки свойств:

• background-image
• border-image
• list-style-image
• content
• cursor

// my-paint.js
registerPaint('my-paint', class MyPaint {
	static get inputProperties() { return ['--foo']; }
	static get inputArguments() { return ['<color>']; }
	static get contextOptions() { return { alpha: true }; }

	paint(ctx, geom, properties, args) {
		// ctx - контекст для рисования, как в canvas
		// geom - размеры доступной для рисования области
		// properties - свойства, на которые реагирует paintWorklet
		// args - переданные в paintWorklet аргументы
		// Можно рисовать почти как на обычном canvas
	}
});

/* style.css */
.my-element {
	--foo: deeppink;
	background-image: paint(my-paint);
}

// app.js
CSS.registerProperty({
	name: '--foo',
	syntax: '<color>',
	inherits: true,
	initialValue: 'black',
});
CSS.paintWorklet.addModule('my-paint.js');

Демо ripple

Демо border-colors

Демо border-slicer

Демо image-placeholder

CSS Layout API 🚀

/* CSS */
.layout-example {
	--foo: 5;
	display: layout(my-layout);
}

.layout-example .child {
	--bar: 200px;
}

// JavaScript
window.layoutWorklet.addModule('my-layout.js');

Демо layout(hexagon)

CSS Animation Worklet API

Web Animations

// JavaScript
const element = document.querySelector('.my-element');
element.animate([
	{'--some-color': 'red',  'opacity': 0 },
	{'--some-color': 'blue', 'opacity': 1},
], {
	direction: 'alternate',
	duration: 5000,
	iterations: 10, // Infinity
});

Polyfill

// worklet.js
registerAnimator(
	'scroll-position-animator',
	class {
		constructor(options) {
			this.options = options;
		}

		animate(currentTime, effect) {
			effect.children.forEach((child) => {
				child.localTime = currentTime;
			});
		}
	});

// app.js

const frames = [
	new KeyframeEffect(
		document.querySelector('.scroll-to-top'),
		[
			{ 'transform': 'translateY(100px)', 'opacity': '0' },
			{ 'transform': 'translateY(0)', 'opacity': '1' }
		],
		{ duration: 1, iterations: 1, fill: 'both' }
	)
];

// app.js

const timeline = new ScrollTimeline({
	scrollSource: document.querySelector('.page-wrapper'),
	orientation: 'vertical',
	startScrollOffset: '200px',
	endScrollOffset: '300px',
});

// app.js

animationWorklet.addModule('worklet.js').then(() => {
	const animation = new WorkletAnimation(
		'scroll-position-animator',
		frames,
		timeline
	);
	animation.play();
});

anim-worklet

Демо scroll-animation

Демо от Google

Font Metrics API

Почему Houdini хорош?

1. Производительность;
2. Удобство использования;
3. Возможность написания полифилов для CSS;
4. Меньше различий между браузерами;
5. Полный контроль.

Недостатки Houdini

1. Еще несколько спецификаций, которых нужно долго ждать;
2. Не решает проблему поддержки старых браузеров;
3. Для эффективной разработки нужно еще больше знаний;
4. Асинхронная природа Worklets — моргание стилей.

Is Houdini ready yet‽

Спасибо за внимание!

mefody.github.io/talks/houdini-magic/
@dark_mefody
n.a.dubko@gmail.com