Lively Webwerkstatt - A Self-sustaining 
Web-based Authoring Environment

Jens Lincke

Software Architecture Group
Hasso-Plattner-Institut Potsdam
www.hpi.uni-potsdam.de/swa


 2012-03-06

Lively Wiki

■ Metaphor
    -  "A Wiki of active objects that can be 
        programmed by wires and tiles" [SUN Labs 2008]

http://lively-kernel.org/repository/webwerkstatt/demos/LivelyWikiPresentation.xhtml

Lively Webwerkstatt

■ Lively Kernel based Wiki

■ Web-based Authoring Environment

■ Core idea: Allow authors to not only change their content, 
   but to shape their tools as they are using them

  -> Self-sustaining Lively Kernel Development

■ Share their ideas and tools directly 

■ Scripting objects 
    □ Textual and visual connections (data flow / bindings)
    □ Textual Scripts

http://lively-kernel.org/webwerkstatt

Connections

■ General bindings mechanism for all objects in Lively Kernel

■ Observe property changes in one object and react on it in a other

■ Replaced MVC and other more specialized approaches in LK 

■ Textual and graphical means to create them:

connect(this.get('Slider'), 'value', 
    this.get('title'), 'setRotation')

(Meta-circular) Tools in PartsBin

■ Bootstrapped to higher level development cycle

■ Examples
  □ Object Editor
  □ PartsBin Browser
  □ Inspector
  □ Method Finder

■ Tools are created as Parts and modifyable like every other
   item in the PartsBin

ContextJS

■ JavaScript language extension for Context-oriented programming

■ Implemented as a library
    □ Method Wrapper: Layer aware method dispatch
    □ Partial methods 

■ Behavioral variations for JavaScript objects
    □ (Lively Kernel classes are also objects)

■ Open implementation of layer composition (activeLayers)

■ Allows for: scoping behavioral adaptations 
    □ Global
    □ Dynamic
    □ Instance-specific and structural scoping

ContextJS Syntax

Object.subclass("MyObject", {
    m: function(a) {
        return a * 3
    }
})

cop.create('LayerA')

LayerA.refineClass(MyObject, {
    m: function(a) {
        return cop.proceed(a) + 4
    }
})

cop.create('LayerB')
LayerB.refineClass(MyObject, {
    m: function(a) {
        return cop.proceed(a * 2)
    }
})

o = new MyObject()
alertOK(o.m(2)) // -> 6

// Dynamically Scoped Layer Activation 
withLayers([LayerA], function() {
    alertOK(o.m(2)) // -> 10
    withLayers([LayerB], function() {
        alertOK(o.m(2)) // -> 16
  })    
})

// Global Layer Activation
enableLayer(LayerB)
alertOK(o.m(2)) // -> 12

withLayers([LayerA], function() {
    alertOK(o.m(2)) // -> 16
});

disableLayer(LayerB)

Applications of COP in Lively Kernel

■ Modularization and deployment 
  □ Behavioral Adaptations of Base Code
  □ example: adding item to context menu

■ Experimental Code
  □ Development in a Layer
  □ Scope to objects / pages / users ...

■ Meta-programming Tool 
  □ example: Tracing

  

cop.create('ShowClickLayer').refineClass(Morph, {
    onMouseMove: function(evt) {
        show(evt.mousePoint)
        return cop.proceed(evt)
    },
    onMouseDown: function(evt) {
        show(evt.mousePoint)
        return cop.proceed(evt)
    }
})
// ShowClickLayer.beGlobal();
// ShowClickLayer.beNotGlobal();

$morph('DebugArea').setWithLayers([ShowClickLayer])

Problem of Meta-circular Development 

■ How to develop live the code that changes the code?
    ■ Squeak / Smalltalk and Self share this Problem with LK
    ■ More dangerous: 
        Your changes will per default apply to all users

■ Example: Changing Text behavior e.g. for Word Completion

Development Layers

■ Solution: Develop in Layers

■ Behavior adaptations to base system 
   are scoped to a layer activation
    
-> Tools (e.g. the Object Editor) are not 
   affected by changes

cop.create('DevLayer').refineClass(TextMorph, {
    onKeyDown: function(evt) {
        alertOK("key down" + evt);
        return cop.proceed(evt)
    }
})

Some Example Text dssdfsdf

Conclusion

■ It is all about trying out ideas in a very fast and direct way

■ Parts and PartsBin
    □ Copying objects, modifying them, and publishing 

■ ContextJS
    □ Refining a core method of the base system 
       without having to worry that everything falls apart

Publications

Jens Lincke, Robert Krahn, Dan Ingalls, Marko Röder, and Robert Hirschfeld. The Lively PartsBin: A Cloud-based Repository for Collaborative Development of Active Web Content. 
In Proceedings of Collaboration Systems and Technology Track at the Hawaii International Conference on System Sciences (HICSS) 2012, Grand Wailea, Maui, Hawaii, USA, January 4-7, 2012, IEEE Computer.

Jens Lincke, Robert Krahn, and Robert Hirschfeld.
Implementing Scoped Method Tracing with ContextJS. In Proceedings of the Workshop on Context-oriented Programming (COP) 2011, co-located with ECOOP 2011, Lancaster, UK, July 25, 2011, ACM DL.

Jens Lincke, Malte Appeltauer, Bastian Steinert, and Robert Hirschfeld. An Open Implementation for Context-oriented Layer Composition in ContextJS. In Elsevier Journal on Science of Computer Programming, Special Issue on Software Evolution, 2001. 

Publications 

Robert Krahn, Dan Ingalls, Robert Hirschfeld, Jens Lincke, and Krzysztof Palacz. Lively Wiki - A Development Environment for Creating and Sharing Active Web Content. In Proceedings of the International Symposium on Wikis and Open Collaboration (WikiSym) 2009, co-located with OOPSLA 2009, pages 1-10, Disney's Contemporary Resort, Orlando, Florida, USA, October 25-27, 2009

Jens Lincke, Robert Krahn, Dan Ingalls, and Robert Hirschfeld. Lively Fabrik - A Web-based End-user Programming Environment. In Proceedings of the Conference on Creating, Connecting and Collaborating through Computing (C5) 2009, pages 11-19, Tokyo, Japan, January 19-22, 2009, IEEE. (pdf)