Does A-Frame work with React?

[trusktr]

I'm curious to know, when React adds stuff to the DOM after it's diffing process, will that stuff be picked up by A-Frame?

[ngokevin]

Sure does!

https://github.com/ngokevin/aframe-react https://github.com/ngokevin/aframe-react-boilerplate

[ngokevin]

https://github.com/ngokevin/threeschwifty https://github.com/ngokevin/a-wakens

[trusktr]

@ngokevin

So without using aframe-react, if I have aframe and react from CDN loaded in the page (and that's all), then I can just start writing React components without needing to do anything special? For example

class Foo extends React.Component {
  render() {
    return (
      <a-scene>
      </a-scene>
    )
  }
}

Do you know how A-Frame detects new elements in the DOM to read from (and then render based on what it sees)? Is it using some browser APIs? Or something custom?

EDIT: I answered my own question after looking at the source: It's using document.registerElement (the polyfill if not available)! This is awesome. So people can use anything like Mithril, Mercury, Om, CitoJS, etc, to output elements to the DOM (elements with names that match those registered by A-Frame) and then A-Frame will automatically detect those and update the rendering.

This is really cool!! This is probably the best use of registerElement I've ever seen, and a good idea that I'd like to borrow for what some of us are working on at http://infamous.io.

[ngokevin]

Yeah, we use the Custom Element API pretty heavily.

You can use plain A-Frame with plain React, but I'd recommend using aframe-react so you can pass component data as props using plain objects. You're going to end up doing that yourself anyways. It's a very thin unopinionated layer that preserves the entity-component system of A-Frame. I have some more features in mind too to help pair along with A-Frame.

const material = {color: 'red', metalness: 1};
<Entity geometry={{primitive: box, width: 5}} {...material}/>

[trusktr]

Cool. It's really awesome stuff! This makes me think of regular HTML elements in a whole new way. :smile:

[ngokevin]

Yeah, it's quite genius, bringing ECS to the DOM. @jcarpenter and @dmarcos idea.

[trusktr]

@ngokevin ECS?

[ngokevin]

Sorry, shouldn't be using acronyms :)

https://en.wikipedia.org/wiki/Entity_component_system

[trusktr]

Oh, yes, it's also what Famous was doing before it got abandoned. A scene graph in Famous was made up of instances of a Node class (entity), and onto each Node could be added various components (tranforms, meshes, event handlers, etc) that could be independent or interact with other components on the same node. They were also making something called Famous Framework, which was their attempt to make a declarative HTML layer on top of their Engine. But they weren't using document.registerElement!

I wonder how I overlooked all this time that custom elements would be the perfect communication mechanism between a rendering engine (Three.js, Famous, Babylon, etc) and a DOM manipulation library (React, Mithril, etc).

[ngokevin]

Ah wow, yeah, that's very similar. I should read through that more and see if we can take any ideas from it.

Yeah, it's pretty agnostic. We found it works well with D3 too.