16
No More Cowboy Coding Using a Modern WordPress Development Workflow by Tom Howard of DigitalEngine.io

No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Embed Size (px)

Citation preview

Page 1: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

No More Cowboy CodingUsing a Modern WordPress Development Workflow

by Tom Howard of DigitalEngine.io

Page 2: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

WordPress Powers 27% of the internet

As of Nov. 2016

Gaining avg. 2.5% points yearly

Source: W3Techs

Page 3: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

WordPress Powers 27% of the internet

As of Nov. 2016 Source: W3Techs

Greater than British Empire at peak! ! (23.8% of world)

Page 4: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Yet So Many Basic Problems• Slow site loading

• Easily preventable hacks

• Content sometimes disappears

• Code randomly breaks

• Glitchy designs

Page 5: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

These problems are symptoms of the past

The solution? Modernize your WP stack!

Page 6: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Simple Concepts To Make WP Modern

💻 Code Locally

🚩 Version Control

🗃 Code Organization

🛠 Build Tools

🖼 View & Logic Separation

Page 7: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Code Locally

• Never change code on the server!

• Get it working on local machine • Then move to server

Your Computer

Server

Code

ResourcesMac: MAMP Windows: VVV Advanced: Trellis

Page 8: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Version Control: Git• Never lose code

• Easily revert back

• Quickly deploy code (no more FTP)

• Solves most beginner WP problems

Get started with git

Page 9: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Code Organization

Stay DRY!(Don’t Repeat Yourself)

• Template files with single purpose can be re-used everywhere

• Break code into components

• Use WP’s get_template_part

Page 10: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Build Tools: CSS Pre-processing

• Nested CSS selectors, not long hand

• Variables, no repeated value

• Functions & “Mixins”, no repeated code (DRY!)

• Separate component files instead of one big messy file

• Compile to 1 minified, optimized file

ResourcesSASS LESS

Page 11: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Build Tools: Task Runner

• CSS Preprocessing

• Optimize JS assets

• Validate CSS & JS code

• Optimize Image assets

• Manage dev/deploy file structure

ResourcesGrunt.js Gulp.js

Page 12: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

View & Logic Separation

Twig + Timber!

• Retrieve data & logic in .php timber files

• Presentation in .twig template file

Page 13: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Bringing it all together

Starter Themes!

• Sage by roots.ioBower + Gulp + SCSS + More

• Fabrica Gulp + PostCSS + Twig + Timber

Page 14: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Hosting!

Beginner: WP Engine

Advanced: Pantheon

High Traffic: Digital Engine WP Hosting (my company)

Good hosting can solve workflow issues

Page 15: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

Taking it to the next level

12 factor WordPress, the same modern principles Heroku uses for scaling web apps

Executing Node.js + React.js in WP PHP code! NodifyWP

Page 16: No More Cowboy Coding: Modern WordPress Development Workflow That Scales

We can bring WordPress out of the past!Slides at http://digitalengine.io/modern-wordpress-

development-workflow-talk/