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: Rebuilding TechCrunch | WC for Publishers

223 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • 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!

×