Slides for my first ever WordCamp presentation - talking about how Decoupled architectures can help power exciting new use-cases. With the WP-API JSON REST interface ready for use, now is the time to start learning to speak HTTP!

2. CONTENT AS A SERVICE:
DECOUPLED WORDPRESS
WITH WP-CLI

3. Pantheon.io 3
Speakers
Josh Koenig
Co-Founder & Head of Product
@outlandishjosh

4. Pantheon.io 4
Monoliths vs. Microservices
Monolith
Templates & Themes
Display Logic
Editorial UI
Admin UI
VS.
Decoupled

5. Pantheon.io 5
Monolithic Architecture
mon·o·lith
ˈmänəәˌliTH/
noun
1.a large single upright block of stone, especially one shaped into or serving as a pillar or
monument.
• synonyms: standing stone, menhir, megalith, sarsen (stone)
• "no one knows for sure who erected these monoliths and why”
• a very large and characterless building.
• "the 72-story monolith overlooking the waterfront”
• a large block of concrete sunk in water, e.g., in the building of a dock.
2.a large and impersonal political, corporate, or social structure regarded as intractably
indivisible and uniform.
• "the dominance of broadcasting monoliths limits local programming"

6. Pantheon.io 6
The Limits of the Theme Layer as Architecture
Theme Layer
Plugins / Core
Permeable
Boundary
Exciting / awkward
game of chance

7. Pantheon.io 7
Monoliths Can Lead to Unhappy Developers

8. Pantheon.io 8
Strong Separation of Concerns
Client
WordPress
HTTP API
Everyone Wins

9. Pantheon.io 9
Use the Tools You Prefer

10. Pantheon.io 10
Parallel Track Progress

11. Pantheon.io 11
Future Proofing

12. Pantheon.io 12
Caveats

13. Pantheon.io 13
HTTP: Do you speak it?
Hur De Flur Shiffen de
PUT Dur Skurf Nerf CURL we
Flu Pur OPTIONS me
Skupplen de Noff

14. Pantheon.io 14
No, seriously… HTTP
source: https://github.com/inhabitedtype/ocaml-webmachine

15. Pantheon.io 15
WordPress Does a Lot of Things

16. Pantheon.io 16
Primary Use-Case: Custom Sites/Apps
Source: 2014 State of the Word

17. Pantheon.io 17
WP-API Can Grow the WP Market

18. MANY WAYS OF DECOUPLING
Which is right for you?

19. Pantheon.io 19
Static Generator / Renderer
•
CMS
Static
Site
User
Request
Static
• Create a fast and resilient
user-facing site.
• Utilize front-end atomic
design tools, minimal/elegant
markup, etc.
• Read-only, but highly secure
and scalabe.

20. Pantheon.io 20
Hybrid
•
CMS
Static
Site
User
Request
Static
• Build up a REST API on your
site to power dynamic forms/
dashboards.
• Many other functions served
directly from Drupal as per
normal.
• Restrains the scope. Allows
for particular experiences to
be enhanced.
•
CMS
JS App
User
Request
Hybrid

21. Pantheon.io 21
“Single Page” App
•
CMS
Static
Site
User
Request
Static
• Client side JavaScript
application runs in-browser,
pulls data from CMS via API.
• May include user interactions,
or be purely content oriented.
• Typically utilize a front-end
framework like Angular,
Backbone, or React.
•
CMS
Single
Page App
User
Request
Single Page

22. Pantheon.io 22
Native Mobile App / IoT
•
CMS
Static
Site
User
Request
Static
• CMS powers embedded
applications via API.
• May also present some web
functionality to users.
• Drive IOS and Android native
apps, as well as “internet of
things” implementations.
•
CMS
Native
Mobile
App
User
Request
Native
(optional)

23. Pantheon.io 23
CMS-on-CMS
•
CMS
Static
Site
User
Request
Static
• Separation of concerns, but
not technologies.
• Front-end CMS can control
configuration, caching,
throttling.
• Develop reusable
components for a Service-
Oriented / Microservices
architecture.
CMS
User
Request
CMS2
CMS

24. Pantheon.io 24
Everything Old is New Again

25. Pantheon.io 25
Thanks!
Thanks! Questions?
http://wclax.reviews/
@outlandishjosh