OOP Building blocks and Web Development
My reading this week includes the book Design Patterns For Dummies which is an overview of the design patterns used by programmers to solve real world problems. Design patterns allow the programmers to utilize pre-exisiting classes/methods/etc… to achieve the desired results. In the last 50+ years of programming, someone else has had a similar problem to yours and has likely published the best method for dealing with it. I am reading this book knowing I will one day have to do some real programming with PHP or Ruby so I wanted a baseline understanding of best practices.
As I read the first chapter which deals with OOP Building blocks I began to see some practices which are useful in standard web design as well. A quick Google found no articles merging these ideas so I had an inspiration for this posts. Since I am not a “Programmer” with formal training my applications of the OOP Building blocks may not fit the true definition of each component, but should at least be kept in the spirit of the functionality of each building block. The for basic building blocks and my interpretation of them for web developers is below.
1) Abstraction: “Abstraction isn’t a programming technique; in essence, it just means that you conceptualize a problem before applying OOP techniques. Abstraction is all about breaking your approach to a problem into natural segments.“
We developers use abstration by grouping elements of a web page in to page elements with specific Id or class tags. We separate content into natural groups such as headers, menus, data, footers, call outs, and other page elements. We often use wireframing or image slices to create the abstract groups that on their own have little meaning, but are reusable throughout the site. We think about the design and what elements create the final pages.
2) Encapsulation “hides the complexities inside objects and then creates a simple interface to let that object interact with the rest of your code.”
Web forms are my idea of encapsulation. Often the form interacts with a database or mail system, performs validation of input, or controls the future content the reader sees, all with minimal complexity for the user. We hide the complexities in our AJAX, PHP, or ASP code. We provide the user with a simple interface for filling out the info required to make a decision or to provide the required info to the user.
Navigation menus may also fit this block. We can offer simple links but behind the scenes there may be CSS and Javascript involved to display or not display submenus and to format the links current state.
3) Polymorphism: “the ability to write code that can work with different object types and decide on the actual object type at runtime….Polymorphic (which means many form) code works with any [object] without being rewritten.
“
This ones a little more difficult to grasp. My thoughts here lead to the use of multiple CSS style sheets that differ based on the user interface. We can create differing styles and layouts for differing browsers, handheld devices (phones, ipods, blackberries, PDAs), and Print. Depending how much code needs to be standard among all the various stylesheets, common elements can be placed in their own sheet and called as necessary. The content does not change, only its format based on the user interface. It is now common practice to offer web users differing formats based on preference or need. One user may need larger fonts on screen than another user so we build in this as an option. Again the content does not change, only the format which is controlled by the various CSS options utilized at runtine.
4) inheritance: “the process by which one class can inherit methods and properties from another.”
Browsers use inheritance for element properties. It is only when we conciously change an elements properties that we break inheritance. For example, we may set the pages main font to Arial 12px black. Everywhere standard text is used the font will render as we expect. But what if we create a class to change font-color to red? We use a span tag around the text we wish to highlight with red. The text still inherits the parent properties of Arial and 12px.
Inheritance causes problems when we are overly vigorous with padding and/or margins. Imagine we set a global padding for the paragraph tag at 5px. This will put 5 pixels of padding around any paragraph text. Now imagine we create a container class with 5 pixels of padding. Any paragraph within the container will now have 10pixels of padding. Now imagine adding a sub-container class that floats left with a padding of 5px. Now our paragraph is 15px from the left side. This may or may not be a desired result and will likely cause problems between various browsers.
Inheritance in our world is different but must be part of our overall design process.
These cornerstone concepts of Object Oriented Programming can also be seen in web development as we continually seek new ways to separate content from style. The tools we use allow us varying degrees of reusability, separation, and complexity. Sever-side vs Client-side apps will require the use of some OOP programming techniques so it is in our interest to have a baseline understanding of the concepts used by programmers. PHP Frameworks, ASP.NET, AJAX, and RUBY on Rails are current application tools we web developers are using to enter the world of OOP.