This paper introduces Webstrates, a platform for malleable, sharable, distributable media. Via Joel Chan. First author Clemens Klokmose.
The central idea: let the Web do the work. Webstrates are synced DOM trees published at a known URL. By composition (i.e. iframes), you can combine these to create multiple personalized views on the same data, accessible on any device, by multiple people at once. Individual webstrates may represent a data model, or an interface element, or both.
This is a truly outstanding paper—a really rare example of the kind of Human-computer interaction work I want to see more of. It’s a sweeping concept, executed with pragmatism and parsimony, grounded with real implementations in several compelling serious-use case studies.
Q. Three main attributes of Webstrates introduced in the paper?
A. malleable, sharable, distributable
Q. What’s meant by “distributable” in this paper?
A. Accessible across form factors and platforms.
Q. How do webstrates compose?
A. Transclusion, via iframes
Q. Main differences from Smalltalk?
A. e.g. Sharable and distributed; DOM as model / view layer.
Q. Main differences from Hypercard?
A. e.g. Sharable and distributed; authoring environment more malleable; web tech more powerful.
Q. Main differences from Lively?
A. e.g. embraces the web as programming model; emphasizes real-time collaboration
Q. Main difference from Meteor / React+Firebase / etc?
A. The page itself is shared, not the model.
Q. How are DOM subtrees synced without conflict?
A. Operational transformations on DOM serialized to JSON.
Q. What is “instrumental interaction”?
A. A philosophy of separating tools from the objects they edit, to be reused in various contexts.
Q. How is “instrumental interaction” achieved in an image editor?
A. The image content is transcluded inside an editor which modifies it.
Q. How are personalized editors achieved?
A. Content is transcluded into a user’s preferred editor, which may further modify its presentation through style sheets.
Q. If a tool is instantiated in several editors, how is per-host state achieved?
A. “Instantiation elements” contain instance-specific elements as siblings of the transcluded tool; the tool accesses those elements for state storage.
Q. How to share a Webstrates instrument with someone else?
A. Just copy/paste its DOM subtree!
Q. Give an example of malleability achieved via Webstrates.
A. e.g. Alice adds a citation tool to her paper editor.
Q. Main implementation challenge for the “instantiation element” pattern?
A. Modern browsers prohibit cross-origin iframe traversal—necessary for a tool to access its siblings.
Q. How is malleability of presented content achieved?
A. Custom style sheets.
Q. What problem does the syncing model cause for idiosyncratic malleability?
A. The DOM is synced, so personalization can’t involve modifying DOM elements.
Two excellent case studies:
Using instrumental interaction, Alice has created a citation tool for her editor to add references. She performs remote user interface extension at run-time, opening Bob’s editor and adding the citation tool to his toolbar. This is a malleable interface: Alice modifies Bob’s editor to hide his toolbar and make it appear when he hovers over it. Bob performs live tranclusion of figures, sketching a rough figure on a tablet which updates in real time in the paper editor on his laptop as Alice corrects it with her vector-graphics editor.
Case study 2 illustrates Alice and Bob preparing and giving a talk. Alice creates a slideshow in an editor that contains many of the same tools as her paper editor, including her citation tool. During their collaborative slideshow design, Alice shares the slideshow with Bob, and navigates through it remotely as they discuss it via video chat. Bob adds notes and she updates the slides immediately. At the conference, Alice gives a distributed slideshow presentation. Audience members can see the slides on their personal devices and pose questions. The session chair selects three questions that are displayed on Alice’s final slide.