At Olio Apps, we are eager to present our first tool for creating scalable WebVR applications. Our experience engineering web and native apps along with our motivation to develop in the virtual reality (VR) and mixed reality (MR) space has brought us to create aframe-typescript-redux. This tool combines the crowd-favorite WebVR framework, A-Frame, with the powerful state management tool known by many 2D developers, Redux.
This library is ideal for someone who has looked at the A-Frame API and has a working knowledge of Redux. However, if you're new to VR development, but have some experience with Redux, or if you are familiar with the A-Frame API, and want to expand your application state management toolkit, this is a great place to start.
Motivation
The two major goals for this project were to create something that would help us build applications in a manner which aligns with our engineering paradigms and also to contribute to the WebVR community.
A-Frame
A-Frame is a web virtual reality framework. We chose A-Frame because it is a powerful open-source framework with great documentation, supportive community, and excellent learning material. A-Frame is good for beginners to VR development but can also be scaled to make larger VR (and MR) applications. If you are new to VR development, I highly recommend reviewing the documentation.
Redux
One of the major challenges to creating scalable VR applications is maintaining a reliable game state (or application state). This is where Redux comes in. Redux is a state management framework that has three main principles:
- a single source of truth
- read-only state
- application state changes are made only through pure functions
Not every app requires the level of rigor provided by Redux. However, it is ideal for larger data-driven applications where scalability, immutability, and stability are priorities. Redux also comes with good documentation and an active community. If you're brand new to Redux, I recommend starting at redux.js.org for some useful background information.
A word of caution on using React: we found many of the existing examples that connect Redux stores and A-Frame components facilitate the connection using React. This is not recommended. React is a massive system that is heavy on memory usage and can result in significant performance issues for VR projects.
Usage
If you are already familiar with Redux and A-Frame, using aframe-typescript-redux (no typescript required) is a breeze. There are three basic steps.
- Define a Redux store
- Define an A-Frame entity
- Make your entity
redux-connectedusing this library
Documentation
The README contains step by step instructions to creating a simple Redux connected A-Frame component. There is also a code sandbox containing a live, running example.
Getting Started
To become more familiar with this tool and move beyond the simple example given in the README, I recommend trying the following challenge. If you are a developer who has used Redux before, use a Redux store from one of your existing projects and connect it to an A-Frame VR frontend using the redux-connected component in aframe-typescript-redux. Or, if you have an existing VR frontend, you can rewrite the VR game or application logic using Redux as the game state.
If you are completely new to both A-Frame and Redux, I recommend reading the docs (of course), then recreating a simple A-Frame app like this Whack-A-Mole game, then rewriting the game logic using Redux state and actions.
Going Forward
At Olio Apps we are committed to contributing to the WebVR community.
Right now, aframe-typescript-redux is available for you to use as a black-box component connecting A-Frame and Redux. In the near future, we will be expanding this library to facilitate the creation of more customized redux-connected components.
We look forward to hearing about your experience and seeing your examples using aframe-typescript-redux. Your feedback will help us create better software.
This is just the first of many A-Frame development tools we have been working on at Olio Apps. And we will be releasing more tools and examples in the coming months. Be sure to subscribe to be notified about our next releases.