Web Development as Tag Soup

Staged Architectures.

Here you go:

http://st.inf.tu-dresden.de/Lehre/SS07/cbse/pdf/40-staged-architectures.pdf

Have any of you checked out Lilu? http://www.infoq.com/news/2007/07/mockup-driven-dev-lilu

It’s a templating engine for ruby which lets you leave the html produced by the design/front-end team more or less completely untouched, as pages are created by populate lists, form fields, etc, by using css selectors from within ruby.

Lasso is a good choice if your project warrants the expense. The templates you create with it are entirely human readable. Lassos own tags are delimited by square brackets so they stand out between angled brackets of html. Matter of fact it looks a lot like server-side includes - on steroids.

Handles any backend that accepts ODBC connections. Comes with a standalone click-clack template creator. If your database already exists you can point the tool to it and it will populate a drop-down with fieldnames from the database. After that its just drag-n-drop. Once you got the hang of it you can put together entire sites in an afternoon.

Drawback 1: the price BEGINNING at $650 for a basic license.
Drawback 2: The language guide is 850 pages - there are 1500 tags.

If you don’t want to buy a license, there are some hosting providers who offer it as part of shared hosting packages, often together with FileMaker. The click-clack tool is a free download from Lassos website.

OK, now I see your background. Enough said.

Another vote for Apache Wicket! The templating approach is the only one I’ve seen so far the really keeps any programming logic out of the HTLM template.

I’ve worked with Wicket for a few months now - so far the biggest drawback is Java’s lack of closures, forcing me to write a lot of ugly anonymous inner classes.

The best thing, apart from the templating itself, is the component model. Writing components and writing applications is achieved with the same programming model, just pair a HTML template with a Java class and add some other components. Composing applications from components or new components from other components works extremely well. A ton better then in JavaServer Faces, where you have two seperate programming models for writing applications (works fine) and writing components (ugly as hell, echo-html all over the place).

Since the LISP-cat is out of the box anyway, have a look at Weblocks: http://common-lisp.net/project/cl-weblocks.

It has some very interesting aspects, although very alpha. Try turning of javascript, reload. Now turn of cookies, reload. It just works.

The commonality with GWT is that the HTML is encapsulated, which IMHBCO is certainly the way to go forward.

Declarative development definitely tackles the soup problem.

However, it also changes the way that we have to approach development. If you take a declarative approach (e.g using Declarative XML) then the developer is only concerned with what the application should do - not how it should do it; in other words the focus is on building the application and NOT on solving technical issues.

So who solves the technical issues? The programmer does this (e.g. using C#) in a programming environment removed from the declarative layer.

In quick conclusion, the reason why soup exists at the moment is that developers are forced to tackle ‘development/build’ and technical issues on the same page - no wonder it’s so difficult!

One person can still carry out both the programmer and developer roles - it’s just that declarative development separates them very clearly; solve the build problems in XML, solve the technical problems in C#.

If anyone would like to look at our work give me a shout; we’d love to talk to people who feel passionate about efficient development.

Wikipedia templates (those withing Template: namespace) are also as messy (or evil) as the codes you pointed in your post. Actually, I think wikipedia templates’ codes are really messy and ugly.

Remember LISP? Tons of parentheses…
Meet wikipedia templates: tons of curly braces!
(mixed with wiki-code and HTML code, with some embedded CSS style rules)

I suggest creating Html helpers

One of my best experiences with templating engines has to be PHPTAL.

http://phptal.motion-twin.com/

The StringTemplate library (http://www.stringtemplate.org/about.html) aims to enforce strict model-view separation between model and text (of which HTML is a subset) generation.

StringTemplate (as I understand it) is a ‘parser-in-reverse’ generator - you specify rules as you would in a parser, but you generate, rather than parse, text with those rules.

Disclaimer: I’ve never tried StringTemplate, but Terence Parr also wrote the Antlr parser generator, which is splendid! And having seen that there’s a Python port of StringTemplate, I may well have a quick go with it…

At a Microsoft Roadshow event I attended earlier this year, the presenters of ASP.NET MVC themselves mentioned that it wasn’t for everyone; that half of the room would say what’s the point?, and they weren’t far off. I was in the undecided crowd, because on the one hand I could see the value in not having everything as a WebControl, but there was a lot to lose in not using the WebForms approach, too.

I guess it’s a matter of which aspects of the code you want to focus on. Traditional WebForms deals with each area independently, breaks it all up into manageable chunks and provides the IDE to edit each, whereas MVC, PHP, Rails etc throw you into personally dealing with all aspects yourself. They are all leaky abstractions, and to this end I can only conclude that until the language fully understands the problem, just like LINQ is starting to do with ORM, we can never have the web development grail.

As the Html namespace in MVC and the programmatic-markup approach in dynamic languages go some way to the required solution, I think the ultimate answer is for the language to truly understand your HTML, CSS and scripts. With such a tool, you could implement generic controls in the order you wanted and your markup (and where relevant, CSS) could be auto-generated to match. Yes, we do kind of have this with some templated .NET controls, but not in the sense that the language actually knows what it’s doing as it follows commands.

I’m sure it’s possible, but jeez if that isn’t a formidable project.

I’ve started to use the nvelocity: http://www.castleproject.org/others/nvelocity/index.html for my MVC views, it’s pretty quick to pick up and get working with.

Here is a link to an article explaining how to use it with MVC that i found interesting: http://www.chadmyers.com/Blog/archive/2007/11/28/testing-scottgu-alternate-view-engines-with-asp.net-mvc-nvelocity.aspx

I’m a big fan of XSLT to add a further layer of separation. Conversion to XML from an object model is frequently trivial, and XSLT makes proper nesting much more verifiable than ASP/JSP/PHP etc. tag soup.

I really wish a few big players would jump on XSLT2, however, since a slightly simpler-to-use transform stage could really help.

Can I read the Typo soup?
Yes. Though, I’m not sure that’s good. :wink:

A few have mentioned custom tags; one example from VLDR:
item name

By the way…isn’t this still tag soup?!
So far, everyone that’s celebrated custom tags has had this tone that implied they escaped the soup. No, you didn’t.

Personally, I’ve never understood the advent of custom tags, let alone custom attributes. Don’t get me wrong, I understand what they can do. But, I don’t need code that’s trying to be incognito and hiding from me.

Seriously, code highlighting should not be a requirement to read the code.

item name ?!?!

Ok…well, there was supposed to be more to that.

Try this again…
li tal:repeat=item view/items tal:content=item/nameitem name/li

ASP.Net Webforms!
I know asp.net webforms has its own set of issues (large viewstate, less than optimal html markup, some others…), but I think these things can be improved on. I have been working on a large asp.net web application for a couple of years now and don’t really have a problem with tag soup.

One of my concerns with the asp.net MVC is this very problem of tag soup. The MVC pattern helps to separate your project into a model view controller pattern. Shouldn’t we also be trying to separate the html markup from any code?

Just my two cents.

I know you probably consider your StackOverflow code to be private, but I wish you had just posted your ASP.NET MVC example page with the tag soup in it. The reason is because you’ve misled everyone into thinking that ASP.NET MVC forces you to write garbage like your example Typo code. And that just isn’t true. A well-written ASP.NET MVC view will not have a lot of conditional logic in it, that will be in the controller or the services backing up the controller. The view should really only have some iteration code and variable echoes. You’re going a long way to fuel people’s misunderstanding and fears about ASP.NET MVC here with this post. But seeing some of your other comments and posts about working with ASP.NET MVC, I think maybe you are in the learning stage and havent figured out how to write a clean view yet. There are other examples out there, you should study them before you spend a lot of effort creating bad code.

There is another option many have forgotten, ColdFusion. Now in version 8 with Adobe set to release version 9 sometime in 2009. CF has always embraced the tag syntax and yet does allow the traditional script approach if desired. So the tag soup disappears making the markup code within the view layer much easier to read. E.g.

cfloop from=1 to=10 index=i
divdo something…/div
/cfloop

And now there are 2 open source engines for those who stayed away from using it previously due to the cost.

Just some food for thought…

I haven’t figured out which is worse.

a) The horror of mixing multiple languages into HTML, which already tends to be badly formatted. Emacs (even milti-mode) is horrible at auto-indenting.

b) or, MVC (Model-View-Controller) models which tend to lead to file proliferation. In my currently project, it takes at least 5 files to create a single page: 3 JSPs (using Tiles), 1 servlet, and 1 bean. So, I have to open 5 files just to make certain types of changes to a page.

I can see each having their advantage and place. But, IMHO, neither is ideal.