In this post i would like to sum up my thought about using pure HTML files as fully functional templates. I’ve examined this pattern for about a year and i have to say it creates real order in application structure and lifecycle.
What means “pure” ?
- Pure like plain, nothing else than HTML
- Fully validable
- Readable in any browser
- Editable in any HTML editor
How it works ?
HTML files are read as Document Object Models (DOM), then queried against selectors (like CSS1-2-3, XPath, X4E, even SQL ?). Selected elements are joined and/or (cross)manipulated, then full final DOM is exposed as HTML result to the browser.
Pros
- Preview-ready templates (filled with ipsum content)
- Separation of template’s logic and template’s markup
- Based on commonly known technologies (HTML, CSS, DOM), no additional languages or grammars introduced
- Use one HTML file for holding elements used in any number of functions (1:n relation)
- Use many HTML files for holding different elements but queryable by same selector and used in one function (n:1 relation)
- Fill data from DB straight into specific place in template as easy as applying a CSS style
- Shouldn’t decrease performance when saving parsed template in native syntax of server-side language (eg PHP). In some cases it can even increase rendering speed.
Cons
- DOM Parser needed
- Selector provider needed (XPath is most common, CSS implementations are growing)
Possibilities
- Reusability of selectors between client-side and server-side templating engines
- Event-driven template communication
Use cases
- Websites that needs to allow easy layout changing
- Preview changes to the Client without server-side logic modification
- Transparent simultaneous work between HTML and server-side developers
Implementations
- phpQuery – DOM Parser
- plainTemplates – structured array injector (depracated)
- QueryTemplates
References
Update 06.12.08:
QueryTemplates has been released to the public.
looks exciting. the only pure html template language in php i know is PHPTAL (http://phptal.motion-twin.com/). its attribute tags are a bit cumbersome at times, but overall i like it.
did you look at Genshi (http://genshi.edgewall.org/) it’s a python template system. it’s very interesting, how they deal with layout files, they call “match templates”. look at the wonderful tutorial: http://genshi.edgewall.org/wiki/GenshiTutorial
i will keep track of that QueryTemplates thing. phpQuery rocks!
I’m aware of both engines you’ve mentioned. Both of them uses XML namespaces, so that’s not pure HTML. They mix templates logic and structure, which separation is main purpose of idea i’m presenting.
QueryTemplates are almost ready to be released, just finishing wiki pages, so expect publication in next few days :)
[...] understand the idea. You can read more about used templating pattern in one of previous posts – Pure HTML templates theory. You can read more about it on the wiki and there’s also official blog. Feel free to post [...]
Great!!! I really wondered about why I had to use variables in a markup language that already has all info in it. Of course the template engine has to understand the markup language to be able to use tag based templates. I ask in the smarty dev group today if somebody thinks this is interesting – great to see that you just did it already! I will take a deeper look and follow development.
For people, who don’t get the kick on this, maybe this post can help you understand better: http://groups.google.com/group/smarty-developers/browse_thread/thread/22dfb96e89afff62
Hello, I’m also developing a Pure HTML Template system called SDTemplates, I try to have a more simple API and process (no template compiling/generation phase), but still based on these principles (html templates and css selectors). I’m also planning some facilities for make it useful and easy for the designer and coder to work together and in parallel. You can check it here:
http://code.google.com/p/sdtemplates/
Only SVN at this point. The API is not stable at all.