Clean code for WordPress

Clean code for WordPress plugin development Mike Toppa Philly WordCamp November 5, 2011

Mike Toppa
Director, Web Applications, University of Pennsylvania, School of Medicine Information Services
15 years of experience in web development, project management, and functional management
Universities: Georgetown, Stanford, Penn
Dot coms: E*Trade, Ask Jeeves
Start-ups: Finexa, Kai's Candy Co
WordPress development for non-profits

Shashin My plugin for displaying albums, photos, and videos from Picasa, Twitpic, and YouTube (and others coming soon)

I used the new version as a test case for applying clean code principles to WordPress plugins

What is clean code?

Clean code...
“does one thing well” - Bjarne Stroustrup
“reads like well written prose” - Grady Booch
“can be read and enhanced by a developer other than its original author” - Dave Thomas
“always looks like it was written by someone who cares” - Michael Feathers
“contains no duplication” - Ron Jeffries
“turns out to be pretty much what you expected” - Ward Cunningham
Quotes from “Clean Code” by Robert Martin

That sounds nice, but I have a deadline I don't have time for clean code!

Do you want your emergency room doctor to rush your surgery? Do you want your account to rush his work on your tax return? Analogy from “The Clean Coder”

The software craftsmanship movement

You are responsible for the quality of your code And to truly go fast, you have to go clean

The time spent reading code compared to writing code is 10:1

Clean, modular code is flexible code, and can adapt to changing requirements

Clean code can be understood and enhanced by others

Clean code for WordPress
Meaningful names
“A web of collaborating objects”
The single responsibility principle (SRP)
The dependency inversion principle (DIP)
Independent architecture
The facade pattern
Unit testing

Meaningful names

The name of a variable, function, or class should tell you why it exists, and what it does

If a name requires a comment, then the name does not reveal its intent

Not good $d; // elapsed time in days

Good $elapsedTimeInDays; $daysSinceCreation; $daysSinceModification;

Shashin example public function setNumericThumbnailSize($requestedSize = 'xsmall') { if (array_key_exists($requestedSize, $this->thumbnailSizesMap)) { $this->numericThumbnailSize = $this->thumbnailSizesMap[$requestedSize]; } elseif (is_numeric($requestedSize)) { $this->numericThumbnailSize = $requestedSize; } else { throw New Exception(__('invalid thumbnail size requested', 'shashin')); } return $this->numericThumbnailSize; }

The SOLID Principles
S ingle Responsibility (SRP)
O pen-Closed (OCP)
L iskov Substitution (LSP)
I nterface Segregation (ISP)
D ependency Inversion (DIP)

A web of collaborating objects
The SRP and DIP together drive a “composition” approach to OO design
From Growing Object Oriented Software, Guided by Tests :
"An object oriented system is a web of collaborating objects... The behavior of the system is an emergent property of the composition of the objects - the choice of objects and how they are connected... Thinking of a system in terms of its dynamic communication structure is a significant mental shift from the static classification that most of us learn when being introduced to objects."

From LosTechies.com

My Shashin plugin consists of 44 classes, each of which has a meaningful name, follows the SRP, and “does one thing” PicasaPhotoDisplayer SettingsMenu YouTubeSynchronizer Uninstall etc.

class ShashinInstall { // ... public function run() { $this->createAlbumTable(); $this->verifyAlbumTable(); $this->createPhotoTable(); $this->verifyPhotoTable(); $this->updateSettings(); return true; } // ... } Shashin example

Shashin's capabilities are shaped by how these objects are wired together, through implementation of the DIP

From LosTechies.com

Naïve model of a button and lamp class Button { private $lamp; public function __construct(Lamp $lamp) { $this->lamp = $lamp; } public function poll() { if (/* some condition */) { $this->lamp->turnOn(); } } } Example from “Agile Software Development” Button + poll() Lamp + turnOn() + turnOff()

Dependency inversion applied This is the Abstract Server pattern Button + poll() <<interface>> SwitchableDevice + turnOn() + turnOff() Lamp

class Lamp implements SwitchableDevice { public function turnOn() { // code } public function turnOff() { // code } } class Button { private $switchableDevice; public function __construct(SwitchableDevice $switchableDevice) { $this->switchableDevice = $switchableDevice; } public function poll() { if (/* some condition */) { $this->switchableDevice->turnOn(); } } }

Independent Architecture

“Software architectures are structures that support the use cases of the system... Frameworks are tools to be used, not architectures to be conformed to” - Bob Martin http://blog.8thlight.com/uncle-bob/2011/09/30/Screaming-Architecture.html

In my plugins, WordPress custom functions are moved behind a “facade”

Facade pattern for my plugins Shashin Functions facade interface Some other facade implementation WordPress facade implementation Yet another facade implementation

interface ToppaFunctionsFacade { // ... public function enqueueStylesheet($handle, $relativePath, $dependencies = false, $version = null, $media = null); } class ToppaFunctionsFacadeWp implements ToppaFunctionsFacade { // … public function enqueueStylesheet($handle, $relativePath, $dependencies = false, $version = null, $media = null) { return wp_enqueue_style($handle, $relativePath, $dependencies, $version, $media); } } // use in Shashin // ... public function setFunctionsFacade(ToppaFunctionsFacade $functionsFacade) { $this->functionsFacade = $functionsFacade; return $this->functionsFacade; } // ... $this->functionsFacade->enqueueStylesheet('shashinAdminStyle', $cssUrl, false, $this->version); Shashin example

But I decided to not use a facade for WordPress' hooks and filters

I isolated the WordPress hooks and filters in a single method

public function run() { add_action('admin_menu', array($this, 'initToolsMenu')); add_action('admin_menu', array($this, 'initSettingsMenu')); add_action('template_redirect', array($this, 'displayPublicHeadTags')); add_shortcode('shashin', array($this, 'handleShortcode')); add_action('wp_ajax_nopriv_displayAlbumPhotos', array($this, 'ajaxDisplayAlbumPhotos')); add_action('wp_ajax_displayAlbumPhotos', array($this, 'ajaxDisplayAlbumPhotos')); add_action('media_buttons', array($this, 'addMediaButton'), 30); add_action('media_upload_shashin_photos', array($this, 'initPhotoMediaMenu')); add_action('media_upload_shashin_albums', array($this, 'initAlbumMediaMenu')); add_action('wp_ajax_shashinGetPhotosForMediaMenu', array($this, 'ajaxGetPhotosForMediaMenu')); add_action('shashinSync', array($this, 'runScheduledSync')); add_action('widgets_init', array($this, 'registerWidget')); add_action('admin_head', array($this, 'displayPluginPageUpgradeNag')); } // ... public function runScheduledSync() { $adminContainer = new Admin_ShashinContainer($this->autoLoader); $scheduledSynchronizer = $adminContainer->getScheduledSynchronizer(); $scheduledSynchronizer->run(); } ShashinWp

Unit testing and TDD

The test frameworks available for PHP are PHPUnit (the standard) and SimpleTest

SimpleTest for WordPress

Shashin example This is one of the tests for the method setTableCaptionTag(), in the class ShashinLayoutManager Mock::generate('Lib_ShashinSettings'); Mock::generate('Lib_ShashinAlbumPhotosCollection'); class UnitPublic_ShashinLayoutManager extends UnitTestCase { // … public function testSetTableCaptionTagWithFewerPhotosThanMaxPerPage() { $layoutManager = new Public_ShashinLayoutManager(); $collection = new MockLib_ShashinAlbumPhotosCollection(); $collection->setReturnValue('getCount', 9); $layoutManager->setDataObjectCollection($collection); $settings = new MockLib_ShashinSettings(); $settings->setReturnValue('getPhotoLimit',10); $this->layoutManager->setSettings($settings); $this->assertNull($this->layoutManager->setTableCaptionTag()); } }

But don't overdo it: avoid needless complexity

Contact www.toppa.com [email_address] @mtoppa

http://www.toppa.com	835
http://lanyrd.com	37
http://feeds.feedburner.com	6
http://translate.googleusercontent.com	5

Clean code for WordPress

by mtoppa

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 883

Statistics

Clean code for WordPress Presentation Transcript