Lively4 — An Active Wiki
of Markdown and JavaScript
Jens Lincke, Stefan Ramson, Robert Hirschfeld
2020
TokyoTech HPI Joint Seminar
---
- Self-supporting collaborative development environment
- Collaborative Wiki-like development environment
- [Markdown](../../doc/workflows/markdown.md), [Scripts](../../doc/workflows/scripts.md) and [Web-components](../../doc/workflows/web-copmponents.md)
- Clash of "low-tech" Wiki-technology
- Runs in the browser on the client side
- Standard [JavaScript](../../doc/workflows/javascript.md), [HTML](../../doc/workflows/html.js), and [CSS](../../doc/workflows/css.md)
- [lively4-server](https://lively-kernel.org/lively4/lively4-server)
- [clone](tools/sync.md) github projects and work collaboratively on them
---
# Motivation -- Or No Motivation?
- Lively Kernel Project
- Use Web-technology to escape Web-technology to go direction of Smalltalk
- Lively4 tries to embrace and leverage the Web
- Related: Directly editing files on Github
- And see result in updated Github Page or a Travis build
- But not Self-supporting and no scripting (in Wiki)
---
## Workflows
---
## A Markdown Wiki in Lively
- First Level: Editing Text
- [A random Developer Journal Entry](browse://doc/journal/2020-03-06.md/index.md)
- Second Level: Making them active with scripts
- [The Index Page that generates an overview of all Journal Entries](browse://doc/journal/index.md)
{style="border:1px solid gray;float:left" width=300}
{style="border:1px solid gray; margin-left:50px" width=300}
---
## Aspects we where interested
- Live Programming Feedback
- Updating rendered view (while editing)
- mapping source to rendered object (and back)
- Editing (text) objects and updating source (#WIP)
- partially editing source XXX
- local editing of text objects and partial updating of source
- active elements that change code
{height=150 style="border: 1px solid gray; float:right"}
Take this list:
- [x] done
- [ ] not done
---
## Wiki-pages as Tool (Prototypes)
- [TODO list](browse://doc/files/todo.md)
- [ChangeGraph](browse://doc/files/changesgraph.md)
{width=400}
- [Booklog](browse://demos/visualizations/bootlog.md)
{width=400}
---
## Tools as Web-components
- Which when used may evolve into reusable Web-components based Tools
```html
```
---
## But also backwards: JavaScript files with Markdown
[lively-handwriting](edit://src/components/widgets/lively-handwriting.js)
[lively-editor](edit://src/components/tools/lively-editor.js)
---
## Code (Listings) in Text and Active Code in Text
- [Draft/Prototype of ContextJS/Promises](browse://../../research/Draft-COP18-Promises/content/implementation.md)
{width=400}
- Test, Code Listings and Active Code..
{width=400}
---
## Summary
