Jump to content

Website Architecture - Part 3 : Refactoring

Improving the quality of code

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Website Architecture - Part 3 : Refactoring Improving the quality of code Rate Topic: ***** 1 Votes

#1 User is offline   Catalyst 

  • Codesmith
  • Group: Administrators
  • Posts: 1,049
  • Joined: 04-April 06
  • Gender:Male
  • Location:San Diego

Posted 26 January 2007 - 05:13 AM

Sometimes having code that works isn't enough for a healthy project. The process of taking working code and rewriting it is known as refactoring. Refactoring is something that can be done while writing original code, or it can be applied to old code or projects you take over from another developer.

One large benefit of refactoring is that it makes code more readable by humans. Machines don't care if code is ugly so long as it works, but they only have to execute it. Programmers have to review, modify, append, and delete code and easy to understand code means less problems and money. Comments are often used by coders to try to solve this problem but with refactoring comments become almost unnecessary (and often avoided).

A second benefit to refactoring is improved code maintenance. By taking large complex pieces of code and breaking them into many small pieces it becomes much easier to make changes that are easy to test and don't run the risk of breaking other parts of your app.

Refactoring also helps with things like code reuse, changing inline code to object oriented code, and implementing design patterns (the topic of the next article). Refactoring can be applied regardless of language. Changing a table based HTML site to a CSS XHTML site would even be an example of refactoring. The visual result of both is the same, but the CSS version has much easier to read and modify code.

There's a fantastic book on refactoring by Martin Fowler called Refactoring: Improving the Design of Existing Code If you want to write better code it's a must read book. He also has a website with a catalog of quite a few refactorings.

So on to a simple example:

// calculate the area of a ring with outer radius r and inner radius w

function float main(float r, float w) {

	float x;
	float y;
	
	x = 3.14159 * r * r;

	y = 3.14159 * w * w;

	float z;
	z = x - y;

	return z;
}


As you can see the code would work fine, but it's both difficult to read and has some redundancy. There are many ways to refactor this, but here's an example of what I might do:

function float AreaOfRing(float outerRadius, float innerRadius) {
	
	return AreaOfCirle(outerRadius) - AreaOfCircle(innerRadius);
	
}

function float AreaOfCircle(float radius) {
	float PI = 3.14159;
	return PI * radius * radius;
}


Hopefully you find that the refactored code is much easier to read. Plus we can use the refactored code in more ways than the original:

function float VolumeOfCylinder(float radius, float height) {
	
	return AreaOfCirle(radius) * height;

}


This was just a basic example of a simple refactoring. You can imagine the kind of impact this technique can have on a large complex application.

There are a variety of tools out that will help you refactor your code, and there's even some methods for determining whether code needs refactored such as measuring the cyclomatic complexity of a function. With just a little effort you'll be writing cleaner code with less bugs in the same amount of time you used to spend creating spaghetti monsters.
0

#2 User is offline   Karl Buckland 

  • A.K.A. Sirkent
  • Group: Administrators
  • Posts: 2,145
  • Joined: 04-April 06
  • Gender:Male
  • Location:Kent, UK

Posted 26 January 2007 - 05:25 AM

This is some more excellent advice by Catalyst.

Having descriptive variable names, and naming functions based on the context in which they will be used is just the beginning when it comes to refactoring, but it does make much easier code.

The only thing I'd be careful with when it comes to lack of comments, is using that as an excuse not to write any comments, or very few. There's only so much refactoring can give you, and sections of complicated logic, although relatively simple when taken in small chunks, still need comments when used together. But this does mean that your commenting style can change to describe larger sections of code.
QUOTE(benbramz @ Aug 17 2007, 07:44 AM) Ive noticed that quite a few people are now adding quotes from the board into their signature. I think its started an new web-radiance craze.. :P
0

#3 User is offline   Catalyst 

  • Codesmith
  • Group: Administrators
  • Posts: 1,049
  • Joined: 04-April 06
  • Gender:Male
  • Location:San Diego

Posted 26 January 2007 - 05:32 AM

Exactly, comment use can be moved from a line by line explanation of your code to more general reminders of what a block is doing.

I think that removing the need for so much commenting makes you more likely to comment when it's needed; it becomes less of a chore.
0

#4 User is offline   Spode 

  • W.R. Private
  • Group: Members
  • Posts: 28
  • Joined: 13-November 06

Posted 26 January 2007 - 06:49 AM

Having to type in variable names all the time that are long, or use capitalisation, can be a pain and lead to coding errors. So something shorter like "area" seems convenient at the time. But then you can always do a replace all once you've finished, right?

On something as simple as that, sure it's great. But there are times, with a complex section - that I just need to know the logic behind what is going on - not what's actually going on. And in those cases, a short paragraph to remind me at a later date is really useful.

What would be nice, would be the option to "turn off" comments while I'm coding. I'm surprised Dreamweaver hasn't added that in. Because it can get a bit messy if you overkill on the old comments.
0

#5 User is offline   Karl Buckland 

  • A.K.A. Sirkent
  • Group: Administrators
  • Posts: 2,145
  • Joined: 04-April 06
  • Gender:Male
  • Location:Kent, UK

Posted 26 January 2007 - 12:06 PM

View PostSpode, on Jan 26 2007, 11:49 AM, said:

Having to type in variable names all the time that are long, or use capitalisation, can be a pain and lead to coding errors. So something shorter like "area" seems convenient at the time. But then you can always do a replace all once you've finished, right?
I don't find that actually typing code takes very long. Testing, debugging and fixing problems takes far longer, so long variable names should save you time in the long run. Besides, most IDEs will autocomplete long variable/function names for you.

View PostSpode, on Jan 26 2007, 11:49 AM, said:

What would be nice, would be the option to "turn off" comments while I'm coding. I'm surprised Dreamweaver hasn't added that in. Because it can get a bit messy if you overkill on the old comments.
Many IDEs automatically 'fold' comments, enabling you to view them in their entireity. Eclipse does this for each language you can code in it which includes Java, PHP, C, C++, Python, etc. I would expect that Visual Studio also has this feature.
QUOTE(benbramz @ Aug 17 2007, 07:44 AM) Ive noticed that quite a few people are now adding quotes from the board into their signature. I think its started an new web-radiance craze.. :P
0

#6 User is offline   Catalyst 

  • Codesmith
  • Group: Administrators
  • Posts: 1,049
  • Joined: 04-April 06
  • Gender:Male
  • Location:San Diego

Posted 26 January 2007 - 03:46 PM

One of the things to get used to with refactoring is that what might at first seem like more work (and a lot of refactorings take a bit extra work) in fact saves you a lot of effort in the long run.

Long variable names, as Sirkent mentions, are generally worth the effort. And if you're using a decent editor and language then both autocomplete, the compiler, and the debugger will make their use simple and safe.

Visual Studio does include comment (and any code block actually) folding.

And again I'm not saying you should not add comments such as a short paragraph reminder like you say, but with refactoring you don't need to add comments to the degree you normally would (individual lines for example).
0

#7 User is offline   Catalyst 

  • Codesmith
  • Group: Administrators
  • Posts: 1,049
  • Joined: 04-April 06
  • Gender:Male
  • Location:San Diego

Posted 28 July 2007 - 10:56 PM

Since I'm taking a few days off from work to recover from a cold I thought I'd get back to my articles of layered architecture. Looking back over the ones so far I remembered that just this week I came across a good example of the need for refactoring.

I had to go into some code I'd written back in classic ASP, which I'm no longer active in and it's slowly starting to fade, plus this code in several years old.

Here's the block I was going to have to modify

function vm(v)
	vm = "<span class=""g"">"
	for i=1 to 5
		c = 128+i
		if i=v then c=139+i
		vm = vm & "&#" & c & ";"
	next
	vm = vm & "</span>"
end function

	function rc()
		Randomize
		r = Int(10 * Rnd)
		rc = chr(97+r)
	end function
	
	
	function ntc(sn)
		sn = cstr(sn+84329)
		for i = 1 to len(sn)
			ntc = ntc & rc() & chr(97 + mid(sn,i,1))
		next
	end function


Obviously at the time those one, two, and three letter variable names meant something, and I was happy I was saving some typing and making my code smaller but you can see that the code makes very little sense even though it worked fine. I could have heavily commented it, but simple using better function and variable names would have made everything obvious.
0

#8 User is offline   EncoderDecoder 

  • W.R. Sergeant
  • Group: Members
  • Posts: 260
  • Joined: 01-March 11
  • Gender:Female
  • Location:Philippines

Posted 29 May 2011 - 08:16 AM

wow, this is very informative.. I am so happy to have stumbled upon such a good thread.. keep it up and good work!
0

#9 User is offline   webdesigner12345 

  • W.R. Private
  • Group: Members
  • Posts: 16
  • Joined: 27-September 11

Posted 27 September 2011 - 10:53 AM

If you are interesting in learning how to do web programming, we recommend you visit the Programmer Philippines.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users