Here’s what to have in mind if you want to develop a collaborative app like Figma, Notion, or Canva

Toma Puljak is a Software Developer with over 7 years of industry experience. He is fluent in Typescript, and with a strong background in C#, C++ and Python. Puljak joined Daytona as one of the core team members and he is included in almost all of the development processes in the company.

Collaborative apps like Figma, Notion, and Google Docs foster collaboration and productivity by allowing users to interact with one another in real time but are challenging to develop. The biggest challenge is resolving conflict, and maintaining latency-free experience as more and more users join the app.

Toma Puljak, a developer and speaker at the upcoming City JS Belgrade conference, shared his experience with building collaborative apps with us. Toma has been working on developing IDE editor tool for almost 5 years, and has recently joined Daytona, a SDE (Standardized Development Environment) tool as a founding engineer.

Puljak is also a passionate speaker and loves to share his knowledge with the developer community.

What does it mean for an app to be collaborative?

Toma: A collaborative app is one that allows users to interact with one another in real-time and the use of collaboration features depends on the app itself. For example, users could write in the same document (think Google Docs), follow each other’s cursors through the app, or create different elements on a drawing board.

Collaboration should not be a distraction

Could you provide an example of a well-known collaborative app and discuss what aspects of its design and implementation make it successful?

Toma: Some of the most popular collaborative apps (amongst developers) include Google Docs, Figma, and Notion. I’d say that what makes their collaboration features successful is the ease of use. They are collaborative by design, you don’t need to enable anything and users can just join and start working together. Collaboration should not be a distraction but a seamless way to work together and enhance your productivity and the apps that I mentioned do that very well.

What are the benefits of collaborative apps both for users and businesses?

Toma: The benefits of having collaboration features for users are mostly centered around boosting productivity.

Collaborative apps enable users to get their jobs done quicker and more efficiently because they eliminate the back and forth communication between colleagues. For businesses, anything that boosts productivity of their users is always a plus but collaboration can be that extra “Wow factor” that might boost engagement and customer satisfaction.

Tell us more about the collaborative features one app can have.

Toma: I’ll start with the collaborative features that Daytona’s browser IDE has:

• Collaborative text documents: Users can collaborate on the same text document in real-time and see what each user is writing and where their cursor is located.
• Collaborative terminals: Users can work together in the same terminal process and see the same output
• Chat: There is a dedicated chat window where users can write messages without leaving the IDE
• Screen sharing: Users can share their screen directly in the IDE which is an awesome feature to have when users need to collaborate on more than what the IDE offers.

What other collaborative features apps could implement?

Toma: Yes! There are collaborative drawing boards (similar to Figma, users can create different drawings or elements to create designs, charts, etc.), voice and video chats, and tracking cursors. This feature allows users to see exactly where other users are moving their cursor which gives them context on what their colleagues are focused on.

The awesome thing about these features is that they can be expanded upon to include anything that their app offers to boost productivity and give that “Wow factor”.

Challenges: Resolving conflicts and scaling collaboration

What challenges do developers face when they want to make apps more collaborative? 

Toma: One of the biggest challenges when implementing collaboration features is how to resolve conflicts. This is very important when working on collaborative text because users can edit, for example, the same line of text, and the collaboration implementation is responsible for resolving any conflicts that may arise. That’s why I mostly choose to work with Yjs when implementing collaboration features. Yjs is based on Conflict-free replicated data types which automatically resolve any conflicts and ensure that users end up in the same state.

Another challenge might be scaling collaboration features. As more users connect to the same collaboration session, it’s important to maintain a latency-free experience and that’s something that a lot of implementations struggle with. That’s why it’s important to choose the right communication protocol.

For example, WebSockets or peer-to-peer communication. Yjs is here another life-saver because it comes with support for different protocols that developers can choose to ensure a smooth experience no matter how many users are working together.

How can you ensure that the collaborative features of the app enhance the overall user experience rather than making it more complex?

Toma: The most important thing to think about when implementing collaboration features is to make it as seamless as possible. Don’t create hurdles, just allow users to jump into collaboration sessions and start working together without worrying about any of the setup.

This could be achieved by sharing links or room identifiers or so on. Just make sure that the collaboration does not get in the way of the users’ regular workflow but enhances it.