ruby javascript inspirational browser programming languages css performance iot

Blasting React into space: Building fluid, beautiful interfaces with React and WebGL (and other exotic explorations)

Ashi Krishnan · Full Stack Fest 2017

At its heart, React is about describing a living, changing tree. We typically use it to build an HTML DOM tree, and obviously, React is written that in mind.

But what if I told you that the DOM was only the beginning? Your React components can describe not just HTML, but whole WebGL scenes, letting you seamlessly integrate beautiful, GPU-accelerated interfaces into your projects.

First, we'll build a React / WebGL binding from whole cloth, learning about the differences between rendering with HTML and rendering with WebGL as we go.

Then, we'll go deeper, exploring new and exotic species of trees to bring to life: animation, audio, and even Javascript code itself. Our explorations will bring us into contact with each piece of the React trinity—the pattern (virtual DOM), syntax (JSX), and implementation (reconciler). There's something in here for everyone who uses React, even if your daily practice remains firmly rooted in the React/DOM combo we all know and love.