Cool Features

Teamwork makes the dream work — introducing the Collaboration

by Jen
4/2/2020

I’m Philippe, a full-stack developer working at Naker! My job here is to help pichou on the tech-side of things. For my first weeks, I have been working on making it possible to collaborate on projects.

Collaboration, ok, but why ?

The main problem we previously had was that only one person could work on a project. It made it really tough for people who wanted as a oup to create a project. It was impossible for them to work on the same project, and it was really hard for them to help each-other or see what was wrong in a scene, as they could not access the editor.

With this new update, you are now able to work as a team on your project!
(Note: you are not able to modify the project at the same time)

Warning: this article is technical

Let’s go real-time:

In order to have multiple people working on a project, we realised that we had to go real-time. Why ? Because we had to know if someone was currently editing a project.
Right now, the best way to build a real-time application is to use TCP sockets, as it is event-driven (sends events on connection, disconnection, on message…), and extremely fast.
We chose to use socket.IO’s Javascript library, as it’s compatible with every device, is easy to use, and it worked wonderfully.

Difficulties:

The first big issue we had with our application was to know whether or not someone was editing the project. Since we can’t have more than one person working on a project at a time, we had to find an easy way to block the access to the project when someone was on.
The second issue was that we needed to handle the re-connection. Indeed, if you have a very small network issue, you probably don’t want to be disconnected from Naker, but our basic use of socket.IO didn’t allow that.

Solution:

A worker! Obvious, right ?
As a solution to this problem, we decided to create a simple worker, which is just a simple object, stored on the project’s database. This worker contains 4 elements:
- A boolean: true or false, to indicate if the worker is currently on.
- A name: a string, containing the name of the user currently working on the project.
- An id: a string, containing the id of the user currently working on the project.
- A socketID: a string, containing the worker’s socket, given by SocketIO
This very simple worker allowed us to know if / who was working on the project.

It made our API requests very easy, because all we had to do, was to “check the worker”. Want to know if the project is available ? Check the worker. Want to know if X is still working ? Check the worker.

Combining this worker, and SocketIO’s “reconnect” and “reconnect_attempt”, we were able to fix our second issue pretty easily.

Wanted, looking for:

Once the communication part of the back-end was done, we added the collaborator’s research part. In order for our teams to be useful, we needed to be able to add people in them!

We created a route that would query our mongoDB database, to find all of the users (name or emails) that start with a given string.

Warning: be careful with the letter case, or you’ll end up stuck like I did

For example, if we query our database with Philippe, it returns “Philippe De Sousa, Philippe Naker” (which are both me by the way)

Please be responsive:

Once we added the sockets on the back-end, we decided that we needed to modify our front-end made with Hyperapp in order to create Teams.

For the modal’s team integration, we chose to add two new things:
- A list of the team’s members (aka collaborators)
- A search-bar that would search for users in our database

We had to rethink the modal, as there was way too many information, so we decided to enlarge it, putting the project information on the left side, and the team information on the right side.

Two boards to rule them all:

The modal wasn’t the only thing that needed some cleaning. Our old dashboard needed to change as well: we had to differentiate the projects you created, and the projects you were invited to work on. We decided to split the dashboard, creating two boards, one for the projects you ‘own’, the other for the projects whose team you were on.

Last, but not least:

Finally. Everything was ready to be deployed. We were so happy. And then it happened. Nothing was working on production. Why ? Heroku.
On production, we decided that our HTTP server and our SocketIO communication system should be on separate ports, as it would make it that much easier to use.

Problem: Heroku does not let you access more than one port.
Solution: God bless SocketIO
Once again, SocketIO saved us. We thought we were doomed, but then, after hours spent on StackOverflow and reading pages of documentation, we realised that it was actually possible to mount a SocketIO instance on an existing HTTP server. At the end of the day, all we needed to do was to listen on our currently existing server.

Conclusion

This update marks a new step in the history of Naker. It’s the first step towards the real-time collaboration, that would allow multiple users to work on the same project at the same time!

Thanks a lot for reading, and if you want to see this new major update, join us on Naker!


Share