We love TypeScript. I’ll get into the reasons why later. And we love virtual reality. Being able to create WebVR experiences has been a focus at Olio Apps this year. This lead us to create a set of tools to help developers to make A-Frame experiences using TypeScript.
A-Frame TypeScript Toolkit makes it easy to build standalone components and systems that can be used in other A-Frame projects.
First, we’ve found that strict typing help us read and write code faster. The code is self-documenting, indicating what model is expected at every step. This information makes the code more readable and helps the developer understand what each piece of code is doing faster.
In addition to writing code faster, TypeScript also helps us write better code. In one way, it forces the developer to consider the structure of data more carefully. The code is more thoughtfully written with deep understanding of data structures and how models are related. Beyond that, TypeScript also finds more errors at compile-time rather than run-time so less problematic code gets pushed to production.
Features and Tooling
Additionally, a great tool that TypeScript affords is Visual Studio Code TypeScript Intellisense which offers code completion, hinting, and type definitions that significantly improve the development process.
A-Frame is a web virtual reality framework. We chose A-Frame because it is a powerful open-source framework with great documentation, a 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.
A-Frame TypeScript Toolkit Overview
The toolkit we have created at Olio Apps combines the power of TypeScript with the accessibility of A-Frame making it easy to develop WebVR.
At its core, the toolkit provides wrapper classes creatively named
SystemWrapper which allow you to create strictly typed A-Frame components and systems. These base classes contain all the A-Frame lifecycle methods that can be overridden to suit your desired behavior when you extend the class to create your own custom component or system class.
The toolkit also contains a CLI which, when globally installed and initiated, makes getting started a breeze. Currently, the CLI supports creating standalone components and systems that can be exported to npm and shared in other A-Frame projects. I’ll discuss more details on using the CLI in the
Quick Start Guide section.
Quick Start Guide
The fastest way to get started making custom systems and components using the toolkit is through the CLI. The starter code generated by the CLI not only includes starter code for components or systems (your choice) but also includes build commands and webpack configurations to expedite the development process. Complete the following steps to get started developing WebVR with TypeScript.
1. Global Installation
Globally installing the toolkit will allow you to use the CLI to generate a VR project from anywhere on your computer.
yarn global add aframe-typescript-toolkit (or npm install -g aframe-typescript-toolkit)
2. Initiate Project with CLI
Using the command line, navigate to the directory where you would like to add your new A-Frame TypeScript project.
Run the command to initialize the toolkit:
You will be prompted to select from
Component for starters.
Enter your project’s name (this will be the name of the new directory). Use
new-component for now.
3. Install & Serve
Navigate into your new project directory:
Build the project:
And start the server to see the boilerplate component in action (http://localhost:3000/) :
The project generated by the CLI comes with a README that includes tips on customizing the component (or system) and can point you to resources to help the process. While the server is running, changes made to the files in the
/src directory are served hot to help you test and debug your creation.
Click the video below to see how you can edit the program in Visual Studio Code and watch your changes be dynamically applied in the browser:
Sharing your new custom component is easy. Run
yarn build to create CDN or npm publishable artifacts in the dist folder.
A-Frame TypeScript Redux
Another thing we love, beyond TypeScript and WebVR is Redux. Which lead us to use this A-Frame TypeScript Toolkit to create redux-store aware systems and components. This library is called aframe-typescript-redux and it is an excellent example of using the toolkit to create A-Frame artifacts that can be shared. See our previous post and read the documentation to learn more.
Creating custom components and systems are a great way to start contributing to the WebVR community. If you are familiar with TypeScript (or eager to learn it) and excited about WebVR development, give the toolkit a try. We would love to hear your feedback and see the projects you create.