Our pursuit to deliver the best digital applications combined with our desire to minimize production costs for our clients has brought us to spend some time over the past few weeks looking at our workflow and design standards.Because we strive to deliver the best, we have to look at what the best are doing, and what should be avoided at all costs. Over the past year we have spent a significant amount of time in redesign and consultation with clients that were not happy with their current website. For most clients the graphical design, layout, and presentation were the biggest problems with their site. Looking a little deeper from a digital application standpoint revealed a lot more than design problems. Because every project we begin starts with a Sitemap of the clients current website when present, we get a general idea of what kind of planning strategy the previous developer had. Where the real surprise comes in is if you are dealing with a dynamic website that is using server side scripting, databases, or web services such as SOAP. A mess would be putting it lightly, and any small modification to a portion of the site would break the functionality of many components. We have learned a lot over the course of our travels, and we have just wrapped up a brand new frame work that is ready for deployment. Considerable time and research went into developing a framework that would meet every possible need our clients might have, and deliver that need with speed, accuracy, and security.

We are not here to throw a beat down on anyone's design methods, and that is definitely not what this article is about. We all learn from our mistakes, and a good old saying is “Nothing changes if nothing changes”. We started just like most, with a few HTML files containing links to each other, and BAM you have a website right? This may even be the ideal solution for some very small scale websites offering a few pages of information, but when your website starts to grow, and you or your client needs more, you may be saying something similar to the Apollo 13 crew on April 14th, 1970 with the infamous “Houston, we have a problem”.

Problems in Procedural Design

The problem with designing a website with a bunch of HTML pages thrown into a folder is that it doesn’t have any methodology behind it. There is no plan, no design for future expansion, and it can become a confusing mess after a while. One of the easiest ways to help organize your site is no different than organizing the files on your computer. Creating a well planned directory structure is definitely a step in the right direction. So we mentioned the word framework earlier. What the hell is a framework?

OOP Frameworks

A framework is a set of reusable libraries or classes for an application or system. There are frameworks for almost every developed computer language, and they allow us to spend more time producing results rather than writing thousands of lines of code. The best way to get out of the box here is to think of your website as a software application, instead of a book with pages. Engineers designing a software package do not through a bunch of files in a folder and expect it to run the micro-controller in your brand new Cadillac. They design, or use, an existing framework that is easily extended with new functionality, and highly readable by other engineers that may need to maintain the system.

When we talk about designing or implementing a framework to a system or application we need to talk about the difference between procedural programming and object oriented programming (OOP). We have discussed many of the disadvantages of procedural programming in the proceeding paragraphs, but to summarize – procedural programming groups tasks or procedures into interdependent code. Procedural programming has many problems including that if any part of code is changed it could spell disaster for the whole application because procedural programming has no concern for the larger application as a whole. Object-oriented programming is a different approach to programming, intended to solve some of the development and maintenance problems commonly associated with large procedural applications. OOP is designed to make complex applications more manageable by breaking them down into self-contained, interacting modules. True OOP design includes encapsulation, polymorphism, and inheritance, as well as the ability to create classes and objects. Big words may need definitions, so here they are:

Class

A self-contained description for a set of related services and data.

Object

An instance of a class.

Encapsulation

Hides the details of a function or class, making it easily usable in an application.

Polymorphism

Multiple objects exhibiting similar features in different ways.

Inheritance

Allow one class to adopt the method and property definitions of another.

Encapsulation

Hides the details of a function or class, making it easily usable in an application.

Polymorphism

Multiple objects exhibiting similar features in different ways.

Design Patterns

Takes an abstract description of a situation and organizes it into a way to handle it in OOP.

Design Patterns

The last definition, design patterns, deserves a little more discussion as it is where the thought process of how to build an effective framework is derived. When discussing design patterns, we should always mention the Gang of Four, comprised of Erich Gamma, Richard Helm, Ralph Johnson, and Jon Vlissides, who authored the reference book Design Patterns: Elements of Reusable Object Oriented Software in 1995. Some of the common design patterns are the Observer, Singleton, Decorator, and Model-View-Controller. We will focus mostly on the Model-View-Controller pattern as it encompasses several design patterns, and is a very commonly used pattern for multiple reasons which are out of the scope of this article.

Our New Framework

So with a little background out of the way, lets get right to it. We have developed a brand new framework that all of our new websites will be built on. Our framework is written in PHP, based on the Model-View-Controller (MVC) pattern, and allows easy extension and implementation into a variety of applications and websites. We believe highly in separating structure from presentation, and our framework is based on that. Other design considerations were the ability to encompass javascript based jQuery, AJAX, and JSON. We provided modularization of commonly requested tasks such as calendars, shopping carts, image manipulation, pagination, etc. All of our database interaction is provided by the model, presentation accomplished through the view, and binding of all services and applications through the controller. We included a large collection of security based operations to prevent XSS Cross Site Scripting Hacking and brute force attacks on log-in protected systems. Additionally, we added a compile time framework utilizing Ruby for dynamically creating all CSS files, allowing faster styling and easy design modifications.

Why Not Use PEAR or WordPress?

The PHP Extension and Application Repository (PEAR) is a framework and distribution system for reusable PHP components. PEAR is a really great open source framework, providing a lot of functionality and ways to interact with different web based services and applications. There is one major hang up with PEAR, and that is if you do not have complete control over your server, you are left dealing with the host to install PEAR extensions so that you can use them. Another drawback of PEAR is that you do run into situations where you need added functionality within a module or PEAR extension, and you can spend countless hours modifying a module that you shouldn’t be modifying.

WordPress is a premium blogging and news framework commonly used as a Content Management System (CMS). We love WordPress for blogging and news. However, designing a custom template for a client can be a real pain in the ass. The biggest problem with the WordPress platform is the plugin architecture. Plugins are submitted by kind developers who are usually not paid for their efforts in developing the module or plugin. This is great for the client who does not have to pay for some really great functionality on their website, but it comes back to haunt you when the plugin is not maintained or updated. Additionally, when you get 20 different plugins working together, many times they don't work, or they override the behavior of another plugin. We still love WordPress, and it is our preferred application framework for blogging and news, but we use it with caution and generally run it as a separate application on a sub-domain of the clients site.

Conclusions & Results for the Client

So what does this mean for the client, it means you get a website designed to the highest standards, which is what Byron Baker Design, LLC delivers. Your website can be easily extended, and can take advantage of any service or application programming interface (API) with ease. Furthermore, you get the comfort of knowing that if you move to a different developer in the future for any reason, you won’t have to pay for a complete redesign of the websites architecture. Byron Baker Design, LLC delivers exceptional digital applications, and we are continually updating and educating ourselves on how to make your next project the best around. Feel free to contact us for a proposal on your next project, or inquire about our consultation services if you need a little advice.