Telephone +44(0)1524 64544

Zoom Zoom - template emotion

HTML::Zoom is on its way to CPAN

Wed Mar 17 21:00:00 2010

Digg! submit to reddit Delicious RSS Feed Readers

I have, finally, after much complaining from people who wanted to play, shipped a copy of HTML::Zoom to the CPAN. Herein some of the more fun parts from the docs so far:


  use HTML::Zoom;
  my $template = <<HTML;
      <title>Hello people</title>
      <h3 id="greeting">Placeholder</h3>
      <div id="list">
          <p>Name: <span class="name">Bob</span></p>
          <p>Age: <span class="age">23</span></p>
        <hr class="between" />
  my $output = HTML::Zoom
    ->select('title, #greeting')->replace_content('Hello world & dog!')
          sub {
          sub {
          sub {
        { repeat_between => '.between' }

will produce:

      <title>Hello world &amp; dog!</title>
      <h3 id="greeting">Hello world &amp; dog!</h3>
      <div id="list">
          <p>Name: <span class="name">Matt</span></p>
          <p>Age: <span class="age">26</span></p>
        <hr class="between" />
          <p>Name: <span class="name">Mark</span></p>
          <p>Age: <span class="age">0x29</span></p>
        <hr class="between" />
          <p>Name: <span class="name">Epitaph</span></p>
          <p>Age: <span class="age">&lt;redacted&gt;</span></p>



This is a 0.9 release. That means that I'm fairly happy the API isn't going to change in surprising and upsetting ways before 1.0 and a real compatibility freeze. But it also means that if it turns out there's a mistake the size of a politician's ego in the API design that I haven't spotted yet there may be a bit of breakage between here and 1.0. Hopefully not though. Appendages crossed and all that.

Worse still, the rest of the distribution isn't documented yet. I'm sorry. I suck. But lots of people have been asking me to ship this, docs or no, so having got this class itself at least somewhat documented I figured now was a good time to cut a first real release.


HTML::Zoom is a lazy, stream oriented, streaming capable, mostly functional, CSS selector based semantic templating engine for HTML and HTML-like document formats.

Which is, on the whole, a bit of a mouthful. So let me step back a moment and explain why you care enough to understand what I mean:


HTML::Zoom is the cure for JQuery envy. When your javascript guy pushes a piece of data into a document by doing:


In HTML::Zoom one can write


which is, I hope, almost as clear, hampered only by the fact that Zoom can't assume a global document and therefore has nothing quite so simple as the $() function to get the initial selection.

the HTML::Zoom::SelectorParser manpage implements a subset of the JQuery selector specification, and will continue to track that rather than the W3C standards for the forseeable future on grounds of pragmatism. Also on grounds of their spec is written in EN_US rather than EN_W3C, and I read the former much better.

I am happy to admit that it's very, very much a subset at the moment - see the the HTML::Zoom::SelectorParser manpage POD for what's currently there, and expect more and more to be supported over time as we need it and patch it in.


HTML::Zoom is the cure for messy templates. How many times have you looked at templates like this:

  <form action="/somewhere">
  [% FOREACH field IN fields %]
    <label for="[% %]">[% field.label %]</label>
    <input name="[% %]" type="[% field.type %]" value="[% field.value %]" />
  [% END %]

and despaired of the fact that neither the HTML structure nor the logic are remotely easy to read? Fortunately, with HTML::Zoom we can separate the two cleanly:

  <form class="myform" action="/somewhere">
    <label />
    <input />
    map { my $field = $_; sub {
       ->add_attribute( for => $field->{id} )
       ->replace_content( $field->{label} )
       ->add_attribute( name => $field->{name} )
       ->add_attribute( type => $field->{type} )
       ->add_attribute( value => $field->{value} )
    } } @fields

This is, admittedly, very much not shorter. However, it makes it extremely clear what's happening and therefore less hassle to maintain. Especially because it allows the designer to fiddle with the HTML without cutting himself on sharp ELSE clauses, and the developer to add available data to the template without getting angle bracket cuts on sensitive parts.

Better still, HTML::Zoom knows that it's inserting content into HTML and can escape it for you - the example template should really have been:

  <form action="/somewhere">
  [% FOREACH field IN fields %]
    <label for="[% | html %]">[% field.label | html %]</label>
    <input name="[% | html %]" type="[% field.type | html %]" value="[% field.value | html %]" />
  [% END %]

and frankly I'll take slightly more code any day over *that* crawling horror.

(addendum: I pick on Template Toolkit here specifically because it's the template system I hate the least - for text templating, I don't honestly think I'll ever like anything except the next version of Template Toolkit better - but HTML isn't text. Zoom knows that. Do you?)


The principle of HTML::Zoom is to provide a reusable, functional container object that lets you build up a set of transforms to be applied; every method call you make on a zoom object returns a new object, so it's safe to do so on one somebody else gave you without worrying about altering state (with the notable exception of ->next for stream objects, which I'll come to later).


  my $z2 = $z1->select('.name')->replace_content($name);
  my $z3 = $z2->select('.title')->replace_content('Ms.');

each time produces a new Zoom object. If you want to package up a set of transforms to re-use, HTML::Zoom provides an 'apply' method:

  my $add_name = sub { $_->select('.name')->replace_content($name) };

  my $same_as_z2 = $z1->apply($add_name);


HTML::Zoom does its best to defer doing anything until it's absolutely required. The only point at which it descends into state is when you force it to create a stream, directly by:

  my $stream = $zoom->as_stream;
  while (my $evt = $stream->next) {
    # handle zoom event here

or indirectly via:

  my $final_html = $zoom->to_html;
  my $fh = $zoom->to_fh;
  while (my $chunk = $fh->getline) {

Better still, the $fh returned doesn't create its stream until the first call to getline, which means that until you call that and force it to be stateful you can get back to the original stateless Zoom object via:

  my $zoom = $fh->to_zoom;

which is exceedingly handy for filtering Plack PSGI responses, among other things.

Because HTML::Zoom doesn't try and evaluate everything up front, you can generally put things together in whatever order is most appropriate. This means that:

  my $start = HTML::Zoom->from_html($html);
  my $zoom = $start->select('div')->replace_content('THIS IS A DIV!');


  my $start = HTML::Zoom->select('div')->replace_content('THIS IS A DIV!');
  my $zoom = $start->from_html($html);

will produce equivalent final $zoom objects, thus proving that there can be more than one way to do it without one of them being a bait and switch.


HTML::Zoom's execution always happens in terms of streams under the hood - that is, the basic pattern for doing anything is -

  my $stream = get_stream_from_somewhere
  while (my ($evt) = $stream->next) {
    # do something with the event

More importantly, all selectors and filters are also built as stream operations, so a selector and filter pair is effectively:

  sub next {
    my ($self) = @_;
    my $next_evt = $self->parent_stream->next;
    if ($self->selector_matches($next_evt)) {
      return $self->apply_filter_to($next_evt);
    } else {
      return $next_evt;

Internally, things are marginally more complicated than that, but not enough that you as a user should normally need to care.

In fact, an HTML::Zoom object is mostly just a container for the relevant information from which to build the final stream that does the real work. A stream built from a Zoom object is a stream of events from parsing the initial HTML, wrapped in a filter stream per selector/filter pair provided as described above.

The upshot of this is that the application of filters works just as well on streams as on the original Zoom object - in fact, when you run a repeat_content operation your subroutines are applied to the stream for that element of the repeat, rather than constructing a new zoom per repeat element as well.

More concretely:

  $_->select('div')->replace_content('I AM A DIV!');

works on both HTML::Zoom objects themselves and HTML::Zoom stream objects and shares sufficient of the implementation that you can generally forget the difference - barring the fact that a stream already has state attached so things like to_fh are no longer available.


... and by Weasel, I mean layout.

HTML::Zoom's filehandle object supports an additional event key, 'flush', that is transparent to the rest of the system but indicates to the filehandle object to end a getline operation at that point and return the HTML so far.

This means that in an environment where streaming output is available, such as a number of the Plack PSGI handlers, you can add the flush key to an event in order to ensure that the HTML generated so far is flushed through to the browser right now. This can be especially useful if you know you're about to call a web service or a potentially slow database query or similar to ensure that at least the header/layout of your page renders now, improving perceived user responsiveness while your application waits around for the data it needs.

This is currently exposed by the 'flush_before' option to the collect filter, which incidentally also underlies the replace and repeat filters, so to indicate we want this behaviour to happen before a query is executed we can write something like:

  $zoom->select('.item')->repeat(sub {
    if (my $row = $db_thing->next) {
      return sub { $_->select('.item-name')->replace_content($row->name) }
    } else {
  }, { flush_before => 1 });

which should have the desired effect given a sufficiently lazy $db_thing (for example a the DBIx::Class::ResultSet manpage object).


At the core of an HTML::Zoom system lurks an the HTML::Zoom::ZConfig manpage object, whose purpose is to hang on to the various bits and pieces that things need so that there's a common way of accessing shared functionality.

Were I a computer scientist I would probably call this an ``Inversion of Control'' object - which you'd be welcome to google to learn more about, or you can just imagine a computer scientist being suspended upside down over a pit. Either way works for me, I'm a pure maths grad.

The ZConfig object hangs on to one each of the following for you:

An HTML parser, normally HTML::Zoom::Parser::BuiltIn

An HTML producer (emitter), normally HTML::Zoom::Producer::BuiltIn

An object to parse CSS selectors, normally HTML::Zoom::SelectorParser

An object to build streams, normally HTML::Zoom::StreamUtils

In theory you could replace any of these with anything you like, but in practice you're probably best restricting yourself to subclasses, or at least things that manage to look like the original if you squint a bit.

If you do something more clever than that, or find yourself overriding things in your ZConfig a lot, please please tell us about it via one of the means mentioned under SUPPORT.


Some will argue that overloading CSS selectors to do data stuff is a terrible idea, and possibly even a step towards the ``Concrete Javascript'' pattern (which I abhor) or Smalltalk's Morphic (which I ignore, except for the part where it keeps reminding me of the late, great Tony Hart's plasticine friend).

To which I say, ``eh'', ``meh'', and possibly also ``feh''. If it really upsets you, either use extra classes for this (and remove them afterwards) or use special fake elements or, well, honestly, just use something different. the Template::Semantic manpage provides a similar idea to zoom except using XPath and XML::LibXML transforms rather than a lightweight streaming approach - maybe you'd like that better. Or maybe you really did want Template Toolkit after all. It is still damn good at what it does, after all.

So far, however, I've found that for new sites the designers I'm working with generally want to produce nice semantic HTML with classes that represent the nature of the data rather than the structure of the layout, so sharing them as a common interface works really well for us.

In the absence of any evidence that overloading CSS selectors has killed children or unexpectedly set fire to grandmothers - and given microformats have been around for a while there's been plenty of opportunity for octagenarian combustion - I'd suggest you give it a try and see if you like it.


Erm. Well.

HTML::Zoom is a lazy, stream oriented, streaming capable, mostly functional, CSS selector based semantic templating engine for HTML and HTML-like document formats.

But I said that already. Although hopefully by now you have some idea what I meant when I said it. If you didn't have any idea the first time. I mean, I'm not trying to call you stupid or anything. Just saying that maybe it wasn't totally obvious without the explanation. Or something.


Have a look and come tell us what you think so far (on #web-simple on or by emailing me on

-- mst, out.