Slide 1

Slide 1 text

CSS W E B A S S E M B LY- D R I V E N

Slide 2

Slide 2 text

VITALII BOBROV • Lead FE Engineer @ EPAM Poland • Perf and CSS fan • @AngularWroclaw organizer @bobrov1989 https://bobrov.dev

Slide 3

Slide 3 text

WebAssembly-Driven W H AT D O E S I T M E A N ?

Slide 4

Slide 4 text

https://bobrov.dev/css-paint-demos/game-of-life/

Slide 5

Slide 5 text

WA S M U S E D F O R T H E S TAT E U P D AT E

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

A N E W F I E L D F O R E X P E R I M E N T S I S O P E N

Slide 8

Slide 8 text

CONCEPT OVERVIEW Paint API Worklet V I E W

Slide 9

Slide 9 text

CONCEPT OVERVIEW Main-Thread JavaScript Paint API Worklet properties V I E W C O N TA I N E R

Slide 10

Slide 10 text

CONCEPT OVERVIEW Main-Thread JavaScript Paint API Worklet WebAssembly Module properties update V I E W C O N TA I N E R S TAT E M A N A G E R

Slide 11

Slide 11 text

CONCEPT OVERVIEW Main-Thread JavaScript Paint API Worklet WebAssembly Module properties state update V I E W C O N TA I N E R S TAT E M A N A G E R

Slide 12

Slide 12 text

I T R E M I N D S S O M E T H I N G …

Slide 13

Slide 13 text

PAINT API H O U D I N I

Slide 14

Slide 14 text

CSS PROPS ACCEPTING IMAGES • background-image • border-image • list style image • custom properties

Slide 15

Slide 15 text

HOW TO IMPLEMENT • Define a paint class in a separate file • Load worklet module • Use paint() CSS function as a value for image

Slide 16

Slide 16 text

PAINT WORKLET CLASS class Painter { paint(ctx, geom, props, args) {} } registerPaint('my-painter', Painter);

Slide 17

Slide 17 text

PAINT WORKLET CLASS class Painter { static get inputProperties() { return ['--custom-palette', 'color']; } paint(ctx, geom, props, args) {} } registerPaint('my-painter', Painter);

Slide 18

Slide 18 text

PAINT WORKLET CLASS class Painter { static get inputProperties() { return ['--custom-palette', 'color']; } static get inputArguments() { return ['', '']; } paint(ctx, geom, props, args) {} } registerPaint('my-painter', Painter);

Slide 19

Slide 19 text

LOAD WORKLET MODULE if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('paint.js'); } else { // Optionally provide a fallback. }

Slide 20

Slide 20 text

USE PAINT() FUNCTION IN CSS .paint-container { background: #000; background: paint(my-painter); }

Slide 21

Slide 21 text

USE PAINT() FUNCTION IN CSS .paint-container { --custom-palette: #333; color: #fff; background: #000; background: paint(my-painter); }

Slide 22

Slide 22 text

USE PAINT() FUNCTION IN CSS .paint-container { --custom-palette: #333; color: #fff; background: #000; background: paint(my-painter, 2, 25%); }

Slide 23

Slide 23 text

https://bobrov.dev/css-paint-demos/star-rating/

Slide 24

Slide 24 text

https://bobrov.dev/css-paint-demos/qr-code/

Slide 25

Slide 25 text

BENEFITS • Possible to run in a separate thread • Draw whatever you want using 2D Canvas • Renders only when needed

Slide 26

Slide 26 text

MATERIAL BACKGROUND C S S PA I N T I M A G E VS https://vitaliy-bobrov.github.io/css-paint-demos/md-bg/

Slide 27

Slide 27 text

MATERIAL BACKGROUND C S S PA I N T I M A G E VS https://vitaliy-bobrov.github.io/css-paint-demos/md-bg/ 813 B 2.39 KB worklet file only few bytes of CSS + init JS compressed JPEG cropped for mobile

Slide 28

Slide 28 text

JS IN CSS

Slide 29

Slide 29 text

https://bobrov.dev/css-paint-demos/bar-js-in-css/

Slide 30

Slide 30 text

J S O N D ATA F O R C H A R T I N C S S

Slide 31

Slide 31 text

J AVA S C R I P T I N C S S T O R E N D E R C S S

Slide 32

Slide 32 text

I S C S S A P R O G R A M M I N G L A N G U A G E T H E N ?

Slide 33

Slide 33 text

CUSTOM PROPERTIES & VALUES API H O U D I N I

Slide 34

Slide 34 text

CUSTOM PROPERTY .parent { --font-color: #fff; } .child { color: var(--font-color); }

Slide 35

Slide 35 text

CUSTOM PROPERTY .parent { --font-color: #fff; } .child { --font-color: #000; color: var(--font-color); }

Slide 36

Slide 36 text

CUSTOM PROPERTY .parent { --font-color: #fff; } .child { --font-color: #000; color: var(--font-color, #333); }

Slide 37

Slide 37 text

H O W T O A N I M AT E A S T R I N G T O A N O T H E R S T R I N G ?

Slide 38

Slide 38 text

CSS TYPES

Slide 39

Slide 39 text

REGISTER CUSTOM PROPERTY if ('registerProperty' in CSS) { CSS.registerProperty({ name: '--font-color', syntax: '', inherits: false, initialValue: '#cccccc' }); }

Slide 40

Slide 40 text

B U T S H U N T I T B E D E C L A R E D I N C S S ?

Slide 41

Slide 41 text

REGISTER CUSTOM PROPERTY @property --font-color { syntax: ''; initial-value: #cccccc; inherits: false; } https://github.com/vitaliy-bobrov/postcss-register-custom-props

Slide 42

Slide 42 text

https://css-houdini.rocks/animating-gradient

Slide 43

Slide 43 text

UPDATE & RENDER REQUEST J AVA S C R I P T

Slide 44

Slide 44 text

UPDATE CUSTOM PROPERTY element.style .setProperty(‘--font-color', '#fff');

Slide 45

Slide 45 text

LOAD WASM & REQUEST A NEW STATE import { Universe } from 'wasm-game-of-life'; const renderLoop = (now) => { universe.tick(); const cellsPtr = universe.cells(); const cells = new Uint8Array( memory.buffer, cellsPtr, width * height ); requestAnimationFrame(renderLoop); };

Slide 46

Slide 46 text

STATE MANAGEMENT W E B A S S E M B LY

Slide 47

Slide 47 text

WASM - BINARY INSTRUCTION FORMAT FOR A STACK-BASED VM

Slide 48

Slide 48 text

AVAILABLE OPTIONS

Slide 49

Slide 49 text

ONLY NUMBERS

Slide 50

Slide 50 text

LINEAR MEMORY

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

CONCEPT RECAP Main-Thread JavaScript Paint API Worklet WebAssembly Module properties state update V I E W C O N TA I N E R S TAT E M A N A G E R

Slide 53

Slide 53 text

THANK YOU U S E WA S M P O W E R F O R C S S A R T @bobrov1989 https://bobrov.dev Illustrations by cdd20 https://pixabay.com/users/cdd20-1193381