idea for a simpler web template system

I made a simple web template system.  I will describe here, in case someone will like it.

A template contains sample content, it doubles as a mockup.  Data can be bound to any HTML container with a new attribute, ‘v’.  Binding a scalar fills the container with text.  Binding a list copies the container for each element of data.  Binding a object/hash links variables inside the container with members of the object.  A missing or null variable acts like an empty list.  If any html attributes match variables, they are filled in.  The document tree can mirror the data tree.

It gives clean templates, with bare-minimum template code.  Some more work might be needed in the app code.  I have not used it all that much, so I don’t know whether it works well for complex apps… but I prefer not to have special code or syntax in a template.  Might need to add a few more template features, e.g. to check for empty / non-empty lists.  It could be done with methods, like v=”foo.none”, v=”foo.some”.  Ruby might be a good fit: everything is an object, and can add methods to core classes.

I wrote this as a Perl program, but it might also be good for client-side data binding, with JavaScript.  A template can be loaded and cached, then real data is fetched and filled in using JavaScript.  The user could access this plain data, too.

An example, the following template takes a list data structure like:

{ person: [
    { name: 'Fred Nurk', phone: '+61 1111 2222', pic: Pic(...) },
    { name : 'Sally Shine', phone: ['+12 2222 1111', '+12 994422'], pic: Pic(...) }
] }

and it expands into a paragraph for each person.  The template has some example data in it.  It could also show multiple phone numbers or images for each person, if those bits are bound to lists.

<p v="person">
  <b v="name">Joe Bloggs</b>
  <i v="phone">+61 2345 6789</i>
  <img v="pic" src="joe.png" width="128" height="128"/>

It would expand to this (with an option to keep the ‘v’ attributes):

  <b>Fred Nurk</b>
  <i>+61 1111 2222</i>
  <img src="..." width="..." height="..."/>
  <b>Sally Shine</b>
  <i>+12 2222 1111</i>
  <i>+12 994422</i>
  <img src="..." width="..." height="..."/>

Now, this is pretty nice.

I am thinking it would be even nicer to use custom SGML tags and attributes, and bind them to data directly, without need for ‘v’.  The data could also mirror existing HTML structure, such as img.src, etc.  Such a template might look like this, and expand to something similar:

  <name>Joe Bloggs</name>
  <phone>+61 2345 6789</phone>
  <img src="joe.png" width="128" height="128"/>

It is somewhat frowned upon to add your own tags and attributes on top of HTML, but I think it can be useful, and in practise doesn’t seem to cause any harm.  Pfffft!  What good is a markup language that can’t be freely extended?  Might as well forgo any use of variables in code, for fear of future reserved words.

Custom tags can be styled with CSS; this one should behave like a div with border, that one like a span in green flashing text…  Apart from the styling, the new tags should be ignored by the browsers.  Even if they don’t care for user-extensible markup, they do care about future-proofing.

So, maybe I will do it like that.  The ‘v’ option might still be useful in some cases…  Maybe I was playing VVVVVV too much.

That’s all, bye!

This entry was posted in Uncategorized. Bookmark the permalink.

4 Responses to idea for a simpler web template system

  1. peitschie says:

    That actually has some similarities with Microsoft’s XAML interface & bindings. XAML is intended for GUI display, and supports various types of data bindings (one-way-readonly, two-way bound upon form submit effectively). It also looks at things such as data converters (e.g., how to convert a date to and from a string). I suspect none of the concepts are new from XAML, but that is just the area I’m most familiar with them in…

    • sswam says:

      Sounds like there are some interesting ideas in XAML. One disadvantage with my system, it’s still mostly vapourware! Thanks for your comment.

  2. sswam says:

    I started implementing this: I intend to use it for the 2nd version of my “steam games library” webpage, see And yes, those games are free to a good home.

  3. peitschie says:

    Completely random, but have you heard of AngularJS? Though the framework can do a lot, it’s pretty straightforward for this sort of use case. Syntax is quite similar to what you’re after here too 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s