My Journey from XR to Java Script
Disclaimer: This is not a tutorial
“Take the first step in faith. You don’t have to see the whole staircase, just take the first step.” — Martin Luther King Jr
This post is about my experience with java-script how I started with it and what challenges I faced from a perspective of a Game/AR/VR developer who had very little or no exposure on how the web works and was only acquainted with type-safe object-oriented language i.e. C#.
In my defence yes I have studied web technologies in my bachelors and I know what HTML/CSS/JS and HTTP etc. are, but I never wrote a single piece of code on it in my professional career that can run on the web.
So here how it all started, I wanted to get my hands dirty with web-services for a long time and my manager can tell how much I used to pick his brains to give me a problem statement or task that can give me some exposure on web technologies i.e. microservices, REST, web essentials like ReatJS, NodeJS, MongoDB, etc.
Okay, I think before we proceed we need backstory — So I started as a game-developer in 2012 at that time I used to make games for good old Nokia phones and my games used to go on OVI store, then gradually I moved into games for smartphones using game-engines like AndEngine, LibGDX, but in the end I fall in love and decided to get settled in 2014 with Unity3D.
In years ahead I started experimenting with AR/VR using Unity3D when this tech was in a very early stage and did found good opportunities which helped me landing in Nagarro i.e. my current employer where I am part of the CoE-IoT team in which I am responsible for everything related to AR/VR and I gradually shifted my entire expertise in the area of computer graphics.
But like all marriages, things started getting monotonous with Unity3D and I wanted to try out new things to expand my horizon and acquire few new skills.
A few weeks ago we received a request to create a 3D platform which should have capabilities of AR and VR as well, this has to be a web platform which means no app, no SDK installations. The AR and VR view in the mobile browser itself if there is AR/VR support on mobile.
When I first read the email, I was like- “God is there! And he has heard me…” as this is what can let me work on technologies that will give me exposure to the picture on the other side.
It has all the components which I wanted to work on for a long time!
Gameplan — It was agreed among the senior folks that I will work on this lead to make sure that we give the impression of wow. And we started doing our homework. So after a lot of research and scrolling through the web, we decided to either propose ThreeJS or BabylonJS.
Okay so what next, what else we will need? Oh yes! a framework to create UI and backend services to handle requests. In my head, there were already fireworks as I knew what we will choose. ReactJS for UI and NodeJS for backend services.
So I had a little over a week to understand the key services we would require in the solution which we are going to pitch and how we are going to build it — Note: Not a complete solution but at least what and where are the risks and how much time it would require to deliver this at a high-level, we also evaluated a lot of 3rd party licenses, paid and open-source that could make our life easy:-
- Autodesk Forge API — To translate the 3D models into multiple file formats
- Strapi — To create a headless CMS
I started evaluating ThreeJS and BabylonJS but they required me to have JS knowledge so that I can try out their examples and sample code. There is a huge list of examples provided by both the libraries but there was no point without first learning some JS first. So I started reading and watching crash courses and fired up the VSCode to run these code snippets.
But things started to go south when I first saw the syntax of JS —” I am doomed…” first thought came into my mind. We can assign functions to variables! I know we can do the same in C# using delegates but you WHAT THE HELL! we can define functions in other functions! No way, this can’t be true…
I took a deep breath and told myself —” You yourself got into this now deal with it”, So I started watching videos on JS on youtube.
One channel that helped me a lot was Dev Ed, I learned a lot about ES6 from one of the videos by him. But that was not enough as time was running out fast so we delegated a few of the research we were doing to one other team member in my team — Surabhi Arora she had the experience of the web development and we achieved the momentum to meet the deadline.
I then started looking into ThreeJS and youtube again came to save the day and while doing so I discovered few awesome channels who have great tutorials on front-end and other web technologies — DesignCourse, Traversy Media, Coding Tech, Programming With Mosh.
Finally, we had a point of view(PoV) on ThreeJS and my colleague took care of BabylonJS.
Now we need a PoV on the convertors we had identified and evaluating them was a mammoth task as for that it required me to download the boiler-plates they have in their development portal and run it on my machine, yeah it may not sound a mammoth to most of the people who are reading this but for me, it was as to do so I had to learn ReactJS to create a dummy client app on which I can consume those APIs which were provided by Autodesk Forge.
Again back to youtube…
I saw a lot of videos and tried a lot of code snippets but every time I discovered new things and got myself confused with what to use with what. After a day I thought let’s again begin from the beginning and I opened up the home page of ReactJS and after few clicks here and there I reached Intro To React page. Here I learned some of the key concepts like States, Function Components, Immutability, etc. I thought okay I know some of the concepts lets start working on the UI which I have to create to consume the APIs. Again all hell broke loose as then came the demon called CSS! to haunt my layout. Nothing was making sense my entire layout was crap. I was already missing my first love i.e. Unity3D but it was too late T-minus-3 days in the meeting and a lot of ground to cover.
Then I thought “….crash courses won’t do any help. I need to learn how to create an end to end solution in ReactJS then only my boat will sail” so I referred one of the complete series on youtube. This laid the foundation of the basics of ReactJS finally in my head. But that was not enough how to transfer the data from one React component to another — and then I made a grave mistake which led me to burn the light oil for the whole night aka Redux, I mean…. What the F@#%, why this is so complex?? At this time I had started to question my capabilities. The next morning I decided to ring a few phones to check if I am doing what I should be doing or is this thing broke?
Around noon the next day, I was introduced to Hooks and Contexts — Finally, the day was saved. I referred to a video series on youtube to understand the core concept
In the end, I was happy with my progress and finally, I was able to visualize all the important concepts of ReactJS — How to create function components, pass props, transfer data from one component to another, and Bootstrap. Phew…
So now we had everything ready — Surabhi integrated the AdobeForge dev API with the react page which was created and we were able to have a PoV on it.
It was one hell of a week, and very exciting I was able to learn JS, ReactJS, and basics of routing through ExpressJS all in one week.
A lot was at stake and I didn’t know if I will come out from the other end alive or not as it was something I had never worked on but it was worth it. Every stupid syntax of JS and bugs in my ReactJS code which were making me pull out my hairs they all were worth it.
In the end, I want to thanks heroes who saved me from drowning.
- Surabhi Arora — Helped me debug my code (very patiently)
- Radhika Dehar — Gave a lot of breathing space by being flexible with reviews and demos
- Gaurav Arya — Gave me the opportunity to work on a web technology
The video series which I followed were:-
