Presentation – Building Your Own Collaborative Editing Web Forms For Free

Links to slides: Google SlidesPDF format, PPT format

Presented at Google Developers Group Toledo and Toledo Web Professionals meetings on Nov 9, 2017.

Abstract

Have your business users ever said, “we have this Excel form that we need to turn into a web form”? So you, as a full-stack web developer, turn it into a HTML form with an AJAX POST to save the data to a database table in the standard CRUD model. It works well enough, but then the users said, “we really need simultaneous editing for everyone in the office.” Now you’re in trouble because you’re trying to reinvent Google Docs / Sheets, which are very complex. How do those collaborative editing tools really work?

We will look at the Google Realtime API, which uses Operational Transformation to automatically synchronize a document between multiple simultaneous editors. Everything you know about distributed version control systems applies to this situation, but now you need to make it work seamlessly for users who have never heard of “git rebase”. The client and server implementation of Operational Transformation is very challenging.

Alternatives to Operational Transformation (OT) include Differential Synchronization (DS, aka. 3-way merge), Conflict-free Replicated Data Type (CRDT), and plain old Last Write Wins (LWW). For any of these methods, the critical elements include websockets, message queues, and persistent data storage. This presentation will include a demonstration of a simple implementation of collaborative editing with free, locally hosted software only.