More information: http://bit.ly/2gtFMNW WordPress has grown from blogging tool, to flexible CMS to an application platform. As the web development world embraces micro-services, how does WordPress, which is normally implemented as a monolithic solution fit in and evolve? In this talk, I will look at what makes WordPress a good choice for application development, as well as where it is lacking. To put these questions in context, this talk will be framed around a case-study of a hybrid web app, built using WordPress and other tools including VueJS, Laravel and Amazon Web Services.

1. @Josh412
Our Hybrid Future:
WordPress As Part Of
The Stack
Josh Pollock | CalderaLabs.org

2. @Josh412
CalderaLabs.org
Hi I'm Josh
Lead Developer: Caldera Labs
Caldera Forms and Caldera Forms Pro
Caldera Learn
2 books about WordPress development
Core contributor to WordPress
Member of The WPCrowd

3. @Josh412
CalderaLabs.org
Hi I'm Josh
Download Slides:
CalderaForms.com/wcmtl2017

4. @Josh412
CalderaLabs.org
What We’re
Talking About
Today

5. @Josh412
“
CalderaLabs.org
WordPress Is For More
Than Blogs.
- WordPress Community for
the last ~5 years

6. @Josh412
“
CalderaLabs.org
You can use WordPress to build apps
- Me for the last ~3 years

7. @Josh412
“
CalderaLabs.org
This REST API is shiny!
- Many, many people.

8. @Josh412
“
CalderaLabs.org
You can use WordPress to build
apps because our REST API is
fully-featured and highly
extensible.
- A lot of WordPress people

9. @Josh412
CalderaLabs.org
WordPress As A Platform
Image stolen from Ryan McCue’s LoopConf Talk - You should watch It on YouTube

10. @Josh412
CalderaLabs.org
WordPress All
The Things??

11. @Josh412
CalderaLabs.org

12. @Josh412
CalderaLabs.org
Monolithic
vs
Microservice
Architecture

13. @Josh412
“
CalderaLabs.org
A monolithic application built as a single unit. The
server-side application will handle HTTP requests,
execute domain logic, retrieve and update data from
the database, and select and populate HTML views to
be sent to the browser.
- Martin Fowler

14. @Josh412
“
CalderaLabs.org
This server-side application is a
monolith - a single logical executable.
- Martin Fowler

15. @Josh412
“
CalderaLabs.org
The microservice architectural style is an approach
to developing a single application as a suite of small
services, each running in its own process and
communicating with lightweight mechanisms, often
an HTTP resource API.
- Martin Fowler

16. @Josh412
“
CalderaLabs.org
[in microservice architecture] there is a bare
minimum of centralized management of these
services, which may be written in different
programming languages and use different data
storage technologies.
- Martin Fowler

17. @Josh412
One server for:
PHP
Database (MySQL/MariaDB/Percona)
Webserver (nGinx/Apache)
Object Cache (Memcached/ Redis)
Email and other tasks not suited to WordPress
WordPress Is Monolithic By Default

18. @Josh412
We Are Already Moving To Services
Transactional Email Services
Task Runners For WP-Cron
Separate Database Servers(s)
Media Library on s3
CDNs
Decoupled front-ends via REST API
Containerized Hosting Architecture

19. @Josh412
CalderaLabs.org
Microservices
Reduce The Scope
Of A Compromise

20. @Josh412
CalderaLabs.org
Microservices
Encapsulate
Functionality

21. @Josh412
CalderaLabs.org
Case Study:
Caldera Forms Pro

22. @Josh412
A Web App For Managing Form Plugin Messages

23. @Josh412
Hybrid Free Plugin + SaaS
Client
Plugin
Free Plugin Service

24. @Josh412
Free Plugin Is Standalone
Free Plugin

25. @Josh412
Hybrid Business Model
Plugin works on its own
Plugin works better with app
Users control their own data

26. @Josh412
Business Needs
Case Study:
Caldera Forms Pro
Solve the WordPress contact form email
problem.
WordPress shouldn’t be used for emails.
Improve support
Stop asking questions about errors
Control our platform
Deliver all in one solutions.

27. @Josh412
Services Based
Solution

28. @Josh412
Technologies Used
WordPress
Laravel
Lumen
VueJS
Vuetify
MariaDB
Redis
Amazon s3
Amazon EC2
Lindode
SendGrid
etc...

29. @Josh412
CalderaLabs.org
Choosing Tools
Granularly

30. @Josh412
CalderaLabs.org
One Part At A
Time

31. @Josh412
CalderaLabs.org
Composer
FTW

32. @Josh412
CalderaLabs.org
Communicate
Via APIs

33. @Josh412
Architecture
Overview

34. @Josh412
TACO
WordPress plugin for our site
Client for app’s admin API
Open-source (for educational purposes)
gitlab.com/caldera-labs/taco

35. @Josh412
Easy Digital Downloads
Already in use on our site
One account
Handles recurring billing really well
Has good marketing integration

36. @Josh412
APirate
Plugin to limit access to WordPress REST API
routes
Optional eCommerce via Easy Digital
Downloads
Could work with other eCommerce platforms
Pronounced “API Rate” or “A Pirate”
Gitlab.com/caldera-lab/apirtate

37. @Josh412
Original Plan: WordPress As Proxy

38. @Josh412
Transaction
(new
subscription
or update)
Find Account
CF Pro
Account
Exists?
Find by
wp_id
Create Key
Create
Account
Update Key
Update
Account
Store App Account
ID as wp_post_meta
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
APirate
Color Key
NO Yes
Plan One: eCommerce

39. @Josh412
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
APirate
Color Key
Plan One: App Login
Login
Redirect to
WordPress
wp-login
Has
Account?
Product
Page
Get CF Pro
Account ID
Create
1-time
token
Redirect to
app
auth-return
Verify 1-time token
Set Keys In Cookies
NO
Yes

40. @Josh412
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
APirate
Color Key
Plan One: API Request To App
Message
Request
(wp-json)
Allowed?
Return Error
Return
Fulfill
NO Yes

41. @Josh412
Shortcomings Of Plan One
All requests go through WordPress
Double-blocking POST requests
Scaling challenges
No isolation
Crash one site, crash them all

42. @Josh412
Plan Two: Towards Microservices
WordPress
eCommerce
App Login
Marketing Automation
Docs
Main App
API Key Authentication
UI
SendGrid Proxy
PDF Generation
Resource Management (via s3)

43. @Josh412
CalderaLabs.org
Overview
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
Client Plugin
Color
Key
Logging App
Account
Management
Front-end
Client
Plugin
API
Logging
App
Taco

44. @Josh412
CalderaLabs.org
Overview
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
Client Plugin
Color Key
Logging App
Our
WordPress
VueJS
User’s
WordPress
Laravel
Lumen

45. @Josh412
Main App: Laravel
Laravel Blade to serve one view for SPA
Some additional ugly screens for admin
API for:
Key auth
Account management
Message handling (SendGrid proxy)
Taco
Assets to s3

46. @Josh412
App Front-end : VueJS
Single page web app
Webpack
Vuetify
Vue Router
Uses API Keys To Authenticate vs App
Cookies used to store key/token

47. @Josh412
Logging App
Connects to client plugin
Key auth via main app
Saves logs from client via Monolog and s3
No database
Unless you count Redis...

48. @Josh412
Client Plugin
Connects to Caldera Forms via Plugins API
Connects to main app via key auth
Connects to log app via key auth
Admin page uses VueJS and WordPress REST
API

49. @Josh412
CalderaLabs.org
App: eCommerce
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
Client Plugin
Color Key
Logging App
Transaction (new subscription or
update)
Find Account
CF Pro
Account Exists?
Find by wp_id
Create Account Update Account
Store App Account ID as wp_post_meta

50. @Josh412
CalderaLabs.org
App: Login
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
Client Plugin
Color Key
Logging App
Login wp-json
Get CF Pro
Account ID
Load App
JWT Auth
Plugin

51. @Josh412
CalderaLabs.org
Client: Form Submission
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
Client Plugin
Color Key
Logging App
New Submission
Allowed?
Generate
Message
To SendGrid

52. @Josh412
CalderaLabs.org
Client: Errors
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
Client Plugin
Color Key
Logging App
Error
Allowed?
Respond
Write

53. @Josh412
CalderaLabs.org
Client: wp-admin
CF Pro App
WordPress
(Taco)
WordPress
(EDD/Core/Etc)
Client Plugin
Color Key
Logging App
Client Admin Allowed?
Details
NO
YES

54. @Josh412
CalderaLabs.org
Other Ways To
Hybridize

55. @Josh412
CalderaLabs.org
Jetpack
Stand-alone plugin
Services provided by
WordPress.com

56. @Josh412
CalderaLabs.org
Multiple
WordPresses
Solve scaling problems by using
multiple sites connected via the
REST API

57. @Josh412
CalderaLabs.org
WordPress
As A Proxy
WordPress as proxy for other
APIs and services

58. @Josh412
CalderaLabs.org
Decoupled
eCommerce
WordPress-powered site
eCommerce via 3rd Party

59. @Josh412
CalderaLabs.org
SaaS Apps
WordPress eCommerce
Decoupled UI
Other Services Via API

60. @Josh412
CalderaLabs.org
Recurring
ProcessesMicroservices for
background tasks

61. @Josh412
CalderaLabs.org
Questions?
Slides:
CalderaForms.com/wcmtl2017
Wapuus:
wapu.us

62. @Josh412
CalderaLabs.org
Josh Pollock
JoshPress.net
CalderaForms.com
CalderaLabs.org
CalderaLearn.com
@Josh412