The typical day of an A-frame developer

Do you remember my post on Medium about the typical day of an augmented reality developer? It was a satirical piece in which I described all the hurdles I found while developing with a new device like HoloLens: I loved and I still love Hololens, but developing with it means encountering bugs and limitations of the device (like battery life) that make your developer life complicated.

Today I want to replicate that with A-frame. In the past I spent some days trying to learn how A-frame works, but in the last days I had to work more thoroughly with it to do a networked VR application (maybe you’ll discover more about that soon), so I got a better taste on how it is and the difficulties that can be found while developing using it. I encountered a lot of complications, that’s why I wanted to write this satirical piece, that seems a bit the ones of VR Dizzy.

Before going on reading I want that you don’t misunderstand me: A-Frame is an interesting framework with a huge potential and most problems are due to the fact that it is still in development phase (it has not reached 1.0 version, yet), so don’t take this as a post against A-frame. It is just irony to vent all the angry moments of these latest times… because, even if it may seem unrealistic… most of the below things have actually happened.

This is the typical day of an A-frame developer:

Arrive at work.

Turn on the PC, open the browser, open the Glitch page of the A-frame project. (Glitch is a website that allows you to develop A-frame apps in your browser without forcing you to install a node.js server)

Run the project.

It works differently than from the night before. Maybe during the night, some gods of Mozilla have decided to make fun of you.

Spend 1 hour trying to make things work as the night before, having no idea about what to do because nothing was actually changed by you.

Discover that moving one line up and another down everything works again. It has no sense, but if it works, then it’s great.

Add the teleporting component to the VR scene.

Teleporting works, wow, awesome! Just a component to make such a complicated thing to work, A-frame is fantastic!

Add the networking component to add multiplayer.

Wow, multiplayer is here! All in web and with only two lines of code! Fantastic

Oh, actually testing the program with Oculus Rift seems that the teleporting doesn’t work, damn. But I remember having already filed a bug issue about this Rift problem and the dev of the component had fixed it (if you don’t use A-frame: the various components of A-frame are developed by individual developers (usually of Mozilla MR) that put them open-source so that everyone can use and modify them. There’s no corporate making a coordinate work, it is all developed and maintained by various people)

Oh, there is a new bug issue saying that it worked, then it didn’t work anymore, then it worked again, then it didn’t work anymore. That’s great. It seems that with this component timing is fundamental: you have to grab it in those months when it works for the Rift.

The component hasn’t been updated in the last 5 months and the dev isn’t answering frequently on the GitHub issues forums. Probably he’s busy doing other stuff for Mozilla. Cry in a corner for half an hour.

Find manliness again and spend hours digging into Google and Github trying to find a solution.

Don’t have time to go to eat because bugs have to be solved. Eat an Oculus Rift that is on the desk just to make the stomach calm down.

Someone says that the same component is actually working in one of the app distributed by Mozilla. There’s hope in this world.

Strip away all the scripts of A-frame and the component from that project (that luckily is on GitHub) and put them in your project dragging-and-dropping them on Glitch.

Glitch doesn’t support dragging and dropping of scripts but only of resources. Go on cutting and pasting 80000 lines of code from the files on your hard drive to the Glitch editor. Feel so much in the 80s.

The code with the scripts taken from the other project work, wow! Again, it has no sense, it should be the same of the official repositories… but it works, so it’s great.

The just taken code has a different input mapping from the one wanted, it has to be changed. But…ehm…how??

Other Google searches. The eyes start to bleed.

Find a page from a Mozilla dev where he talks about control mapping. He provides a component. Wow, this could help in solving the problem.

Click on the component: 404 page not found.

Throw the computer out of the window.

Use another computer to access the Glitch page. Dig into the app where things worked and barely understand how the mapping has been done.

Write random code about the mapping having no clear idea what you are doing.

Dig into the A-frame code to find some needed enumeration values. See Notepad++ exploding because of the too long .js file

Manage in writing something that works and feel proud of having fixed everything.

Feel like Hackerman.

Decide to help the community: create a Glitch project to show how you made everything to work, return to the GitHub page and answer the forums telling about your hack. You are a good boy and Santa will take you a lot of gifts this year.

Call the other people with which you are doing the app, happily saying them “Everything works… go to this glitch website and verify it! You have no idea how I managed to make it work! I’m the man”

Think that actually you too have no idea on how you managed to make it work.

Receiving a vocal message saying “I’ve tried it and nothing works”

Throw the mobile phone out of the window, too.

Your friend is right: you have fixed one problem and created 1743 new ones.

Discover that switching from the minified to the non-minified version of A-frame solves half of the bugs. It has no sense, but… ok, now you got the A-frame philosophy: “it just works. You don’t know in which way, but it just works”

Move up and down some lines, try 841 different version of A-frames and its various components looking for them in the deep web, try to reboot the PC, make a backflip, make a sacrifice to the gods of Mozilla.

In the end, all your hair are white, but everything seems to work.

Have the bad idea to try to add a new little feature.

Nothing works anymore. The screen becomes all white. As your hair, that now are all on the floor. Maybe even Johnny Sins started his career as an A-frame developer.

The javascript console reports an error in a file that you haven’t written and the error is “trim is not a function”. Damn, let trim be whatever it wants… I just want my program to work!

What the hell is trim? Look for a solution on Google. Of course, nothing useful for A-frame can be found.

Start debugging stuff using alerts and console logs put everywhere, because who knows what is the line that has created that exception.

Complain because you were not born when computers worked using punched cards. Those were gold times.

Think about prehistoric people… those were really happy ones.

In the meanwhile, your family has called the police because you have no contact with the outer world since days. You are not drinking and eating anymore, you just take energy from the metaverse.

Add a javascript alert into an init function of the component to catch if the function gets called. Launch the app. See that line magically creating a loop of alerts.

Start a compulsive click on the mouse to close them all.

The browser now shows the A-frame app that has become a super particle system of purple stars. BUT THERE ARE NO PURPLE STARS NOWHERE IN THE CODE. WHAT THE HELL IS HAPPENING (I want to clarify that this has actually happened to me: here you are the video as a proof).

Understand that your PC is haunted by some evil Mozilla soul

Turn off the PC.

Exit from the office screaming.

Sell everything you have on e-bay.

Use the just earned money to buy a farm.

Live happily by growing potatoes and milking cows.

This is the exaggerated version of my journey inside A-frame. Again, I love the spirit and the power of A-frame, but as all the new VR tools, it has a lot of problems. I had similar issues when developing with Unity for Oculus in 2015, for instance. Wait, no, the purple-stars-thing has never actually happened with Unity. That’s scary!

I think that seriously speaking, the most important thing they have to do is having a unified control over the A-frame and components versions, because at the moment there is the far west.

And while I wish the Mozilla MR team and all the great devs making the components the best of luck, I encourage you to learn this language, because WebVR is surely the future! And because I can’t be the only one getting mad with this… we have to get mad together!

At last, if you want to support my VR efforts and make me happy after all this craziness, subscribe to my newsletter to help my VR magazine!

(Header image by Mozilla)