New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does A-Frame work with React? #365

Closed
trusktr opened this Issue Jan 9, 2016 · 10 comments

Comments

Projects
None yet
2 participants
@trusktr
Copy link

trusktr commented Jan 9, 2016

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?

@trusktr trusktr changed the title Does it work with React? Does A-Frame work with React? Jan 9, 2016

@ngokevin

This comment has been minimized.

@ngokevin ngokevin closed this Jan 9, 2016

@ngokevin

This comment has been minimized.

@trusktr

This comment has been minimized.

Copy link

trusktr commented Jan 10, 2016

@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

This comment has been minimized.

Copy link
Member

ngokevin commented Jan 10, 2016

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

This comment has been minimized.

Copy link

trusktr commented Jan 10, 2016

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

@ngokevin

This comment has been minimized.

Copy link
Member

ngokevin commented Jan 10, 2016

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

@trusktr

This comment has been minimized.

Copy link

trusktr commented Jan 10, 2016

@ngokevin ECS?

@ngokevin

This comment has been minimized.

Copy link
Member

ngokevin commented Jan 10, 2016

Sorry, shouldn't be using acronyms :)

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

@trusktr

This comment has been minimized.

Copy link

trusktr commented Jan 10, 2016

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

This comment has been minimized.

Copy link
Member

ngokevin commented Jan 10, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment