One of the great projects at Treehouse is PHP Paradise by Randy Hoyt. The project involves building an online T-shirt store with PHP.
One thing you’ll take away from this project is the importance of separation of concerns. Here are 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? Here’s an explanation.
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.
Example 1: HTML and CSS magic
In the Shirts 4 Mike project, all the CSS is pre-written. This meant that you only have to write a few lines of PHP code, and get an instantly formatted result.
What does this have to do with the separation of concerns?
The whole grid will be perfectly styled as soon as you run the code because the CSS is pre-written by the project creator, separate from the HTML.
Example 2: The power of functions
The 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 thank you for being patient.
Was there anything you didn’t quite understand? Go ahead and ask us, and if you liked this page, please share it with your friends!
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
