32

I'm currently reading up on OO before I embark upon my next major project. To give you some quick background, I'm a PHP developer, working on web applications.

One area that particularly interests me is the User Interface; specifically how to build this and connect it to my OO "model".

I've been doing some reading on this area. One of my favourites is this: Building user interfaces for object-oriented systems

"All objects must provide their own UI"

Thinking about my problem, I can see this working well. I build my "user" object to represent someone who has logged into my website, for example. One of my methods is then "display_yourself" or similar. I can use this throughout my code. Perhaps to start with this will just be their name. Later, if I need to adjust to show their name+small avatar, I can just update this one method and hey-presto, my app is updated. Or if I need to make their name a link to their profile, hey-presto I can update again easily from one place.

In terms of an OO system; I think this approach works well. Looking on other StackOverflow threads, I found this under "Separation of Concerns": Soc

"In computer science, separation of concerns (SoC) is the process of breaking a computer program into distinct features that overlap in functionality as little as possible. A concern is any piece of interest or focus in a program. Typically, concerns are synonymous with features or behaviors. Progress towards SoC is traditionally achieved through modularity and encapsulation, with the help of information hiding."

To my mind I have achieved this. My user object hides all it's information. I don't have any places in my code where I say $user->get_user_name() before I display it.

However, this seems to go against what other people seem to think of as "best practice".

To quote the "selected" (green one) answer from the same question:

"The separation of concerns is keeping the code for each of these concerns separate. Changing the interface should not require changing the business logic code, and vice versa. Model-View-Controller (MVC) design pattern is an excellent example of separating these concerns for better software maintainability."

Why does this make for better software maintainability? Surely with MVC, my View has to know an awful lot about the Model? Read the JavaWorld article for a detailed discussion on this point: Building user interfaces for object-oriented systems

Anyway... getting to the actual point, finally!

1. Can anyone recommend any books that discuss this in detail? I don't want an MVC book; I'm not sold on MVC. I want a book that discusses OO / UI, the potential issues, potential solutuions etc.. (maybe including MVC) Arthur Riel's Object-Oriented Design Heuristics

touches on it (and is an excellent book as well!), but I want something that goes into more detail.

2. Can anyone put forward an argument that is as well-explained as Allen Holub's JavaWorld article that explains why MVC is a good idea?

Many thanks for anyone who can help me reach a conclusion on this.

2
  • Great question, based on submissions - causing people to think and explain.
    – dkretz
    Mar 12, 2009 at 22:21
  • see if this anagloy helps: zenofcoding.com/2009/01/06/another-way-to-think-about-mvc ... i would argue that mvc is not a must-have but certainly it is a great a way to think about separating your logic. you always have a part that interacts with the DB "M", and a part that interacts with the user, "V". So to glue them together you typically need some sort of "C" -- controller. A lof of the stuff I've read on the subject tends to overcomplicate things.
    – vladko
    Feb 16, 2016 at 13:20

8 Answers 8

34

This is a failure in how OOP is often taught, using examples like rectangle.draw() and dinosaur.show() that make absolutely no sense.

You're almost answering your own question when you talk about having a user class that displays itself.

"Later, if I need to adjust to show their name+small avatar, I can just update this one method and hey-presto, my app is updated."

Think about just that little piece for moment. Now take a look at Stack Overflow and notice all of the places that your username appears. Does it look the same in each case? No, at the top you've just got an envelope next to your username followed by your reputation and badges. In a question thread you've got your avatar followed by your username with your reputation and badges below it. Do you think that there is a user object with methods like getUserNameWithAvatarInFrontOfItAndReputationAndBadgesUnderneath() ? Nah.

An object is concerned with the data it represents and methods that act on that data. Your user object will probably have firstName and lastName members, and the necessary getters to retrieve those pieces. It might also have a convenience method like toString() (in Java terms) that would return the user's name in a common format, like the first name followed by a space and then the last name. Aside from that, the user object shouldn't do much else. It is up to the client to decide what it wants to do with the object.

Take the example that you've given us with the user object, and then think about how you would do the following if you built a "UI" into it:

  1. Create a CSV export showing all users, ordered by last name. E.g. Lastname, Firstname.
  2. Provide both a heavyweight GUI and a Web-based interface to work with the user object.
  3. Show an avatar next to the username in one place, but only show the username in another.
  4. Provide an RSS list of users.
  5. Show the username bold in one place, italicized in another, and as a hyperlink in yet another place.
  6. Show the user's middle initial where appropriate.

If you think about these requirements, they all boil down to providing a user object that is only concerned with the data that it should be concerned with. It shouldn't try to be all things to everyone, it should just provide a means to get at user data. It is up to each of the many views you will create to decide how it wants to display the user data.

Your idea about updating code in one place to update your views in many places is a good one. This is still possible without mucking with things at a too low of a level. You could certainly create widget-like classes that would encapsulate your various common views of "stuff", and use them throughout your view code.

2
  • 1
    Good answer. I emailed Allen Holub (Javaworld article author) and he warned "There's a difference between an object "providing" its own UI and an object "being responsible for" its own UI". Similar to the point you are making; I think.
    – Dave
    Mar 17, 2009 at 11:04
  • One suggestion from another Javaworld article is to use the Builder pattern to seperate out UI from an object, but still concentrating on a loosely coupled system: Further reading: javaworld.com/javaworld/jw-01-2004/jw-0102-toolbox.html
    – Dave
    Mar 17, 2009 at 11:05
26

Here's the approach I take when creating websites in PHP using an MVC/separation of concerns pattern:

The framework I use has three basic pieces:

  • Models - PHP Classes. I add methods to them to fetch and save data. Each model represents a distinct type of entity in the system: users, pages, blog posts
  • Views - Smarty templates. This is where the html lives.
  • Controllers - PHP classes. These are the brains of the application. Typically urls in the site invoke methods of the class. example.com/user/show/1 would invoke the $user_controller->show(1) method. The controller fetches data out of the model and gives it to the view.

Each of these pieces has a specific job or "concern". The model's job is to provide a clean interface to the data. Typically the site's data is stored in a SQL database. I add methods to the model for fetching data out and saving data in.

The view's job is to display data. All HTML markup goes in the view. Logic to handle zebra-striping for a table of data goes in the view. Code to handle the format that a date should be displayed in goes in the view. I like using Smarty templates for views because it offers some nice features to handle things like that.

The controller's job is to act as an intermediary between the user, the model, and the view.

Let's look at an example of how these come together and where the benefits lie:

Imagine a simple blog site. The main piece of data is a post. Also, imagine that the site keeps track of the number of times a post is viewed. We'll create a SQL table for that:

posts
id date_created title body hits

Now suppose you would like to show the 5 most popular posts. Here's what you might see in a non MVC application:

$sql = "SELECT * FROM posts ORDER BY hits DESC LIMIT 5";
$result = mysql_query($sql);

while ($row = mysql_fetch_assoc($result)) {
    echo "<a href="post.php?id=$row['id']">$row['title']</a><br />";
}

This snippet is pretty straightforward and works well if:

  1. It is the only place you want to show the most popular posts
  2. You never want to change how it looks
  3. You never decide to change what a "popular post" is

Imagine that you want to show the 10 most popular posts on the home page and the 5 most popular in a sidebar on subpages. You now need to either duplicate the code above, or put it in an include file with logic to check where it is being displayed.

What if you want to update the markup for the home page to add a "new-post" class to posts that were created today?

Suppose you decide that a post is popular because it has a lot of comments, not hits. The database will change to reflect this. Now, every place in your application that shows popular posts must be updated to reflect the new logic.

You are starting to see a snowball of complexity form. It's easy to see how things can become increasingly difficult to maintain over the course of a project. Also, consider the complexity when multiple developers are working on a project. Should the designer have to consult with the database developer when adding a class to the output?

Taking an MVC approach and enforcing a separation of concerns within your application can mitigate these issues. Ideally we want to separate it out into three areas:

  1. data logic
  2. application logic
  3. and display logic

Let's see how to do this:

We'll start with the model. We'll have a $post_model class and give it a method called get_popular(). This method will return an array of posts. Additionally we'll give it a parameter to specify the number of posts to return:

post_model.php

class post_model {
    public function get_popular($number) {
        $sql = "SELECT * FROM posts ORDER BY hits DESC LIMIT $number";
        $result = mysql_query($sql);
        while($row = mysql_fetch_assoc($result)) {
            $array[] = $row;
        }
        return $array;
    } 
}

Now for the homepage we have a controller, we'll call it "home". Let's imagine that we have a url routing scheme that invokes our controller when the home page is requested. It's job is to get the popular posts and give them to the correct view:

home_controller.php

class home_controller {
    $post_model = new post_model();
    $popular_posts = $post_model->get_popular(10);

    // This is the smarty syntax for assigning data and displaying
    // a template. The important concept is that we are handing over the 
    // array of popular posts to a template file which will use them 
    // to generate an html page
    $smarty->assign('posts', $popular_posts);
    $smarty->view('homepage.tpl');
}

Now let's see what the view would look like:

homepage.tpl   

{include file="header.tpl"}

 // This loops through the posts we assigned in the controller
 {foreach from='posts' item='post'} 
    <a href="post.php?id={$post.id}">{$post.title}</a>
 {/foreach}

{include file="footer.tpl"}

Now we have the basic pieces of our application and can see the separation of concerns.

The model is concerned with getting the data. It knows about the database, it knows about SQL queries and LIMIT statements. It knows that it should hand back a nice array.

The controller knows about the user's request, that they are looking at the homepage. It knows that the homepage should show 10 popular posts. It gets the data from the model and gives it to the view.

The view knows that an array of posts should be displayed as a series of achor tags with break tags after them. It knows that a post has a title and an id. It knows that a post's title should be used for the anchor text and that the posts id should be used in the href. The view also knows that there should be a header and footer shown on the page.

It's also important to mention what each piece doesn't know.

The model doesn't know that the popular posts are shown on the homepage.

The controller and the view don't know that posts are stored in a SQL database.

The controller and the model don't know that every link to a post on the homepage should have a break tag after it.

So, in this state we have established a clear separation of concerns between data logic (the model), application logic (the controller), and display logic (the view). So now what? We took a short simple PHP snippet and broke it into three confusing files. What does this give us?

Let's look at how having a separation of concerns can help us with the issues mentioned above. To reiterate, we want to:

  1. Show popular posts in a sidebar on subpages
  2. Highlight new posts with an additional css class
  3. Change the underlying definition of a "popular post"

To show the popular posts in a sidebar we'll add two files our subpage:

A subpage controller...

subpage_controller.php

class subpage_controller {
    $post_model = new post_model();
    $popular_posts = $post_model->get_popular(5);

    $smarty->assign('posts', $popular_posts);
    $smarty->view('subpage.tpl');
}

...and a subpage template:

subpage.tpl

{include file="header.tpl"}

<div id="sidebar">

 {foreach from='posts' item='post'}
    <a href="post.php?id={$post.id}">{$post.title}</a>
 {/foreach}

</div>

{include file="footer.tpl"}

The new subpage controller knows that the subpage should only show 5 popular posts. The subpage view knows that subpages should put the list of posts inside a sidebar div.

Now, on the homepage we want to highlight new posts. We can achieve this by modifying the homepage.tpl.

{include file="header.tpl"}

 {foreach from='posts' item='post'}
    {if $post.date_created == $smarty.now}
        <a class="new-post" href="post.php?id={$post.id}">{$post.title}</a>
    {else}
        <a href="post.php?id={$post.id}">{$post.title}</a>
    {/if}
 {/foreach}

{include file="footer.tpl"}

Here the view handles all of the new logic for displaying popular posts. The controller and the model didn't need to know anything about that change. It's purely display logic. The subpage list continues to show up as it did before.

Finally, we'd like to change what a popular post is. Instead of being based on the number of hits a page got, we'd like it to be based on the number of comments a post got. We can apply that change to the model:

post_model.php

class post_model {
    public function get_popular($number) {
        $sql = "SELECT * , COUNT(comments.id) as comment_count
                FROM posts 
                INNER JOIN comments ON comments.post_id = posts.id
                ORDER BY comment_count DESC 
                LIMIT $number";
        $result = mysql_query($sql);
        while($row = mysql_fetch_assoc($result)) {
            $array[] = $row;
        }
        return $array;
    } 
}

We have increased the complexity of the "popular post" logic. However, once we've made this change in the model, in one place, the new logic is applied everywhere. The homepage and the subpage, with no other modifications, will now display popular posts based on comments. Our designer didn't need to be involved in this. The markup is not affected.

Hopefully, this provides a compelling example of how separating the concerns of data logic, application logic, and display logic, can make developing your application easier. Changes in one area tend to have less of an impact on other areas.

Following this convention isn't a magic bullet that will automatically make your code perfect. And you will undoubtedly come across issues where it is far less clear where the separation should be. In the end, it's all about managing complexity within the application.

You should give plenty of thought to how you construct your models. What sort of interfaces will they provide (see Gregory's answer regarding contracts)? What data format does the controller and view expect to work with? Thinking about these things ahead of time will make things easier down the road.

Also, there can be some overhead when starting a project to get all of these pieces working together nicely. There are many frameworks that provide the building blocks for models, controllers, templating engines, url routing, and more. See many other posts on SO for suggestions on PHP MVC frameworks. These frameworks will get you up and running but you as the developer are in charge of managing complexity and enforcing a separation of concerns.

I will also note that the code snippets above are just simplified examples. They may (most likely) have bugs. However, they are very similar in structure to the code I use in my own projects.

2
  • You win for the day. I've been looking for a PHP example-based explanation of MVC for ages.
    – Scott
    Mar 19, 2009 at 15:17
  • 2
    This post presents a clear picture of MVC and Separation of Concerns: andywardley.com/computers/web/mvc.html
    – GloryFish
    Jun 11, 2009 at 14:53
3

I am not sure I can lead you to the water you wat to drink, but I think I can answer some of your concerns.

First, in MVC, the model and the view do have some interplay, but the view is really coupled to contract and not to implementation. You can shift out to other models that adhere to the same contract and still be able to use the view. And, if you think about it, it makes sense. A user has a first name and last name. He probably also has a logon name and a password, although you might or might not tie this to the "contract" of what a user is. The point is, once you determine what a user is, it is unlikely to change much. You might add something to it, but it is unlikely you are going to take away that often.

In the view, you have pointers to the model that adheres to that contract, but I can use a simple object:

 public class User
 {
    public string FirstName;
    public string LastName;
 }

Yes, I realize public fields are bad. :-) I can also use a DataTable as a model, as long as it exposes FirstName and LastName. That may not be the best example, but the point is the model is not tied to the view. The view is tied to a contract and the particular model adheres to that contract.

I have not heard of every object must have its own UI. There are essentially two types of objects: state and behavior. I have seen examples that have both state and behavior, but they generally are in systems that are not very testable, which I am not fond of. Ultimately, every state object should be exposed to some form of UI to avoid forcing IT people to handle all the updates directly in a data store, perhaps, but have their own UI? I would have to see that written in an explanation to try to understand what the user is doing.

As for SoC, the reasaon to package things distinctly is the ability to switch out layers/tiers without rewriting the entire system. In general, the app is really located in the business tier, so that part cannot as easily be switched out. The data and UI should be fairly easy to switch out in a well designed system.

As far as books on understanding OOP, I tend to like books on patterns, as they are more practical ways of understanding the concepts. You can find the primer material on the web. If you want a language agnostic pattern book, and think a bit geeky, the Gang of Four book is a good place to start. For more creative types, I would say Heads Up Design Patterns.

2
  • Interesting thoughts. I've been through a few pattern books (including GOF). I always find it interesting when people talk of "switching out layers / tiers". In my experience, these are rarely the changes I want to make to a system. More likely I want to add functionality to, for example, a "user".
    – Dave
    Mar 12, 2009 at 17:52
  • @Dave tiers != layers, when you work with really big applications that need to scale, you will usually end up having processes that span different servers
    – eglasius
    Mar 12, 2009 at 18:02
2

The problem with the idea that all your objects know how to display themselves is that each object can only be displayed in one way. What happens if you want to provide a detail view of a user, and a summary view. What happens if you want to display a view that merges a number of objects (users and their associated addresses for example). If you seperate your business objects (users) from the things that know how to display them then you have no more code to write, you just seperate it into different places.

This makes software more maintainable because if a user object is behaving incorrectly, you know it is the user, if it is not displaying properly, you know it is the view. In the situation where you need to provide a new interface to your application (say you decide to provide a new look and feel for mobile browsers), then you dont need to change your user object at all, you add a new object that knows how to render the user object for a mobile browser.

SOLID principles provide some good reasoning for this, here is a relatively concise look at these. I am afraid that I dont have a book to hand that sums it up well, but experience has taught me that it is easier to write new code than it is to update old code, and so designs that favour small modular classes that plug together to achieve what is needed, while harder to design up front, are far easier to maintain in the long run. It is great to be able to write a new renderer for a user object, without ever having to delve into the internals of that object.

1
  • How do you connect the renderer to the object? Does the renderer need to "delve" into the internals of the Object?
    – Dave
    Mar 12, 2009 at 17:39
2

Can anyone put forward an argument [...] that explains why MVC is a good idea?

It keeps you sane by helping you remember what your code does because they are isolated from each other.

1
  • Consider the amount of code that would go into that single class, if you want to expose the same info not only as Html on the UI, but as part of an RSS, a JSON, a rest service with XML, [insert something else].
  • It is a leaky abstraction, meaning it tries to give you the sense that it will be the only piece that will ever know that data, but that can't be entirely truth. Lets say you want to provide a service that will integrate with several external third parties. You will have a really hard time forcing them to use your specific language to integrate with your service (as it is The class the only piece that can ever the data it is using), or if in the other hand you expose some of its data you are not hiding the data from those third parties systems.

Update 1: I gave an overall look at the whole article, and being an old article (99), it isn't really about MVC as we know it today vs. object oriented, nor has arguments that are against the SRP.

You could perfectly be in line with what he said, and handle the above scenario I mentioned with specific classes responsible to translate the object's public contract to the different formats: the main concern was that we didn't have a clear place to handle the changes and also that we didn't want the information to be repeated all over. So, on the html case, you could perfectly have a control that renders the info, or a class that transform it to html or [insert reuse mecanism here].

Btw, I had a flash back with the RMI bit. Anyway, in that example you can see he is tied to a communication mecanism. That said, each method call is remotely handled. I think he was also really concerned on developers having code that instead of getting a single object and operating on the info returned, had lots of small Get calls to get tons of different pieces of information.

Ps. I suggest you read info about DDD and Solid, which as I said for the SRP I wouldn't say it is the type of things the author was complaning about

3
  • Why couldn't I have two methods; "display_yourself" and "display_yourself_as_text" or something similar? Why would I need any more methods than that? Why a lot of code?
    – Dave
    Mar 12, 2009 at 17:37
  • @Dave it comes down to requirements, you might be required to expose it as Xml, JSon, Rss, etc - that is on a wide set of different formats.
    – eglasius
    Mar 12, 2009 at 17:40
  • @Dave I updated my answer after having a further look to the article ... I would be the author has a different view on how some are using MVC today
    – eglasius
    Mar 12, 2009 at 18:33
1

I don't know any good books on the MVC subject, but from my own experience. In web development for example, many times you work with designers and sometimes dbas. Separating the logic from the presentation allows you to work with people with different skill sets better because the designer doesn't need to much about coding and vice versa. Also, for the concept of DRY, you can make your code less repetitive and easier to maintain. Your code will be more reusable and make your job a lot easier. It will also make you a better developer because you will become more organized and think of programming in a different way. So even if you have to work on something that is not MVC, you might have a different approach to architecting the project because you understand the MVC concepts.

I guess the tradeoff with a lot of MVC frameworks for large sites is that it may not be fast enough to handle the load.

1
  • I think this is a very good point. A colleague of mine suggested a similar answer; allow people of different skills to work on the bits of the application they need to.
    – Dave
    Mar 13, 2009 at 9:55
0

My 2c.. another thing you could do besides what was said is to use Decorators of your User objects. This way, you could decorate the user differently depending on the context. So you'd end up with WebUser.class, CVSUser.class, RSSUser.class, etc.

I don't really do it this way, and it could get messy, but it helps in avoiding the client code from having to pull a lot of info out of your User. It might be something interesting to look into ;-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.