Thursday, November 27, 2014

Design Patterns In Web Design

Web design often involves a number of different languages.  A possible combination would be:

HTML
PHP
Javascript
CSS

There are many ways to combine them and to me those ways would be called Design Patterns.   Once I was trying to create a CMS.  I wanted to be able to create Template as a single page to which I could insert the content.

I eventually decided to create this single page template as a single php function.   I don't remember why I used a single function but it made sense at the time.  

function page(){
?>
<head></head>
<body>
 <div id="header"><?=$header?></div>
<div id="content"><?=$content?></div>
<div id="footer"> <?=$footer?></div>
</body>
}

I guess this allowed me to make different php files and just add this function to them.  I could have an about.php a home.php instead of having to do this:

index.php?page=about

instead of that I could just have
domain.com/about.php

which to me seemed simple at the time.  A separate page for each page.  I guess though if you have a really complex site you might want to do something else.  Some sites have 10,000 pages.   To me though these are different types of design patterns.  They are more practical Design Patterns.  Maybe I just don't see how they correspond to the traditional design patterns.   I've looked at other  peoples web design patterns and everyone seems to have a different method. 
Which is better?  I don't know but probably there are better criteria for choosing a design than a pretty address.    Which leads to an important point.  Any discussion of Design Patterns should include a discussion of the benefits and drawbacks of each.   Perhaps a list of benefits and drawbacks would be a good place to start.

Address Bar (which we have already mentioned) 
Speed
Complexity/Simplicity
Implimentability
Extensibility
Effort Required to Implement.

Address Bar patterns would be things like Restful API.  In Restful I think the address bar calls functions like this :

domain.com/add/4/5

which is changed using htaccess into:

domain.com?function=add&x=4&y=5

Restful is more than just pretty address bar stuff I guess but like I said I don't feel it's the most important thing. 

Speed.   For speed you could use the php code inline which is the most common way for instance


here is add.php:
<?php
$z = $x + $y;
?>


<?php
$x = 4;
$y = 5;
include("add.php");
echo $z
?>

This might be the fastest way to do things but it's not very clean.  

Complexity/Symplicity:
Using Objects would be cleaner and simpler OOP objects can be done in many different ways.  For each way of implementing objects I would consider that a different Design Pattern.   Perhaps you can identify the patterns created.   different patterns probably would do different things.

One way of simplifying things is to use the Model View Controller.   There are many ways of implementing the Model View Controller.  To me though there seems that a website is already broken into separate parts which are these:

HTML : Viewport
Javascript  : Controller
PHP /Template
CSS /Template
MySQL/ Model Controller
Database Data: Model.
Images: Model/Templatedata

Things are already separated into concerns.   To separate thins more is to actually add complexity.  What happens is that people will Divide one of these languages into a Model View Controller and the other languages will merely supplement the application.




Intro with PHP example

I've been studying design patterns for some time and one thing I've found is that despite the fact that web design is very different from C++ programming the exact same design patterns are being used for both.   This is fine but each language has idiosyncrasies that I believe should vastly alter and expand the number of design patterns possible.     I mean when you program a C++ program you are only using one language but web programming combines languages.  When you combine languages then the way you combine them becomes much more important a design factor and of course when using one language this factor doesn't exist.    Another example would be PHP.  Since you call PHP from other PHP files then wouldn't the way you call other files be an important factor?   Should you only call other files at the top of a script or is it fine to call them from anywhere in the script.   Should you be allowed to use variables created in one script from the calling script?   I would say no since that goes against the rules of even structural programming.  Many times though this it what people do.  I constantly come across PHP files where scripts are called from arbitrary locations in other scripts.   When this happens though it's hard to tell what is being done.

Essentially this boils down to treating whole pages as if they were functions:
 <?php
$x = 4;  //initializing variables outside the called script is some help in making a script a function but
$y = 5; // often this step isn't taken and add would itself contain the variables
include("add.php")
echo $z;
?>
This would output 9.     As silly as this may seem this is what people actually do.  It's very terse though but not very clear.   Another pattern would be to do this:

<?php
include("add.php");

echo add(4, 5);
?>

This would also output 9.


Another possible pattern is this:
<?php
function add($x, $y){
     return $x + $y;
}

include("output.php");
?>

You could then create a file called output.php and then in your output file you would not need to include anything except the function add(4,5);
<?php
echo add(4,5);
?>

All these are different patterns.  The purpose of this blog is more to open peoples eyes to the fact that the term Design Pattern is being used in a much too narrow way.