This document discusses using WebAssembly in CSS Houdini worklets to improve performance. It explains that while CSS Houdini APIs allow extending CSS functionality, adding new features can take a long time in browsers. WebAssembly offers high performance and new languages can be compiled to it. The document demonstrates loading a WebAssembly module in a paint worklet to render fractals faster than JavaScript alone. While promising, using WebAssembly in worklets still faces challenges around loading and running it, and the canvas API within worklets is limited.
28. CSS CONIC-GRADIENT
How long it takes to land in browsers:
• Chrome – 2 years (delivered)
• WebKit/Safari – 3 years (delivered recently)
• Firefox – not started
• Microsoft Edge – not started
29. CHALLENGES
• Too many CSS properties 373 (https://meiert.com/en/indices/css-properties/)
• Adding new features might take too long:
• conic-gradient – 3 years
• grid layout – 5 years
• flex– 7 years
• It is impossible to extend CSS properties by self
32. The Extensibility Web Manifesto
The web platform should expose low-level
capabilities that … , such as HTML and CSS,
allowing authors to understand and replicate
them.
33. HOW IT IS DONE IN A WEB
• HTML – Shadow DOM and Web Components
• JS + Event Loop + WEB API – FrameWorks, Libraries and Modules
• CSS - ?
34. a new set of APIs that will give developers the power to extend CSS itself
Houdini CSS
https://drafts.css-houdini.org/
54. PROS
• Gives you the freedom to create your own visual effects
• Doesn’t rely on adding extra elements or pseudo-elements to the DOM
• Provide abstraction and modularization for visual logic within a paint worklet
• Allow developers to use new features before browsers implement them
55. CONS
• Still in development
• Browsers have to load a worklet before use it
62. • Announced in 17 June 2015
• Supported by major Browsers
• Developed by WebAssembly Working
Group (W3C)
• Draft specific published 15 Feb 2018
WebAssembly – New Hope
83. CHALLENGES
• How to load WebAssembly module within Worklets?
• How to run it within Worklet?
84. WEBASSEBLY IN WORKLET
• encode WebAssembly to BASE64 and decode during Worklet load
• load webassembly and inline it to tag by:
const src = urlFromTag("script[language='javascript+layout’]”);
CSS.paintWorklet.addModule(src);
88. SUMMARY
• WebAssembly provide good performance improvements
• Access to ‘Canvas’ from WebAssembly really fast
• Size of worklet with WebAssembly might be bigger to pure js
• ‘Canvas’ object in Worklet is very limited to usual canvas
• CSS Houdini API is very promising technology
• CSS Houdini API still in development
90. RESOURCES ABOUT HOUDINY CSS
• Spec - https://drafts.css-houdini.org/css-paint-api-1
• Articles:
• Interactive Introduction to CSS Houdini, Sam Richard
• Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of, Philip
Walton
• What Houdini Means for Animating Transforms, Ana Tudor
• The CSS Paint API, Ruth John
91. RESOURCES ABOUT HOUDINY CSS
• Demos:
• Interactive Introduction to CSS Houdini, Sam Richard
• https://css-houdini.rocks
• https://googlechromelabs.github.io/houdini-samples/