WordPress Application Design

Taking Advantage of the WordPress Framework

Architetto_--_DiagrammaIn this, the fourth article of our series on WordPress as an Application  Framework, we look at designing your application so as to take full advantage of what WordPress has to offer.

First  – Don’t Modify the Core Code: Design your application as one or more plugins and/or themes. This gives you several potential advantages:

Update Protection: When vulnerabilities or problems are found in the WordPress core, you can be certain that they will be updated quickly. If you have modified the core WordPress code, you will lose that advantage.

Productivity: By defining your app as [“WordPress Core” + Existing Plugins + New Plugins + a Theme], you gain two productivity advantages; 1) you have the opportunity to reuse open source code and 2) the advantage of creating only the new code your app needs.

Quality: WordPress has some well defined coding standards, integration rules and implementation techniques for both themes and plugins. These standards make it easier for community developed plugins and themes to interact. Even though you are creating custom code for your own app, following these standards will help you design quality into your app from the beginning.

Staffing: Because WordPress is the most popular web development platform; there are a large number of developers that understand it. “WordPress plugin development” and “WordPress theme creation” is a common skill among web site programmers and designers.

If you believe that you cannot create your app without modifying the core WordPress code, you may want to reexamine the idea that WordPress is the best framework for your application.

Second – Design Fundamentals: Just using the WordPress framework does not guarantee a high quality software design.  You are still responsible for making good software engineering decisions.   The Model/View/Controller design pattern is a proven method for designing Web applications and is well supported within the WordPress framework.

The Four Rs of Software Design

When engineering any application, it’s important to keep in mind “The Four Rs“: Responsibilities, Resources, Representations and Relationships. These software design concepts provide a solid philosophical underpinning when making design decisions.

Responsibilities: All you need to do is what you need to do.  This concept drives what any given software component should or should not do.
Resources:  Logically structured data objects used by the algorithms within your application.
Representation:  A specific implementation of a particular resource.
Relationships: How and why your resources are arranged, connected and accessed.

 

Model/View/Controller with REST, AJAX and jQuery

MVC1The Model/View/Controller design pattern, also called MVC, is a common way to design Web applications.  The pattern allows for clean separation of responsibilities between the browser and the various servers. It is a form of responsibility driven design. Each component in the pattern has specific responsibilities and shares specific information with the other components. The MVC pattern clearly delineates types of responsibilities and information to be shared.

The Model part of the MVC pattern consists primarily of the core algorithms and data structures that define the actual web application. These usually refer to the database(s) and application specific classes that are stored and executed on the back end (server side). The Model is responsible for “What the Application Is.”

The View and Controller are the data structures and algorithms presented and executed by the web browser. They consist of the presentation code (HTML and CSS) and the operational code (JavaScript responding to events).

The “View” is responsible for “What the User Sees”. It acts as a window into the model.

The “Controller” is responsible for “What the User Does”. The controller allows the user to adjust his or her view, or make changes to the data within the model.

Implementing the MVC Pattern in WordPress
Designing the Model
The Model is responsible for What the Application Is. It can be seen as the collection and organization of Resources.

Any given application is a collection and arrangements algorithms and data structures.   Resources are the various structured data objects used by the algorithms within your application. They can be anything from a single image file to a row in the database table.

Model Building: The WordPress framework provides several constructs for application model building:

  • Plugins – A WordPress Plugin is a set of one or more functions, written in PHP, that adds a specific set of features (i.e. the Model) to the WordPress application. It can be seamlessly integrated with the application using access points and methods provided by the WordPress Plugin Application Program Interface (API).
  • Database and a Facade – WordPress provides a very useful, simplified method for accessing the WordPress database.  Additionally, the underlying data model provides a solid base to build from.
  • Custom Post Types and Taxonomies – Custom post types allow you to create nearly any type of structured content for display in your web application without modifying or extending the underlying database structures. Custom Taxonomies allow you to categorize this content in extremely flexible ways.

WordPress’s core data model defines the fundamental Relationships within the WordPress application framework.  It is designed to be extended. Jake Goldman’s excellent slideshare gives you a good look at the underlying WordPress data model.

(An interesting and unique plugin for the database part of the Model component of the MVC design pattern is ABASE, a database access plugin.)

All the data structures you need for your model may not be directly under your application’s control.  You may, for example, want to bring in profile information from a social network, or in the case of AreteX bring in catalog or sales data.   When one application presents a data structure to another application, it is called Representation.

REST  – REST stands for “Representational State Transfer” it is a style of network programming that uses web standards like HTTP, URL, XML, JSON etc. to  allow for the transfer and manipulation of structured data (Resources).  WordPress provides an HTTP abstraction layer that you can use to easily allow your web app to access RESTful web services.

 As the Model defines the actual web application, the View and Controller present and operate on the web application.

The Document Object Model
The DOM (Document Object Model) defines the logical structure of a web page within the browser. The View and Controller operate on the DOM.

 

Creating the View
The View is responsible for the presentation of Resources.

The View is responsible for showing resources to the user. In Web Applications, this is done with HTML and CSS. In WordPress applications, the presentation of resources via HTML and CSS is primarily the responsibility of a theme. WordPress Themes are files that work together to create the design and functionality of a WordPress based application.  Your theme will be the driving force behind your application.  An inexperienced developer might be tempted to build the entire app within the theme,  However, in the “responsibility driven” design philosophy you should limit the theme-dependent functionality of your app to presentation.

For productivity’s sake start with a stock theme (I like Twenty-Twelve myself) and build your app strictly as a set of plugins and filters. Other possibilities include the use of “starter themes”, such as Underscores, to build from.

Building the Controller
The Controller is responsible for “What the User Does”.

jQuery = In modern Web Applications, jQuery and jQuery UI are the de facto standards for user controls. These functions allow the user to interact with the what they see in their browser by manipulating the DOM.  WordPress includes the built in ability to use (via the wp_enqueue_script function)  the latest versions of both jQuery and jQuery UI as well as several other very useful JavaScript libraries.

AJAX – WordPress also provides a standard AJAX interface. Like REST, AJAX is a method built on web standards.  It allows you to communicate with the web server without reloading an entire page.  WordPress provides a standard, well defined, well documented and well tested AJAX mechanism to connect your “Controller” to your “Model“.

Summary

The WordPress framework provides a well tested, well designed and well documented set of tools and a solid underlying data model to allow you significant productivity and quality advantages.  It is well suited to the Model/View/Controller web application design pattern. The built in support for REST, AJAX and jQuery provide you with solid fundamental building blocks necessary for building modern web applications.

In the next (and final) article of this series, we will take a strategic look at designing your app for monetization.

Leave A Comment?

You must be logged in to post a comment.