Data Driven Styling

by Oleg Slobodskoi @oleg008

State Based Styling

User settings

API call

Time
etc.

Streaming Animations

🎏

Google Material Motion for JS

No Transitions
No Keyframes

😔

Extreme Perf

60 FPS

JavaScript

One thread

😱

CSSOM FTW

🏎

Create CSS Rule

Update CSS Rule

JSS Function Values

Remove Overhead

🤓

Observables

Pointer events

Physics data

Streams coordination

JSS 9 Example

Observable + CSSOM = ❤️

Decoupled

Lazy

Thanks!

Data Driven Styling

By Oleg Isonen

Data Driven Styling

  • 2,483