Programmer's Notes

Low Coupling and High Cohesion - GRASP (Design patterns series)

Konstantin Mirin — Tue, 06 Oct 2009 06:00:40 +0000

Low coupling

When designing some architecture, you face with the problem “which object should perform X task?” We discussed this question in my previous post in this series. There we noted, that object should perform the tasks he has enough info for. He should be an “expert”. But because one of the main OOP characteristics is interaction between objects, it’s often hard to answer this question.

Introducing example

Consider you should print the table parameters (see What is OOP post for this example). There are tables of 2 types: square and circle ones. Square has parameter “side”, circe has parameter - “radius”. And we need the table:

Tables list

Sure, we can create a class Lister and method Lisert::out(). But what logic to place there? We can go with something like this:

class Lister
{
public $tables;
public function out()
{
echo "+———-+———–+———+
| Type | parameter | value |
+———-+———–+———+\n";
for ($i = 0, $s = sizeof($this->tables); $i < $s; $i++)
{
if ($this->tables[$i] instanceof CircleTable)
{
echo ‘| Circle | radius | ’.sprintf(‘%5.2f’, $this->tables[$i]->radius)." |\n";
}
else
{
echo ‘| Square | side | ’.sprintf(‘%5.2f’, $this->tables[$i]->side)." |\n";
}
echo "+———-+———–+———+\n";
}
}
}
?>

Identifying the problem

However, this method is strictly linked to using only CircleTable and SquareTable, it will not work without CircleTable and adding other table types is impossible. This can be imagined like this:

Classes coupling

Notice that since Lister class uses CircleTable and SquareTable, they can’t be used along. This picture illustrates it - they are coupled together.

Coming up with a solution

The correct variant of solving the task of table output is the following.

Refactor Table classes putting the output logic, that is specific to the table into the class
Use these new methods of table classes in the Lister::out method

Enough talk, let’s walk!

class CircleTable extends Table
{
public $radius;
public function __construct($r, $h)
{
parent::__construct($h);//calling the constructor of the parent class, passing height there.
$this->radius = $r;//setting the radius
}
public function getSquare()
{
return $this->radius*$this->radius*M_PI;
}
public function out()
{
echo ‘| Circle | radius | ’.sprintf(‘%5.2f’, $this->radius)." |\n";
}
}
class SquareTable extends Table
{
public $side;
public function __construct($s, $h)
{
parent::__construct($h);//calling the constructor of the parent class, passing height there.
$this->side = $s;//setting the side
}
public function getSquare()
{
return $this->side*$this->side;
}
public function out()
{
echo ‘| Square | side | ’.sprintf(‘%5.2f’, $this->side)." |\n";
}
}

And we’ll use these methods in the Lister class:

class Lister
{
public $tables;
public function out()
{
echo "+———-+———–+———+
| Type | parameter | value |
+———-+———–+———+\n";
for ($i = 0, $s = sizeof($this->tables); $i < $s; $i++)
{
$this->tables[$i]->out();
echo "+———-+———–+———+\n";
}
}
}

Running the code with the same data will give us exactly the same thing. But only one difference - this code is easy to maintain, change and expand. We can imagine this structure as following:

Low coupling illustration

For example, if we need one more table - triangle - we just add this class and then - created object into the List::tables property and that’s all. It will be printed out.
Here is the code:

class TriangleTable extends Table
{
public $side;
public function __construct($s, $h)
{
parent::__construct($h);//calling the constructor of the parent class, passing height there.
$this->side = $s;//setting the side
}
public function getSquare()
{
return $this->side*$this->side*0.433;
}
public function out()
{
echo ‘| Triangle | side | ’.sprintf(‘%5.2f’, $this->side)." |\n";
}
}

And now add this table to the test script:

require_once(‘Table.php’);
require_once(‘Lister.php’);
$list = new Lister();
$list->tables = array(
new CircleTable(5, 90),
new SquareTable(2, 85),
new SquareTable(8, 100),
new TriangleTable(7,150),
new TriangleTable(10,120),
);
header(‘Content-type: text/plain’);
$list->out();
?>

And we’ll get the following table with no modifications in the Lister class:

Modified list of tables

Note, that we can populate tables list from the DB table and no code will be changed. Adding new table type is very simple - you just develop the class similar to CircleTable or SquareTable and then use it. No more changes needed.
This technique when you do your best to write the isolated pieces of code, which can be reused separately is called “Low Coupling”, your goal is to create classes in such a way that they do not depend on each other or check these dependencies preventing runtime errors.
Sure, that’s the goal, it can’t be achieved in full, but you should aim to do this.

High cohesion

When you do your best to implement the Lout Coupling principle, you write your code in a small portions, and each of them does some definite task. And since each class is small and does only one or several cohesive jobs, you get High Cohesion in your code.
These two principles go together. When you fulfil one of them, you automatically follow another one.

Summary

Putting it all together, we may say that Low Coupling principle requires writing isolated pieces of code, that form complex logic only by interacting with each other, not by themselves. And While following this principle, our little parts automatically become focused on one task, so they become cohesive. This way we fulfil both principles at once.
And good OO-design follow all GRASP principles at the same time just because they characterise nice application design.

What can you add here? Maybe you’ve got some questions? Feel free to ask here in comments or by email.
Grab the code of examples here.

Bookmark It

Hide Sites

Grabbing password-protected content with cURL

Konstantin Mirin — Sun, 24 May 2009 07:00:55 +0000

Introduction

Websites, that aggregate something become more and more popular because we need all information available in one place and accessed fast and easily. From time to time, you come across with tasks, that require retrieving some data from the password-protected area. For example, I use Guru.com for my job search. They post lots of the projects there, but they don’t offer convenient listing and filtering. So I developed my own tool, that grabs everything from there and ranks it all in the way I need. So, we’ll take a look at different types of password-protected areas and see how to deal with any of them

Cookie-based authorization

We’ll start from the most popular type of authorization First, let’s take a look, how data goes between the user and the server:

Cookie-based authentication

From the process it becomes evident, that to pull the data from the pass-protected area, we should basically “catch” the cookie and then perform all requests passing it with every request. It seems to be complex, but luckily we have cURL PHP extension, that makes all the dirty job.

So all we have to do is:

Send login request
Catch cookie
Send all data requests we need

The second part is done automatically, so we can just focus on authentication and data retrieval.

Implementation

We’ll basically need 3 functions:

requestContent - this will make actual HTTP request to the URL we provide with parameters we provide (POST, GET variables, HTTP_REFERRER etc)
authenticate - this will send authentication info to the server using the requestContent function
getPage - this will actually get data we need using the same requestContent function. Actually, you may use requestContent instead, but you’ll definitely want some post-processing the result, for example, fetch some info. So it’s better to define a separate function, that does it.

So let’s go! I’ve created 3 files: config.php where we’ll store config data, functions.php where we’ll define out functions and index.php, that actually carries out the job.
config.php follows:

/**
* Specifies user agent. YOu can put anything you want here, I’m just showing,
* that with cUrl you can fake anything. I just copied my UserAgent string. Make ]
* sure you don’t have line breaks in it!!!
*/
define(‘GR_USER_AGENT’, ‘Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7 FirePHP/0.2.4′);
/**
* Path to the file where cUrl will store cookies. cUrl behaves like a browser -
* it stores all cookies it gets somewhere and then submits them with each HTTP
* request.
*/
define(‘GR_COOKIE_FILE’, ‘cookies.txt’);
/**
* URL where you log in to your service. We’ll be logging in to Wikipedia.
* I took this path from the action parameter of the
tag on this page:
* http://en.wikipedia.org/w/index.php?title=Special:UserLogin&returnto=Special:UserLogout
*
* You should just take a look at the source code of the page you’re going to
* login from, finf the login form and see action parameter there.
*/
define(‘GR_LOGIN_URL’, ‘http://en.wikipedia.org/w/index.php?title=Special:UserLogin&action=submitlogin&type=login’);
/**
* Your username
*/
define(‘GR_USERNAME’, ‘KJedi’);
/**
* Your password
*/
define(‘GR_PASSWORD’, ‘did you think I\’ll give you my pass? :)’);
?>

In functions.php I define our 3 functions. requestContent looks as following:

function requestContent($url, $postData = array(), $referer = ”, $headers = array())
{
$ch = curl_init();//creating cUrl instance
curl_setopt($ch, CURLOPT_URL, $url);//setting our URL
curl_setopt($ch, CURLOPT_HEADER, 0);
if(GR_USER_AGENT) curl_setopt($ch, CURLOPT_USERAGENT, GR_USER_AGENT);//setting user agent
if($postData)//if we have post data
{
curl_setopt($ch, CURLOPT_POST, 1);//tell cUrl we’ll be using POST
curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);//set post data
}
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);//force cUrl to follow any redirects
if($referer) curl_setopt($ch, CURLOPT_REFERER, $referer);//if there is referrer specified, set it
if(GR_COOKIE_FILE)//if there is cookie file
{
//set next 2 options needed in order to uuse cookies correctly everywhere
curl_setopt($ch, CURLOPT_COOKIEFILE, GR_COOKIE_FILE);
curl_setopt($ch, CURLOPT_COOKIEJAR, GR_COOKIE_FILE);
}
if ($headers)//if there are additional headers
{
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);//set them
}
$result = curl_exec($ch);//execute cUrl query
curl_close($ch);//close cUrl
return $result;//return cUrl result
}

Basically, here we init cURL, and get the handler. It is similar to the fopen(). Then we set all options we need and finally execute the HTTP query and return result.
Authentication is based on the previous function, that carries our all the low-level job. We only have to examine our login form and determine, what variables to send. So, open the login page of the service you want to access, find the tag and copy the login URL. You’ll have to put it into the config.php file. Then see what fields are there. Note, that there my be hidden fields also, note their variables and create an associative array for them (see the following code). If you’re not sure what variables are actually sent, you may use Live Http Headers plugin for the Firefox.
Usage is simple. Open the login page. Fill it in. Then start the plugin (Tools -> Live HTTP headers). Submit the form and see the number of queries are shown. You actually need only the first one - this is your request. See the screenshot:

Http headers

And now the code:

function authenticate()
{
$post_info = array(
‘wpName’ => GR_USERNAME,
‘wpPassword’ => GR_PASSWORD,
‘wpLoginAttempt’ => ‘Log+in’);
$postData = ”;
foreach($post_info as $name => $value)
{
$postData .= $name.‘=’.$value.‘&’;
}
$postData = trim(substr($postData, 0, -1));
$result = requestContent(GR_LOGIN_URL, $postData, GR_LOGIN_URL);
//here you may check if you were logged in successfully
}

After getting result, you may parse it and see if you got a successful login. After you performed this query and got response, you’ve also got the session ID stored in cookie. You may open the cookie file and take a look yourself. After this you may perform any requests to the servic and it will respond as if you are logged user. The trick is that cUrl will send him cookies from the cookie file. And we have the session ID there or anything else that site uses for user identification.
So my getPage() function is a simple wrapper over the requestContent():

function getPage()
{
return requestContent(‘http://en.wikipedia.org/’);
}

Basically, that’s all you need in order to get into the protected area. Now you’re free to do anything you want. Using regular expressions for parsing is the most common way to get the data from the page, so maybe you’ll need the tool for testing your regexps. I really recommend “The Regext Coach”, it greatly simplifies debugging

HTTP authentication

Another approach to the authentication, that is sometimes used in different control panels is HTTP authentication. You should have seen that - you’re presented with a standard screen, prompting for username and password. This username and password are sent with each request. You are not prompted fro them every time just because browser remembers it. To access such area, you don’t need any authenticate() function. You just pass login and pass with each request.
Here are modifications you should do in the above code:

function requestContentHttpAuth($url, $postData = array(), $referer = ”, $headers = array())
{
$ch = curl_init();//creating cUrl instance
curl_setopt($ch, CURLOPT_URL, $url);//setting our URL
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_USERPWD, GR_USERNAME.‘:’.GR_PASSWORD);//<—– here is the change - you pass yout auth data each time
if(GR_USER_AGENT) curl_setopt($ch, CURLOPT_USERAGENT, GR_USER_AGENT);//setting user agent
if($postData)//if we have post data
{
curl_setopt($ch, CURLOPT_POST, 1);//tell cUrl we’ll be using POST
curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);//set post data
}
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);//force cUrl to follow any redirects
if($referer) curl_setopt($ch, CURLOPT_REFERER, $referer);//if there is referrer specified, set it
if(GR_COOKIE_FILE)//if there is cookie file
{
//set next 2 options needed in order to uuse cookies correctly everywhere
curl_setopt($ch, CURLOPT_COOKIEFILE, GR_COOKIE_FILE);
curl_setopt($ch, CURLOPT_COOKIEJAR, GR_COOKIE_FILE);
}
if ($headers)//if there are additional headers
{
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);//set them
}
$result = curl_exec($ch);//execute cUrl query
curl_close($ch);//close cUrl
return $result;//return cUrl result
}

That’s all I wanted to share with you today. Hope you fins it helpful! If you have any questions/comments, feel free to add them!

Quick Note on OOP

I didn’t create the Curl class or present solution as a class because I don’t think it makes my explanations more clear or the code easier to use. This is not full solution, this is just a technique and I tried to present the code in such a way, that you could use them with minimal changes. You can easily put that functions to the class

NetBeans 6.5 for PHP - My Experience

Konstantin Mirin — Fri, 22 May 2009 07:00:48 +0000

Introduction

Personal productivity depends on the tools greatly, so I pay much attention to the programs I use. My previous post in this field was about MySQL workbench which I consider the best free DB design tool for MySQL.

When I started coding PHP, I used Linux so I used Kate, which only had syntax highlighting and allowed to save multiple files opened as a project Next was Quanta, the Linux IDE for PHP. I spent lots of time developing there until I installed trial version of Zend Development Environment (ZDE) 5.5. That was really cool. I liked it very much and used for quite long time. Around half a year ago I heard about NetBeans and decided to try it out. I was thinking quite long about it, I didn’t have enough time to install and go through all it’s functions. Finally I saw that I will never have this time, so I started using it around 1.5 months ago. While using, I was putting down some notes about the things I liked and the ones I didn’t. So now I just want to present my list

Advantages

What I really liked about NetBeans is that it is “the only IDE you need”. It has excellent Java support, good HTML, JS and PHP support and it even has C++ support, but I didn’t try it out, I use the old good Visual Studio 6
So here are the things I liked:

HTML support is excellent. It founds tag mismatch, highlights start and end tags (this is extremely helpful when you deal with large portions of bad-formatted code
When you’re in HTML scope, and typing “
Code formatting is great in everywhere. When working in Zend Studio, I was using 3rd party tools to format HTML, NetBeans does it perfectly. As for other languages, the only problem I have with it is that NetBeans puts opening curly bracket on the same line as loop or function definition, I like putting it on the next line so I see opening and closing brackets one under another. However, it highlights the opposite bracket, so it’s not a big problem
Greatest thing I got there is normal debugging in PHP, not just “echo”, “print_r()” and “exit”. NetBeans integrates with XDebug and it is VERY convenient. It provides normal info as any other debugger - stack trace, local variables, superglobals, watches etc. It saves great amount of time. The only drawback is that NetBeans starts debugging session slowly, but it is definitely faster, than “echo” and “exit”
When switching from Zend Studio, I experienced some inconveniences because NetBeans uses other shortcuts. However, it provides more useful shortcuts than ZDE, and I got used to it quickly
When you code in languages like JS or PHP, where using variables without declaration is not compilation error, it is a common mistake to misspell variable and then get some interesting bugs. That’s where variable highlighting helps greatly. In NetBeans you can put cursor into any variable and in a second you’ll see all occurrences of this variable in the file. That is also very helpful when you are digging through someone’s code
Search is also much better, than in Zend. When you search in files, search results are grouped by file. When you search in the file, you get all occurrences highlighted. This is also very useful when you’re looking into someone’s code or performing some refactoring
Commenting support is also great. For example, you write some //comment. If the line is long, you want to break it into several lines and press enter when you’re inside the line. NetBeans inserts line break and next line continues as comment! This is so helpful when you’re commenting some file and your comments are quite long.
PHPDoc support is also great. The fact, that you get help for function, its arguments and return value if you specify function description in the PHPDoc format wasn’t new to me, but if you start writing PHPDoc comment for the ready function and put “/**“, you immediately get full PHPDoc template - all arguments list with placeholders, @return keyword, so everything remained is only put actual description, everything is automated. That’s great! The only thing I’d like to add here is that when function definition is changed, it should update PHPDoc comment - remove correspondent line or add more variables I guess, that’s a dream
Very useful feature is auto-reloading files. You don’t need to reopen log every time it is updated. However, there is a slight disadvantage - if file is deleted in the file system, it doesn’t propose to save a copy like Zend does.
It has built-in diff tool. It is MEGA-useful I have to compare files quite frequently, I was using WinMerge before that, but it was inconvenient. NetBeans integrates everything in one environment and it is very nice!
Auto-complete is better, than in ZDE, it takes scope into consideration. However, it is sometimes buggy.
In NetBeans you can view your DB in the same IDE, perform queries, view tables structure and much more. This tool is not as good as phpMyAdmin, so I am using the latter most of the time. Main reason is that NetBeans is slow when switching from code mode to the DB mode. But maybe that’s my PC

Disadvantages

And now some things I didn’t like:

Code templates are worse, than in Zend Studio. This thing is really simple there and behaved as supposed. In NetBeans I add some template, e.g. “echo ‘
```
’.print_r($var,true).’
```
’;” for the “pri” keyword. And sometimes it doesn’t appear, sometimes it is inserted with additional
There is no PHP or JS help integrated into IDE. In Zend Studio I could select php function and click “F1″ and get full help. In Aptana IDE there is the same for JS, but there is noting like this here! Why? Is it something complex?
No FTP support without additional plug-ins. I didn’t have time to explore this feature, but I don’t like the fact I have to install something more for such common feature
There is UML package for Java, why there is nothing like this for JS?

Conclusion

Anyway, despite of the disadvantages, I think, that NetBeans is better, because it offers even more features, than Zend, but for free! And it’s really good with Java I especially liked refactoring there. Just put the name of the class and everything is changed correspondently!

What are your thoughts about NetBeans? Are you using/planning to use it? What are your workarounds for the disadvantages I noted? Can you add more “pros”?

Bookmark It

Hide Sites

No related posts.

Building high-loaded portal - InnoDB vs MyISAM

Konstantin Mirin — Wed, 20 May 2009 07:00:55 +0000

Preface

In November 2008 I’ve got a nice project, that resulted in a complex search engine, that specializes in clothing. I can’t give the link now, but will do when site officially launches. Key features of such service are:

Large number of users, which search with various parameters, rate items, leave comments, create articles etc.
Large database, that is updated frequently

Sure, the site is running on a dedicated server, sure I use caching, but optimal DB is a key to success.

MyISAM or InnoDB?

Since we need reliability, I created different tests, search the internet etc. My main question was - what to use MyISAM or InnoDB? I found the post on the MySQL Perfomance Blog (also this and this) and came to the conclusion, that when SELECT’ing, InnoDB is definitely faster (or, at least, is not slower). In addition, it provides constraints mechanism and allows transactions. The only thing it doesn’t have is FULLTEXT search. One more disadvantage is slower inserts. However, 80% of DB usage in this project are SELECT queries without FULLTEXT. For the fulltext search I created MyISAM table with fields I need and it works fine. The project is finished, but there will be phase 2 and I’m thinking of introducing Sphinx there. Anybody has experience with it?
So I came up with InnoDB storage engine.

Optimizing structure

Next important step is DB structure. I’ll give some background info about the project so you could better understand what I’m talking about. The site collects info from different UK shops. Then users can rate them, add some tags, create articles (called “looks”) and link that articles to the products they’re writing about. And the same (tags, comments, rating) applies to the looks. Here we come across with an interesting question. We can create structure of different types for this:

Create 2 separate cross-tables for linking Rating to Look or Product
Create one cross-table and add additional field “type” there to differentiate between Product and Look entities

See both variants in the following images:

Normalized variant

Denormalized version

Initially I thought that the second variant would perform better, but after creating and running tests, I saw, that:

If there are 0-2 ratings linked to entity, then normalized variant is better
If there are 3-5 ratings linked to entity, then denormalized variant is slightly (less than 1%) better
If there are 6-8 ratings linked to the entity, the normalized variant wins again

I did these tests for different situations similar to this one, in each test I generated random records and randomly linked them with each other. Number of record in Product, Look tables was 10000, in Rating - 20000. Number of records in cross tables varies because the linkings are random.
So I came up with normalizing everything like it should be done according to the DB theory.

The only exclusion of this rule is the following situation. In this project you can add different alternatives to the product. Each alternative is “better” or “cheaper” or “different” etc. And since the only case when these alternatives are pulled from DB is when user views the product, they are pulled altogether, so it is better to keep them in the same table.

Conclusion

InnoDB turns out to behave better under the high load, it supports transactions and maintains constraints. All that helps to develop better and never leave orphan records.
Using normalization techniques you usually get better performance
Create tests and test everything if you are going to do something great

Eurovision 2009 - My Impressions

Konstantin Mirin — Sun, 17 May 2009 10:18:55 +0000

I’m not a music fan, I don’t usually watch this, but yesterday my girlfriend had birthday and she likes such things, so we were watching Eurovision together from beginning to the end. And I don’t regret it!
As for me, the show Russians prepared, was not excellent, it was mega-excellent(I’d even say supercalifragilisticexpialidocious;)) - the show, the scene, all effects were so cool! I can’t compare with previous ones, but my girl says Eurovision never had such beautiful show. Russians showed they can do things good if they want to, which I’m very proud of I really liked the acrobatics and the girls in the shallow water above. Dima Bilan’s initial song and his show was somewhat philosophical, at least it seemed to me so.

So, the songs. What I really liked about all the songs (except Ukraine) is that every song reflected the style of the country in some way. It’s really nice to see singers from different countries, each country has it’s own ethnic style, that is reflected in the show and the song. The only country that didn’t fit this tendency was Ukraine, I didn’t like it at all, although I live here In my opinion, Eurovison is mainly the song contest, not the strip show and acrobatics. Yes, it was nice, flashing lights, the tricks, that guys in the Roman legionnaire’s costumes… But I didn’t see anything Ukrainian (except the flag) there! By the way, I didn’t like Russian Anastasia also - she wasn’t singing, she was shouting and Russians could make it more impressive (they can - you saw the show!)
Final results actually reflected my impressions, Norway was really the best. However, I also liked:

Albania - The girl was nice and the song also seemed good to me
Island - Nice girl, nice song, but my girl disagrees it was so good to get 2nd place
Turkey - Nice dance, nice girls, good style
Greece - VERY nice dance and song
Armenia - really, really good style and song
Azerbaijan - I like Arash, I liked the style, the song, the dance and the overall show
UK - Great voice, nice song, but I didn’t like her dress.

(sorry, didn’t find yesterday’s videos for UK and Armenia :()
And I really liked Alexander Rybak. The Norway style, great acrobatics, really good song and an interesting mix of Slavic music with some Norway motives resulted in excellent impressions. When I just saw him on the scene, I thought - what that guy is doing there? But when he started singing, I immediately changed my mind - he was doing really good! I entirely agree, that he got his 1st place because he deserves it. However, he got 387 points and the 2nd place - around 200. I don’t think he was twice as good as Iceland

Anyway, I’m thankful to my girl who made me see this great show, I liked it all.

And what did you like there?

Bookmark It

Hide Sites

No related posts.

OOP in jQuery

Konstantin Mirin — Thu, 30 Apr 2009 20:19:51 +0000

Intro

OOP is a great concept, it simplifies the programmer’s life, especially in the field of interface development. Nearly all modern web-interfaces use JS in some way - for field highlighting, validation, help etc. It’s OK when there are such simple things.
And now imagine, that we have a set of dialogue windows (HTML+CSS) for adding a comment, rating, sending to the friend. Each of these boxes has a number of functions - check if user is logged in(if not - show login form), send AJAX request, process response, show error/success messages, position the box on the page etc.

The problem

First idea I had about them is to use simple inheritance, create Box class, derive CommentBox, RatingBox and other classes, but it turned out, that jQuery (I used it there, because system is built using Yii framework, which uses jQuery for client-side coding) doesn’t support extending classes like, for example, ExtJS or YUI. Yes, it has $.extend() function, but it just copies the object, not actually extends class. Why it is not the same? Let’s look here:

//namespace
var Popups = {};
//class constructor
Popups.Box = function()
{
//initialization here
}
Popups.Box.prototype = {
container:$(‘
’),
content:null,
create:function()
{
//dom elements generation here
},
showHide:function()
{
//some logic here
}
//other methods and properties go here
}

Normally (in ExtJS, for example) when writing:

Popups.CommentBox = $.extend(true,{}, Popups.Box, {
create:function()
{
alert(‘overriden!’);
}
})

I expect, that if I do:

var c = new CommentBox();
c.create();

I should get an alert window. However, this is not true for jQuery. It just copies everything and we get some messed things. So I gave this up and followed another pattern.

The solution

Box object became container for all boxes. I took care of messaging, determining if user is logged, and all other routines. It also serves as a factory, because all clicking icons go to the showHide method and it has to determine, which box to show and create this inner object.
And this inner object takes care of the box-specific logic. If it needs some common info, for example, the ID of the product it is called for, it calls the Box method (see LowCoupling GRASP principle here :)). So in the Box I have:

getBoxType:function()
{
//determine the box we’re dealing with by the link class
var tg = $(this.event.target);
if (tg.hasClass(‘f’))
return ‘favourite’;
else if (tg.hasClass(‘t’))
return ‘friend’;
else if (tg.hasClass(‘ra’))
return ‘rate’;
else if (tg.hasClass(‘c’))
return ‘comment’;
else if (tg.hasClass(‘r’))
return ‘rss’;
else if (tg.hasClass(‘add’))
return ‘addTag’;
else if (tg.hasClass(‘b’))
return ‘bookmark’;
return ”;
},
getInnerObj:function()
{
if (!us.logged)//if user is not logged, we show him the login box instead of anything else
{
return new Popups.LoginObject(this);
}
var cls;
this.type = this.getBoxType();
switch (this.type)
{
case ‘favourite’:
cls = this.objects[this.type] = new Popups.FavouriteObject(this);
break;
case ‘friend’:
cls = this.objects[this.type] = new Popups.FriendObject(this);
break;
case ‘rate’:
cls = this.objects[this.type] = new Popups.RateObject(this);
break;
case ‘comment’:
cls = this.objects[this.type] = new Popups.CommentObject(this);
break;
case ‘rss’:
cls = this.objects[this.type] = new Popups.RssObject(this);
break;
case ‘bookmark’:
cls = this.objects[this.type] = new Popups.BookmarkObject(this);
break;
default:
cls = this.objects[this.type] = null;
}
return cls;
},
show:function()
{
//some stuff
var obj = this.getInnerObj();
if (typeof obj == ‘object’ && obj != null)
{
this.content.append(obj.getContents());
}
},

So instead of inheritance I implemented aggregation (Box aggregates CommmentObject, Favourite object etc).

Everything goes well until you want to to attach some method of current object as a handler to some event. For example:

Popups.Box.prototype = {
//properties here
productID:0,
create:function()
{
this.form.submit(this.onSubmit);
productID = this.parentBox.getItemID();
},
onSubmit:function()
{
alert(this.productID);
}
//other methods follow
}

Right? Wrong! Because when submit event occurs, jQuery will call the onSubmit method, but this will refer to the form, not to the Box object! However, it is logical to put processing of the form into the same object. In ExtJS and YUI you can pass the scope parameter for every callback function, so you can control the “this” variable in the callback call. jQuery doesn’t allow this. I used the following workaround:

Popups.Box.prototype = {
//properties here
productID:0,
create:function()
{
var ctx = this;
this.form.submit(function(event){
ctx.onSubmit(event);
});
productID = this.parentBox.getItemID();
},
onSubmit:function(event)
{
alert(this.productID);
}
//other methods follow
}

If you need the object, that triggered an event, just pass “this” there:

create:function()
{
var ctx = this;
this.form.submit(function(event){
ctx.onSubmit(this, event);
});
productID = this.parentBox.getItemID();
},
onSubmit:function(form, event)
alert(this.productID);
}

Having these 2 tricks you can use OOP approach to designing reusable interface components in a handy modern way.

Back to inheritance

Since I discovered the problem with inheritance, I want to develop a plugin, that fixes this, that will provide nice class inheritance model to take jQuery a step ahead. I was going to digg the ExtJS’s Ext.extend() code and find out how this is done correctly, but while preparing an article, I found this material, which is actually a guide for creation of such plugin: http://phrogz.net/JS/Classes/OOPinJS2.html. Unfortunately, I don’t have time for this now, but I plan to do this in the nearest future. If someone does this earlier, please let me know

Creator and Information Expert principles - GRASP (Design patterns series)

Konstantin Mirin — Sat, 28 Mar 2009 13:37:32 +0000

Preface

This is an introductory post to the series, where I’ll cover all design patterns, their usage, diagrams. Besides patterns, I am going to guide you through the principles of the high-quality application design. We’ll start from these principles (GRASP), and then advance to patterns, see how they use these principles and develop several systems (architecture only). The whole series will take 10-15 posts. However, I don’t have exact plan yet So, let’s go!

So what we’re talking about?

Actually, design pattern is no more, than a proven solution to some common problem. When saying “problem” I mean things you face with when developing the application architecture. These solutions are intended to make you application better - more extensible, flexible, simple.

Common examples of design problems (Let’s agree that in this series “design” means application, not graphics or DB design) are:

Organizing access to the shared resource. This can be application object, DB abstraction object, Session object or other similar things. Main problem is that they should be created only once and accessed in every method easily. Singleton pattern solves this problem.
Creating the easily extensible application. For example, code shopping cart in the way, that allows to add new payment or taxation modules easily. Adapter pattern saves us here.
Providing the simple interface for accessing features of the application or application module, hiding all the underlying classes/functions from the user. Façade pattern does this.
Separating data from data processing and from presentation. You’ve definitely heard about MVC (Model-View-Controller) - that’s also a pattern!

So patterns are everywhere in OOP and knowing them is essential for high-quality and extensible application design.

The basics

However, patterns themselves are implementation of the 9 basic principles (GPASP - General Responsibility Assignment Software Principles).

GRASP and patterns

All OOP design is about creating real-world abstractions (classes), design methods (responsibilities) and their interaction. The key thing to good architecture is assigning responsibilities to the classes correctly. GRASP deals exclusively with this problem. We’ll go through all of them:

Creator
Information Expert
Low Coupling
High Cohesion
Controller
Polymorphysm
Pure Fabrication
Indirection
Protected Variations

Today we’ll start from the first principle.

Creator

The most common problem in OO design is “Who should create object X?” This principle states, that object A should create object B if:

A contains or aggregates B (e.g. Object User should initialize object Address)
A records B (saves to DB or file)
A closely uses B
A has the initialization data that should be passed to B when object is created

If any of these conditions are true, then A should create B. Now let’s demonstrate how these principles work in real examples.

A contains or aggregates B

Consider we have table. Common table consists of desk and legs.

Common table

If we use object decomposition to program the table, we’ll get 3 classes:

Table (blue box on image):
- Desk (light grey)
- Leg (wooden)

Object decomposition basically means breaking some entity into parts and representing each part with a object. These parts can be decomposed further. For example, we can break Table into Desk and Leg. And then break Leg into Screw, Plank. In complex system there is a number of such levels.

If we start programming this, we can go in 2 ways. For example, we don’t want to use the Creator principle and will create Table class as follows:

class Table
{
protected $desk;//desk object
protected $legs;//array of legs
public function __construct(Desk $d, $l)
{
$this->desk = $dd;
$this->legs = $l;
}
}

Then Desk and Leg classes:

class Desk
{
protected $width;
protected $length;
protected $height;
public function __construct($w, $l, $h)
{
$this->width = $w;
$this->length = $l;
$this->height = $h;
}
}
class Leg
{
protected $width;
protected $length;
protected $height;
public function __construct($w, $l, $h)
{
$this->width = $w;
$this->length = $l;
$this->height = $h;
}
}

Yes, Desk and Leg classes are really the same cause they both are parallelepipeds. So we can create Parallelepiped class and extend both of them from it. We’ll do it later, now we’re talking about object creation. The above classes can be used in the following way:

$desk = new Desk(900,900,20);//90 cm width, 90 length (square) and 2cm height. A normal table for kitchen
$legs = array(
new Leg(40,40, 880),//4×4 cm square and 88cm height. 88cm leg + 2 cm desk = 90cm full height
new Leg(40,40, 880),
new Leg(40,40, 880),
new Leg(40,40, 880),
);
$table = new Table($desk, $legs);

Yes, the object is created, but large part of the creation logic is outside of the object. The class user (the programmer who is using this class) should know the internal structure of objects to create the whole object. This approach is inefficient when we deal with large application; on the other side, such solution can’t be reused without changing the code. And it violates the first condition of using the Creator principle. Either Desk and Leg are parts of the Table object, so it should take care of their instantiation. So let’s learn how to solve such task correctly:
We’ll create constructor for Table class with parameters:

Width - width of the table
Length - length of the table
Height - height of the table
DeskHeight - height of the desk
LegSection - (assume we want square legs)

So the end-user of the class should specify only these 5 parameters, we don’t ask him to create parts of our object. OK, let’s code it:

class Table
{
protected $desk;
protected $legs;
public function __construct($width, $length, $height, $deskHeight, $legSection)
{
$this->desk = new Desk($width, $length, $deskHeight);
for ($i = 0; $i < 4; $i++)
{
$this->legs[$i] = new Leg($legSection, $legSection, $height - $deskHeight);
}
}
}

Desk and Leg classes remain the same. So here we followed the first condition (actually, the most important) and got nice architecture.

A records B

After detailed discussion of the first condition, this should be quite evident. Usually if some object saves another one, it is his part. For example, we have some system with users. Each user may have several addresses. So Address will be the part of User (it is quite logical to design so), and User object will save all addresses in one field (Using serialization). And when loading, it will load the address info from DB and create Address objects. This is example of both 2, 3 and 4 item. The User object saves Address. User object has initialization info for Address and user object closely uses Address. By the way, first item is also here, Address is part of User object.
As you see, all these conditions often go together.
I think, that the final 2 items should be evident.

Further development

Tasks for improvement your skills:

Extend both Leg and Desk from the Parallelipiped class
Implement getHeight() method for Table, Desk and Leg. Hint: In Leg and Desk classes it should simply return height. In Table class it should return sum of leg height and Desk height
Implement setHeight method for all classes. Hint: when setting height for table, you should actually increment Leg’s height
Implement Saving and loading from file or DB. Hint: actually you have to save only 5 parameters - those passed to table constructor. So when saving and loading Table class with interact with Desk and Leg classes. And when loading - will create these classes.

Information Expert

The last condition of applying the Creator principle shows, that object A should have all info about B to create it. In other words, A should be Expert in info about B. Information Expert principle helps us assigning all responsibilities in the project. Real-world application usually holds a number of classes, that perform hundreds and thousands of actions, so it is essential to assign responsibilities correctly. The principle itself is fairly simple - you should give the responsibilities to the object it has information for. For example, assigning Table class responsibility to create Desk is correct because it has info about it. Assigning User responsibility to save data to DB is also correct, because User holds data about user and can perform this task without any other objects (assuming it deals with DB without DB abstraction layer). And assigning User to save information about Group is incorrect, because User will have to “ask” Group about it’s properties - ID, name, access rights etc. in order to save it correctly. In this case it’s much better to assign Group responsibility to save itself. And Use can call save() method on Group object.

In the next post I’ll cover Low Coupling and High Cohesion principles and illustrate it with practical examples. Subscribe to RSS not to miss it!
Feel free to ask any questions in comments or by email: konstantin.mirin[at]programmersnotes.info

Trick with php switch()

Konstantin Mirin — Fri, 06 Mar 2009 10:41:39 +0000

I bet you didn’t know, that switch can be used to answer the question: “Which of the N following statements is true?” Here is how this can be done:

$a = 1;
$b = 15;
$c = 20;
switch (true)
{
case $a > $b:
{
echo ‘$a > $b’;
break;
}
case ($a > $b) && ($c > $a):
{
echo ‘($a > $b) && ($c > $a); $c is the biggest, $b is the lowest’;
break;
}
case ($c > $b) && ($c > $a):
{
echo ‘$c is the biggest again!’;
break;
}
default:
{
echo ’some default value’;
break;
}
}
?>

And little description - you can write true or false in switch(), this will cycle through the case (statement) and execute the commands, that goes below it. In our case, only third statement is true - it prints out, that $c is the biggest.
You shouldn’t use it instead of if or if…elseif…else every time, but if you know this trick, you’ll see when this can be applied.

Bookmark It

Hide Sites

Nice trick with FOR loop

Return several values from PHP function

Konstantin Mirin — Fri, 06 Mar 2009 07:38:40 +0000

As you know, PHP can return only one value from the function. However, there is a simple workaround - we return an indexed array from function and immediately split it into variables using list():

function ret()
{
//something useful here
return array($varA, $varB);
}
list($a, $b) = ret();//we’ll have $varA in $a and $varB in $b after this

Bookmark It

Hide Sites

Grabbing password-protected content with cURL

Speeding up Yii or why should you use DB sessions

Konstantin Mirin — Thu, 05 Mar 2009 04:02:35 +0000

Yesterday I’ve read a post on The Developer’s Day blog. Then tested this thing in Yii. There is a jQuery in my application, so I created test controller and test action, that only outputted “Hello, world” and called it from the firebug console like this (I have url rewrite set up):

$.ajax({url:‘/test/test.html’});
$.ajax({url:‘/test/test.html’});
$.ajax({url:‘/test/test.html’});
$.ajax({url:‘/test/test.html’});
$.ajax({url:‘/test/test.html’});
$.ajax({url:‘/test/test.html’});

Yes, really it matters. Each call starts after the previous one ends and it takes long to finish them all. But each web application handles the concurrent requests by nature. So I started a forum thread to clarify this. And sebas recommended me to use CDbHttpSession instead of standard one. Yes, I knew, that storing sessions in DB speeds up the application, but I thought that is because of more effective search. And it turns out, that besides more effective search it gives one more DB benefit - concurrent access to the session storage. That’s actually the reason #1 why we usually use databases instead of files
So here is a quick trick, that solves the problem:

// application components
‘components’=>array(
……….
’session’ => array(
‘class’ => ’system.web.CDbHttpSession’,
‘connectionID’ => ‘db’,
),
),

It creates a new table YiiSession and uses it for session data. This time the JS test above runs much faster. Try it yourself!

Bookmark It

Hide Sites

Programmer's Notes

Low Coupling and High Cohesion - GRASP (Design patterns series)

Grabbing password-protected content with cURL

Quick Note on OOP

Further reading

NetBeans 6.5 for PHP - My Experience

Building high-loaded portal - InnoDB vs MyISAM

Further reading

Eurovision 2009 - My Impressions

OOP in jQuery

Creator and Information Expert principles - GRASP (Design patterns series)

So what we’re talking about?

Further development

Further reading

Trick with php switch()

Return several values from PHP function

Speeding up Yii or why should you use DB sessions