Declarative HTML5 Canvas with Konva and react-konva

Enter Konva and react-konva. All the benefits of declarative code, but rendered on the canvas.

I'm gonna let Anton Lavrenov, the author of Konva, explain:

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

That.

It's exactly what we need to push our animated React apps to thousands of elements without spending too much time thinking about the how of rendering. Best leave the hairy details to somebody else.

Let's try out two examples:

1. Pushing our particle generator to 20,000 elements
2. An n-body collision simulator built with MobX