Getting Started

Getting Started

MYR uses some core technologies.

• AFrame - This is the library that creates the VR scene in the browser. It uses Three.js to build the model of the object. Aframe uses an Entity Component System(ECS). This is a really big idea and is vital to MYR.
• React - React is THE JavaScript frontend of the moment. Main reactive systems mainsteam. The big idea is take data and define how you process it into components. This is a huge simplification but once you see the magic of a reactive system, you will see why this is so popular. This also brings in ES6(==ECMAScript2015) via Babel.
• Firebase - This is a stand in for a backend. It deals with auth, storage and a database.
• Redux - Application state management. This allows us to pass state between components. We do not use React Context, yet ;).
• Create React App - This provided us with the core application and continues to manage the build system for us. There is always the option of 'ejecting' and managing the build on our own. Their README is a great place to learn about React's core architecture.

This handles all of the major technology going into it. It should be mentioned that we also do leverage a lot of the Aframe registry for various parts of the project. Ace Editor makes it so we can focus on building MYR and not another great editor.

MYR

MYR is a singleton that produces JSON for us. We render that JSON into the respective components and pass it to React and render it in the DOM. React does not manage state of the objects in MYR but only the system surrounding. MYR itself provides a default object that we squash together with any object that is being passed in the constructor. This is the box() for example:

box = (obj) => {
    let el = this.core("box");      // get default object from myr.core() with "box" geometry
    this.els.push({...el,...obj});  // spread el then obj => save it to MYR.els
    return el.id;                   // return the id to use as a reference
  }

In the View component we process this JSON into HTML. MYR also provides an interface for interacting with the objects once they are created. This is still a work in progress but should provide a way to work with the objects in different ways. In this case for updates we usually go straight to the DOM for the interaction. We can also attach changes that we want to take place when the object has rendered in the DOM. Again, work in progress at the time of writing this.