The other day, I tried my hand at one of the great projects at Treehouse – PHP Paradise by Randy Hoyt. The project involved building an online T-shirt store with PHP.
One thing I took away from that project was the importance of separation of concerns. In this post I’ll share some examples of why you need to be aware of this concept.
What is the separation of concerns?
The separation of concerns refers to separating parts of a computer program into modules that deal with a single feature or behavior.
Confused? Let me explain.
The classic example of the separation of concerns is HTML, CSS and JavaScript. Each language is designed to handle a different feature, or concern of a website. HTML is for the content and structure, CSS is for the styling and JavaScript is for the behavior. The idea is not to have any overlap between the three main ‘concerns’.
The separation of concerns also comes into play when writing programs or scripts, where the idea is to use a separate function for each feature or behavior. More on this later.
So why is the separation of concerns so great that I felt compelled to write a blog post on it?
It makes programming magic!
The separation of concerns is an important principle regarding the design of computer programs, and for good reason too, since if you employ it well, it makes programming feel like this:
OK, now let’s jump into some examples.
Example 1: HTML and CSS magic
In my Shirts 4 Mike project, all the CSS was pre-written. This meant that I only had to write a few lines of PHP code, and got an instantly formatted result.
Take a look at the following code:
foreach($products as $product_id => $prod) {
echo '<li>';
echo '<img src="'.$prod['image'].'" alt="'.$prod['name'].'" />';
echo '</li>';
}
That code loops through an array and creates an HTML list item and image for each element in the array. After writing that code, I got this result, instantly as if by magic:
What does this have to do with the separation of concerns?
Notice how I didn’t have to write each of the eight list items separately. Instead, I wrote the HTML once and let PHP do the rest of the work. I was able to do this because I had separated the data structure that held the product catalog from the PHP function that spat it out.
Additionally, the whole grid was perfectly styled as soon as I ran the code because the CSS had been pre-written by the project creator, separate from the HTML.
Example 2: The power of functions
My Shirts 4 Mike project also included building a contact page. Now think for a moment what kind of things a computer would have to do to send an email from a contact page.
It would have to first fetch the data entered by the user into the form, then construct an email from the data, then send off the email, and then redirect the user to a thank you page.
But that’s just the tip of the iceberg, right? After all, you have to tell the computer how to do those things, you can’t just write this:
fetch_data(); construct_email(); send_email(); redirect_page();
Well, in fact, you can. Kind of, anyway.
A function allows you to store a block of code in a single variable, so you could define four functions, and then have those four lines of code above execute the whole program.
What does this have to do with the separation of concerns?
Functions allow us to focus on the ‘big picture’ of our program in one place (the execution of the function), and focus on the details in another place (the definition of the function). See, separation of concerns!
Here’s another example:
1 + 1
A computer doesn’t just know 1 + 1 like we do. It needs to go through an insanely complicated algorithm to calculate the answer, converting numbers into binary and back again.
Imagine if you had to write out that algorithm every time you wanted to do a calculation in a program you write. It would clutter your code and get in the way of whatever you’re trying to do.
The great thing about programming languages is that they define the algorithm for us, so we can just write 1 + 1 and let the computer do the rest of the thinking.
That’s the separation of concerns at work.
Separate your concerns!
HTML and CSS magic, sending an email, calculating 1 + 1 – all this is made possible by the separation of concerns. So it pays to be aware of this concept and use it in your programs.
Separation of concerns is a difficult programming concept to grasp (and a difficult one to explain too!) so I have to thank you for being patient.
Was there anything you didn’t quite understand? Go ahead and tell us in the comments, and if you liked this blog post, please share it with your friends!
