Your templating engine sucks and everything you've ever written is spaghetti

http://www.workingsoftware.com.au/page/Your_templating_engine_sucks_and_everything_you_have_ever_written_is_spaghetti_code_yes_you

by dools • 15 years ago

82 121 15 years ago

workingsoftware.com.au

eob2• 15 years ago

Been working on something like this for a while and nearing a big push of version 1 to github. Glad others feel the same way!

dools22• 15 years ago

Make sure and post about it when you do - I definitely want to see more momentum around this and was pleasantly surprised when I saw that solutions already existed. My favourite thing about it is that it transcends "technology". The fact that you've been working on this is no loss to someone else who's been working on something similar as the cost of changing from one solution to another is so dramatically low when all the value is retained within the templates themselves.

eob2• 15 years ago

Likewise. Two other template engines you might be interested in are Knockout.js (http://knockoutjs.com/) and the template engine from the Lift web framework. Both play relatively well within HTML.

And Stanford has done some nice work on segmenting the DOM into semantic chunks. The site appears to be down now, but it's usually hosted at http://bricolage.stanford.edu/. Check out their paper on the "Bento" algorithm.

llimllib• 15 years ago

Yeah, well, your website sucks and doesn't load.

dools22• 15 years ago

It seems to be serving that page in around 5 - 7 seconds but it's pretty heavily loaded. Yes I wish I'd gotten around to doing all that stuff that I know I should do in order to make it load faster than it does right now.

PS: If the site didn't load, how do you know it sucks?

ichc-werker• 15 years ago

Hey dools, these two images are broken for me:

Instead of splitting up the task of templating in the following, arbitrary fashion: [broken]

We can create a non-arbitrary, completely objective separation where the view/template layer truly contains no logic what so ever: [broken]

Cool article; made me think about how I've been handling views. I think I agree with you, but I'll need to mull it over for a while. Thanks!

jamesaguilar2• 15 years ago

Solely with respect to your post script: a website that doesn't work pretty much always sucks.

thurn• 15 years ago

What he's describing is best realized in the Enlive templating library for Clojure. You perform a suite of transformations on regular html files.

draegtun5• 15 years ago

Push style template is a phrase I've seen used to describe these kind of templating systems: http://news.ycombinator.com/item?id=2238885

gnorsot• 15 years ago

I hate templating. There are just so many engines to choose from and you end up writing your own because none of them can do what you really need.

ronreiter2• 15 years ago

What are you building there? A nuclear reactor?

einhverfr17• 15 years ago

Probably a web-based one at that.

peteforde2• 15 years ago

It's a drag when what you're working on is such a unique snowflake that nothing really smart teams have worked on for years is able to help you.

I'm going to abuse a Bruce Schneier quote and suggest that if you're trying to get a job done and you start by writing a template interpreter, you're doing it wrong.

einhverfr17• 15 years ago

Dude.... I get laughed at for the things I do with templates (html page with 20k input elements) until people realize what I am doing with them (a bulk payment interface for paying 5000 invoices in a compact workflow).

I have found that any complete templating system has sufficient flexibility and extensibility to do what you want. Though I use Perl's Template Toolkit.

grandpoobah• 15 years ago

Find the syntax you are most comfortable with and you'll always find something inspired by it in your next language.

As someone who really loved Jinja2 templates, I was very pleased to find Swig on Node.

jeremymcanally• 15 years ago

Sounds like he wants Pakyow: http://pakyow.com

dools22• 15 years ago

Hmm not really. I mean, what I want is HTML/JavaScript/CSS and then absolutely anything I choose on the backend. The framework is completely irrelevant. The fact that there is an "itemprop" attribute in the Pakyow view construction already invalidates it as an option for achieving what I'm putting forward here.

peteforde2• 15 years ago

Every programmer is on a long, cyclical journey where every stepping stone feels like a new kind of enlightenment. Blogging allows them to share their brilliance with the world, showing how they are surely amongst the first to attain their new level of purity and zen.

The funny thing about this post is that the author tells us to get off our high horses and come down from our ivory towers... and then proceeds to make a series of highly conjecturable claims presented with no factual evidence beyond his own confident assertion that he's in the know. There's like, no chance that in two years he'll be advocating for his new new philosophy.

In the meantime, I'm left to wonder "Iain Dooley who?" and be glad that I'm confident enough not to read an opinion-as-fact article and assign it significant credibility.

PS: A good first editing step is to ask "does my opinion-as-fact blog post question the capacity and potential of a professional web designer to understand simple concepts like string interpolation, and could they find this insulting?" before assuming that you've got it all figured out.

crikli• 15 years ago

Posts like this are little snapshots of a programmer's development during which he really thinks he has this shit figured out.

dools22• 15 years ago

Whilst this article is indeed an opinion piece and strongly hyperbolic (and perhaps even didactic), I'm not sure why that offends you. I don't have any statistics about large or small organisations putting this into practice so I'm not sure what other facts I could have included apart from the examples I provided.

The capacity of designers to understand anything isn't the subject of the post, so I'm not sure why anyone would be offended by that.

The idea is that it's easier to find someone to work on HTML/JavaScript/CSS in a static HTML context than it is to find someone familiar with whatever frameworks you're using and it's templating language, then to have that installed locally (especially when you're not working with a long term in-house team of designer/developers and don't have lots of time to spend on training people).

I also personally find it far easier and quicker to iterate and test new interface ideas quickly when working with static HTML so I like to be able to view my templates outside of the context of my application/framework etc. and then iterate without having to re-apply a bunch of templating code.

_3u10• 15 years ago

It's ok to write a little polemic here or there but don't be surprised when people react negatively to it. People are offended because you are saying they are incompetent at their profession.

Have the humility to understand that many of us have been doing this for years and have seen numerous attempts to revolutionize templating, and gasp have written webapps before the idea of templating really took hold.

If you want to persuade people to take up your ideas regarding DOM manipulation in the controller, I'd suggest not starting by telling people they are writing spahgetti code. It's a great way to get page views, it's a poor way to persuade people.

People probably would have reacted much better to your argument if you started with "Hey, I'm doing things this way and here's why it works for me" instead of "You're all idiots who write spaghetti code". Embedding XSL selectors in HTML attributes which is processed by a half-assed implementation of XSL in PHP is the kind of thing I think when thinking spaghetti code.

What you don't realize is that you've invented a new templating language based on XSL but with half the features. Those of us who've been around the block a few times like to call this inner-platform effect. We've also seen this idea before when it was pitched with J2EE and used XML with an XSL templating system.

darklajid• 15 years ago

Why I (note: personal opinion) think that this article was arrogantly written and not for me:

You try to make a rant (because that's what it is) more interesting by adding random fake quotes/thoughts that you attribute to the reader, i.e. me. There's exactly one person that knows my thoughts and I don't feel represented by your 'quotes' - so everything in light green on that site is bullshit according to me. Lucky for me you colored the link-bait title in the same way, so..

shinykitten• 15 years ago

I won't defend the author; my opinions here fall mostly inline with your own. But I still wonder if there isn't something deeper...

Presenting something as fact is an extremely quick way to find out if you're wrong. It's much faster than asking a question. The impulse to correct is stronger than the one to answer. So I interpret the post as the blogger's subconscious attempt at verifying and normalizing his opinions.

In this way, a blog is mostly a self development tool. I should start one of my own, I think. I never have before because I lack the hubris to think that my little discoveries are novel enough that anyone else would care. But I see now, maybe that's not the point.

dools22• 15 years ago

Yeah, I'd say that's a pretty fair assessment. I personally find this style of writing more interesting to read (which is why I emulate that) but I'm also not particularly experienced at writing so it's good to get feedback on what works and what doesn't for particular audiences.

I am definitely using a blog as a means of getting "outside the vacuum", though, and as you say evaluating my own opinions by putting them out in public and seeing how people react.

dextorious• 15 years ago

"""In the meantime, I'm left to wonder "Iain Dooley who?" and be glad that I'm confident enough not to read an opinion-as-fact article and assign it significant credibility."""

Yeah. And I wonder "peteforde", who? Should we only listen to what established figures have to say?

The problem with your attitude is that nowhere you access what the author wrote --you just add critique how he told it: highly conjecturable claims presented with no factual evidence, etc.

The important stuff to ask is, was it a good idea?

(Good ideas don't always come with factual evidence you know). What you think of it? What counter-example can you find.

Basically you just told us: the author is unknown, he doesn't formally prove his idea. Well, DUH!

I read tons of posts with such qualities on the inter-tubes.

That doesn't stop me of getting something out of some of them, and a few of those are pure gold.

"""PS: A good first editing step is to ask "does my opinion-as-fact blog post question the capacity and potential of a professional web designer to understand simple concepts like string interpolation, and could they find this insulting?" before assuming that you've got it all figured out."""

Yeah, as if this is the gist of the post, and the litmus test of a technical idea is if it can hurt the feelings of web designers...

luigi• 15 years ago

I was inspired by this project for Node:

https://github.com/hij1nx/weld

And I tried the concept using Nokogiri in Ruby. I found that in practice it gets really tedious. I had to make sure that every single element I wanted to manipulate had a unique id. Then I had to account for updating the content of an element versus an arbitrary attribute for that element. Or adding an attribute, like some data-* attribute. I realized why string interpolation is just so much easier.

There's also the problem where the DOM parser changes the original HTML in some way. How will it deal with conditional comments for IE? Or slightly malformed HTML that you want to keep that way?

I ended up going back to Handlebars.

barumrho2• 15 years ago

But now aren't you putting design into logic?

saurik2• 15 years ago

At first I thought this (and even typed out a long explanation of "the reason why you cannot make the assumption that your resulting document will be manipulated with DOM" involving "what if you want to change the presentation layer to PDF"), but then I realized that nowhere did he advocate mixing the DOM manipulation into his other logic; it could just as easily be a completely separate pile of "presentation to HTML" code that was entirely unrelated to the "generate content to present" layer.

dools22• 15 years ago

Precisely - in fact, if you want to change the output to JSON, you don't need the HTML templates at all. You just use the same code you were going to use to extract the data from your persistence layer and then output it however you want.

barumrho2• 15 years ago

Hmm. I do understand what you are saying, but in most cases where you are outputting HTML, how is this really different from using templates? I see templates as a way to reduce redundant code. The examples on the blog post are simple (e.g. removing a node, which is easier with 'if' statement), but it will probably be messier.

Regarding alternative formats like JSON or PDF, I guess you can add a layer there.

wwweston3• 15 years ago

I have a sneaking suspicion that for all the worthiness of the principle of separation of concerns, it's impossible to completely decouple presentation and logic -- you're going to either end up having some degree of model-related logic bubble up into the view, or you're going to have some kind of presentation-related logic seep down into the view.

What we've generally done as an industry is accept the former, but I'm not sure whether one is better than the other.

ronreiter2• 15 years ago

You are plain simply wrong. First of all, logic in templates is something which is OK to have. Different templates display information in different manners. Second thing, I don't think you've seen how awful and unmaintained code which manipulates DOM instead of templating looks like.

dools22• 15 years ago

The point I'm making, though, is that the challenge of solving "maintainability of DOM manipulation code" is a simpler problem to solve than the creation of the perfect templating language.

What's more, a good DOM manipulation strategy and library can be really easily ported to any language, freeing up your templates to go wherever you may feel is appropriate in the future.

Harkins• 15 years ago

Instead of including if/then/else logic in the template, templates are duplicated for each branch and the logic is pushed up to the controller. This takes on hand-managing duplicate code (because there will discrepancies between the "logged in" and "logged out" version every time someone forgets they need to change two files, or doesn't notice there is a second version to touch) to avoid having any code in templates (which it labels as technical debt without support).

This does not seem like a worthwhile tradeoff to me. And the author doesn't address loops, which often want to have special treatment of first or last elements, even/odd rows, and other small bits of logic. When you combine these things, you're going to have a combinatorial problem, I can just imagine a shopping cart table with templates like shopping_cart_item_list__table_row__last_item__logged_in__even_row__multiple_quantities__discounted_item.html

And what's with the really confrontational tone? This article would've been improved by spending a couple hundred fewer words putting words in the reader's mouth and insulting their tools/code. There's a chance this could be useful in some situations, but I sure don't want to spend any time talking to this guy.

dools22• 15 years ago

Loops with special treatment for first and last items is quite simply dealt with by including a list of items (for example) in the static HTML mockup, the first and last of which is different from the middle one.

EDIT: Also in response to the issue of double handling, I did mention this in the article:

In that second example of course, we've got a bunch of duplicate markup, but that's not our problem. That is the job of whatever system you're using to fragmentify your templates and re-use common assets

X-Istence2• 15 years ago

I've been waiting about 4 minutes for his web server to send me down the bits for the site.

---

Your hotlinks to ditaa.org seem to be down because the server on the other end is serving stack traces ...

pyre4• 15 years ago

  > As soon as I'm looking at more than one programming or
  > markup language in the same file, I'm looking at
  > spaghetti code.

By this definition the following is 'spaghetti code':

  $dbh->do("delete from my_table");

Following his logic:

  1. Realize there's SQL and Perl in the same line.
  2. STOP EVERYTHING
  3. Start attempting to fully abstract SQL into Perl
     so that no one will ever need to write a line of
     SQL again.
  4. Die an old man, never having accomplished this task.

notaddicted• 15 years ago

I've actually seriously considered keeping all my SQL queries in their own files, and reading them into local variables on load. It would allow them to be tracked and edited individually... but I now use an ORM.

pyre4• 15 years ago

The point being that ORMs have limitations. Advocating that something is 'one-size-fits-all' is foolish (not claiming that that's what you're doing).

einhverfr17• 15 years ago

I do keep the SQL queries in their own files. The only difference is that they get loaded into the db (as stored procs) at first and then called by name. Works well.

draegtun5• 15 years ago

This is called the Phrasebook pattern and was probably being pushed as best practise until ORM's took hold.

* http://ootips.org/yonat/patterns/phrasebook.html

* http://www.perl.com/pub/2002/10/22/phrasebook.html

* https://metacpan.org/module/Data::Phrasebook::SQL

ExpiredLink• 15 years ago

> .. but I now use an ORM.

"ORM is an anti-pattern": http://seldo.com/weblog/2011/08/11/orm_is_an_antipattern

einhverfr17• 15 years ago

I don't consider that spaghetti code, but it does have problems. The big one is the tendency to assemble queries by string interpolation....

What we've done in LedgerSMB is quite simple. All db statements in new code (outside the mapper functions) are in stored procedures. Everything is mapped in there using a Perl API so in the new code (post-1.2) otherwise all SQL is in one set of files and all Perl is in another, with minimal overlap.

This sort of thing makes for very clean development. No, spaghetti code is making me have 15 files open in VIM trying to figure out which of them has the function that is being called in it, with several candidates all bearing the same function name (oh, the horrors).

postfuturist2• 15 years ago

In small doses, you can get things done quickly like this. However, it builds up over time into a ball of spaghetti, so yeah, maybe after the 5th or 6th blob of inline SQL, you might think about using an abstraction while you still can. I've worked (and work) on old projects with hundreds of SQL queries spread throughout the code, it _is_ spaghetti code and there are better ways to do it.

pyre4• 15 years ago

  > I've worked (and work) on old projects with hundreds
  > of SQL queries spread throughout the code,

So have/do I. The fact that there is SQL inlined with the code is probably the least of your worries when talking about such a large/old code base.

einhverfr17• 15 years ago

The issue with inline SQL queries isn't the fact that SQL is mixed in with other programming languages itself. It's the propensity to write BAD SQL that's inlined because now you can apply the full power of the programming language to generate your SQL.

Stored procedures are a great way to abstract this out and force good SQL coding practices btw.

draegtun5• 15 years ago

Instead of points 3 & 4 you could replace it with... 3. Load SQL module from CPAN.

Something like SQL::Abstract (https://metacpan.org/module/SQL::Abstract) or Fey (https://metacpan.org/module/Fey) would slot in easy for most tasks like this:

  use SQL::Abstract;
  my $sql = SQL::Abstract->new;

  $dbh->do( $sql->delete("my_table") );

DarkMeld• 15 years ago

Having to loop through arrays to translate data into html elements is the majority of the problem. I'd be happy with just a solution to that.

einhverfr17• 15 years ago

Well, the only time I have ever said exactly this was about SQL-Ledger which used a home-brewed template system (which sucks big time) and which is mostly spaghetti code (in the true sense, of logic wandering aimlessly between modules in ways difficult to understand and predict. Of course the fact that the template system sucked and the code was spaghetti were unrelated except the fact that they were authored by the same (IMHO inept) developer.

On to the article though.... I think that what the individual is discussing in fact is something different, which is the need for stable API's between layers of the application.

I am very skeptical of his idea that all projects can benefit from his proposed solution. Indeed in areas like complex reporting, a template is conceptually simpler than HTML mockups that have to be populated by Javascript. At that point XSLT on the client starts making a lot of sense.... However, not at all sure that's always a win compared to templates. But then XSL files pose all the issues he is complaining about!

The beauty of templates on the other hand is the ability to create diverse output. XSL is no different there. One can create a LaTeX file, an HTML file, a CSV. Anything else. For systems that need that diversity, going with HTML and Javascript is a net loss.

snprbob862• 15 years ago

Funny, we've been doing this with a modified-Backbone.js site and have found it requires tedious, manual management of an excess of IDs and classes, plus an error-prone mountain of jQuery expressions.

What I'd really like to do is go 100% the other way: all functions, all the time.

A view could just be a named function, accepting the object(s) to be rendered as arguments, define some closures for callbacks/event handlers, then return a DOM structure.

Animus7• 15 years ago

I've been doing exactly that in my more recent projects, and it works extremely well for simpler views/shallow DOMS.

But it turns into write-only code pretty fast when you have tons of callbacks flying around for highly interactive elements.

snprbob862• 15 years ago

For one-off actions, like the "save" and "cancel" buttons, callbacks don't descend into madness. Most UIs have very few commands which need true event handling. And the ones that do, the commands are often pretty simple one-button -> one-command. Sometimes many-buttons -> parameterized-command.

For everything else, you can use data-binding. If you're already writing lexically scoped render functions, you can trivially create a data-bindable local object in a variable to eliminate the event management process. Instead of an onclick event for a checkbox, you can trivially set the checked property to be equal to an observable value box containing a boolean. With the right abstractions, callback spaghetti is not an issue.

wwweston3• 15 years ago

I've been thinking about some of the ideas in this rant for a while now. I might not have put it in quite such an opinionated manner (templating systems aren't usually my biggest problem), but I pretty much agree with a few things:

1) Fragmentation is a problem, particularly with some templating systems. Layouts should almost always be a single file. Things going inside the layout should probably be single files.

2) As long as templating means sprinkling extra tokens to process throughout a document, there's going to be some coupling problems. Transforming a document based on some external criteria is an interesting alternative.

There's certainly a number of transformation based solutions out there, some of them pretty powerful. But as I was thinking about this a few years ago, it occurred to me that maybe I don't want a powerful uber-transform set so much as I want a simple descriptive set of semantics for addressing content into nodes of a document.

Then I thought about where I'd seen this kind of thing come up before in the realm of document styling: DSSSL and XSLT vs CSS. The simple descriptive CSS won out and has worked out more or less well.

So... I came up with something I called `CAST` (Content-addressed Style Templating):

http://weston.canncentral.org/web_lab/CAST/about.html

Basically, you use a subset of CSS selectors (or XPath queries) to pick out a node of a document, then you specify a content rule, and the engine drops a content string into the document node.

I ended up writing my blog around the idea. I ended up being pretty happy with a very simple set of rules, despite the fact that there's not much too the system beyond that -- for example, there are no rules for conditionally hiding a node based on whether or not it's needed, no rules for repeating certain nodes. I think those things might be nice, but it turned out if I was willing to push a little bit of the view down into model layer, I didn't need them at all, and I was (I kindof tend to think that any application is going to have a bit of model-view bleed-across anyway, you just have to figure out how you'd like to manage it).

If anybody's curious, this post made me get off my behind and put the code up on GitHub:

https://github.com/westonc/CAST/

But it's in PHP, which I suppose will probably turn off a lot of the cool kids, so I should probably write a Ruby or Clojure version. :)

dools22• 15 years ago

Yep this is pretty much the idea. The key thing is, though: however you do it on the backend, that's entirely a coding problem. DOM manipulation sucks? Well, solve that problem, which is where something like your CAST library comes in.

It's easier to solve the problem of making a nice, easy way to "address" content (I used "animate" but basically they're the same thing :) than it is to solve the multitude of problems caused by choosing a technology stack and creating templates in it for your application.

einhverfr17• 15 years ago

To be clear, the primary use case here is in a case like Etsy, right? This doesn't work so well when we want to have a consistent interface to create HTML, PDF, CSV, XLS, and ODS files, correct?

Presumably DOM manipulation really can't be done beyond applications which are HTML-only in any reasonable sense without getting back to the things you don't like about templating, right?

zobzu2• 15 years ago

its a little more like native software's gui. that is, with website templating, its, well, template driven. pieces of codes are here and there in the template, following template's will.

with software, your app is code driven. the gui follows what the code tells, instead.

even if in both cases you have a mvc these days.

djbender• 15 years ago

This is so confrontational, I couldn't even read it. Stop putting words in my mouth.

cheeaun• 15 years ago

This approach reminds me of hquery (for Ruby on Rails) by choonkeat:

http://blog.choonkeat.com/weblog/2008/10/hquery-an-unobtrusi...

https://github.com/choonkeat/hquery

dools22• 15 years ago

Yes! In fact, in the Q&A he even says this:

Nope. "hquery" is just a library I wrote to do USS in Rails. I believe any language / framework can have its own USS renderer.

I'm totally in agreement on this. Any language or framework can address this very simply - we don't need "one to rule them all".

CyruzDraxs• 15 years ago

The moment a programmer thinks they know the ultimate solution to a problem is the moment they understand the problem the least.

No, templating is not perfect. Nothing a programmer does is perfect. Our job, as programmers, is to make stuff suck less. We break stuff until it works. We squash bugs until we can't find any more. That doesn't mean what we've built is perfect. It means what we've built is the best we could build with our current understanding of the problem.

I don't think of spaghetti code as the presence of logic in presentation code, I think of it as a lack of separation of what SHOULD logically be abstracted. I find the code it labels evolves over time as the common abstraction level of things increases and we move closer and closer to fully isolating concerns.

voidr• 15 years ago

> A typical example written in PHP would look like this:

That's not how templating works, that's just some messed up code.

I totally disagree with the idea that having static HTML as templates and transforming them with DOM manipulation is better then templating. When you do DOM manipulations you make assumptions about the structure, if that structure is changed by somebody, you are screwed. The less assumptions you make the better. Also last time I checked DOM parsing was a relatively slow process, even if it would be better than templating it still has to justify the performance overhead.

Also let's not forget that writing if's are easier than writing DOM queries.

Templating allows separation of view logic and business logic, I find it much cleaner to have the view logic in the templates, this is in fact what the author complains about, but how is having both database calls and layout logic in the same place cleaner?

rickmb• 15 years ago

The main problem isn't templating engines. And although a better solution is always welcome, a bit of procedural code inside a template is not a big problem either.

The real problem is that so many projects and frameworks don't have a powerful enough View layer that is separate from the (preferably optional) templating engine. In many cases it's even worse, and the templating engine is the entire implementation of the view layer. This pushes a lot of view logic into the templates, where it quickly degenerates into spaghetti. (In even worse cases, any logic the templating engine can't handle gets coded inside the controllers, and view logic starts leaking through the layers.)

Fragmentation into purely static templates is only a solution if you've dealt with with all the other view-related issues, and still end up with too much logic in your templates. And by "too much" I mean that it results in errors and maintenance overhead, not just that it looks ugly.

Intensive use of logic inside templates is definitely a code smell, but you have to be careful not to address the wrong problem. The templating method itself is rarely the root cause.

buster• 15 years ago

Isn't this 2011 where web pages use Ajax and contain a lot of logic, because.. well.. Javascript and stuff?

Alexandervn• 15 years ago

Isn't this all the same?

<span><?=$salary?></span> <span>{{ salary }}</span> <span id="salary"></span>

bergie• 15 years ago

There is one important difference: the server-side templating engine will probably retain the id attribute in the last case, meaning that the templating information remains usable also on client-side.

We use RDFa for somewhat similar purposes.

judofyr3• 15 years ago

I've talked about "template animation" (or "mockup-driven development" as I've called it) before, but focused mostly on how to achieve static files that can easily be opened in the browser (without any server components) and still be modular (layouts/partials): http://timelessrepo.com/mockup-driven-development

This article seems to solve modularity by splitting it out into different files. On the same page you can have dozens of modules that can have several different states;how are you supposed to combine them all? How do you say "this page contains a sidebar, a blog post, comment section" and that there should be a "new comment"-form if the user is logged in and "delete"-links if the user is a moderator? In the example in the article, it seems that would be solved by having blog_post.html, blog_post_logged_in.html and blog_post_moderator.html, where 90% of the content in the files are duplicated.

Beside, in the example templates you can't actually open the templates in a browser (because it only contains the content, not the stylesheets, script-tags etc. that you need). So if the designer wants to see how it actually looks, he still needs a server that can wrap the layout around it.

Okay, but maybe you don't need the "view this template without running the server"-requirement. I'd still argue that dools' current approach is brittle. The reason is that he's now tying together two layers (the template layer and the animation layer) and there's no easy way to see what the animation layer will actually do. This means that small changes in the template might invalidate the animation. You really don't want to re-write the animation just because the designer switched from <h3> to <h2>.

This problem is easily solvable though: Use custom attributes which doesn't conflict with HTML/CSS:

    <form>
      <dl class="error" id="whatevsError" animate="error">
        <dt>You have to do something about this</dt>
        <dd>The reason we ask you do do this is so that we can laugh all the way to the bank</dd>
      </dl>
      <dl>
        <dt><label for="whatevs">Whatevs:</label></dt>
        <dd><input type="text" name="whatevs" id="whatevs" /></dd>
      </dl>
    </form>

However, as you're adding more features to these attributes, you'll actually end up with another template language; it just happens to be encoded in HTML/XML. From here on we might wondering, why should we "hide" the logic inside attributes (where it can be easy to miss) when we can use a more distinctive and effective syntax?

To summarize:

- If you want to separate the template and the animation (so that you can easily change the template without updating the animation) you need to stay away from HTML/CSS-semantics and use custom attributes/tags that you know won't conflict.

- If you use custom attributes/tags you've essentially created another language which deals with the logic for you.

- If you don't care about the "view the templates without running a server", you might as well use a completely different syntax (which probably is going to be easier to understand than the "hide everything in the DOM"-approach).

dools22• 15 years ago

These are great points, and I certainly agree that some convention is required in template development to ensure "less brittleness". I think it's simple enough to do this with ids and classes, though, and even when it does break, the time it takes to fix it is going to have a pretty trivial impact on your overall project because the problem is solvable, quite simply and without much hunting around, by one person without the need to communicate with anyone else on the team.

Regarding the logic issue, I don't think you'd realistically end up with an intractable number of logic variations. If you have extra links that are there when the moderator is logged in, they should be there in any template with that structural element in it and then removed if the person logged in isn't a moderator.

Granted, though, I have to put my money where my mouth is and port one of my existing applications over to using this methodology (which is, in fact, what I plan to do so the proof the pudding will be in the eating).

Regarding the issue of "viewing the template without a server" - in the case of Fragmentify, all the frontend dev needs is the standard apache/php that ships with OSX. This is considerably less complex than having an entire framework/application environment installed and kept current. That being said, however, the way in which templates arrive at the "animator" is not the animator's problem. Dreamweaver lets you edit common assets and then exports head-to-foot complete HTML files in a ZIP, so just use that. So long as the "animotor" has complete HTML files to work with, that's all that matters.

judofyr3• 15 years ago

> I think it's simple enough to do this with ids and classes, though, and even when it does break, the time it takes to fix it is going to have a pretty trivial impact on your overall project because the problem is solvable.

The real issue is that now the designer needs to mentally figure out "is this a safe refactoring" for every change. Because he doesn't have the real application running there, he can't verify if it works or not. I fear that this might lead to "leave the markup alone; change CSS only"-mentality from the designers because they don't want to introduce the animators for a simple design change. (You might say that changing only the CSS was the "right" solution anyway, but sometimes things becomes more much simpler when you can e.g. just wrap something in a div).

> If you have extra links that are there when the moderator is logged in, they should be there in any template with that structural element in it and then removed if the person logged in isn't a moderator.

Aha, but how can the designer see how it looks like for regular users? He probably wants to make sure that it looks good without the link too (maybe it's more like a button which floats). It seems like a sub-optimal workflow to manually remove the link (or display:none it) every time he works on the regular user page. (He must also remember to put it back in.)

> This is considerably less complex than having an entire framework/application environment installed and kept current.

Fair enough.

> … Dreamweaver …

If an editor can make it easier to work with the templates, that's good. Just don't make it impossible to work with the files unless you use some proprietary editor…

hetman2• 15 years ago

You're assuming the breakage will be something obvious and clearly visible. No doubt many of them will be.

However, I would foresee plenty of breakages in obscure or not immediately apparent places which may not be noticed for some time. For example they may be minor (yet still very annoying for users stumbling on them) or apparent in only certain circumstances.

yycom• 15 years ago

An article without a byline has zero credibility.

simonw2• 15 years ago

Templating by manipulating the DOM is one of those bad ideas that just keeps on turning up. At first glance it seems like a eureka-moment flash of purity, but the practical realities of it are pretty horrible.

For any change to the page more complex than tweaking copy or maybe changing an element (a ul to an ol for example) you'll have to update both the HTML and the DOM manipulation code - killing your separation of concerns.

Even worse, you have to have a complete understanding of how what the DOM manipulation code does before you can edit any of the HTML at all - otherwise you might accidentally kill the page by changing the order of two seemingly unimportant elements, or deleting an unused div.

You'll also be forced to make all sorts of compromises in your markup to accommodate the templating layer, which will drive your front-end engineers crazy.

Finally, there are extremely useful aspects of regular template languages (like template inheritance and includes) which don't map at all neatly to a DOM manipulation engine - so you'll probably have to compromise on those and end up inventing your own weird attribute-driven template engine.

I'd suggest approaching this idea with caution. There's a reason most popular template engines are designed the way they are: practicality beats purity.

dools22• 15 years ago

Actually, my suggestions is just to encourage template implementation and refactoring with impugnity. There are perhaps ways of refining workflow to ensure that ids and classes are perhaps changed less than other aspects of the markup and used as hooks to "animate" the templates, but any time lost fixing broken templates as a result of an incompatible change pales in comparison to the time spent going back and forth between designers and developers to fix a problem where the scope happens to fall in between 2 skillsets (particularly when dealing with people in different timezones).

simonw2• 15 years ago

I remain skeptical, but I'd love to hear about a collaborative project that used this technique succesfully

jeromeparadis• 15 years ago

I've never had problems with the traditional method of the developer enhancing the designer's static HTML file to make them dynamic. further down the road, it's pretty rare presentation tweaks will break the tempting logic.

However, the biggest problem I've had with any designer is the refactoring of html ids and class that breaks AJAX or jQuery code. So the remaining problem, which is the biggest in my opinion, isn't addressed in your approach. Designers still need to be aware of jQuery/AJAX application logic to avoid breaking stuff. My approach to this problem is to use and document custom HTML properties for your jQuery/AJAX hooks. However, it doesn't solve the problem of updating part of the presentation which still relies on the markup structure.

EDIT:

But you still can rely on custom HTML properties to define updatable sections. While I find this approach better, a designer can still screw this by refactoring and omitting these custom properties.

So, relying on IDs and classes through server-side DOM manipulation further acerbates the problem. It's an approach of relying on markup on the server side instead of simply rendering. It adds an additional layer of possible breakage.

dendory• 15 years ago

I always get entertained reading the latest stories about templates and the latest innovations on how to make web sites work, and how (language x) is so old now, and everyone should use (language y) because it's more logical. I built my own custom CMS in 2008 and have been slowly improving it, and to this day I have a full dynamic site working on less than 600 lines of PHP, HTML and JavaScript. No JQuery, no need for a dozen includes, or keeping up to date on the latest patches of 12 different code bases. Yet the site keeps chugging along, even got to the front page of HN without any issue handling the load, while some sites mysteriously go down, but it's never the developer's fault, they just had a problem with their backend db server, or forgot a critical patch, or ne of their libraries didn't behave well with another library under heavy load...

Not sure what my point is, I guess that there's something to be said for keeping it simple, and not chasing new technologies without reason..

dools22• 15 years ago

Glad I could entertain :)

extension• 15 years ago

Views have logic, sometimes very complex logic. If views are not allowed to have "code" in them, or are functionally crippled in some way, then presentation logic is probably going to get mixed in with the domain model, because there won't be any other place to put it. The programmer needs to have complete discretion in where they draw the line between domain and presentation.

This codeless view mythos arose because HTML includes a lot of rich interactive capabilities, and it's tempting to declare that these capabilities are all you will ever need in your presentation layer, but that is arbitrary and false.

In most other contexts, e.g. GUI programming, a codeless view is nonsensical. Code is everywhere. And if it's difficult to write nice view code, that's likely a problem with your programming language and/or your APIs.

Also, don't conflate model/presentation separation with server/client separation. Ideally, they are orthogonal concerns. To create the best UX, your views, and possibly your models, will have to straddle the network.

In short, don't let your technology stack dictate how you modularize your application.

antirez2• 15 years ago

Solution: don't use templates, generate HTML from code with a DSL that makes HTML and code the same thing. There is no longer the designer/programmer separation, now with CSS designers can do everything if your HTML layout makes a bit of sense. Also there is no need to generate complex HTML as it was the case N years ago, it is mainly a semantical affair, and fits perfectly inside the code.

Templates suck, they fake an abstraction layer that actually does not exist since the code and the template are strictly connected in all the non trivial cases. It's just a lame substitution layer forcing you to switch from one file to the other while coding.

dools22• 15 years ago

I think that having a separate DSL that abstracts HTML/CSS/JS is not the answer. When you abstract HTML (or SQL or whatever) you find that eventually your abstraction basically has to do everything that the thing you were abstracting needed to do in the first place.

I think the "just use CSS" or "we can boil HTML/CSS/JS down to a subset of reusable chunks" doesn't work. It's simpler to just let these technologies be what they are, and remove the need to care!

antirez2• 15 years ago

You are right, I don't mean "abstract HTML", I just mean to provide a way to generate it from code using the same syntax of your code. This is what I use:

https://github.com/antirez/lamernews/blob/master/app.rb#L138...

For instance to write

    <foo>
      <bar id="4">content</bar>
    </foo>

You write:

    H.foo {
        H.bar(:id => 4) {"content}
    }

So everything you can write in HTML you can write in this DSL, there is no real abstraction, but it is Ruby code like in all the rest of the application.

draegtun5• 15 years ago

> don't use templates, generate HTML from code with a DSL that makes HTML

I agree. This is how I've done it for last few years and have recommended it before on HN.

ref: http://news.ycombinator.com/item?id=1518096 | http://news.ycombinator.com/item?id=705706 | http://news.ycombinator.com/item?id=705800

also: Web Development as Tag Soup - http://news.ycombinator.com/item?id=252185

judofyr3• 15 years ago

> There is no longer the designer/programmer separation, now with CSS designers can do everything if your HTML layout makes a bit of sense.

I'm sorry, but this is simply not true. You can't just magically move elements around in CSS without changing the markup. And even if you can accomplish a lot, many things will become very awkward as you try to tweak CSS in ways that was never intended.

I think we must just accept that we have a markup language (HTML; <p>, <strong> and so on), a way to style that (CSS) and a layout engine (CSS+HTML; <div>, <span> and so on).

jasonlotito• 15 years ago

So, he's trying to rewrite XSLT. Gotcha.

cousin_it• 15 years ago

I agree that putting code in templates can lead to spaghetti. But the OP's proposed solution seems suboptimal because loosely coupling the template to the application code via "template animation" will lead to convoluted code with lots of hardcoded IDs on the application side, and brittleness on the template side because there's no way to see which IDs are used by the application.

A less extreme but more practical solution would be to disallow code in templates by making templates accept a data structure, like JSON, and giving them the bare minimum of capabilities to render it. So looping over an array is okay, checking for the existence of a property is okay, but querying the database from the template is impossible by construction. This way you also get language independence because many languages can generate JSON. Also, you can have compile time error detection (for both the template and the application code) if you use some sort of schema for the data structure, like Thrift or Protocol Buffers.

rimantas• 15 years ago

They guy is wrong thinking that business logic does not exist. Then it all goes downhill from there. Extremely narrow view of the world he does not even try to uderstand.

carsongross• 15 years ago

The idea of templating as a separate activity from coding is what, in my opinion, is wrong. It comes from the days when "front end" guys didn't want javascript or "back end" logic in their files. Personally, I would just prefer that the code for a button be located with that button. Crazy, I know.

Back in the day (2001) I didn't understand the separation of logic and presentation, although I grudgingly admitted that the front end guys had a lot of stuff to worry about that I didn't understand (cross browser issues, rendering issues). These days, with jquery and widely available standards compliant browsers, plus all the design resources available on the web, we should all be both front end and back end developers, to a greater or lesser extent.

So we should strive to have clean code, but that, IMO, doesn't have nearly as much to do with separating concerns like templating and application logic as the "pure-templates" guys think.

I disagree with the "pure-model" and "pure-controller" guys on the back end for the same reasons. They fall into the same platonic manichaeism: the world is a mess and if only The One Pure Way were followed, we'd be good. Instead, grouping things logically as best we can and trying to minimize spooky action at a distance ("where the hell is the code associated with this button coming from?!?!") should be the goal.

Your templating engine sucks and everything you've ever written is spaghetti

Related Stories