WebAssembly in Houdini CSS, is it possible?
0 likes1,111 views
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.
![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);](https://image.slidesharecdn.com/wasm-css-skachkov-lvivcss-181112220307/85/WebAssembly-in-Houdini-CSS-is-it-possible-84-320.jpg)
WebAssembly in Houdini CSS, is it possible?
- 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
- 7. Browsers with own stylesheet language
- 9. CSS was born
- 10. Håkon Wium Lie
- 11. Bert Bos
- 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
- 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/
- 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()
- 51. CSS CUSTOM PROPERTY • <color> • <image> • <url> • <integer> • …
- 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
- 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
- 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);
- 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?