Templating and description of the view structure

In ZOE — You describe the structure of your DOM templates with JS object literals, you use properties like element , attributes , content (describes the inner text content of the element) and children. The children object can also reference a previously defined “template tree”. Example from the docs:

var TodoItemContent = {

title: { element: "input", attributes: { type:"text" } },

editButton: { element: "button", content: "Edit" },

deleteButton: { element: "button", content: "Delete" }

}



var template = {

element: "div", classes:"todoItem", children: TodoItemContent

}

This was very similar, in concept, to today’s React.createElement . When designing ZOE — it was important for me to keep everything in the “Javascript” realm — once a page loads, I wanted a DOM structure to already be laying around in memory, ready to be rendered — I wanted to “skip” the parsing of HTML. Of-course, this is less intuitive to write, less readable — and in that sense — React’s JSX concept is a good idea, though it enforces preprocessing and transpiling. If I would have spent more time on ZOE — I would probably add JSX support for it — which will be compiled into ZOE’s templating structure.

Data and data variables

ZOE supported “dynamic data variables” — “placeholders” for data (similarly to veteran web templating engines such as Handlebars) — the syntax was a string prefixed with an AT sign (@). You could use them anywhere in the values of properties in the template object. So, for example you could put @todoTitle in the content part of a template describing a “Todo Item”. You could also use them as values of attributes.

When you “render” a ZOE component, you supply a “data context” — an object of data (taken, for example, from a server request) — then the values for the data properties are taken from that data context, so, for example @todoTitle will be replaced, from the data, with a value of the property todoTitle. There were various ways to “repeat” certain part of a template, and thus supply an array with several items, each having its own todoTitle.

This is, kind-of, similar to loading some data, and then using it as the value of Props in React.

In terms of rendering — ZOE would first “load” a component into memory — it would save an actual DOM structure made from the template — with the data variable names — and rendering meant “cloning” that DOM, using the native cloneNode() which was, and still is, the fastest way in Javascript to create a new DOM element into a document (faster than createElement ) — replacing data variables with their correct values, repeating necessary DOM structures and so on.