WOOT with Scala.js

• Collaborative text editing, using the WOOT algorithm.
• Implemented in Scala, running on both the JVM and a JavaScript interpreter.

For the Impatient

$ sbt server/run

Then open http://127.0.0.1:8080/ to edit a document.

Open another browser at the same address, and you'll get the idea of collaboration.

What is WOOT?

WOOT is a collaborative text editing algorithm, allowing multiple users ("sites") to insert or delete characters (WChar) from a shared document (WString). The algorithm preserves the intention of users, and ensures that the text converges to the same state for all users.

Its key properties are simplicity, and avoiding the need for a reliable network or vector clocks (it can be peer-to-peer).

The key references are:

• Oster et al. (2005) Real time group editors without Operational transformation, report paper 5580, INRIA - PDF

• Oster et al. (2006) Data Consistency for P2P Collaborative Editing, CSCW'06 - PDF

WOOT stands for With Out Operational Transforms.

Presentations

I've spoken about this project at Scala Days 2015: there's video and also the slides.

This Project

This project contains a Scala implementation of WOOT. It has been compiled to JavaScript using Scala.js. In other words, this is an example of sharing one implementation (the WOOT model) in both a JavaScript and Scala context.

WOOT is only the algorithm for text consistency. You need to bring your own editor and network layer.

This example includes the ACE editor, which is wired up to the Scala.js implementation of WOOT locally within the browser. Updates are sent over a web socket to a http4s server which also maintains a copy of the model, but on the JVM.

Performance

This is a simple implementation that is slow for bulk actions (e.g., paste and cut).

To improve performance you will want to:

• measure what's slow for your scenarios
• batch messages between client and server (maybe)
• optimize the trim, canIntegrate, and indexOf methods.

I may get round to doing this at some point!

What Happens When You Run the Web Server

Running the sever code will likely produce:

$ sbt "project server" run
[info] Loading global plugins from ...
[info] Loading project definition from wootjs/project/project
[info] Loading project definition from wootjs/project
[info] Set current project to woot
[info] Set current project to woot-server
[info] Fast optimizing wootjs/client/target/scala-2.11/woot-client-fastopt.js
[info] Running Main
2015-04-08 13:43:52 [run-main-0] INFO  WootServer - Starting Http4s-blaze WootServer on '0.0.0.0:8080'
...

Notice that the Scala.js compiler has run on the woot-client project, to convert the client Scala code into JavaScript. This JavaScript, woot-client-fastopt.js, is made available on the classpath of the server, so it can be included on the web page. The web page is server/src/main/resources/index.html.

This reflects the structure of the project:

• client - Scala source code, to be compiled to JavaScript.
• server - Scala source code to run server-side, plus other assets to be served, such as HTML, CSS and plain old JavaScript.
• wootModel - Scala source code shared by both the client and server projects. This is the WOOT algorithm, implemented once, used in the JVM and the JavaScript runtime.

Exploring the Code

1. server/src/main/resources/index.html is the starting point for the client. This folder also contains a trivial websocket JavaScript client (ws.js) and the editor bindings (editor.js).
2. editor.js creates a local instance of the "woot client" and kicks off the web socket interactions.
3. client/src/main/scala/client/WootClient.scala is the exposed interface to the WOOT model. This is Scala compiled to JavaScript.
4. server/src/main/scala/main.scala is the server that accepts and broadcasts WOOT operations to clients.

Tests

The tests for this project are implemented as ScalaCheck properties.

Running the tests in the JVM

sbt> project wootModelJVM
sbt> coverage
sbt> test

Then open wootModel/jvm/target/scala-2.11/scoverage-report/index.html

Publishing Woot Model

• Follow bintray-sbt publishing instructions
• ;wootModelJS/publish; wootModelJVM/publish

It will now be available with

resolvers += "<repo-name>" at "http://dl.bintray.com/content/<repo-name>/maven",
libraryDependencies += "com.dallaway.richard" %%% "woot-model" % "<current-version>",

Reference

• Exporting Scala.js APIs to JavaScript
• Calling JavaScript from Scala.js
• Semantics of Scala.js - exceptions to the rule that Scala.js prorgrams behave the same as Scala on the JVM.
• JavaScript interoperability - including a list of opaque types.
• µPickle 0.2.8 - the JVM and JavaScript JSON/case class serialization library used in this demo.
• Depending on Libraries -- both JavaScript and Scala.js.
• http4s - the server used in this demo.

Scala.js Learning Path

If you're new to Scala:

• Creative Scala - a free course from Underscore teaching Scala using drawing primitives backed by Scala.js.

And then...

• Scala-js.org Tutorial
• Hands-on Scala.js

License

Copyright 2015 Richard Dallaway

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.