Behaviour, Content and Presentation: why the 3 layer model is wrong
All good web standardistas know that your HTML provides the web content , your CSS provides the presentation, and your Javascript provides the behaviour. Right?
Wrong. Well, it’s right most of the time, but not always…
[Note to self: always start with something that sounds contentious -- it generates more interest]
And it’s these exceptions that I’m going to try and use to prove the rule. Except of course that I mean “prove” in the original sense of “put to the test”. Which makes the saying make a lot more sense, really. After all, is it more sensible that an exception puts a rule to the test, or that a rule isn’t a proper rule unless you’ve found exceptions where it doesn’t work?
So what are these exceptions to the three layer model?
Well m’lud, I submit to you the following prima facie evidence of behaviour being carried out by other layers.
- when you click on a hyperlink defined in the content, it changes the page you are viewing
- when you click on a submit button defined in the content, it sends data to the server and performs actions there
- when you move your mouse over something with the
:hoverpseudo-class applied to it, it changes according to behaviour
So, the first question to ask is are these actually exceptions to the three layered content, presentation, behaviour model. Let’s examine each of our examples in turn (oops, I seem to have gone a bit “Open University” there…)
Firstly, hyperlinks. Are hyperlinks strictly behavioural in the context of a web page? I don’t think they are. Hyperlinks contain the address of another web page. If you click on that, the web site itself does not redirect you to the appropriate page — it is your browser which interprets that as a command to load the new page for you. In this context, hyperlinks aren’t behavioural of themselves, they’re just an address book entry: what happens to that address is up to your browser.
I find hyperlinks not guilty of breaching the 3-layer model.
Secondly, the submit button. When you press submit, it sends off whatever data you’ve input in your form off to the server. Yes, it’s sending the content of the page, but it’s certainly performing an action — it’s usually adding details to a database, or sending an email or something similar. Is that then behavioural? I should jolly well say so.
I find the submit button guilty of breaching the 3-layer model.
Finally, CSS pseudo-classes. Is this behavioural? That probably depends on what you’re doing with it. If you’re replacing one decorative image with another in a rollover, or simply highlighting where a user is on the page, then I’d simply call that “presentational” and argue that pseudo-classes don’t have a case to answer.
But that isn’t all you can do…
There is one situation where I would say that CSS is used to present something in such a way that it exhibits sufficient function to be classed as behavioural. This would be variations on suckerfish dropdowns: ore more specifically those versions which don’t rely on javascript to create their function, such as Thierry Koblentz’s Pure CSS Dropdown Menus, which are fully functional in all modern browsers (needing version 7 of IE). Surely this is an example of CSS providing a behaviour?
Well, here I’d consider the defendant guilty of breaching the 3-layer model only in some circumstances, and maybe just let them off with a caution.
But joking aside, to me it makes more sense to think of a four layer model. There are the three layers we currently understand which are presented to the user, and an optional fourth layer hiding out back known as “server-side processing”.
Considering this as a four-layer process then, it’s obvious that the submit button does not in itself carry out the processing. It simply sends the request for processing (and the information that needs to be processed) along to the fourth, server-side layer, which duly processes it. Server validation, various other security techniques, database accesses and the like are all carried out in this fourth layer.
This is by some considered to be an additional part of the “behavioural” layer (although many people fall into the mindset of just thinking “behavioural = javascript”). However, I think it is sufficiently distinguished from client-side behaviour to warrant a layer in its own right: you can’t switch it off, it’s not exposed to the user, it doesn’t depend upon the user’s system or software, it’s used for application security and so on, and to not give it a layer in its own right is not to do justice to the complexity, power, flexibility and depth of features that it offers the developer.
Hopefully I’ve made a reasonable case for the fourth layer. I just now need to come up with a better name than “the server-side processing layer”. How about the process layer? It reflects the fact that this tends to be the layer which carries out the actual data processing — as well as being the layer in which necessary business processes are encoded…
In this case then, the exception tested the rule to destruction — at least in my opinion. But what about those CSS dropdowns?
To me, they are a presentational-layer implementation of behaviour. That’s not to say that I think they are a bad thing! To me, it’s the presentational layer being extended beyond its true remit in order to cater for the fact that relying on the client-side behavioural layer can cause accessibility problems. It’s therefore providing additional functionality to a wider group of people than would have been if they had used javascript to achieve the same ends.
So that’s why in this case, despite the fact that I consider it to technically violate the intended separation of presentation and behaviour, I’d let this one pass. Because in this case it actually provides a legitimate benefit to breach the standard model…
…but I still want a process layer…!
Cole Henley says:
November 28th, 2007 at 11:10 am
Interesting debate and here are some mumbling, rambling thoughts.
I am involved both in building back-ends of a site in PHP – consuming/processing data from a variety of sources (databases, web services, etc) – as well as the front-end product (HTML), ‘presentation’ layer (CSS) and ‘behaviour’ layer (Javascript). The three-tier referred to in web-standards refers to this front-end but I work in an environment that employs a different three-tier system distinguishing between the data itself, business logic (the processing and delivery of data) and presentation (the consumption and presentation of data). As someone involved in placing these data sources online, all my work is – in the broader scheme of things – considered to be presentational.
Your fourth ‘process’ layer provides a useful interface between the back-end and front-end of the web but isn’t the process a server-sided/back-end thang and therefore part of a different model than the traditional three-layer model which I see as aimed primarily at the front-end of the web. This is not to say I think it isn’t important we adopt standards across the back-end of web development nor that many (most?) of us wear both hats in the jobs that we do. Rather, what takes place in PHP (or whatever your back-end of choice) stays in PHP. The products of that process may be dependent on the user, particularly with form processing, but this process takes place independently of the user and irrespective of whatever device(s) they use to view and interact with a website.
I have always struggled with the idea of Javascript as behavioural. Are we talking about the behaviour of the user or the content? Javascript, in my opinion, is there to add value and a richer experience to a website but that experience still has to be made available without that layer – just as a site still has to be available with CSS disabled or on a device that doesn’t support styling. In this case behaviour has to be functional and therefore becomes an essential means of navigating and interacting with the content – it is not an optional layer draped over the top.
It’s all enough to make my head spin a bit…
Richard Conyard says:
November 28th, 2007 at 12:29 pm
Jack,
You need to split your process layer into more layers; well you don’t have to, but to get a meaningful and maintainable abstraction. Not perfect but in place here is:
Render layer (XSL)
Data Capture and validation (sxForms and a bit of XSD)
Business logic layer – still code unfortunately, but I’m having fun with some BPELesque stuff and playing with XML based languages
Data – XML
Max Design - standards based web design, development and training » Some links for light reading (28/11/07) says:
November 28th, 2007 at 2:48 pm
[...] Behaviour, Content and Presentation: why the 3 layer model is wrong [...]
Mike Cherim says:
November 28th, 2007 at 7:56 pm
Interesting approach — one I’ll have to mull over for a bit.
I would have to say now that the fourth layer was there all along and not form input triggered/dependent. It’s the HTTP request and that’s where it all begins.
zeroanarchy says:
November 28th, 2007 at 9:11 pm
It interesting that this topic has been brought up. I have been trying to find references to the standard implementation of layers eg. PHP and have never been able to understand why it was that layers became common practice and how. The benefits are obvious when working on a site in teams.
In relation to this discussion I have been working on the following layer principal for several years.
Database(Layer1) –> Code Layer(Layer2) –> Design layer(Layer3) –> CSS(Layer4)
The database layer could refer to calls to Oracle function, stored procedures or HTML templated SQL.
Code layer refers to your application code eg.. PHP, Java or ASP.
Design layer refers to your HTML layer or template.
And of course CSS is well straight forward.
In a lot of cases it’s obvious that this layout approach is not adhered to. This is an obvious disaster when working on enterprise level websites that take the following approach.
Database Layer(layer 1) –> Code, design and CSS layer(layer 2)
This is not necessarily the fault of the company or it’s web team but rather in many instances it can be attributed to the CMS they have integrated that does not even meet the basic requirements of W3C compliance let alone developing an adequate layered approach.
Regards
zeroanarchy
Seb Crump says:
November 28th, 2007 at 11:26 pm
I always thought there was about four layers too – but haven’t really tried to formalise/document them as such. I agree with Mike and zeroanarchy that the first layer is the fundamental one that’s always been there, i.e. the server.
However, now I come to think about it I think I would express it slightly differently…
Data (Layer 0 – database and optional hence zero) -> [translate] -> Logic (Layer 1 – all the server response including dynamic coding, if present, but could just be provide plain html etc.) -> [transmit] -> Structure (Layer 2 – yer (X)HTML stuff) -> [transform] -> Style (Layer 3 – CSS, etc.)
Of course the chain could work backwards.
I never really considered JavaScript a ‘behaviour’ layer it mearly implements some client-side stuff already there or in the case of AJAX is a mechanism for handling the server request other than the ‘normal’ browser-triggered HTML related requests.
JackP says:
November 28th, 2007 at 11:37 pm
@all: like I may have mentioned I was being deliberately contentious – but when it comes to online discussions I find that the whole “server side processing” part of it seems to barely get a mention — and to me without that you simply haven’t got a web application. Which is why it deserves at least one layer in its own right…
Mike makes a valid point in that the “server request” has been there all along — the flip side of which of course is “so why do we only consider what gets served to the client?”… because without that fourth layer you’ve got static-only sites.
Anyway, it’s achieved my target: stirring up a debate. Whether the consensus is with me or against me matters less to me than whether I’ve made people think…
garment news daily says:
July 28th, 2011 at 5:34 pm
Read was interesting, stay in touch……
[...]please visit the sites we follow, including this one, as it represents our picks from the web[...]……
1234test.com says:
August 30th, 2011 at 11:10 pm
Queens University Blog…
[...]With the right skills you can be good at many more things and doing almost no mistakes..[...]…
san diego houses for rent says:
September 11th, 2011 at 10:08 am
Resource on San Diego Rent…
[...]If you are conscious when working at your projects you will do more than if you have no ideas..[...]…
penny auction news says:
September 20th, 2011 at 9:37 am
How To Deal With Penny Auctions…
[...]When you know when doing your work you will do more than when you have no ideas…[...]…
Chadwick says:
September 21st, 2011 at 4:38 am
This site rocks !. I continually run into interesting things & unique here. Thanks for that information.
Symptoms Of Low Vitamin D says:
September 22nd, 2011 at 2:05 pm
Symptoms Of Low Vitamin D…
we like to honor many other internet sites on the web, even if they aren’t linked to us, by linking to them. Under are some webpages worth checking out…
sport psychologist says:
September 25th, 2011 at 9:55 am
Blogging About Main Training For Cricket…
[...]This is a new website on this topic. You can see more about it on the site[...]…
bedroom furniture sets says:
September 26th, 2011 at 10:26 pm
What Is Real Hard Work…
[...]]Having the right knowledge you can do quality work at at a lot of jobs and doing almost no mistakes.[...]…
oil paint photo says:
October 3rd, 2011 at 2:28 pm
New Ideas On How To Lose Weight…
[...]When you know when working at your projects you can be a lot more successful than if you have no ideas..[...]…
Kartenquiz says:
October 4th, 2011 at 9:04 pm
Portraits of Famous People…
…We all know that skills come pretty handy when doing something new and even more it if is important to us.[...]…
sunglasses carrera says:
October 22nd, 2011 at 2:22 pm
Carrera Has Been On Top For A Long Time…
[...]It’s a known truth that right knowledge can be very important when doing work for the first time and especially if it is something very important.[...]…
urse valley says:
October 25th, 2011 at 9:09 pm
Purse Valley Shop…
[...]If you know what is your job you can be a lot more successful than when you have no skills..[...]…
plastic surgery internet marketing says:
November 4th, 2011 at 11:37 am
How To Market Plastic Surgery Online…
[...]If you are conscious when working at your projects you can be a lot more successful than if you have no knowledge..[...]…
Business says:
November 9th, 2011 at 9:41 pm
Making Money with Business Online…
[...]It’s a known truth that right knowledge can be very important when doing work for the first time and especially if it is something very important.[...]…
site says:
November 11th, 2011 at 3:06 pm
senior dating…
please visit the sites we follow, including this one, as it represents our picks from the web…