Giter Club home page Giter Club logo

monaco's Introduction

Monaco

Collaborative document editor that allows 1+ users editting the same document simultaneously. Syncing document state across server and clients is done through my implementation of operational transformation. Think Google Docs, but in a code editor with infinitely less features than you'd need. Proof of concept project.

I initially undertook this project in college in the summer of 2022. I achieved a near perfect solution then, but a few edge case bugs had eluded me and I took a break from the project out of frustration. 2 years later, my implementation of operational transformation is functionally near perfect, if not perfect. While the transformation engine and data model were at its largely developed during my formative years in college and were therefore horribly thought through -- it works. Perhaps someday I will come back to rewrite the transformation engine in a manner that doesn't make me cringe, but that day is not today. Nor tommorrow. Give me another 2 years perhaps :)

If you're interested in undertaking a side project more intellectually stimulating than a portfolio website and are a macochist when it comes to headaches, then give operational transformation a try. Close your browser tab, develop a high-level understanding of distributed document syncing, and hit the ground running (or crawling as it was in my case) on your own implementation. I promise this will be one of the most difficult problems you'll ever undertake independently. Not quite as difficult as exiting vim however.

What is the problem being solved here

Simultaneous document editing is the goal. This means that you need a process that can sync document state in real time between 2+ clients with zero tolerance for mistakes. If there was no latency between clients, then this would be accomplished automatically, no different than multiple keyboards attached to the same computer editting the same local document. However, latency causes the intention and natural causality of document changes to be lost. In other terms, two conccurent operations can be executed in different orders on two different clients editting the same document -- which compounds with more concurrent operations and leads to divergent documents states.

How to run...

Frontend

Update SignalrConnection.ts with the IP address of the device on your network running the backend.

cd client && yarn && npm start

Access webpage using any browser at YOUR_IP:3000

Backend

Install .NET core 8

cd server/src && dotnet build && dotnet run

Alternatively, vscode is configured to be able to launch the backend in debugging mode.

Tech details

  • React (CRA), Typescript, Jest, SignalR websockets, Monaco Code Editor library
  • dotnet, SignalR websockets, xunit

TODO

  • Write up documentation on how I am resolving document state conflicts.
  • Refactor transformer
  • Refactor data model to be startIndex, endIndex. Instead of column and line based ??
  • Investigate if resolving conflicting ranges requires a possible introduction of secondary operation
  • Double check that the How to run steps are actually correct lol

monaco's People

Contributors

stephengeorge568 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.