wordpress development workflow

36

Upload: lime-canvas

Post on 17-Jan-2015

1.030 views

Category:

Technology


3 download

DESCRIPTION

Presented at the January WordPress Sydney meetup I talk about our development workflow at Lime Canvas. The tools we use and the processes we go through. This is not a static workflow as we're always looking for better and smarter ways to do things and of course new shiny development tools to use. Mmm.. shiny..

TRANSCRIPT

Page 1: WordPress Development Workflow
Page 2: WordPress Development Workflow

Software & services in no particular order…

WAMP, LAMP, LEMP, PHPStorm, Tortoise SVN, Git, GitHub, Bitbucket, Grunt (uglify, imagemin, compass, concat, csslint, phplint, jshint, watch, phpunit), Vagrant, Virtual Box, Sass, FTP, sFTP, WinSCP, SSH, PUTTY, Notepad, FireFox (firebug), Chrome (inspector), IE , Safari, Opera, Browser Stack, Araxis Merge, IceChat, Skype, Composer, ProjectLibre, Basecamp, SlickPlan,PhotoShop, Illustrator, Gmail, Google Drive, Google Apps, Zip, Timedoctor, Winamp

PHEW!

Page 3: WordPress Development Workflow

This is what I assume happens*..

Client: Hey – I need a website. You do those things don’t you?

Us: Sure. Whaddaya need it to do?

Client: blah blah blah. big slider. yadda yadda… by Friday

Us: You got any money and content?

Client: Ooddles

Us: Cool. Let’s start. Here, sign this..

*I don’t do the sales side of the business

Page 4: WordPress Development Workflow

Step 1: Detailed Requirements Gathering

Features, Environment (old/new) , Content (copy), Timescales, Responsibilities

Step 2: Get Design Prototypes from Graphic Designer

Homepage, RWDs, Style Board, Blog, Custom Templates etc.

Step 3: Review Designs

Against: requirements, UI (usability) & technical Identify: page templates, custom post types, post formats, fonts, custom features, sidebar/widget areas

Feedback to designer and cycle until happy client

Page 5: WordPress Development Workflow

We use SlickPlan for site content structure

Give clients access – they create structure

Involves clients directly – they start thinking about content

Export as XML

WordPress plugin for imports – creates pages

slickplan.com

Page 6: WordPress Development Workflow

We use BaseCamp as primary communications and content collection tool.

Projects, files, tasks, to-dos & dates.

Keeps everything in one easy-to-access place

Alternative: TeamWork www.teamwork.com

basecamp.com

Page 7: WordPress Development Workflow

What volume of traffic will the site get?

<500 uniques per day (upd) = shared hosting + LAMP

500 - 1500 upd = VPS, 2 core, 2GB + LAMP

>1500 upd = VPS 2-4 core, 4-6GB, SDD + LEMP (Nginx “Engine X”)

>10,000 upd = Bespoke VPS (Bulletproof, Rackspace, Amazon, Google AppEngine) – something that scales

Page 8: WordPress Development Workflow

Russian Web Server

Russians build stuff that work well and last long

Mir, Soyuz, T34, Mig, AK47, Nginx

Apache = Process Driven

= multiple threads = fast for small #’s of requests

Nginx = event driven

= highly scalable, single master process, multiple (scalable) worker threads

Page 9: WordPress Development Workflow

What type of project am I setting up?

Regular = Genesis

eCommerce = WooCommerce

Directory Listing = AppThemes

Other = bespoke theme?

We maintain standard builds of Genesis, WooCommerce & ClassiPress (AppThemes)

Page 10: WordPress Development Workflow

Maintained on our dev servers

Current Version of WordPress

Required parent theme (Genesis, WooCommerce, etc.)

A blank child theme

All of our plugins

All of our branding

All of our users & settings

Debugging on – logging to file

Page 11: WordPress Development Workflow

Genesis framework parent theme (duh)

Blank child theme

Advanced Custom Fields

CPT-onomies

Gravity Forms

Genesis Visual Hook Guide

Page 12: WordPress Development Workflow

WooCommerce parent theme (duh)

Blank child theme

Advanced Custom Fields

CPT-onomies

Gravity Forms

WooSidebars

WP All Import with WooCommerce Add-On

Page 13: WordPress Development Workflow

• Advanced Automatic Updates

• ManageWP

• Debug Bar

• Revision Control

• Revolution Slider

• SlickPlan

• Stop Media Comment Spamming

• Video User Manuals

• WordFence Security

• WordPress SEO

• WP Migrate DB

• WP Minify

• WP Super Cache

• XCloner / VaultPress

Page 14: WordPress Development Workflow

We use a Must-Use plugin to brand our sites.

Can’t be uninstalled! (easily)

Page 15: WordPress Development Workflow

We have a support plugin linked to ZenDesk.

PayPal & Sliver Stripe

Subscription API

ZenDesk API

RESTful JSON API

Page 16: WordPress Development Workflow

Git = distributed

You have a full copy of the repo on local machine

You can add/commit/push to your local repo

You can develop with no internet connection

SVN = centralised

You can only add/commit/push to repo on server

You need an internet connection

Page 17: WordPress Development Workflow

Uber Quick Intro to Git

Page 18: WordPress Development Workflow

Git + Bitbucket = private repo

Git + GitHub = public repos

1. Create new repo on local or server

2. Add local/server as remote repo

3. Add, Commit and Push to master branch

4. Code is now under Git version control

Page 19: WordPress Development Workflow

Pull = pulls files down from Git repository (repo)

Add = adds a local file to repo (version control)

Commit = commits file changes to local repo (marked as changed with description)

Push = pushes committed files up to remote Git repo

Page 20: WordPress Development Workflow

Git allows you to clone a repository.

Once cloned you can pull down the entire repo from master branch.

Push and Pull changes – Git takes care of everything else

Page 21: WordPress Development Workflow

New repos have a “Master” branch

You can create a new branch from master.

e.g. Wil Work on this branch separately from master

Add/test new functionality

Delete if not required – doesn’t affect master!

If OK – merge your branch into master

Your new functionality is now available to everyone

Page 22: WordPress Development Workflow
Page 23: WordPress Development Workflow

.gitignore file allows you to specify local files you don’t want Git to version control

e.g. # Ignore local wp-config.php & .htaccess

/wp-config.php

/.htaccess

# Ignore PhpStorm config files

/.idea

Page 24: WordPress Development Workflow

Local Machine Staging Server Production Server

Branch – “Wil” “Master” “Live”

Git Repo

PUSH / PULL PULL PULL

Standard Build

Page 25: WordPress Development Workflow

1. New site from Standard Build on staging server

2. Add, Commit & Push to create new Git repo

3. Clone to local

4. Create branch “Wil”

5. Time taken ~5 mins (10 mins with a tea break)

Page 26: WordPress Development Workflow

WordPress Core?

What about automatic updates and plugin updates?

Easy Way

include entire site in Git & use .gitignore to exclude WordPress core & plugins

Better Way

Include WordPress as a Git submodule /wp

Move wp-content folder to Git root

Page 27: WordPress Development Workflow

We’ll Cover Git In More Depth Another Day!

Page 28: WordPress Development Workflow

Object Oriented Programming – yes!

Vast majority of WordPress Core is not OOP

Doesn’t mean that you have to do the same

Our plugins are OO

Our functions.php includes OO class files

Easier to build, easier to test & easier to reuse.

Page 29: WordPress Development Workflow

Realtime error checking

Full Git support

PhpDoc support

PhpUnit support

Code completion (not for WordPress yet)

Php refactoring

www.jetbrains.com/phpstorm

Page 30: WordPress Development Workflow

Create standard virtual environments

Everyone developing in same environment

Less chance of issues when deploying to production

www.vagrantup.com

Page 31: WordPress Development Workflow

JavaScript Task Runner

Automates boring but necessary tasks

Image compression

JSHint

Sass compiling

Minification & concatination

www.gruntjs.com

Page 32: WordPress Development Workflow

Why bother testing at all?

Ensures code reliability

Avoids nasty whoopies & client upsets

Assures your commitment to professionalism

Puts in checks when working with contractors / distributed workers

www.phpunit.de

Page 33: WordPress Development Workflow

Package dependency manager for Php

Does your project depend on a number of libraries?

Do those libraries depend on other libraries?

Composer deals with external libraries and versions so you don’t have to do it manually

www.getcomposer.org

Page 34: WordPress Development Workflow

1. Out-of-hours deployment

2. Pull “Live” Git branch to production server

3. Production Site QA – 82 step internal guide

4. Add clients to MailChimp support lists

• System issues, updates, information

• Auto responders +1, +3, +6, +12 months

5. Set up clients with ZenDesk for support

Page 35: WordPress Development Workflow

• [1] anglonautes.com

• [5] slickplan.com

• [6] 37signals.com

• [11] studiopress.com

• [12] woothemes.com

• [22] betterexplained.com

• [29] jetbrains.com

• [30] vagrantup.com

• [31] gruntjs.com

• [33] getcomposer.com

Page 36: WordPress Development Workflow