TeamCode: Online real-time coding tool - Marcel Ortiz Sanchez

Please enable JavaScript to view the full PDF

TeamCode: Online real-time coding tool Marcel Ortiz Sanchez Degree in Computer Engineering Work directed by: Juan Manuel Gimeno Illa Higher Polytechnic School of the University of Lleida Carrer de Jaume II, 69, 25001 Lleida +34 652685628 – mos5@alumnes.udl.cat Abstract Nowadays Cloud Solutions improve our quality of life while converts our computers in gates to a new world of possibilities. This project aims to change the way we are used to working with programming editors. The usual way to work goes with having the software installed locally in our devices while accepting the consequences this decision reports. Starting from this point, this project seeks to move this software to locate it on the server. With this movement, our devices will be freed from a burden that until now was taken for granted. Furthermore, the investigation in Fig. 1. TeamCode Client structure. Attributions [1] technologies such as WebSockets will provide a stable 2.2. StackBlitz core communication channel which will be used to introduce a whole online collaboration system to support the team-based To enable an online IDE supported in the cloud the project programming practices. decided to work using the StackBlitz core. Heart of the StackBlitz Project. A project which aims to provide an 1. Introducció operable online programming editor. A community works to adapt this core to the different Web-Frameworks. TeamCode is an online in real time code editor which provides an entire toolbox of team-based features. This tool TeamCode used the main core and decided to adapt it to places its attention centre on programmers, trying to Angular framework (v7.2.2). This resolution was the result facilitate, direct and perfect their work tasks while working of an unsuccessful search job to find an already working alone or in team modalities. The purpose of this project is to implementation. This is because the community still haven't provide a new platform for programming in the cloud. Due developed yet a working version. To extract this core, to this action, TeamCode reaches out situations such as the StackBlitz Angular Service executes the JavaScript editor incorporation of previously obsolete equipment, increasing instance call and manages to catch this instance once is the performance of our team or accessing your projects generated. everywhere and at any time. When StackBlitz Service get this editor instance, starts an entire Observation System which is able to determine any 2. Application Structure change done in the editor or the file explorer system. This System will catch and classify every change to convert it in In order to realize this project, different techniques, a meaningful broadcast message. This message will be sent, technologies and systems have been used. This section is understood and processed by every member of the team going to highlight each one of them. All these points conform working in the same project. to the pillars of this project structure. 2.3. SpringBoot (v.2.1.2) 2.1. Angular CLI (v.7.2.2) The part related to the Server is entirely built under The Angular framework provides the structure to work with SpringBoot. This decision is made taking in count this Components and Services. This structure was used to design framework tries to simplify the project dependency a route between the online IDE and the communications integration and the project deployment. With these two system (which provides updates from and to the other users). points simplified, lets us to focus on developing the app. Taking advantage of Angular CLI tools in addition to SpringBoot also simplifies the integration process while reactive programming provided by rxjs library. We were able providing Java frameworks like JPA or Hibernate. JPA to build an entire asynchronous system triggered by user framework was used to integrate MongoDB. In what confers inputs, HTTP requests and a fully-designed observable to Hibernate, it will be used in future TeamCode versions to pattern interconnecting components one each other Fig. 1. provide code compilation and execution. The last strong point involves the facility to structure an works using a Writer permission. Only the user that have this entire MVC (Model-View-Controller) application. permission is allowed to publish modifications. Meanwhile SpringBoot let us to define MVC entities linked to Database the rest of the users can work in an online-locally way entities and make them accessible via basic HTTP petitions without reporting changes to the rest of the team. This design providing a full client control over Database Objects. was created to work using team-based programming practices. 2.4. FileBuffer and MongoDB With the concurrent edition programmers will be able to help FileBuffer is the Server Object which will manage client each other working and editing the document at the same changes and decide when to make a connection to the moment. To implement this solution will be necessary to use DataBase to store changes made over time. This element is CRDT (Concurrent free Replicated Data Type) [2]. This type necessary to manage the number of petitions made over the of data integrates in itself a partially ordered set. This set Mongo Database. In an online in real time application time always will contain a join (a least upper bound) for any is a valuable resource and if every change made in the editor nonempty subset. This set is also called join-semilattice [3] is reported to the server in order to be saved the. This is and concurrent editors use it Distributed Computing tasks. possible thanks to the Object FileBufferSingleton which Concurrent editor isn’t an exception indeed it is a Distributed returns the same object no matter when we ask for an Computing task. Each computer in the network will treat instance. This object stores this information in a their own modifications Fig. 3. These modifications are at bidimensional structure. This structure is composed of two character input level so every character edition will report a Map objects. Being the project ID the key which will return new node to the join-semilattice. These nodes are the FileBuffer object which can be accessed using the file ID. continuously sent and received and thanks to the join- 2.5. WebSockets semilattice Associativity, Commutativity and Idempotency properties are always able to reach a unique collaborative The last method used involves WebSockets as the base to stable solution (this one will be the entire text of the establish a properly full-duplex connection protocol. The document under edition). selection of this protocol over others like Long Polling or Server Events lies in the necessity of this bidirectional non- Both systems are important, because of this TeamCode will blocking type of communication. TeamCode needs to be sure be able to swap between each one at any moment. any user can send data at any time. To point this situation, once the user access to a project, a new WebSocket link is done. This link not only handles IDE changes but also user role changes, project changes even the project chat system uses this link to work. There is one more point to cover. Using only one WebSocket with a basic endpoint provides a general connection usable Fig. 3. CRDT interaction between two clients by every user. This situation relies in data filtering and data overwrite every time a user enters into his project. To handle 4. General Results this situation, it is necessary to increase the granularity of the As a result of applying Research over prototyping technique single channel while creating a new channel for every project we’ve obtained a fully usable website application capable of opened. It was necessary to use the project ID as the handle different teams working in different rooms. The WebSocket subchannel identifier. This modification enables website general performance in TeamCode v.1.0 achieves a an entire structure based in rooms where users from a same 61% in Google Lighthouse application due to the StackBlitz project can send and receive data in a secure way Fig. 2. editor core loading times. The rest of the website gets a 91% which is an important attainment. 5. Conclusions After reaching and deploying TeamCode v1.0. We can aim into the near future to see strong points which will help TeamCode to reach a stable spot in the market. On one side, we have the unique collaborative system capable of replicate Git working structure. On the other side we have the CRDT integration. These two products combined with the Fig. 2. TeamCode WebSocket room structure. Attributions [1] possibility of switch between them at any moment makes TeamCode a unique product ready to compete in the market. 3. Future Work References As it was said previously in this article, TeamCode is a [1] Icons attributions: http://schema-attributions.website2.me/ project designed to achieve the state of an online IDE. This goal implies the integration of functions that are expected to [2] Ahmed-Nacer, Mehdi & Martin, Stéphane & Urso, Pascal. be obtained in the near future. (2012). File system on CRDT. [3] GOODMAN, Steve. 2. Semilattices, Lattices and Complete The most important project to reach is the concurrent edition Lattices. in the collaborative editor. At the moment the application