doc.mashweb.club – web framework

Zen-White-Paper: Zen vs. current WYSIWYG and WYSIWYM web-page composers

Thu, 05 Jan 2017 00:00:00 +0000

Present-day WYSIWYG and WYSIWYM web page composers immediately confront the user with page structure details, requiring the user to optimize his web page prematurely. A palette of HTML elements dominates the web page under construction with these composers. The user can “paint” a web page with elements from the palette. Some of these composers strew the page view with icons representing HTML elements.

Zen will take a different approach. In Zen, HTML elements making up the web page will represent themselves at the top-level view, with all the obscurity of detail that implies. Still, when Zen’s node browser is open, Zen will try to show a picture of the web page with all the all block boxes, inline boxes, and inline-block boxes⁴³ visible. Possibly it will do this by temporarily restyling all borders and margins (Figure 7).

Figure 7. Screenshot of a node-browser prototype. Click to open the live demo in a new window.

Zen will model other display styles besides block, inline, and inline-block in a subsequent release. Zen will provide whatever kinds of object-browsers are necessary to unobscure details of the page-as-an-object. Although the details have not yet been worked out, hope and inspiration are provided by the 3D View tool, and by the Tilt 3D add-on, for the Firefox browser (Figures 8a and 8b). The author does not mean these screenshots to represent the paradigm that Zen will use.

Other display styles besides block, inline, and inline-block will be modeled by Zen in a subsequent release. Zen will provide whatever kinds of object-browsers are necessary to unobscure details of the page-as-an-object. Although the details have not yet been worked out, hope and inspiration are provided by the 3D View tool, and by the Tilt 3D add-on, for the Firefox browser (Figures 8a and 8b). These screenshots are not meant to represent the paradigm that Zen will use.

Figure 8a. Screenshot of the Firefox 3D View tool for Firefox versions prior to Firefox 47.

Figure 8b. Screenshot of the Tilt 3D Add-on for Firefox.

The user will be able to select any node that can be the target of a mouse event. In node-selection mode, passing the mouse pointer over nodes will highlight them one at a time (Figure 9).

Figure 9. Layout-manipulator prototype. Click to open the live demo in a new window.

When the user wants to add an HTML element to his web page, Zen will first present a choice of block, inline, and inline-block box types, because in Zen’s paradighm, the visual behavior of a box is mainly determined by its display style, not by HTML tag type. The priority of display style over tag type in the visual behavior of a box is illustrated by the w3schools.com’s “Tryit Editor” page for converting <li> HTML elements into a horizontal navigation bar. Using Zen’s paradigm, with virtually zero learning, the user could intuitively mock up a web page using only block, inline, and inline-block boxes, and convert it piece by piece into semantic markup. Or he could set the HTML element tag of each element immediately when adding it to the web page.

Zen will allow the user to inspect and manipulate these boxes in a way pioneered and developed by Smalltalk and Smalltalk variants, using inspectors and browsers to inspect live web-page objects. For a relatively gentle introduction to Smalltalk-style inspectors and browsers, see Cincom Smalltalk’s tutorials (Figures 10 and 11). The specific HTML tag of an HTML element will be a detail to be drilled down to rather than a primary detail of interest.

Figure 10. Cincom Smalltalk Inspector Tool overview tutorial video. Click to open in a new window.

Figure 11. Cincom Smalltalk Browser Tool overview tutorial video. Click to open in a new window.

Zen will take an embedded, instant-feedback, hybrid WYSIWYM-WYSIWYG (not “pure” WYSIWYG) approach to pull the authoring of novel, Semantic-Web applications out of the exclusive province of programmer-specialists and put it into the hands of amateurs and dilettantes (in the original, non-pejorative sense of the words). The Zen project will primarily focus upon working with the “purest” web technologies—HTML and CSS—rather than backend technologies like web servers and web frameworks, because the back-end web framework or web server is opaque to JavaScript running in the web page. That is, the JavaScript running in the page has no way to affect the operation of the back end unless specific arrangements have been made for it. Zen will work by providing updates to web-page source in some format. Where web-page source is persisted and how it is used to generate the web page Zen is embedded in will not be the concern of Zen, though a reference implementation for that will be developed along with Zen.

In spite of these strict limitations, Zen as a building block for web servers and web frameworks is anticipated to be a game-changing addition to present-day website and web-app techniques. In some cases, Zen might even be developed to itself reflect changes to content, structure, and style back to sources, using a bit of code on the back end (i.e. on the web server). Perhaps, for example, in WebDAV-enabled websites—Zen could relatively easily be leveraged to rewrite web-page source, including stylesheets. On the other hand, using Zen only as a low-level, embedded, solid building block, it should be possible to augment web frameworks of many types to achieve a new, higher level of interactivity and customization in web applications.

None of the well-known WYSIWYG and WYSIWYM page editors directly support the creation of web applications. The most radical aspect of Zen will be that it will allow simple, sequential programs to be created and edited using a block representation of the program’s abstract syntax tree (AST),⁴² where blocks can be moved around using the same user interface Zen will provide for moving web page elements, with minimal modifications. Zen will accomplish this unusual feat by implementing a version of Scheme language in JavaScript, along with true continuations,⁴⁵ various supporting functions written in JavaScript, and some resources like icons. The author has already used such continuations to string together JavaScript event handlers to create a small sequential program without resorting to callbacks, continuatinon-passing style, promises, or state machines. Scratch⁴⁶ and Snap!⁴⁷ (formerly called BYOB) demonstrate that even young children can program using a cleverly designed visual programming language (Figure 12).

Figure 12. The Snap! visual programming language. Click to open in a new window.

Zen-White-Paper: Introduction

Mon, 01 Jan 0001 00:00:00 +0000

This white paper presents the profoundly unique, personalized, and adaptable Zen system, under development, for creating web applications—a radically new system usable by a very inclusive class of people. The alpha stage of the Zen project is the building of a small bridge over the gap between codeless, programmerless web authoring and the large-scale web application development that programmers do. There are numerous opportunities to build this small bridge because simple web-page interactions have become part and parcel of a novice’s understanding: copy-paste, URL linking, drag-and-drop, resizing, opening new browser tabs, etc. All such interactions could be created inside a web page via cleverly devised menus and buttons suggesting next steps to the web page visitor. Such interactions are sometimes called wizards and macros, but already that sounds too technical!

A typical example of a web application, aka web app, is a highly interactive website with various kinds of media and interaction. Such a model provides lots of examples of variability between web apps. We all know there are countless websites dedicated to every subject imaginable. So why would anyone but a computer geek want to create one more? Isn’t there already a web app for every need, even for every personal, private need?

Old School

This white paper does not go deeply into the question. Rather, the possibilities will be explored and developed gradually on the website web-call.cc and in the Mashweb Guide. However, the short answer to the question is that a website can best serve an individual if it keeps a laser focus on his particular needs. There are two opposing forces in operation behind website development: the need to conform to the individual web user’s interests and the need to serve a class of people. There are just too many possible requirements for one size to fit all. A few of the infinite possibilities for tailormade websites are presented in this Introduction. This white paper proposes that every literate person should create his or her own web apps.

The web is replacing pen and paper.

In place of reading hardback and paperback books or magazines and journals, and in place of keeping notes on paper, people are reading and writing digital media, especially on the web. There are countless websites dedicated to socializing, employment, cars, sports, self-help, arts, science, religion, and philosophy, millions of subjects large and small, both consequential and inconsequential. The requirements of each website can be as unique as the website’s target audience.

Here is a small sample of the user interactions that can make a website unique:

searching
liking
tagging
sharing
posting
commenting
chatting
discussing
moderating
uploading
curating

And that is but a start. The reader might notice that many of these microinteractions are used to turn a website into a social network, but microinteractions like these can define the main utility of any website.

There are also many kinds of specialized media and data a website visitor can interact with:

short text, like on a microblogging site like Twitter
long text
photos
sounds
links
numbers
interactive graphs

A website can also be specialized by its behind-the-scenes databases and services, that is, by the data it accesses or collects and by its operations on the data.

Someday, Zen might allow any literate person to build their own highly interactive web applications (aka web apps) from scratch and decide virtually every detail of their look, structure, and function simply, efficiently, and quickly without prior learning. This white paper links to live, interactive experiments showing the incremental progress in building Zen. Each investigation tests at least one new function to enable non-programmers to create simple web applications.

But why would anyone but a computer geek want to do that? And why hasn’t someone already made it possible?

The answer to the first question, “Why would everyone want to create web applications?” is that the web is the natural way to organize ideas and information in the digital age. The “Guide to Mashweb” goes into depth about the problems people of the Digital Age encounter every day, but the main advantages of the web over other forms of electronic media are:

the web is everywhere on our planet,
the web enables hypermedia, i.e. web links,
the web encompasses multimedia, and
the web, through HTML, CSS, and JavaScript, gives structure to data, i.e. ways to organize data.

The answer to the second question, “Why hasn’t someone already made it possible?” has two parts. First, the “group think” among programmers is so strong that no one has noticed the relevance of a little-studied capability of a little-studied programming language. This capability can shrink the programming task an order of magnitude and encourage the exploration of ambitious new paradigms of the user interface. Second, the new paradigms will enable Zen to work inside documents to build organized media rather than outside as a “bolted on” application. Working inside web pages will make Zen natural and powerful. The current “Zen White Paper” goes into depth on the subject of Zen’s key technologies.

Zen’s unique selling point (USP) will be in-context, instant feedback, full-featured editing of website or web application structure, function, and styling. Zen will make it easy for users to create valid HTML and styles in web pages without getting into the complexity or distraction of code. Zen users will quickly develop basic web application programs using visual-programming principles adopted from successful visual-programming languages for children. Most importantly, all this “development” and its deployment can be continuous, carried on by a website’s users of all levels of experience. Deploying and sharing a new application could be as simple as clicking a Share button. Self-organizing Zen user communities might even develop novel applications.

The unusual part of Zen will be free software that programmers can use to give their websites Zen’s unique capabilities. Zen’s core (“Core Zen”)¹ will work with virtually any website’s server technology. Model website server technology² will develop alongside Core Zen. It will be made available on the internet,³ providing user registration and private accounts for users who want to save their work.

The book No Code Required⁴ describes many user-programmed systems for customizing websites but none for creating web apps. Zen will enable the easy creation of many kinds of web apps. Children write application programs in specially designed visual programming languages, so why not adults?

Many problems of end-user programming environments for the web have been overcome to some degree or other by the thousands or millions of web developers in the world. However, the biggest of these problems arises from the stateless nature of the web. To illustrate, let us first review how simple and straightforward it is for a typical desktop program to ask a user’s name and greet him accordingly:


    PRINT "What is your name?"
    INPUT "(Enter your name.)", $name
    PRINT
    PRINT "Hello, "; $name; ", how are you today?"

The flow of this program is apparent but can only work on a platform that hides complexity. It must be halted, waiting for a response. For desktop applications, the operating system provides system calls, a scheduler, and library functions that allow the look of such a program to mirror its progress. There is no underlying operating system for web applications to support the halting and restarting of the program. However, the Scheme programming language supports first-class continuations.⁵ ^,⁶ ^,⁷ ^,⁸ These continuations allow programs to be halted and restarted using language-level mechanisms (as opposed to operating-system system calls and library functions). Zen will utilize continuations to simplify both the Zen developer’s job and the user’s programming tasks.

This paper will explain the appeal of Zen’s new approach and the plan to make work it work. A brief video from the Digital Archaeology project⁹ showing the operation of the first web browser can provide some background context. The video shows the function of the first web browser, called Nexus, crafted by the inventor of the World Wide Web himself, Sir Tim Berners-Lee. Nexus’s editing function is demonstrated twelve minutes and nine seconds into the video (Figure 1). Thus, Berners-Lee intended the web browser to enable easy collaborative authoring from the very beginning. However, as he says, “It didn’t really take off that way.” ¹⁰ ^, ¹¹ ^, ¹²

Figure 1. Demonstration of the editing function of the first web browser. Click to open.

Now, a quarter of a century later, the position of the A-grade web browsers¹³ ^, ¹⁴ ^, ¹⁵ ^, ¹⁶ as the central applications for online sharing seems unshakeable. Yet till today, not one A-grade web browser has full-fledged web-authoring capabilities. (We shall discuss the browser features contentEditable and designMode later, since these do not, without external programming, constitute web-authoring capabilities.) The direct descendents of Berners-Lee’s early web-page editing application are visual web-page editors in three classes:

the class of rich-text editor that is embedded right into a web page. (Programmers might like to know that these are WYSIWYG web-page editors that convert HTML textarea fields or other HTML elements into editor instances.) TinyMCE and CKeditor are typical examples.
the class of standalone WYSIWYG web-page editor that operates on web-page sources and shows a preview of the resultant web page. Sources can be HTML or markup to be translated into HTML.
the class of WYSIWYM semantic web-page editor. Examples of this type of editor are WYMEditor, RDFaCE, BlueprintUI, PageDown, and Showdown. (The author needs to further investigate these editors.) Source can be HTML or markup that can be translated into HTML.

Apart from editors that only edit web pages, there are other tools and applications for developing web experiences:

online web development tools for testing and debugging code (e.g. JSFiddle.net, CodePen.io, jsbin.com, etc.),
web-developer tools and “augmented-browsing software"¹⁷ ^,¹⁸ ^,¹⁹ ^,²⁰ (e.g. Firebug for Firefox, Developer Tools for Chrome, Developer Tools for Safari, Greasemonkey, Tampermonkey, Chickenfoot, X-Ray Goggles),
integrated development environments (IDEs) that build websites,
web content management systems (web CMSs or simply WCMSs),
website builders,
web frameworks, and
web portals.