Tardigrade

Tardigrade is a tool to ease view creation and runtime use in HTML.

The philosophy is that you create view in "pure" html (annotated with specific Tardigrade attributes like x-id, x-cardinal, x-options) and tardigrade creates stubs for those views for the language you want.

Tardigrade's advantages

• Views can be compiled to the language/framework of your choice : vanilla Javascript, Typescript, Coffeescript, Java GWT, Dart, ...
• Views can also be compiled with the WebClient / Selenium backend. Testing your application with such tools (Webdriver) is then so easy...
• It works on server side and client side. In fact, you can create a fully working HTML flow from your templates on the server, and the client can then work with the received HTML as-it-is and further manipulate it.
• You can scaffold rapidly your application by generating javascript code from your templates. When your project needs a more structured framework or language, you can keep your views and use.
• If you need UI consistency between several products, there is no problem because Tardigrade views can be maintained by designers while the developpers use them with their favorite/adapted language/framework.

Backends :

With one HTML modular dialect to describe UIs :

Server side

• Mustache backend,
• usable a template engine in Express,

Client side

• javascript,
• typescript,
• gwt,
• dart,
• coffeescript

On the Test side tardigrade is also very useful :

• selenium (javascript / java),
• webdriver,
• phantomjs (that's the javascript/dom backend isn't it ?)

Quick start

Documentation

Tardigrade HTML Template format

One template => one html file. Name of the file = template name (later on a namespace thing might be developped). The html file can be with the regular html boilerplate (html, head, body) or directly contain the template root node.

Html nodes can contain additional attributes to insert Tardigrade metadata:

• x-id: defines the tardigrade node's identifier. This will be referenced as the point's id in the template.
• x-cardinal: if set to "*", denotes that this node is repeatable. Tardigrade's engine is able to manage repeatable nodes and generate adapted APIs for them (dto will support arrays and api will support index/path). There are some requirements when using cardinal "*":

-- the node must have an x-id identifier too, -- its parent also should have an ""x-id**", -- the node must be the only child of its parent (otherwise the Tardigrade runtime wouldn't be able to detect html element positions in the template).

• x-options: provisional. For instance will support bem-css class name generation.

Template samples

Here are few template samples.

Template use

API generation in typescript

DTO format

Todos

IDE graphical editor for tempaltess

• backend javascript
• backend GWT
• backend Selenium

DTO Spec better definition (cardinal and ids)

Classe à la place de TemplateElement

Création :

new MyTemplate(dto) => creation d'une template

MyTemplate.html(dto) => creation de la chaine HTML

MyTemplate.element(dto) => création d'un élément

MyTemplate.of(element:HTMLElement) => récupération d'un template à partir d'un élément DOM

    class MyTemplate {
        static ensureLoaded() {
        }

        static html(dto): string {
            // principal
            return null;
        }

        static element(dto): HTMLElement {
            let html = MyTemplate.html(dto);

            return null;
        }

        static create(dto): MyTemplate {
            let element = MyTemplate.element(dto);
            return new MyTemplate(element);
        }

        constructor(element: HTMLElement) {
        }
    }