Everyone…”Go to Your Room!”

In today’s post, I want to address a concept entitled, ‘Separation of Concerns’. This is a programming concept to make maintenance of your application easier. First let’s go back in history…

In the early days of web sites, everything was jumbled up. All web applications have three basic parts…

1. Content (HTML)
2. Presentation (CSS)
3. Functionality (JavaScript)

There used to be an HTML tag called, “font”. This tag has now been deprecated (in fact, this tag is not supported in HTML5), although you might run across it on sites that are ancient and have not been updated. This tag was used for content to control the styles of text. So while this tag is no longer in use, it is a good way to illustrate the need for separation of concerns. Here is an example…

[code lang="html"]

<font size="3" color="red">Some Text</font>

[/code]

So in the aforementioned example, you can see how the font tag was used to set the size and color of the text. Why was this a problem?

Imagine your company site contains 72,000+ pages (I used to oversee such a site). Now imagine your company goes through a merger...again...this happened to me. The marketing department comes to you and says, "We used to have red as our primary header color and we are switching to blue. Can you please make that change to the web site and do it for the press release tomorrow?" Well, if you used the font tag, then you have to go through every page and every header and make the change. Yes, we could use find and replace, but still a headache...an expensive one.

If we would have separated our style from our content and utilized a css style, then all we would have to do is make the change in the css and it would be replicated across the site.

Note: When I took over that 72,000+ site, it was commingling thses items. One of my first projects was separating these. It made life so much easier and we were able to make changes much quicker. So work to separate your applications into those three areas as much as possible. It is more work on the front end, but saves so much in the long run.

Happy Coding!

Clay Hess