Zen Logo

Demos of Zen technology prototypes

Demo #1: DOM editor Demo #2: Introduction to Zen sequential web app programming Demo #3: Visual program editor Demo #4: Financial blog Demo #5: Tab container Demo #6: Gambit Scheme Other experimental code About the Zen web app framework and these demos

About the Zen web app framework

Zen is a small framework being developed to help bring web application authoring to the masses. Perhaps someday it will become an important tool in the IndieWeb movement. Three main principles make it different from other web application frameworks. This website is to demonstrate these principles in action.

First Principle: Allow non-technical users to program true web applications

It will be possible for end users to program real web applications using simple block-structured representations, in the same context in which they are used—namely, in the web browser on the same website. It is relatively easy to write a Scheme program that diagrams and manipulates Scheme code under control of a non-technical person. Much of the ease with which a non-technical user will be able to pick up this style of programming will depend upon providing good names for things.

Second Principle: Allow the programming language to be extended

The web applications will be programmed in the Scheme programming language, which can be syntactically extended, even extended with new control structures. A Scheme-language macro (unrelated to macros in languages like C), with-handlers, was written by Alexander Sukhoverkhov (naryl.pandora@gmail.com), demonstrating a control structure added to the Biwascheme implementation of Scheme. An example of its use is given in the next section.

Third Principle: Fully support sequential programming

The events that occur in a web page, from page loading to key input to mouse input to XMLHttpRequest data transfer and more, can be handled by a single sequential process running in the page. Here is Scheme-language code that will listen simultaneously for seven kinds of event and collect any data returned from the first event object:

;; Zen's Scheme macro "with-handlers" sets up a set of event
;; handlers of any type and creates a block that automatically
;; removes the handlers when its execution completes.
;; The macro with-handlers and associated code was written by
;; Alexander Sukhoverkhov (naryl.pandora@gmail.com).
(with-handlers ((dragover-handler "#target-area")
		(dragleave-handler "#target-area")
                (drop-handler "#target-area")
                (click-handler "#stop-button")
                (keydown-handler "#form-1")
                (timeout-handler timeout 5000)
                (ajax-handler image "https://bit.ly/3mgj8IY" blob))
  (set! input (get-input))
  (set! event-type (js-ref (first input) "name"))
  (case event-type
     (console-log "Got dragover event"))
     (console-log "Got dragleave event"))
     (console-log "Got drop event"))
     (console-log "Got click event"))
     (console-log "Got keydown event"))
     (console-log "Got timeout event"))
     (console-log "Got ajax event"))))

A component of Zen, mini-framework.scm, makes it unnecessary to write callback or promise functions. There is no loss of program capability or efficiency. What is special and remarkable about this component is that it takes advantage of a very unique operator in the Scheme programming language, call/cc, aka call-with-current-continuation, which imparts system-call-like features to user programs. mini-framework.scm makes the programming of a complex user interface (UI) simple. Programs written in this manner are straightforward, easy to read, and easy to write. The hope behind Zen is that non-technical end users will be able to write useful web applications as easily as they write programs in the programming language BASIC.

The Demos

The rest of the pages on this website are devoted to proofs of concept and prototypes of components of Zen. Some of these demonstrations are very buggy. None of them is complete. Follow the "Next" button at the bottom of each page or use the navigation panel at the left to visit each demo.


The Mashweb.Club website gives an overview of the insprirations and motivations for Zen. The white paper there goes into much more depth about Zen-related technologies, although the website is still a work in progress. Sign up on Mashweb.Club to be notified whenever a demo on web-call.cc has been added or improved or accounts on Mashweb.Club have gained new features. Such notifications will probably happen at most a few times per year.


Copyright © 2020, 2021, Thomas Elam, Mashweb.Club. All rights reserved.