Press, Publish, React: Rebuilding TechCrunch | WC for Publishers
1 likes
views
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.
Recommended
Press, Publish, React: Rebuilding TechCrunch | WC for Publishers
- 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 experience.
- 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 experience
- 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 and training COLLABORATIVE DEVELOPMENT
- 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 finding
- 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 story autonomy
- PRESS, PUBLISH, REACT
- PRESS, PUBLISH, REACT
- ADS & ANALYTICS Strategic user engagement. •React constraints •Proprietary ads system •Library to deliver ads as expected by React
- 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 singular path for assets •Webpack serves dynamic files
- PRESS, PUBLISH, REACT REACT WP SCRIPTS Solution: •Automatically generated interface displaying data about all REST API endpoints WordPress environments for React applications.
- 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
- PRESS, PUBLISH, REACT RESTSPLAIN Solution: •Generate interface within WP as a plugin •Display custom endpoints and schemas Self-documenting endpoints.
- PRESS, PUBLISH, REACT
- PRESS, PUBLISH, REACT
- 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
- PRESS, PUBLISH, REACT REACT oEmbed Container Gracefully handle WP oEmbeds in React Solution: •Find and inject script tags from oEmbeds at render
- 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 Director of Engineering Lead Engineer
- 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/
- PRESS, PUBLISH, REACT KEEP IN TOUCH Libby Barker Senior Project Manager @realLibSass Mike Selander Senior Engineer @Mike_Selander
- Thank You!