Lively4: An Exploratory
Web-Programming Environment
Jens Lincke, Stefan Ramson, Robert Hirschfeld
Software Architecture Group
Hasso Plattner Institute
University of Potsdam, Germany
Shonan Meeting No.147
on Self-supporting, Extensible Programming Languages and Environments
for Exploratory, Live Software Development
Feb 2019
----
## Context
- Development Environments for Exploratory programming
- require: special workflows, frameworks or languages
- Classic Smalltalk: persistent, pure, fully reflectional object graph
- Our own project: Lively Kernel (Smalltalk/Morphic in a browser)
- Subset of JavaScript (custom Smalltalk-like class system)
- Full serializable object graph
- Reflective Morphic UI
---
## Inquiry / Problem
1. Excludes working on content and programs not created
in specific environment/framework/language
2. Hard make use of content and programs
created outside of that environment
{style="position: absolute; bottom: 50px; left: 30%; right: 30%"}
---
## Approach
- To overcome the gap between
- explorable content created in special environments
- outside content as HTML content and JavaScript programs
- We create Lively4
- a new environment that fully embraces standard HTML and JavaScript
- HTML used to be only a generation target UI for frameworks other systems
- In Lively4, we use HTML/JavaScript to build a
- collaborative
- self-supporting
- exploratory development environment
- for HTML/JavaScript content
---
## Knowledge
- Pushing boundaries of exploratory programming environments
- Given the restrictions of HTML and JavaScript
- Compare working with
- Documents, names, explicit references (Lively4)
- Pure object graph of special environments (Lively Kernel / Smalltalk)
---
## Grounding
- Build Lively4 environment in a self-supporting way
- which allowed us:
- develop, use and evolve
- tools and workflows from within it.
---
## Importance
1. Exploratory workflows can enrich
HTML/JavaScript development experience
2. Tools and environment can be easier to create
if external contributions are easier to integrate and use
---
## Demos
- Self-supporting Environment
- Markdown wiki with scripts and components (e.g. this presentation)
- HTML source code editing vs. manipulating HTML Elements and serialization
- Editing files vs. structural editing of packages/classes/methods (#TODO)
- Work on stuff outside the environment
- Working on HTML Element DOM
- Morphic Halo for all HTML Elements
- XRay / ElementsUnder (example for object-specific behavior / #PartsWorkflow)
- Lively4-chrome extension
- Reuse external content and programs
- CodeMirror for text editing
- DrawIO for figures
- D3 Visualization
- GraphViz for graph layout
- JavaScript, HTML, Markdown parser
---
## More Demos
- "Drag and Drop" and "Copy and Paste"
- ACM vs. Academics ?
- Files and Polymorphic Identifiers (Plex Demo / #Broken?)
---
... ... ...
---
## Background: Lively Kernel
- Self-supporting System
- all development can be done from within itself
- Web-based Development Environment -> **Lively Wiki**
- mostly client side
----
## Lively4
- lively4-core
- start.html: boot lively4 into empty page
- local storage: all content in body is locally persisted
- feels like Smalltalk image
- lively4-server
- manages files
- synchronization with GitHub
- lively4-chrome-extension
---
## Technologies
- HTML, JavaScript, CSS
- SystemJS modules (better control than native modules)
- Babel (JavaScript source code transformation)
- new language features
- allows us own experimental features (see ActiveExpressions)
- more control over source code (access into module state)
- Web-components
---
## Applications
- Markdown Wiki with scripts and components
- see [Lively 4 Tools and Workflows](../../doc/presentation/index.md#)
---
## Ideas in Lively4
- Embrace low-tech Markdown vs. rich text editing
- #Hashtag Navigation
- Modules to separate behavior
- Web-components as abstraction
- #ShadowRoot as natural border for serialization
---
---