React + WebGL

@parrissays

repos: 
github.com/parris/reactgl-experiments
github.com/parris/react-pong
github.com/parris/react-three-experiments

A Little About Me

Question 1:
Who here uses React?

Question 2:
Who here uses WebGL?

Question 3:
Who here as used them together in any capacity?

React gets the frontend people going

More than these 

kids love spongbob

More than N64....

We're all fangirlin'

For good reason,
react gives us:

• Composability
• ...

Ya, actually, that's all we need. Just one bullet point

Easier to Understand

Hunting for Code... is bad

Why is composability so powerful? (pong example)

Wait... I understand this?!

Our <Court> component

This all leads to a
"scene graph"

Fancy shmancy hot-reloading (sphere example)

HOLY FUCK! YES!

Where are you now?

TWGL.js (manual work)

React + Three

React + Pixi 

React Three Renderer?

Performance?

• We don't know, it seems better given the better control over when/how renders occur
• Really slow while the console is open
• Some overhead due to how react renders/initializes components

Debbie Downers?

• Sometimes hard to debug since so much is going on when react calls a render method
• I can foresee having issues isolating the root cause of performance issues

Getting Set-up

• npm install -g yo
• npm install -g generator-redux
• mkdir my-react-webgl-thing
• cd my-react-webgl-thing
• yo redux
• npm install --save react-three
• copy paste some code from one of my repos