Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A modern WordPress development workflow

1,814 views

Published on

This is the WordPress development workflow at Atomic Smash.
Links from slides:

Signup to Logsmith BETA - http://eepurl.com/dkjmHb
Please use git - https:/hackernoon.com/please-use-git-da3bea7d1234
Using Composer with WordPress - https:/www.atomicsmash.co.uk/blog/using-composer-wordpress-development/
Development workflow and tools - https://www.atomicsmash.co.uk/blog/our-current-development-tools-and-workflows/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

A modern WordPress development workflow

  1. 1. A modern WordPress development workflow By David Darke 1 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  2. 2. 2 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  3. 3. September 2010 3 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  4. 4. FTP :( 4 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  5. 5. What's wrong with this simple setup? • It's almost impossible for two developer to work at the same time, (unless they are sat next to each other) • Dropbox does have a revision system, but only on a per file basis • Deployments were cumbersome and not traceable (FTP is the worst) • No real control over servers and hosting (Shared hosting) • Nothing was re-usable • Hours (maybe days) wasted handling development environment differences and things out of our control 5 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  6. 6. Today (April 2018) 6 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  7. 7. Our challenges • Get a shared development environment - Hoping to increase development team • Improve frontend workflow - Stop editing flat CSS files • Find a reliable deployment method - Stop f***ing about with FTP • Improve hosting reliability - Increase level of control and performance • A future goal of... 7 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  8. 8. Automated continuous delivery 8 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  9. 9. Think of your WordPress website, as a web platform. 9 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  10. 10. Laravel Homestead + 10 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  11. 11. Laravel Homestead Laravel Homestead is an official, pre-packaged Vagrant box that provides you a wonderful development environment without requiring you to install PHP, a web server, and any other server software on your local machine. — Homestead documentation 11 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  12. 12. The anatomy of 99% of WordPress Websites = ++ + Open source code Your theme and custom plugin code Database Uploads 12 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  13. 13. Your theme code = ++ + Open source code Your theme and custom plugin code Database Uploads 13 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  14. 14. 14 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  15. 15. Get your custom code into GIT... 15 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  16. 16. Get your custom code into GIT... NOW!!! 16 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  17. 17. 'Please use git' - A post by Amin Shah Gilani 1 • It’s too complicated • I’m not too good with the command line. • “Our project is too small” • “Our team is too small” • “We use Dropbox” 1 https://hackernoon.com/please-use-git-da3bea7d1234 17 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  18. 18. = ++ + Open source code Your theme and custom plugin code Database Uploads 18 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  19. 19. We use shared remote databases mysql.mycompany.co.uk This means all our development databases are accessible from anywhere. • No syncing • Content is shared between developers • Wordpress locking stops two people editing the same content at the same time 19 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  20. 20. = ++ + Open source code Your theme and custom plugin code Database Uploads 20 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  21. 21. We store development uploads on Amazon S3 An S3 bucket per site, which is only accessible to the development team 21 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  22. 22. = ++ + Open source code Your theme and custom plugin code Database Uploads 22 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  23. 23. Composer pulls a WordPress version (usually the latest) and all required plugins. 2 2 https://www.atomicsmash.co.uk/blog/using-composer-wordpress-development/ 23 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  24. 24. Git repository doesn't include WordPress, plugins or uploads 24 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  25. 25. Our challenges • Get a shared development environment ✔ • Improve frontend workflow • Find a reliable deployment method • Improve hosting reliability 25 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  26. 26. 26 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  27. 27. More about frontend tools 3 3 https://www.atomicsmash.co.uk/blog/our-current-development-tools-and-workflows/ 27 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  28. 28. Our challenges • Get a shared development environment ✔ • Improve frontend workflow ✔ • Find a reliable deployment method • Improve hosting reliability 28 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  29. 29. Capistrano 29 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  30. 30. A single deployment 1. Developer runs cap production deploy 2. Capistrano logs into your remote server 3. Capistrano grabs the latest code from Git 4. Capistrano runs composer and pulls down WordPress 5. If there are no errors in setup, Capistrano puts changes live 30 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  31. 31. cap production deploy cap uat deploy cap staging deploy 31 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  32. 32. cap production deploy:rollback 32 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  33. 33. Our challenges • Get a shared development environment ✔ • Improve frontend workflow ✔ • Find a reliable deployment method ✔ • Improve hosting reliability 33 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  34. 34. The hosting company 34 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  35. 35. Hosting provisioning 35 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  36. 36. Forge... 1. It creates the server on Digital Ocean 2. Installs Nginx, PHP, MySQL + a bunch of other stuff 3. Helps automate FREE Let's Encrypt SSLs (and normal SSLs) 4. Provides an interface for creating 'sites' 5. Provides an interface for creating databases 6. Patches the servers for security updates (in the background) 7. Admin still has full control over the server 36 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  37. 37. Old dev process FTP :( 37 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  38. 38. 38 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  39. 39. Release Belt New dev process 39 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  40. 40. 40 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  41. 41. Premium plugins with composer We use an private composer storage solution called Release Belt. https://github.com/Rarst/release-belt 41 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  42. 42. 42 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  43. 43. Server metrics via Prometheus 43 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  44. 44. 44 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  45. 45. 45 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  46. 46. BONUS! 46 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  47. 47. 47 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  48. 48. 48 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  49. 49. Signup for logsmith We are looking for beta testers http://eepurl.com/dkjmHb 49 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  50. 50. 50 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  51. 51. THANKS! Follow me: @david_darke Follow my studio: @atomicsmash Get presentation here: https://github.com/daviddarke/A-modern-WordPress-development- workflow 51 A modern WordPress development workflow - David Darke | atomicsmash.co.uk
  52. 52. Tool list • Capistrano | Used to deploy code from GIT to servers. • Composer | Used to pulling PHP dependancies like Wordpress. • Forge | Used for provisioning servers • GIT | A version control system for storing and sharing code. • Logflume | Gets uploads onto S3 so they are sharable with other developers • Logsmith | The development framework made by Atomic Smash • Release belt | Used for storing premium plugins and making them privately accessible to composer. 52 A modern WordPress development workflow - David Darke | atomicsmash.co.uk

×