Lively Programming with Web Compontents

• Background
  • Lively Kernel, a Smalltalk like development environment in the browser
• Motivation
  • Transfer programming experience of Lively Kernel to plain HTML / JavaScript
  • No new framework or new language for better live programming
  • But better live programming with HTML and JavaScript
• Problem
  • Not full control of framework, because of standard browser technology
  • Plain HTML does not provide abstractions
  • JavaScript objects not enough reflection
  • Web Components provide abstraction, but lack run-time development support
• Approach
  • Preserve the context while giving immediate feedback through instance migration

Lively Kernel Development Experience

• Morphic Framework with Halo Tools
• System Code Browser (Smalltalk-like development in the Web)
• Wiki-like collaboration while working on code and objects
• Problems of Combined Run-time- and Development Environments

Lively4

• Programming Experience in a Web-based Self-supporting Environment
  • Collaborative, though wiki-like Github backed appraoch
  • Live / explorative in a Smallalk / Lively Kernel like way
  • BUT: ... with just "standard" Web technology?
• Lively4: New implementation of Lively Kernel ideas, tools, practices
  • make use of other plain JavaScript and HTML technology to easier build the environment
  • allow to target content not created directly in Lively4 with our tools
• Long list of desired features
  • Be loadable into any webpage (directly or through browser extensions)
  • Use cloud resources for loading, mixing, and storing content
  • ... and many more

Web Components in Modern Browsers

Live Web Component Migration

• JavaScript objects and HTML elements
  • Loosing object identity
  • Dynamic elements in static templates
• Object mutation and HTML element migration
• Approach:
  • Modify the source code of Web Components (HTML and JS)
  • Control the instantiation (use the latest template and class)
  • Existing instances are migrated
  • Run initialization code and (re-)applying the persisted state
• Problem:
  • "Stale code" and dangling event listeners
  • Performance due to potentially big scope of reloads
  • Level of preserving context (white vs black listing)

Different Kinds of Feedback in the System

Conclusion

• Lively4
  • Explorative and live programming experience in a Web-based environment
  • Working with plain HTML elements vs. special framework
  • Live programming experience for Web Components
• Design Decisions
  • Object graph vs. DOM (references vs. explicit name)
  • Mutable vs. immutable past (migration vs. mutation)
• Ongoing challenge
  • practical usability vs live and explorative programming experience

Designing a Live Development Experience
for Web Components

• Explorative and live development environments
  • Flourish the most when they can impose restrictions
  • Enhance the experience of editing code: immediate feedback and direct manipulation
• Example: Lively Kernel's user interface (UI) framework Morphic
  • Working with graphical objects in direct way
  • Giving immediate feedback during development.
• Lively4
  • Similar development experience
  • Targeting general HTML elements.
• New abstraction mechanism: Web Components
  • Use plain HTML as building blocks for our tools
  • But: miss proper capabilities to support run-time development
• Approach:
  • Use object migration to provide immediate feedback