Implementation Phases vol. 1

As for the implementation of the interactive prototype, we’ve been looking into different kinds of options of putting it together.

We were considering Figma, or other similar (free) UI/UX-design oriented online service. However, it turned out that we’d grow out of them pretty quickly.

Thus, we decided to get our hands dirty with some coding.

There’s a bunch of frameworks and libraries out there to use; thus, we took our time to¬† look into the options and choose our tool(s).

First iteration: Three.js

Three.js is a JavaScript library for building¬† 2D and 3D animations. It’s works across browsers, and directly embeddable to static websites too. Thus, you can get pretty far, quickly.

We got our “Hello World!” to appear on the screen fast.

However, the distance between having a cute little floating cube, and a globe-like animation with interaction, is quite big. As we would have had to start from scratch, due to no previous experience, we didn’t go for this library.

Second iteration: WebGL + React.js
We found a really nice open source “lightweight version of Google Maps“, which we were about to use as a starting point for our project, embedding it to a website. Though, we considered using this globe API quite difficult; and, also, a little outdated.

Third iteration: React.js + Node feat. Three.js
So far it seems promising to stick to tools that we’re already familiar with – which, in this case, are React and Node. Also, React fits the nature of the project, as it’s made for building interactive web-applications. Moreover, it’s backed up by many convenient UI/UX libraries.