DesignandDevelopmentofReal-timeCode EditorforCollaborativeProgramming
DesignandDevelopmentofReal-timeCode EditorforCollaborativeProgramming
net/publication/380214482
CITATIONS READS
0 318
7 authors, including:
Ahana Bhattacharjee
Gargi Memorial Institute of technology
3 PUBLICATIONS 1 CITATION
SEE PROFILE
All content following this page was uploaded by Soumya Mazumdar on 01 May 2024.
Abstract: The Internet is expanding quickly, and many desktop apps are already being developed for the online. Using
the Internet, many apps may be easily accessible at any time and from any location. Code editors are one of the tools that
developers require to design their applications. The goal of this research is to employ web socket technology to build and
develop a real- time code editor application that facilitates user collaboration while working on the project. Users of this
program can work together in real time on a project thanks to its capability. The authors employed an analysis process
that includes studying the literature, and studying the code editor software that are currently in use. CrossCode is a web
application that offers a workspace for creating, performing, and collaborating with other users in real-time over the
terminal. The primary functionalities of the application include a workspace for creating, running, and building source
code as well as real-time chat and terminal building. The programming languages C, C++, Python, and Java are supported
by this application. The current research contributes to the advancement of online code collaboration tools, providing
developers with an efficient and accessible platform for remote teamwork and code sharing.
Keywords: Real-time Code Editor, Web Socket Technology, Collaborative Coding, Multi-language Support, Cloud-
based Code Development
I. INTRODUCTION
As software design began to move from desktop to online platforms, software engineering saw a trend of technological
improvement. The need to install plug-ins and the lengthy configuration process before a software can be used are only
two of the many disadvantages of desktop IDEs, despite the abundance of IDE (Integrated Development Environment)
tools available today, such as Eclipse and Visual Studio [1]. This problem may be a major time waster when there are
several devices that need to be configured [2].
An increasing number of software applications run in the cloud and utilize a web browser as their user interface. This
removes the requirement for desktop computer installation and setup and allows for immediate collaboration across users
[2].
Using a single integrated development environment (IDE) is one method for real-time teamwork, much like pair
programming. Pair programming is the practice of allowing two programmers to access and collaborate on the same code
inside a single working environment [3]. When working in pairs, programmers may create, modify, and delete source
code in real time. Pair programming might help with program code synchronization difficulties by enabling any
programmer working on the same project to know who made changes to the code and track when they occur.
Collaborative technologies might be useful for programmers who work remotely but in the same environment to discuss
or correct bugs in the application. It must thus create an application that improves the speed of program development,
such real-time collaboration, and utilize a terminal to construct, execute, and show the result of the program.
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 340
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
The remainder of the document is structured as follows: A thorough overview of the literature is given in Section 2,
which also covers the development of collaborative tools historically and looks at important features, communication
protocols, and difficulties with real-time code editors. The research methods and design concepts used in this work are
described in depth in Section 3. After that, Section 4 explores the implementation stage and offers insights into the
difficulties and technical concerns encountered. After the results are presented in Section 5, a thorough discussion that
links our findings to previous research and considers ramifications follows. In Section 6, the study wraps up by providing
a succinct overview of the major contributions and outlining potential directions for further research into collaborative
programming tools.
The need for effective cooperation in software development has led to a fast evolution in the collaborative programming
environment. This study of the literature examines recent findings and advancements in the creation of real-time code
editors, with an emphasis on how these tools support group programming projects. A software platform or tool created
to support collaborative learning experiences focused on solving programming problems is known as problem-based
collaborative learning groupware, and it may be used to improve computer programming abilities. [7] The design of a
contemporary online interview platform for a recruiting system, as described by Author [8], entails combining a number
of elements to speed up the hiring process, enhance the applicant experience, and provide recruiters insightful
information. Whether working in a big, remote development environment or as part of a small team, collaboration tools
are critical for developers working on projects [9]. Through the development of a supportive learning environment, the
improvement of critical thinking abilities, and the provision of a more comprehensive grasp of OOP principles,
collaborative programming may have a favorable influence on students' progress in learning object-oriented
programming [10].
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 341
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
The Integrated Development Environment (IDE) is designed to provide programming teams a real-time collaborative
environment in which they may edit text, execute and build code, collaborate, and do a lot of other things. Because text
may be edited in real-time, many users can work together to modify a document and instantaneously share the changes
with other users who have access to the same document.
There are many free tools that allow you to modify text in real time, such as Google Docs. Not only does this capability
facilitate excellent communication for regular users, but it may also be quite helpful in programming.
Furthermore, a wide range of web-based solutions are accessible for teamwork. similar to EtherPad, which allows for
real-time text editing. IDEs and other apps are designed to be coupled with web-based text editing tools such as Ace and
CodeMirror.
Collaboration technologies play a critical role in optimizing project creation efficiency, since software development
projects need coordination and collaboration between programmers (14). The productivity of a project or software
segment may be increased by the effectiveness of cooperation in programming.
Programmers may collaborate in real time on a single programming file by using real-time collaborative programming.
Without the programmer's human involvement, the real-time system [15] will automatically integrate code that is typed
by the programmer. Multiple programmers may access and modify the same source code directory at the same time.
Programmers may collaborate by joining and leaving real-time sessions while working on collaborative programming.
There are steps to take in order to utilize the connection protocol with two-way clients to enter and quit a session when a
new client wishes to join.
To accommodate the new client request, a distributed join protocol was created with the following message:
● JOIN: By submitting a request to the session manager, a new client may ask to join an ongoing real-time session.
● START: The join-protocol process is started when the session management alerts each of the existing clients
that a new client request has been received.
● READY: All present clients provide information to the session manager on their preparedness to enter the state.
● FINISH: The session management informs each and every one of the presently enrolled customers that all
processes have been finished.
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 342
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
Programmers may exchange programming-related tasks in an integrated collaborative environment. One technology used
to implement collaborative IDE is called ICI (Idaho Collaborative IDE) [16]. Because ICL ICT combines synchronous
collaboration technology with a real-time debugger, programmers may collaborate in real-time on a range of software
development activities even if they are situated in different places.
The domains of programming and education are implementing collaborative technology. Remote computer science
education demands a more collaborative IDE integration to enable real-time participation throughout the compilation,
linking, running, and debugging of sessions. This connection may provide a platform that facilitates textual or voice
conversation amongst developers.
When working in a collaborative environment, programmers may communicate with one another and keep an eye on
what other programmers are doing in the same area. Programmers may use text or voice chat to interact in real time with
other programmers or project teams. In order to collaborate on program design, coding, or debugging inside the same
development environment, programmers may invite one another to take part in collaborative IDE sessions [16].
Online collaboration is made easier using Collabode, an integrated development environment (IDE) for Java. With
Collabode, adjustments made by many users may be quickly shared with other users without requiring manual
programming [14]. Furthermore, this application is available to numerous users concurrently inside a single project
module.
The goal of cooperation is to improve both teamwork and the quality of the project result. To cooperate on projects, users
just need to visit the same URL as one another. Collabode uses EtherPad to make editor collaboration easier. Collabode
offers capabilities including syntax highlighting, continuous compilation, compile errors and warnings, code formatting
and refactoring, and program code execution. Collabode utilizes Eclipse to manage the projects.
Three methods are used for limited synchronous collaboration: Test Driven Programming, Micro Outsourcing, and
Mobile Instructor [17]. The three models mentioned above illustrate the many ways in which programmers might work
together. They all use various strategies, such as pair programming, side-by-side programming, and other cooperative
techniques.
The study's design and methods are described in this section. The CrossCode Features Algorithm is examined in Section
3.1, while the Operational Transform Algorithm is examined in Section 3.2. These algorithmic frameworks play a crucial
role in the study's overall design and functioning, laying the groundwork for further research and analysis.
As soon as a user connects into the software successfully, the workspace screen displays. After the user signs in, all
finished projects, folders, and files—if any—will be shown according to the method depicted in Figure 2.
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 343
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
The project is visible in the file directory of the workspace on the left. If this is a new user, the file directory will seem
empty. This application offers real-time connectivity, so all changes are updated at the same time. This program,
therefore, includes the auto-saving function shown in Figure 3, which will automatically save the code in the event that
the user doesn't press the keyboard for a minute.Figure 4 shows the method to execute and construct the application.
After generating the project file and starting the program, the user will be able to see the results. The results will be shown
as a terminal on the website. If an issue occurs, the error message will show up on the terminal.
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 344
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 345
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
Receiving operations would then execute operational transformation in line with local contemporaneous operations [21].
One application of the operational transformation approach is the word processor software. A word processor program
has a complex structure and can carry out a wide range of editing tasks [22]. Word processing software facilitates not
only the addition and removal of objects but also the alteration of an object's properties. For collaborative word processing
apps, the ability to update collaboratively is essential since it speeds up document creation. The concurrent execution of
the update operation is supported by the use of extension operational transformation. For example, this method produced
the CoWord project, which aims to convert Microsoft Word into a real-time collaborative word processor without
changing the source code. The low-level transformation functions and the high-level transformation control algorithms
are the two levels that comprise the operational transformation component [22]. The OT expansion uses a technique that
adds a new update-related transformation function without changing the high-level control algorithm. This strategy makes
it possible to reduce complexity and localize the extension.
In contrast to the insert and delete operations, the update operation modifies the document's linear address space, while
the latter does not. Insert switched to a concurrent update, yet it stayed the same. However, if the Update's position is
more than or equal to the Insert position, its position will be raised by one when it is turned to Insert.
IV. IMPLEMENTATION
The use of CrossCode is covered in this section. The user has to log in before they may access the workspace. First, to
determine if the user's data has ever been stored in the database, it will be reviewed. If the log data already exists, it will
be recorded in the collection logs; if not, it will be produced in the user, file, and log collections. Moreover, the user will
be sent to the workspace page, where project file data from the user's collection and file database will be imported. The
user's Facebook friends list loads when they are routed to the workplace. New collaborators will be invited via the friend's
list, and those who accept will be able to communicate with each other. When a user starts a conversation with another
user, Figure 8 displays the architecture. When a user inputs a message and presses the enter key, JSON data is transmitted,
and the chat data is then stored in the chat collection. After that, the data is sent to the socket.io server and then made
available to all of the users that were first invited. Figure 9 illustrates how to add a contributor to a project using the same
file. The user may search for the names of friends who have registered for CrossCode in order to collaborate with other
users. After obtaining the user ID, data will be placed into the file collection and transferred to the socket.io server.
Finally, the collaborator will be appended to the same file for the project. Users may click the button in the left corner of
the page to access the folders and files in the workspace. A tree-like representation of the files and folders will materialize.
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 346
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
Figure 10 illustrates how real-time user engagement is possible with this application. Real-time user engagement is
possible with this application. The user may invite other users to collaborate on the same project by using the friend list
shown in the box on the right. After receiving an invitation to collaborate on the same project, the user may communicate
with other users using chat. If someone is logged in using their Facebook account, they may send invitations to friends
who are on their friend list. When users log in, other users who have used anonymous accounts will immediately connect
with them. Figure 10 displays a chat window with the user's name, the current date, and a search function for finding
friends who are willing to be contacted via chat to work together or talk.
This study uses the Apache Benchmark, sometimes referred to as the ab (Apache HTTP Server Benchmarking Tool),
which is a reliable instrument for evaluating our application's performance. Apache Benchmark is renowned for its ability
to accurately gauge the Apache Hypertext Transfer Protocol (HTTP) server's performance. In this work, we use ab to do
a comprehensive analysis of our application, including its overall effectiveness, scalability, and responsiveness. The
Apache Benchmark shows the maximum number of requests per second that Apache can process. The hardware type that
will most significantly impact the web server's performance is RAM.
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 347
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
1000 requests must be sent to the designated URL during this assessment, with a maximum of 1000 requests being sent
at once. Two different computer setups, each with its own set of requirements, are used to conduct the testing. The
machine has a Pentium Dual Core E2180 CPU and 4 GB of RAM for SPEC 1. SPEC 2, on the other hand, has an 8 GB
RAM configuration and a Core i7 2600 CPU. Table 2 displays the experimental outcomes.
The 1000 requests' average load time (in milliseconds) is shown by Apache Bench. According to the ApacheBench
findings for the first test, the greatest load time was 23.8 seconds (23.388 ms), while the average load time for 1000
requests was 14.6 seconds (14,608 ms). The greatest load time in the second test, which measures connection time, is
0.335 seconds (335 ms), but the average load time is much reduced at 0.078 seconds (78 ms). These outcomes provide
light on how well the application functions in various testing scenarios.
Comprehensive examination of the Apache Benchmark results provides valuable insights into the overall effectiveness,
scalability, and responsiveness of the assessed application. These results provide a more thorough insight of the elements
impacting the application's performance environment, in addition to the apparent hardware-dependent performance
variations between SPEC 1 and SPEC 2. These conclusions might be the starting point for more research and development
that could optimize the program, enhance user satisfaction, and promote more economical use of resources. This iterative
approach highlights how important it is to keep assessing and adjusting the application to make sure it meets evolving
user requirements and performance targets.
This article presents the real-time collaboration application's concept and implementation. CrossCode is an online tool
that offers project management features including import, export, and shared projects in addition to enabling real-time
chat conversation amongst programmers and inviting them to join a project. Programmers may also use it to create code
and see the output of their work when it runs. CrossCode supports the programming languages C, C++, Python, and Java.
CrossCode's main features include a workspace for writing, testing, and developing source code in addition to chat,
terminal building, and real-time collaboration.
The capacity to automatically produce UML designs from written code is one of the characteristics that the authors will
suggest further research and development for. CrossCode can only modify a single file at this time. In a future release, it
would be useful to have many files where the program code may be modified. In this manner, if the user looked up a
certain phrase, they could change all the code in the same project at once. CrossCode may eventually be evolved into a
system that functions as a repository, akin to GitHub, for managing both completed and in-progress projects.
REFERENCES
[1] Doernhoefer, M. 2016. Surfing the net for software engineering notes. Software Engineering Notes. 41, 5 (Nov. 2016),
11–18. DOI:https://doi.org/10.1145/2994205.2994209.
[2] Kats, L.C.L., Vogelij, R.G., Kalleberg, K.T. and Visser, E. 2012. Software development environments on the web.
Proceedings of the ACM International Symposium on New Ideas, New Paradigms, and Reflections on Programming
and Software. (Oct. 2012). DOI:https://doi.org/10.1145/2384592.2384603.
[3] Goldman, M. 2011. Role-based interfaces for collaborative software development. Proceedings of the 24th Annual
ACM Symposium Adjunct on User Interface Software and Technology. (Oct. 2011).
DOI:https://doi.org/10.1145/2046396.2046410.
[4] Frößler, F. 2008. A practice theoretical analysis of real time collaboration technology: Skype and Sametime in
software development projects. Cuvillier Verlag.
[5] Klein, S., Vehring, N. and Kramer, M. 2010. Introducing real time communication: frames, modes & rules. 23rd Bled
eConference eTrust. (2010), 591–606.
[6] Riemer, K. and Frößler, F. 2007. Introducing Real-Time Collaboration Systems: development of a conceptual scheme
and research directions. Communications of the Association for Information Systems. 20, (Jan. 2007).
DOI:https://doi.org/10.17705/1cais.02017.
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 348
IARJSET ISSN (O) 2393-8021, ISSN (P) 2394-1588
© IARJSET This work is licensed under a Creative Commons Attribution 4.0 International License 349