Your templating engine sucks and everything you've ever written is spaghetti
workingsoftware.com.au
workingsoftware.com.au
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.
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.
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.
Regarding your critique of Fragmentify, that's actually not so much what I'm advocating here as it is just the impetus for realising that there are 2 distinct components to templating which are: 1) the re-use of common assets, and 2) the application of some "logic" to display dynamic data.
It doesn't matter what you use to fragment your markup (I personally think that using XPath to manipulate an XML document isn't particularly off the mark but whatever, to each their own). Dreamweaver allows you to edit common assets pretty easily and then export a ZIP with head-to-foot complete HTML documents in it. I'm sure there are a million other ways to skin that cat.
What I'm saying is that the separation between "display logic" and "business logic" either doesn't exist or at the very least shouldn't be occuring between the backend and the frontend.
You could, if you wanted to, put your "view rendering" code in some other place in your application, but that's tangential to my case for completely removing any and all logic from templates and working solely with (and iterating solely with) HTML/CSS/JS when building your interfaces.
I find a text editor (vim in my case)/photoshop + haml/sass + live reload to be my most productive workflow, one screen for the text editor, one screen for the browser, when I save the browser reloads the page.
For me there are a lot of things that just work smoother by having the data populated, when I work with designers I just take whatever they give me (sometimes just a PSD) and work with it, if they need static HTML/CSS I just use wget/save as webpage to save the html and assets.
The result is a thin ~400 followers on http://github.com/pure/pure, we use it for our web app, and I get regular thanks emails. Even some copycats appeared.
Nothing changed. Server power is still wasted sending HTML to idle terminals using a markup/logic soup like we do since 1995.
A pretty useless fight, but at least I'm happy I tried.
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..
Writing is hard.
(For what it's worth, the attributions didn't bother me.)
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.
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.
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...
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.
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.
> As soon as I'm looking at more than one programming or
> markup language in the same file, I'm looking at
> spaghetti code.
$dbh->do("delete from my_table");
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.* http://ootips.org/yonat/patterns/phrasebook.html
"ORM is an anti-pattern": http://seldo.com/weblog/2011/08/11/orm_is_an_antipattern
I suspect for certain parts of some apps, ORM's might work OK. But in general for applications of any complexity they will break down hard and fast, and lead to bad db design, bad performance, or both.
In other words, I see an ORM as an antipattern because the subset of cases where it works really well at bridging the gap you probably don't really want an RDBMS in there anyway.
And if you do make it work (encapsulating your db behind updatable views) without running into this, it's a heck of a lot more work than hand-coding SQL.....
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).
> I've worked (and work) on old projects with hundreds
> of SQL queries spread throughout the code,
Stored procedures are a great way to abstract this out and force good SQL coding practices btw.
How exactly do stored procedures prevent you from writing "BAD SQL"? They do no such thing.
Stored procedures are a great way of adding complexity to your code, complexity equals bugs and longer development time. There are reasons for stored procedures, but using them simply to remove SQL from your front end is not one of them. And certainly not because of a fear of "BAD SQL".
To be clear, they prevent one specific case of bad sql, namely queries that are written like this:
SELECT a.*, $col_list
FROM $table a
JOIN $second_table b ON $join
WHERE $where
$having;
Then when you go to find out how $where is define you see a lot of statements like:
if ($http_query->{date_from}){
$where .= " AND date_entered > " . $dbh->quote($http_query->{date_from});
}WHERE (date_entered > in_date_from or in_date_from IS NULL) ....
Then you also gain testability. We can write test cases for the stored procedures because they have discrete entry points and make sure they are acting according to spec.
Stored procedures make it much harder to understand the code since you can't just read the query - you have to find the stored procedure and check it there. (And be realistic - no one has perfect documentation.)
And heaven forbid you have to change the query - now you need to make sure no one else is using it, and you end up with tons of versions of similar stored procedures, not all in use, and many that could be combined.
It doesn't seem worth it to me.
I use stored procedures for data reduction - I want to keep the data in the database, and process it before sending it out. (Saves bandwidth vs doing it in the front end, and often it's faster too.)
But that's it. Using stored procedures just to wrap ordinary queries is a terrible (but very common) idea. (I am aware that it saves time on generating a query plan, but usually that's a case of premature optimization.)
And using it to enforce code policies? Way overkill.
1) Testability. you can write test cases against a stored proc. You cannot write test cases against a SQL query embedded in the middle of a function in another programming language.
2) Single point of control. You can have one function that runs the stored proc there and check properly for SQL injection, ensuring that everything is free of SQL injection as far as front-to-backend is concerned (and in Pg, that only leaves SQL injection issues in dynamic SQL which can be searched for and audited separately).
So that's why not to put it there.
As to changing the query.... I only use databases which come with transactional DDL so that's not an issue as long as inputs and outputs don't change. If the inputs and outputs have to change, we can handle that too with transactional DDL and the fact that we make the interfaces discoverable. In this case, we'd
BEGIN;
DROP FUNCTION IF EXISTS foo_bar(...);
CREATE OR REPLACE FUNCTION foo_bar(...)...;
COMMENT ON FUNCTION foo_bar(...) IS $$...$$;
COMMIT;
Because of the way Pg works this shouldn't really cause issues for currently running queries.
As for finding the right function, since these are all called on a declarative interface so you know what the function name is quickly, and so it is a matter of quickly finding it in a directory of SQL files.
As for testability, don't underrate this. You can insert data, run your tests, and roll back. So for example for our 1099-MISC and INT handling, we run more than 40 tests on a pre-written data set that we can run without ever committing to production and which will never conflict with production data (and therefore does not lock other users out). That's approx. 20 tests per sproc there.
my $current_month = Month->new();
my $end_month = Month->new()->plus_months(4);
while ($current_month <= $end_month) {
$yyyymm = $current_month->strftme("%Y%m");
$last_day = $current_month->last_date()->strftime("%Y%m%d");
$first_day = $current_month->first_date()->strftime("%Y%m%d");
$dbh->do("create table my_partitioned_table_$yyyymm
() inherits from my_partitioned_table");
$dbh->do("alter table my_partitioned_table_$yyyymm
add constraint ck_my_partitioned_table_$yyyymm
check (date between '$first_day'::Date and '$last_day'::Date)");
$current_month->next_month();
}
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") );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.
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.
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
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?
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.
But it turns into write-only code pretty fast when you have tons of callbacks flying around for highly interactive elements.
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.
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.
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.
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!
https://github.com/antirez/lamernews/blob/master/app.rb#L138...
For instance to write
<foo>
<bar id="4">content</bar>
</foo>
H.foo {
H.bar(:id => 4) {"content}
}
It is far easier to find a really good designer, who knows HTML/CSS and a bit of JS (probably jQuery) than it is to find a really good designer, who knows HTML/CSS and a bit of JS (probably jQuery) and then is also comfortable configuring a Rails environment and also proficient enough with coding Ruby to learn quickly and without support or input, this custom DSL.
There are already so many people that have the skills you need, why force the issue? Let the technologies be what they are. In my experience, communication between team members is the single highest cost in building software. Unless you're a designer/developer or you're working with a small team on your startup and you happen to have all the skills you need right there in one office and timezone, you'll need to confront the issues of resourcing, iteration and staff changeovers - what I'm advocating is that we play to the prevailing skill separations and reduce the communication overhead.
Thus you remain in full control of the data (HTML) and you've completely separated the design (CSS) & behaviour (JS) logic that gets applied to it.
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
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).
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.
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.
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.
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.
PS: If the site didn't load, how do you know it sucks?
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!
Regarding alternative formats like JSON or PDF, I guess you can add a layer there.
The way it is different is that it is an inversion of control inside the template, not that it is changing up the layering. You still have a "construct data" layer and a "present data" later, and you can still swap out the "present data" layer with something unrelated, such as a normal template engine or whatever else you wish to use to generate JSON or PDF.
However, inside the "template", rather than having HTML with embedded logic (where you can almost envision the HTML calling into the logic to insert text or execute flow control at specific points), you instead have logic that manipulates the HTML via DOM, modifying the HTML to contain text at specific points. You could probably even make a compelling argument that these are duals of each other.
What we've generally done as an industry is accept the former, but I'm not sure whether one is better than the other.
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. :)
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.
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?
If you had, for example, a bunch of PDF code as a "template PDF" then you might just load that and do string replacement on whatever placeholder text you have in there - but yeah the primary use case I'm thinking of is in implementing web based interfaces.
So if you want a consistent interface, templating is pretty clearly the way to go, correct?
So like, you'd want to be able to have something like:
<article>
<title><% print article.title %></title>
</article>
$tpl->article = fetchSomeArticleFromTheDb()
$tpl->output('template_name',Format::PDF)
Hey, I'd love to continue the discussion, but I think the HN comments are kind of limited in how much they want you to discuss here, feel free to email me iain@workingsoftware.com.au
EDIT: oops, code formatting
I will probably post something on the selection and design of our templating system for LedgerSMB in my blog too (http://ledgersmbdev.blogspot.com) by the end of the week.
One of the useful applications of dools' ideas is that you could have a mockup which included lorem ipsums or other dummy text. This would make it easier for web developers to test layout.
OTOH, as I say, I am not at all convinced that it is a net win for programs that generate multiple formats of output./
I don't know, though. I tend to think that this is less a job for the view (and templates) than it is for smart models, or models with some kind of helper that assists them in knowing how to represent themselves in a given format.
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.
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.
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..
http://blog.choonkeat.com/weblog/2008/10/hquery-an-unobtrusi...
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".
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.
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>
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).
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.
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…
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.
---
Your hotlinks to ditaa.org seem to be down because the server on the other end is serving stack traces ...
<span><?=$salary?></span> <span>{{ salary }}</span> <span id="salary"></span>
We use RDFa for somewhat similar purposes.
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.
Oh dear. "BUT, ITS SANDBOXED ITS OK!" :)
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.
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.
As someone who really loved Jinja2 templates, I was very pleased to find Swig on Node.