Skip to content
Iulian Rotaru edited this page Sep 11, 2022 · 36 revisions

WOOD stands for Web Object Oriented Development and is a command line build tool for user interfaces, based on W3C technologies: HTML and CSS, and plain ECMA Script. Its main goal is to move runtime components consolidation on build time. For that WOOD tool delivers a standard W3C site.

It is based on HTML components, linked in structures of arbitrary complexity by only six WOOD operators. Operators are declared using well known HTML attributes syntax. There is no programing language mixed in the HTML components using some fancy syntax - just pure HTML. Final HTML pages are created by build tool at development phase, not on runtime.

Component

WOOD promotes an object oriented development paradigm using decomposition of complex user interfaces into user interface components - for short, components. Component is the base unit for code reusability that keeps all its files together, in the component directory. A component can inherit from a component with editable elements - named template, and can include child components. A child component can be reused between multiple parent components.

A page is just a component that has the <body> element.

There is no formal limitation on templates inheritance hierarchy. A template can inherit from another template creating an arbitrary long templates chain. The same goes for child components. A component can include more that one single child component that can include its own components, creating a tree of not restricted complexity. And since template is indeed a component it can include its own components tree.

Components can be exported and imported to / from another projects and can be distributed in libraries. Moving components around is just a mater of copying the component directory.

Build Process

WOOD builder creates site files from project components - resulting files being standard HTML and related styles, scripts and media files. Build process reads component source files and resources from project, consolidates them into pages and write to the target file system. Target file system defines the directories structure for the site files. Different file systems structures are supported but a default implementation exists.

Operators

The two OOP relations, inheritance and aggregation, supported by WOOD are declared with operators. In WOOD parlance these OOP terms are called template, respective inclusion.

Use wood:editable to declare editable elements on template, and wood:template to declare template path on component that extends the template. For child components inclusion use wood:compo operator. There is also the option to define layout parameters with wood:param when declare template or child components. Layout parameters are used on template and child component allowing customizing a component reused in multiple places.

WOOD builder first includes child components tree, in depth-first order, then inject content into editable areas from templates chain, bottom-up. Top template should have <body> element.

Code Sample

Here is the HTML code for above diagram. Note that WOOD actually codes components relations into component layout files.

We talk about component relations but strictly speaking is about layout relations. Anyway, since component has one and only one layout file we can apply layout files relations to components.

  • template/page/page.htm
<!-- template component -->
<body xmlns:wood="js-lib.com/wood">
	<!-- parameter reference -->
	<h1>@param/title</h1>
	<!-- editable element -->
	<section wood:editable="section"></section>
</body>
  • compo/dialog/dialog.htm
<!-- child component -->
<div>
	<div class="close"></div>
	<!-- parameter reference -->
	<h3>@param/title</h3>
	<form>
		<input type="text" name="user-name" />
		<input type="password" name="password" />
	</form>	
	<button>Save</button>
</div>
  • page/home/home.htm
<!-- content component for template/page -->
<!-- parent component for compo/dialog -->
<section wood:template="template/page#section" wood:param="title:Page Title" xmlns:wood="js-lib.com/wood">
	<h2>Section Title</h2>
	<p>Section content...</p>
	<!-- child reference element -->
	<div wood:compo="compo/dialog" wood:param="title:Dialog Title"></div>
</section>

And here is the resulting page:

<body>
	<h1>Page Title</h1>
	<section>
		<h2>Section Title</h2>
		<p>Section content...</p>
		<div>
			<div class="close"></div>
			<h3>Dialog Title</h3>
			<form>
				<input type="text" name="user-name" />
				<input type="password" name="password" />
			</form>	
			<button>Save</button>
		</div>
	</section>
</body>

Web Components

W3C has a suite of technologies allowing to create reusable custom elements, named Web Components. On this suite there is an API named Custom Elements that help in creating new tags with custom behavior, somewhat similar with WOOD component.

  • script/nav-separator.js
(function () {
    class NavSeparator extends HTMLElement {
        constructor() {
            super();
        }
    }

    customElements.define("nav-separator", NavSeparator);
})();

Key difference is that web component uses JavaScript to define HTML layout and related CSS styles whereas WOOD component follows separation of concern and uses separated files. So more files per WOOD component and separated directory instead a single file for W3C web component.

Major web component advantage is that it can be embedded into any HTML file; need only to include the script into page. Anyway, is acceptable for web component to use external style file and media resources in which case they should be included too.

Conclusion

To sum-up, WOOD tools uses major object oriented features:

OOP WOOD
encapsulation by keeping all component files in a single directory that act as name space
privacy build and preview processes does search for resources only in component and global asset directories
inheritance via editable elements from templates
aggregation using child components that can also have own child components, in tree of not restricted complexity
unit test unit testing is not strictly speaking specific to OOP but is well supported by encapsulation

Below is a more complex example. It is a contrived example but helps in getting the big picture.

It focuses on component relations that are represented as arrows, simple arrow for inheritance and arrow with diamond for aggregation. Note that inheritance is also know as IS A relation whereas aggregation is a HAS A relation. Also, a component that implements content for an editable area is known as content component, whereas a component that has child components is named parent component.


Last updated 9/5/2022.