AsyncAPI: Real-time Collaboration and Editing Enhancement for AsyncAPI Studio

[AceTheCreator]

This project centers around enhancing the collaborative experience within AsyncAPI Studio by introducing real-time editing capabilities.

The primary goal is to empower multiple users to collaboratively work on AsyncAPI specifications in real-time, fostering a seamless and efficient collaborative environment. The project involves implementing features that enable simultaneous editing, version control, and communication tools within the Studio, ensuring that collaborative efforts are streamlined and productive.

This enhancement is designed to elevate the collaborative workflow, providing users with the ability to collaborate on AsyncAPI specifications in a dynamic and synchronized manner

Learn more here asyncapi/studio#619

Mentor/s:

Project Repo:
https://github.com/asyncapi/studio

Expected Difficulty:
Easy-Medium

Expected Time Commitment:
175

[fmvilas]

This one is going to be hard to accomplish unless:

1. We have a relay server that communicates multiple Studio instances. Or;
2. We have Studio running on VS Code or as a desktop app.

[devilkiller-ag]

I hope this project gets selected by GSoC🤞🏼 I am looking forward to work on this ✨ I am currently researching about this a little bit.

[lmgyuan]

This looks really interesting! I have experience in Javascript, Python, Django, React.js, Node.js, and have interests in exploring other tech stacks and frameworks! May I ask what skills will be needed for this job? I am happy to have further conversations on this! Thanks in advance!

[devilkiller-ag]

I had a chance to look at the basics of real-time collaborative text editors. As suggested by @Shrutu-gal (here) we can either use ShareDB or Yjs as a real-time collaboration framework. However, the key difference between them is how they handle conflict management. ShareDB uses Operational Transformation while Yjs uses Conflict-free Replicated Data Type (CRDT).

As stated in this article, here is more light on this:

• ShareDB - - a real-time database backend based on Operational Transformation (OT) of JSON documents. It is the real-time backend for the DerbyJS web application framework.

• Yjs - shared data types for building collaborative software like Google Docs and Figma. Yjs is a CRDT implementation that exposes its internal data structure as shared types. Shared types are common data types like Map or Array with superpowers: changes are automatically distributed to other peers and merged without merge conflicts. Yjs is network agnostic (p2p!) and supports many existing rich text editors, offline editing, version snapshots, undo/redo and shared cursors.

I was wondering which one will be better for our use-case or can we use any of them? I am also wondering if I am researching in the right direction or if I should focus more on how real-time collaboration will be implemented using any library.

References:

• Building a real-time collaborative text editor for the web
• OT vs. CRDT in simple way
• A light exploration of collaborative editing and synchronization algorithms

[devilkiller-ag]

This one is going to be hard to accomplish unless:

1. We have a relay server that communicates multiple Studio instances. Or;
2. We have Studio running on VS Code or as a desktop app.

Are these two ways you are suggesting, one of which we can use?

[nikhil-3112]

Hi, This is Nikhil Chaudhari, I am very excited to work and contribute to this project. I like to Showcase my skills and give my best to work on it. I am ready for the GSOC 2024.

[kayikakeAssu]

thank you guys for your interests to this project. kindly let's come up with some ways of tackling this problem instead of listing our tech skills. actually working on it ...

[devilkiller-ag]

I had a chance to look at the basics of real-time collaborative text editors. As suggested by @Shrutu-gal (here) we can either use ShareDB or Yjs as a real-time collaboration framework. However, the key difference between them is how they handle conflict management. ShareDB uses Operational Transformation while Yjs uses Conflict-free Replicated Data Type (CRDT).

As stated in this article, here is more light on this:

• ShareDB - - a real-time database backend based on Operational Transformation (OT) of JSON documents. It is the real-time backend for the DerbyJS web application framework.

• Yjs - shared data types for building collaborative software like Google Docs and Figma. Yjs is a CRDT implementation that exposes its internal data structure as shared types. Shared types are common data types like Map or Array with superpowers: changes are automatically distributed to other peers and merged without merge conflicts. Yjs is network agnostic (p2p!) and supports many existing rich text editors, offline editing, version snapshots, undo/redo and shared cursors.

I was wondering which one will be better for our use-case or can we use any of them? I am also wondering if I am researching in the right direction or if I should focus more on how real-time collaboration will be implemented using any library.

References:

• Building a real-time collaborative text editor for the web
• OT vs. CRDT in simple way
• A light exploration of collaborative editing and synchronization algorithms

Hi @kayikakeAssu, Do you have any suggestions on this?

[Vishal2002]

I am excited to discuss this issue and work on it.

[kayikakeAssu]

Hi @devilkiller-ag , thanks for your commitment .
i think socket io may be a viable option for addressing the problem.
The hybrid approach with Socket.IO and WebSockets offers a scalable, low-latency, and flexible solution for real-time collaboration . It addresses the mentor's (@fmvilas ) concerns while leveraging existing technologies.
In short here is how :
develop a relay server to manage user connections, message routing ;
integrate websockets into the Studio client for real-time editing and collaboration and make use of socket io as an abstraction layer to simplify client-server communication.
as we still have some time, please continue sharing your thoughts .
Best regards !

[shauryag2002]

So @kayikakeAssu , Then we have to build a server with help of NodeJS and Express as asyncapi studio does not have a server?
As well as we need to make a specific collaboration route in reactJS to cater the real time document editing,
When user clicks on specific button (Collaborate) then sharable URL generate then real time chats and User Presence Indication will happen?

[devilkiller-ag]

Hi @devilkiller-ag , thanks for your commitment . i think socket io may be a viable option for addressing the problem. The hybrid approach with Socket.IO and WebSockets offers a scalable, low-latency, and flexible solution for real-time collaboration . It addresses the mentor's (@fmvilas ) concerns while leveraging existing technologies. In short here is how : develop a relay server to manage user connections, message routing ; integrate websockets into the Studio client for real-time editing and collaboration and make use of socket io as an abstraction layer to simplify client-server communication. as we still have some time, please continue sharing your thoughts . Best regards !

Thanks @kayikakeAssu, I will explore more into this and let you know my findings. What about the ShareDB or Yjs thing? Do you have any insights on that?

[kayikakeAssu]

hi @shauryag2002 , the relay server acts as an intermediary between different instances of AsyncAPI Studio, receiving messages sent by one instance and relaying them to all others. This creates a bidirectional data stream which simply enable real-time collaboration. but we still have choices whether we create a custom relay server or use an existing platform to facilitate communication between clients (vs code in this case ).

hi @devilkiller-ag , i am actually currently comparing the pros and cons of ShareDB and socket io, once i'm done I'll get back to you

[Vishal2002]

@devilkiller-ag Bro, as @fmvilas mentioned, we can implement a relay server. Initially, I considered using the XMPP protocol, but upon further research, I found it might not be the most suitable choice for our requirements. Then, I explored Yjs, which operates on Conflict-free Replicated Data Types (CRDTs) for distributed client synchronization without a central server. However, considering AsyncAPI's inherent support for event-driven architectures, I believe it would be beneficial to utilize technologies like WebSockets or a PUB-SUB model such as MQTT for our real-time collaboration needs.

[Vishal2002]

Would we discuss it here or there is some Slack discussion live on it?

[kayikakeAssu]

@Vishal2002 go on, what do you think we're doing here ?

[GaganMeshram123]

@fmvilas Hello! I'm Gagan Meshram, a Computer Science undergraduate from India with a passion for open-source contributions. Previously, I had the opportunity to participate in Google Summer of Code at Rocket.chat, which was an enriching experience. This season, I'm eager to channel my skills and knowledge into contributing to AsyncAPI. This project has captured my interest and I would love to build this VS code extension, and I'm excited about the potential impact I can make by contributing to AsyncAPI. I'm looking forward to contributing and making some impact...

[Amzani]

@AceTheCreator I suggest dropping it or postponing this to the next Gsoc, for two reasons:

1. We have planned a migration to NextJS, this will unlock many features that need server-side components and APIs.
2. Considering the growing trend of developers using integrated development environments (IDEs) like VSCode, I propose a slight shift in focus toward this, example of existing VS Code extension

Thanks

[BigJoe17]

Would we discuss it here or there is some Slack discussion live on it?

I also thought of that, It would be nice if we had a slack channel where we discussed the issues and how to bring solutions to them. I am really interested in this project.

[BigJoe17]

@AceTheCreator hello my name is Joshua and I am glad to be part of this program, I have used Postman a lot in testing and running APIs and Its a priviledge to contribute to this software. I would love to know more about this software and also will need your help and guidance since this is my first open source contribution.

Your reply will be highly appreciated.
I will also suggest if there is a slack channel where we can discuss more on the problem at hand looking forward to contribute to this project.

[BigJoe17]

Hello @AceTheCreator, as requested in the project
Tell us about your self
I am a sophomore @ Marwadi University India studying computer Science and Engineering and a passionate computer science student..
What Interest You about the Project
As a software developer who has built different side Projects whether it be in Hackathon or clients projects, the goto tools has always been Postman and its really interesting to be part of the contributors this great a tools used by a lot of developers world wide.
I love it's simplicity and postman is easy to get started with.

As mentors and project coordinators, how can we get the best out of you
As a student looking to contribute to Postman open-source software, you can get the best out of me by providing clear guidance on the project's goals and requirements. I thrive in a collaborative environment where feedback is encouraged, so regular communication and constructive criticism would be highly beneficial. Additionally, I'm always eager to learn and improve, so any resources or opportunities for skill development would be greatly appreciated.

Is there anything that you’ll be studying or working on whilst working

Well right now I am still in Buildong stage and working on some other side projects but I am willing to give my time to this Project for the next few months by makinng meaniful contribution to it, and I think it will not stop me from working on other personal and academic projects..

*We'd love to hear a bit about your work preferences, e.g. how you keep yourself organised, what tools you use, etc?

I prefer to stay organized by using tools like GitHub for version control and project management. I do break my work into smaller, manageable chunks and prioritize them based on their importance and deadlines. I also rely on communication tools like Slack or Discord for team collaboration and regular updates. I'm flexible and open to using any specific tools or methodologies preferred by the project team to ensure efficient and effective contribution.

I am looking forward to contributing to this Project meaningfully..

[AceTheCreator]

Hey folks, I'm closing this issue, as it's considered unsuitable for this year's GSoC.

Please feel free to check some of the newly added project ideas