Zen, the Dynamic, Interactive Web Application Toolkit

Last update: 21 August, 2010

Contents

Zen Blurb
Zen Movies
Technical Brief
The Heart of Zen: 7 Layers of Code
Zen Will Not Be (Only) WYSIWYG
My Blog, Mostly Marketing Ideas
Information About Me
Contact Information

Zen Blurb

Zen is a toolkit I invented (and continue to invent) to create web pages and web applications with unusual flexibility, given simple GUI-based instructions from the user. The toolkit is unusual because:

• it can create pages with any level of layout detail;
• it can embed both plain HTML elements and the components of GUI toolkits Dojo and Google Gadgets and, eventually, YUI, Scriptaculous, Ext JS (now Sencha), MooTools, Qooxdoo, Closure, Mochikit, etc. within pages with any degree of nesting (that is, structural hierarchy);
• it has a simple yet powerful plugin architecture that makes the creation of web mashups easy by encapsulating web-as-a-platform APIs as components combinable with HTML elements and GUI toolkit components;
• it allows instant testing and use—no file saving, compiling, or deployment are necessary;
• it will use a hybrid WYSIWYG-WYSIWYM approach for good quality, streamlined code and good search-engine optimization (SEO);
• it will use an AJAXian approach of 'no page refreshes necessary', but still support good search-engine optimization, by rewriting URLs and by combining AJAX technologies with RESTful web services;
• it will eventually be able to support simple, visually programmed 'user procedures' where the user will be able to define what happens when she and others interact with the page's widgets.

Zen has many competitors, but the combination of all these characteristics makes Zen absolutely unique—and a highly valuable technology. Web applications augmented with Zen's unique combination of features will eventually and inevitably become popular, because they will not have to be programmed in advance and will not have to follow a known archetype. Users will evolve them as their needs evolve, giving rise to new creativity, organizational methods, and collaboration. The barrier to entry to the market for such technologies will be high, due to today's emphasis on statically typed, non-dynamic, non-functional-oriented programming languages and lack of understanding of or appreciation for JavaScript. To create a system like Zen, a good understanding of dynamic, functional meta-programming is necessary.

Zen comprises 7 layers, described below. Layers 1 through 5 are immediately available to selected beta testers, who will probably be web graphic designers or user experience designers with some or no experience adding JavaScript-based widgets into web pages. Beta testers will not need any programming experience. To request to be part of the informal beta test programme, send an email to tomelam@gmail.com with the subject 'Zen beta test' and mention the beta test and your background.

Layers 1, 2, and 4 are immediatedly usable by programmers. To request a technical or business collaboration using Zen-related technologies, send an email to tomelam@gmail.com with the subject 'Zen collaboration'. Technical or business collaborations could involve exchanges or collaborations of various kinds. I am seeking angel investment, venture capital, and marketing consultancy, and I can provide computer programming consultancy, AJAX and JavaScript training, and technical apprenticeship. I would be interested in collaborating with others to create an online forum or guild.

Zen Movies

(If your web browser has Flash installed in it, you will see a box with some icons in it. If it doesn't, please download the files directly from box.net/zen.)

Technical Brief

// A whole web page can be described in JSON.
// Here, the value of "accordion" is set using JSON. 
var accordion = 
["div", {id:"workingNode"},
 [["dijit.layout.AccordionContainer",
   {style:{width:"100%",height:"160px",backgroundColor:"yellow"}},
   [["dijit.layout.AccordionPane",
     {title:"Click here!"},
     [["div",
       {style:{width:"100%",height:"100px", backgroundColor:"orange"}},
       []]]],
    ["dijit.layout.AccordionPane",
     {title:"Click here!"},
     [["div",
       {style:{width:"100%",height:"100px",backgroundColor:"red"}},
       []]]]]]]];
var newDOMBranch = zen.createSubtree(accordion);
newDOMBranch.appendMyselfToParent(document.body);
zen.startup();

dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.AccordionPane");
var accordionContainer = new dijit.layout.AccordionContainer(
  {style:"width:100%; height:160px; background-color:yellow"},
  dojo.byId("workingNode"));
var accordionPane1 = new dijit.layout.AccordionPane(
  {title:"Click here!"});
var div1 = document.createElement("div");
div1.style["width"]= "100%";
div1.style["height"] = "100px";
div1.style["background-color"] = "orange";
accordionPane1.setContent(div1);
var accordionPane2 = new dijit.layout.AccordionPane(
  {title:"Click here!"});
var div2 = document.createElement("div");
div2.style["width"]= "100%";
div2.style["height"] = "100px";
div2.style["background-color"] = "red";
accordionPane2.setContent(div2);
accordionContainer.addChild(accordionPane1);
accordionContainer.addChild(accordionPane2);
accordionContainer.startup();

The Heart of Zen: 7 Layers of Code

1. A non-recursive object-creator function, a much enhanced and genralized version of Douglas Crockford's object creator function. This function makes the new operator unnecessary, so that layer 2 does not need to invoke eval. The use of eval introduces security risks, so it is good to avoid.
2. A recursive object-creator function to construct nested objects, i.e. hierarchical objects, to match literal, declarative-style descriptions. The declarative style of programming is good because it enables a simple, concise representation of the pertinent information that is most easily amenable to automated manipulation.
3. An unusual event handler that gives a web page a modal nature: either the page is in an 'Edit Mode' where all events are masked out except those related to editing the page, or the page is in a 'Run Mode' where non-Zen events are unmasked and Zen is passive. In Run Mode, Zen can be put into Edit Mode when certain triggers occur. Other modes could be added if appropriate.
4. Polymorphic objects, i.e. objects of different types having methods of the same name but tailored to type. For example, objects representing plain HTML elements and objects representing Dojo widgets have methods of the same name so both these kinds of object can be treated uniformly. This uniformity allows the visual behaviour of both types to be mixed together in the DMI of layer 5. Eventually the set of polymorphic methods will include undo, move, delete, delete recursively, and copy.
5. A direct manipulation interface (DMI) that allows a user to drop components (usually components with visible behaviour) into a web page; set and adjust their attributes like foreground and background colours, width, height, etc.; move them around within the hierarchy of mixed-type components (using a suitable visual representation of the hierarchy such as a tree widget or organization chart); clone them; delete them; etc. These operations use layer 4 methods.
6. First-class continuations, the deadliest killer feature, which will turn the event-driven JavaScript programming environment interacting with the stateless web (HTTP) protocol into a minuscule operating system, allowing web applications to be programmed as straightforwardly as native applications, using a 'linear' flow of logic rather than the complex state machines that usually direct the action in web applications. Using this big programming simplification, lots of the 'business logic' of web applications—which is usually kept on the backend web server—can be safely migrated to JavaScript running in the web browser and can be programmed by less-advanced programmers or even non-programmers.
7. Visual programming, based upon an underlying, invisible Lisp running on top of JavaScript. (Using Lisp underneath the visual layer enables automated manipulation by Zen.) The hierarchy of programme blocks is represented by boxes within boxes within boxes … .

Zen Will Not Be (Only) WYSIWYG

A DMI (Direct Manipulation Interface) does not necessarily imply WYSIWYG. WYSIWYM editors are generally a better idea than WYSIWYG editors or CMSs. They produce better code than WYSIWYG editors or CMSs and can allow search engines to work better. (There are many WYSIWYG editors listed in Wikipedia's List of HTML editors and htmlarea.com's list of WYSIWYG editors, but the fundamentals of Zen are entirely different.) Zen could include either a WYSIWYG editor or a WYSIWYM editor—or both, even the ability to edit CSS stylesheets transparently using a kind of hybrid WYSIWYG-WYSIWYM editor. Congruent with its WYSIWYM nature, Zen mainly operates within the limitations of the Web's visual formatting model. It does not try to be a desktop publishing application or a word processor.

Zen works differently than most web editors and CMSs because it works directly on the DOM, not on HTML. There are many benefits gained from working directly on the DOM rather than on HTML, but they fall into three categories:

1. benefits gained from working more in JavaScript and JSON and less in HTML, XML, and backend code,
2. perfect cross-web-browser support, only limited by the imperfections of the underlying widgets and plugins, and
3. improvements in simplicity and speed of web development: much less saving of files, compilation of code, and deployment of code on the backend (web server).

Zen has a centred-in-the-page approach and a not-just-HTML attitude. By 'centred-in-the-page' I mean that, unlike many 'AJAX' or 'AJAX-enabled' frameworks, its code support for the inspection and editing components of web applications, for user-interface programming, and for business-model programming is placed close to where the page rendering takes place: in the web browser. So far as I know, this is unique among toolkits and frameworks. Due to this unusual approach to web page and web application creation, none of Zen's editing capabilities will depend upon boilerplate code, browser plugins, software installation, or a particular web browser. They will only require a reasonably up-to-date web browser.

By a not-just-HTML attitude, I mean that Zen can accomodate and support the inclusion of any component or encapsulated object in a web page. Currently, Dojo widgets and Google Gadgets support exists in a working Zen prototype.

Zen's JSON-based markup gives it its own JSON-based plugin architecture that can easily support hundreds of mashup APIs like GoogleMaps, Twitter, YouTube, Flickr, and Facebook, and will have backend code on the web server to enable EverNote- or Google-Notebook-style web clipping (copying, pasting, and saving snippets from any foreign web page), and eventually Ruby on Rails-based database 'migrations', thus enabling tightly integrated point-and-click construction of simple database-centred web applications. Zen has chameleon DNA: it is capable of being streamlined for whatever kinds of frontend-only or backend-assisted components users want to see in their toolbars (or APIs).

Despite the great simplifications of web application development just described, the killer application for Zen might very well be the point-and-click development of programmes running in JavaScript in the browser, created by non-technical users. Layer 7, described above, could really allow this page-centred web-application programming to become a reality. A study of the original models for user-programmed applications—Smalltalk environments (for example, Etoys or Pharo) and HyperCard—will convince the reader that such programming could soon become a reality. Paradoxically, the tidal wave of interest in and development for the Web set back development of general-purpose user-programmable environments. But with several maturing JavaScript-based widget toolkits, the web-as-a-platform is likely to become a reality sooner rather than later.

My Blog, Mostly Marketing Ideas and Non-Technical Description of Zen

tomelam.blogspot.com

Information About Me

On Twitter I am @tomelam.

My Linkedin profile is www.linkedin.com/in/tomelam.

My Facebook profile is www.facebook.com/tomelam.

My Friendfeed account is friendfeed.com/tomelam

My Flickr Photostream is www.flickr.com/photos/28017228@N00.

My Delicious account is delicious.com/tomelam.

My Github account is github.com/tomelam.

Please refer to Mashweb.Club for the latest developments.

My pre-alpha, Heroku-hosted integration of parts of Zen on a Rails backend is zen-rails.heroku.com. This does not work in the Safari web browser and probably does not work in Internet Explorer, but the problem will be fixed eventually.

Contact Information

My email address is tomelam@gmail.com.