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.
PRESS, PUBLISH,
REACT
WCPUB ‘18
THE PARTNERS
THE OPPORTUNITY
THE APPROACH
IN THE RIVER
TECHNICAL SOLUTIONS
THE PARTNERS
PRESS, PUBLISH, REACT
&
PRESS, PUBLISH, REACT
&
THE OPPORTUNITY
GOING THE
DISTANCE
We wanted our redesign to be
ambitious…
Nicole Wilke, TechCrunch Head of Product
GOING THE
DISTANCE
•Powerful, intuitive CMS
•Cutting edge approach
•Greater flexibility
A forward thinking front
end experi...
IMPROVED
ENGAGEMENT
Our design focused on fluid and
interesting interactions…
Nicole Wilke, TechCrunch Head of Product
Creating a user-centric
reading experience.
IMPROVED
ENGAGEMENT
•Embrace app experience
•Continuous content flow
•Immersive...
A newsroom for
technologists.
EDITORIAL
INNOVATION
•Increase efficiency
•Cater to multiple teams
•Improve transparency
Sustainable product
development.
• Architectural consultation
• Guidance on WordPress
best practice
• React orientation an...
THE APPROACH
+
Semi-Decoupled
React Application
PRESS, PUBLISH, REACT
PRESS, PUBLISH, REACT
IN THE RIVER
RIVER EXPERIENCE
Next generation of
user engagement.
• Fluid experience
• Discoverability of content
• Matter of fact way ...
PRESS, PUBLISH, REACT
PRESS, PUBLISH, REACT
PRESS, PUBLISH, REACT
PRESS, PUBLISH, REACT
DEVELOPING STORIES
News isn’t static,
posts shouldn’t
have to be.
•Group related stories
•Display group in river
•Retain s...
PRESS, PUBLISH, REACT
PRESS, PUBLISH, REACT
ADS &
ANALYTICS
Strategic user
engagement.
•React constraints
•Proprietary ads system
•Library to deliver ads as expected ...
ADS &
ANALYTICS
ADS &
ANALYTICS
ADS &
ANALYTICS
VIDEO ENGAGEMENT
Next-level
Interaction
•Immersive, Continual
watching experience
•Automated Fetching
and Categorization
PRESS, PUBLISH, REACT
PRESS, PUBLISH, REACT
CHALLENGES &
SOLUTIONS
PRESS, PUBLISH, REACT
REACT
WP SCRIPTS
WordPress environments for
React applications.
Challenge:
•WordPress expects singul...
PRESS, PUBLISH, REACT
REACT
WP SCRIPTS
Solution:
•Automatically generated interface displaying data about all
REST API end...
PRESS, PUBLISH, REACT
RESTSPLAIN
Self-documenting endpoints.
Challenge:
•Documenting APIs takes time from development
•Sta...
PRESS, PUBLISH, REACT
RESTSPLAIN
Solution:
•Generate interface within WP as a plugin
•Display custom endpoints and schemas...
PRESS, PUBLISH, REACT
PRESS, PUBLISH, REACT
PRESS, PUBLISH, REACT
REACT
oEmbed Container
Challenge:
•WordPress oEmbeds are static HTML
•Do not work reliably in a sing...
PRESS, PUBLISH, REACT
REACT
oEmbed Container
Gracefully handle WP
oEmbeds in React
Solution:
•Find and inject script tags ...
THANKS &
RESOURCES
PRESS, PUBLISH, REACT
THE
TEAM
Fränk
Klein
Rob
O’Rourke
Sr. Engineer
K. Adam
White
Sr. Engineer
Joe
Hoyle
CTO
Ryan
McCue
D...
Resources
PRESS, PUBLISH, REACT
REACT WP Scripts - https://github.com/humanmade/react-wp-scripts
Restsplain - https://gith...
PRESS, PUBLISH, REACT
KEEP IN TOUCH
Libby Barker
Senior Project Manager
@realLibSass
Mike Selander
Senior Engineer

@Mike_...
Thank You!
Press, Publish, React: Rebuilding TechCrunch | WC for Publishers
Press, Publish, React: Rebuilding TechCrunch | WC for Publishers
Press, Publish, React: Rebuilding TechCrunch | WC for Publishers
Press, Publish, React: Rebuilding TechCrunch | WC for Publishers
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Press, Publish, React: Rebuilding TechCrunch | WC for Publishers

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Press, Publish, React: Rebuilding TechCrunch | WC for Publishers

  1. 1. PRESS, PUBLISH, REACT WCPUB ‘18
  2. 2. THE PARTNERS THE OPPORTUNITY THE APPROACH IN THE RIVER TECHNICAL SOLUTIONS
  3. 3. THE PARTNERS
  4. 4. PRESS, PUBLISH, REACT &
  5. 5. PRESS, PUBLISH, REACT &
  6. 6. THE OPPORTUNITY
  7. 7. GOING THE DISTANCE We wanted our redesign to be ambitious… Nicole Wilke, TechCrunch Head of Product
  8. 8. GOING THE DISTANCE •Powerful, intuitive CMS •Cutting edge approach •Greater flexibility A forward thinking front end experience.
  9. 9. IMPROVED ENGAGEMENT Our design focused on fluid and interesting interactions… Nicole Wilke, TechCrunch Head of Product
  10. 10. Creating a user-centric reading experience. IMPROVED ENGAGEMENT •Embrace app experience •Continuous content flow •Immersive experience
  11. 11. A newsroom for technologists. EDITORIAL INNOVATION •Increase efficiency •Cater to multiple teams •Improve transparency
  12. 12. Sustainable product development. • Architectural consultation • Guidance on WordPress best practice • React orientation and training COLLABORATIVE DEVELOPMENT
  13. 13. THE APPROACH
  14. 14. +
  15. 15. Semi-Decoupled React Application
  16. 16. PRESS, PUBLISH, REACT
  17. 17. PRESS, PUBLISH, REACT
  18. 18. IN THE RIVER
  19. 19. RIVER EXPERIENCE Next generation of user engagement. • Fluid experience • Discoverability of content • Matter of fact way finding
  20. 20. PRESS, PUBLISH, REACT
  21. 21. PRESS, PUBLISH, REACT
  22. 22. PRESS, PUBLISH, REACT
  23. 23. PRESS, PUBLISH, REACT
  24. 24. DEVELOPING STORIES News isn’t static, posts shouldn’t have to be. •Group related stories •Display group in river •Retain story autonomy
  25. 25. PRESS, PUBLISH, REACT
  26. 26. PRESS, PUBLISH, REACT
  27. 27. ADS & ANALYTICS Strategic user engagement. •React constraints •Proprietary ads system •Library to deliver ads as expected by React
  28. 28. ADS & ANALYTICS
  29. 29. ADS & ANALYTICS
  30. 30. ADS & ANALYTICS
  31. 31. VIDEO ENGAGEMENT Next-level Interaction •Immersive, Continual watching experience •Automated Fetching and Categorization
  32. 32. PRESS, PUBLISH, REACT
  33. 33. PRESS, PUBLISH, REACT
  34. 34. CHALLENGES & SOLUTIONS
  35. 35. PRESS, PUBLISH, REACT REACT WP SCRIPTS WordPress environments for React applications. Challenge: •WordPress expects singular path for assets •Webpack serves dynamic files
  36. 36. PRESS, PUBLISH, REACT REACT WP SCRIPTS Solution: •Automatically generated interface displaying data about all REST API endpoints WordPress environments for React applications.
  37. 37. 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
  38. 38. PRESS, PUBLISH, REACT RESTSPLAIN Solution: •Generate interface within WP as a plugin •Display custom endpoints and schemas Self-documenting endpoints.
  39. 39. PRESS, PUBLISH, REACT
  40. 40. PRESS, PUBLISH, REACT
  41. 41. 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
  42. 42. PRESS, PUBLISH, REACT REACT oEmbed Container Gracefully handle WP oEmbeds in React Solution: •Find and inject script tags from oEmbeds at render
  43. 43. THANKS & RESOURCES
  44. 44. 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
  45. 45. 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/
  46. 46. PRESS, PUBLISH, REACT KEEP IN TOUCH Libby Barker Senior Project Manager @realLibSass Mike Selander Senior Engineer
 @Mike_Selander
  47. 47. Thank You!

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.

Views

Total views

386

On Slideshare

0

From embeds

0

Number of embeds

16

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×