tardigrade v1.0.1
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) {
}
}