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.

1. WEBASSEMLBY IN HOUDINI CSS
IS IT POSSIBLE?
Oleksandr Skachkov @alSkachkov

2. ABOUT ME
• Itera’s FrontEnd Tech Lead
• WebKit contributor
• WebAssembly enthusiast
• Twitter: @alSkachkov

3. • Early days of CSS
• Houdini CSS
• WebAssembly
• Houdini CSS & WebAssembly together

4. Web is one of the most popular platform

5. What was before

7. Browsers
with own stylesheet language

9. CSS was born

10. Håkon Wium Lie

11. Bert Bos

15. CSS with Pre-Processors

17. CSS3

20. Can we evolve CSS farther?

21. YES WE CAN, BUT

22. CHALLENGES
• Too many CSS properties 373 (https://meiert.com/en/indices/css-properties/)
• Adding new features might take too long

23. CSS conic-gradient case

24. CSS CONIC-GRADIENT

25. CSS CONIC-GRADIENT

26. CSS CONIC-GRADIENT

27. CSS CONIC-GRADIENT
https://twitter.com/anatudor/status/611659012212441088

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

30. Can solve this?

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/

35. RENDERING PIPLINE

36. HOUDINI CSS

37. WORKLET
Worklet is a lightweight version of Web Workers
addPromise = worklet.addModule(moduleURL);
CSS.paintWorklet.addModule(“Worklet.js”)

38. CSS LAYOUT API WORKLET

39. CSS LAYOUT API WORKLET

40. DEMO

41. CSS PAINT API WORKLET

42. CSS PAINT API WORKLET

43. CSS PAINT API WORKLET

44. CSS PAINT API WORKLET

45. CSS PAINT API WORKLET

46. CSS PAINT API WORKLET

47. CSS PAINT CONTEXT
PaintRenderingContext2D limited subset of CanvasRenderingContext2D
• not implement :
• CanvasImageData
• CanvasText
• Implements draw operations:
• drawImage()
• fillRect()

48. CSS CUSTOM PROPERTY

49. CSS CUSTOM PROPERTY

50. CSS CUSTOM PROPERTY

51. CSS CUSTOM PROPERTY
• <color>
• <image>
• <url>
• <integer>
• …

52. DEMO
https://github.com/gskachkov/houdini-css-wasm

53. CAN WE USE HOUDINI CSS?

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

56. Paint something complicated

57. FRACTALS

58. Can we render faster?

60. if we use WebAssembly

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

63. What is WebAssembly (aka WASM)?

64. WebAssembly is build target

66. safe, portable, low-level code format designed for efficient execution
and compact representation
https://webassembly.github.io/spec/intro

67. C - Source code

68. RUST - Source code

69. S - Expression

70. S - Expression

71. fast to load
Byte code

73. Will WebAssembly replace JavaScript?

74. Will WebAssembly replace JavaScript?
Not now ☺

75. but WebAssembly will transform web

76. WASM WILL BRING TO WEB
•New languages
•Predictable high performance

77. WEBASSEMBLY RIGHT NOW

78. CAN WE USE WEBASSEMBLY?
Yes we can

79. BUILD TARGET FOR
• C/C++
• Rust
• C# - Mono and CoreRT
• Go
• BrainFuck
• Even more: https://github.com/appcypher/awesome-wasm-langs

80. WEBASSEMBLY & HUIDINI CSS

81. Can we use WebAssembly in Worklets?

82. YES WE CAN, BUT

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);

85. DEMO
https://github.com/gskachkov/houdini-css-wasm

86. PERFORMANCE WITH WEBASSEMLY

87. SUMMARY

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

89. RESOURCES ABOUT WEBASSEMBLY
• Articles:
• https://hacks.mozilla.org/category/webassembly/
• https://pspdfkit.com/blog/
• Site: http://webassembly.org/
• Github: https://github.com/WebAssembly/
• Twitter: @WasmWeekly - WebAssemblyWeekly

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/

92. THANKS!

93. QUESTIONS?