# Demos

Lively4, as a self-supportive development environment, is first and foremost its own showcase. We use the tools in Lively mainly to develop and evolve itself. 

## Lively4 Development Environment

### Components
- #CodeMirror [open](open://lively-code-mirror),[browse](browse://src/components/widgets/lively-code-mirror.js)
- #FileEditor [open](open://lively-editor),[browse](browse://src/components/tools/lively-editor.js)
  
### Basic Tools
- #Workspace, see #CodeMirror
  - ![](media/Workspace.png){width=200px}
- #LivelyContainer: Content Browser and Source Code Editor, [open](open://lively-container), [browse](browse://src/components/tools/lively-container.js)
- #ComponentBin (#PartsBin)
- #LivelyConsole (see Chrome Console)
- #LivelySearch (RegEx, server-side search)
- #LivelyMount / Storage Setup


## Workflows
- Editing Markdown / HTML 
  - uses #LivelyContainer 
  - editing source code vs. manipulating objects
- Editing JavaScript
  - uses #LivelyContainer 
- Lively Web Components
  - see #Lincke2018DLD paper
- Drag and Drop of files
  - drag content inside lively
  - drag content to and from desktop
- Polymorphic identifier 
  - Plex Demo
- Babylonian Programming
- Lively4 Architecture
  - ECMAScript Module System
  - Web Components 
  - Service Worker
- Object Editing
- DOM Persistens

## Seminar Projects

- PDF Annotation?
- Debugger Support? 
- Services / Scripting Cloud Data Flow  
- Lively Projectional Editor
  - https://www.youtube.com/watch?v=c0T0ajQehLY&feature=youtu.be
- Non-linear Constraint Solving
- Explorable DOM
- Blockchain
  - https://lively-kernel.org/lively4/lively4-core/doc/PX2018/project_1/endterm-presentation/PX Screencast - Blockchain.mp4
- Handwriting Recognition 
  - https://lively-kernel.org/lively4/lively4-core/doc/PX2018/project_1/endterm-presentation/presentation.md

## Misc Tools
- Graph Control
- Diary

## Research Tools
- XRay, XRay Events
- Babylonian Programming 
- Active Expressions 
- ContextJS
- VivideJS