Use of a decoupled CMS is an exciting new approach that many organizations are exploring as a way to remain nimble in rapidly evolving industries. A decoupled approach allows teams to maintain the familiar and robust WordPress admin interface while simultaneously embracing design-forward front end experiences that are engaging, aesthetic and highly flexible. With the recent incorporation of the WordPress REST API into core, these possibilities are now a reality. But how, exactly, can this be achieved on an enterprise scale? In late 2016, Human Made partnered with TechCrunch to realize these possibilities. The goal itself was ostensibly simple: create a fully decoupled WordPress admin that engaged a React front end to create an app-like experience. Nevertheless, the technical challenges presented as part of this goal were not insignificant, including API challenges, caching, theming in PHP & React, and more. This session will focus on the decision-making and logistical considerations our team took to meet the challenge of creating a holistic WordPress/React product. Presented by both the Project Manager and development team involved, the purpose of this session will be to provide insight and tangible action items for other teams hoping to achieve similar goals.

1. PRESS, PUBLISH,
REACT
WCPUB ‘18

2. THE PARTNERS
THE OPPORTUNITY
THE APPROACH
IN THE RIVER
TECHNICAL SOLUTIONS

3. THE PARTNERS

4. PRESS, PUBLISH, REACT
&

5. PRESS, PUBLISH, REACT
&

6. THE OPPORTUNITY

7. GOING THE
DISTANCE
We wanted our redesign to be
ambitious…
Nicole Wilke, TechCrunch Head of Product

8. GOING THE
DISTANCE
•Powerful, intuitive CMS
•Cutting edge approach
•Greater flexibility
A forward thinking front
end experience.

9. IMPROVED
ENGAGEMENT
Our design focused on fluid and
interesting interactions…
Nicole Wilke, TechCrunch Head of Product

10. Creating a user-centric
reading experience.
IMPROVED
ENGAGEMENT
•Embrace app experience
•Continuous content flow
•Immersive experience

11. A newsroom for
technologists.
EDITORIAL
INNOVATION
•Increase efficiency
•Cater to multiple teams
•Improve transparency

12. Sustainable product
development.
• Architectural consultation
• Guidance on WordPress
best practice
• React orientation and
training
COLLABORATIVE
DEVELOPMENT

13. THE APPROACH

14. +

15. Semi-Decoupled
React Application

16. PRESS, PUBLISH, REACT

17. PRESS, PUBLISH, REACT

22. IN THE RIVER

23. RIVER EXPERIENCE
Next generation of
user engagement.
• Fluid experience
• Discoverability of content
• Matter of fact way finding

24. PRESS, PUBLISH, REACT

25. PRESS, PUBLISH, REACT

26. PRESS, PUBLISH, REACT

27. PRESS, PUBLISH, REACT

28. DEVELOPING STORIES
News isn’t static,
posts shouldn’t
have to be.
•Group related stories
•Display group in river
•Retain story autonomy

29. PRESS, PUBLISH, REACT

30. PRESS, PUBLISH, REACT

31. ADS &
ANALYTICS
Strategic user
engagement.
•React constraints
•Proprietary ads system
•Library to deliver ads as expected by React

32. ADS &
ANALYTICS

33. ADS &
ANALYTICS

34. ADS &
ANALYTICS

35. VIDEO ENGAGEMENT
Next-level
Interaction
•Immersive, Continual
watching experience
•Automated Fetching
and Categorization

36. PRESS, PUBLISH, REACT

37. PRESS, PUBLISH, REACT

38. CHALLENGES &
SOLUTIONS

39. PRESS, PUBLISH, REACT
REACT
WP SCRIPTS
WordPress environments for
React applications.
Challenge:
•WordPress expects singular path for assets
•Webpack serves dynamic files

40. PRESS, PUBLISH, REACT
REACT
WP SCRIPTS
Solution:
•Automatically generated interface displaying data about all
REST API endpoints
WordPress environments for
React applications.

41. PRESS, PUBLISH, REACT
RESTSPLAIN
Self-documenting endpoints.
Challenge:
•Documenting APIs takes time from development
•Stakeholders need access to API information
•On-boarding developers without documentation is hard

42. PRESS, PUBLISH, REACT
RESTSPLAIN
Solution:
•Generate interface within WP as a plugin
•Display custom endpoints and schemas
Self-documenting endpoints.

43. PRESS, PUBLISH, REACT

44. PRESS, PUBLISH, REACT

45. PRESS, PUBLISH, REACT
REACT
oEmbed Container
Challenge:
•WordPress oEmbeds are static HTML
•Do not work reliably in a single-page-application
Gracefully handle WP
oEmbeds in React

46. PRESS, PUBLISH, REACT
REACT
oEmbed Container
Gracefully handle WP
oEmbeds in React
Solution:
•Find and inject script tags from oEmbeds at render

47. THANKS &
RESOURCES

48. PRESS, PUBLISH, REACT
THE
TEAM
Fränk
Klein
Rob
O’Rourke
Sr. Engineer
K. Adam
White
Sr. Engineer
Joe
Hoyle
CTO
Ryan
McCue
Director of
Engineering
Lead Engineer

49. Resources
PRESS, PUBLISH, REACT
REACT WP Scripts - https://github.com/humanmade/react-wp-scripts
Restsplain - https://github.com/humanmade/Restsplain
oEmbed - https://github.com/humanmade/react-oembed-container
Libraries
Further Reading
REST API whitepaper - https://humanmade.com/wordpress-rest-api-
white-paper/

50. PRESS, PUBLISH, REACT
KEEP IN TOUCH
Libby Barker
Senior Project Manager
@realLibSass
Mike Selander
Senior Engineer
@Mike_Selander

51. Thank You!