Going Headless without Losing Your Head: Getting Started with Decoupled WordPress

@cahdeemer @alleyco

@cahdeemer @alleyco Going Headless without Losing Your Head: Getting started
with Decoupled WordPress Christina Deemer, UX Developer, Alley

@cahdeemer @alleyco

@cahdeemer @alleyco About Alley • We are a full-service digital
agency • WordPress VIP partner • We are hiring!

@cahdeemer @alleyco About Me • Career-changer • Certiﬁcate in web
design and development • Passionate about a11y and mentorship • Cat lady (Pickles & Luna) • Will never have too many books • Loves screwball comedies from the 1930s

@cahdeemer @alleyco

@cahdeemer @alleyco You belong here.

@cahdeemer @alleyco The goal for today is to provide you
with the resources, perspective, and conﬁdence to begin your ﬁrst headless project

@cahdeemer @alleyco Agenda 1. Headless 101 2. How did we
get here? 3. Beneﬁts and Tradeoffs 4. Choosing Headless 5. Headless in the Wild 6. Headless State of Mind 7. On Not Losing Your Head

get here? 3. Beneﬁts and Tradeoffs 4. Choosing Headless 5. Headless in the Wild 6. Headless State of Mind 7. On Not Losing Your Head Ancient statues of Cleopatra and Diocrides, Delos, Greece

@cahdeemer @alleyco A headless or decoupled application is where a
front-end, usually in JavaScript, gets its data from a CMS via a REST API endpoint.

@cahdeemer @alleyco Monolithic / Traditional CMS (data layer & content)
CMS FRONT END

@cahdeemer @alleyco Monolithic / Traditional CMS (data layer & content)
CMS FRONT END CMS API FRONT END Headless / Decoupled

get here? 3. Beneﬁts and Tradeoffs 4. Choosing Headless 5. Headless in the Wild 6. Headless State of Mind 7. On Not Losing Your Head Headless statue of Athena, Palazzo Massimo alle Terme, Rome. Photo by Carole Raddato

@cahdeemer @alleyco Content in the 90s • Static HTML Files
• Hard to update content • Still awesome Disney.com in 1996

@cahdeemer @alleyco Web 2.0 • First billion online • Rise
of the CMS (and WordPress!) • Easier to build sites and update content WordPress in 2003

@cahdeemer @alleyco The Rise of Mobile • iPhone introduced in
2007 • M-dot sites • Responsive design & media queries

@cahdeemer @alleyco Today • The next billion online • New
channels for content • Users have high expectations • Performance and ﬂexibility are key

@cahdeemer @alleyco

get here? 3. Beneﬁts & Tradeoffs 4. Choosing Headless 5. Headless in the Wild 6. Headless State of Mind 7. On Not Losing Your Head Headless Buddhas in Ayutthaya. Photo by ChiladaTour

@cahdeemer @alleyco Headless beneﬁts: speed

@cahdeemer @alleyco Headless beneﬁts: ﬂexibility

@cahdeemer @alleyco Headless beneﬁts: breakthrough UX

@cahdeemer @alleyco

@cahdeemer @alleyco Headless Decisions • Front-end framework • SEO strategy
• Deployment plan • Workﬂow • Data / API structure • Design system

get here? 3. Beneﬁts & Tradeoffs 4. Choosing Headless 5. Headless in the Wild 6. Headless State of Mind 7. On Not Losing Your Head Statue at Qianling. Photo by Matteo Compareti.

@cahdeemer @alleyco

@cahdeemer @alleyco Project dimensions to consider • Type • Content
• Size • Traﬃc

@cahdeemer @alleyco Good candidates for traditional CMS • Blogs •
Brochure sites • Portfolio Sites • Small sites

@cahdeemer @alleyco Good candidates for headless • Complex content •
High-traﬃc • Advanced features • Multi-site instances • Non-traditional sites: games, interactives, maps

get here? 3. Beneﬁts & Tradeoffs 4. Choosing Headless 5. Headless in the Wild 6. Headless State of Mind 7. On Not Losing Your Head Winged Victory of Samothrace. Photo by muratart

@cahdeemer @alleyco

@cahdeemer @alleyco Portrait of Washington Irving by John Wesley Jarvis,
1809

@cahdeemer @alleyco

@cahdeemer @alleyco Irving, a framework for Headless WordPress • Developed
by very smart people at Alley • Open-source • Find it here: https://github.com/alleyinteractive/irving

@cahdeemer @alleyco Irving, a framework for Headless WordPress • Caching
with Redis • Modular component structure on the FE and BE • Isomorphic rendering

@cahdeemer @alleyco Irving, a framework for Headless WordPress WORDPRESS CORE
COMPONENTS API IRVING CORE WP-IRVING

@cahdeemer @alleyco Irving, a framework for Headless WordPress Extends the
WordPress REST API WORDPRESS CORE COMPONENTS API IRVING CORE WP-IRVING

@cahdeemer @alleyco Irving, a framework for Headless WordPress Node JS
back end Running a React application WORDPRESS CORE COMPONENTS API IRVING CORE WP-IRVING

@cahdeemer @alleyco Isomorphic rendering means views are generated both on
the server side and the client side. Initial rendering happens server side; subsequent renders happen client side.

@cahdeemer @alleyco Irving’s Isomorphic Rendering Node.js Server Browser Isomorphic Code
Redux React-Redux Content Server Request #1 Request #2

@cahdeemer @alleyco Headless & SEO • Google has been indexing
and ranking client-side rendered sites since 2014 • Googlebot is not perfect -- YMMV • Isomorphic rendering can be complicated • Still need a thoughtful SEO strategy

@cahdeemer @alleyco

@cahdeemer @alleyco Fortune • Uses Alley’s headless framework, Irving •
Decreased bounce rates by 12% • Decreased page load times by 60% • Hosted by WordPress VIP ◦ BE: Go platform ◦ FE: Node.js platform

@cahdeemer @alleyco Asynchronous data loading allows data to be loaded
to the page without disrupting other processes

@cahdeemer @alleyco

@cahdeemer @alleyco West Philly History Map • Built in 2016
• Project of the People’s Emergency Center and the Islamic Cultural Preservation and Information Council • Early version of the WP REST API • Vanilla JS and jQuery • Easy for staff to update and maintain

@cahdeemer @alleyco Rendering data for History Map (2016) Out of
the box WP REST API endpoint Parse WP JSON with jquery to transform data into geoJSON SPA Templating Tool (Handlebars)

@cahdeemer @alleyco

get here? 3. Beneﬁts & Tradeoffs 4. Choosing Headless 5. Headless in the Wild 6. Headless State of Mind 7. On Not Losing Your Head Ashmolean Museum, University of Oxford | AN1924.162

@cahdeemer 01 @alleyco Headless Workﬂow

@cahdeemer @alleyco

@cahdeemer @alleyco Vertical Slice Services Data UI/UX

@cahdeemer @alleyco Deep Expertise I-shaped employees

@cahdeemer @alleyco Deep Expertise T-shaped employees Cross-functional knowledge

@cahdeemer @alleyco A Team of T-shaped people • Possess broad
knowledge and range of skills • Make decisions and work quickly • Share ownership of project • Resist silos • Enjoy collaboration

@cahdeemer @alleyco

@cahdeemer @alleyco Vertical Slice of Work

@cahdeemer @alleyco Workspace with both code bases available

@cahdeemer @alleyco

@cahdeemer @alleyco FE and BE ﬁles open and accessible

@cahdeemer @alleyco

@cahdeemer @alleyco Multiple terminals open

@cahdeemer 02 @alleyco API Endpoints

@cahdeemer @alleyco WP REST API • Standardizes core WordPress functionality
• Opens up WordPress functionality to the world • Initially a series of stand-alone plugins • Fully integrated into core in 4.7 (2016)

@cahdeemer @alleyco WP REST API • Makes Gutenberg possible •
REST API Handbook: https://developer.wordpress.org/rest-api/ • Not scary once you get to know it, just JSON

@cahdeemer @alleyco https://www.oursite.com/wp-json/wp/v2/posts/46

@cahdeemer @alleyco Gets post only

@cahdeemer @alleyco

@cahdeemer @alleyco https://www.oursite.com/wp-json/wp/v2/posts/?tag=25

@cahdeemer @alleyco • Custom API endpoints • GraphQL • Extend
the API Advanced REST API options

@cahdeemer @alleyco • Plugin developed by very smart people at
Alley • Open source • Every API request returns an array of component objects, which describe the components, their positions, and its state. wp-irving

@cahdeemer @alleyco Gets post only Gets entire page

@cahdeemer @alleyco

@cahdeemer @alleyco “name” : “content-item”

@cahdeemer @alleyco Conﬁg is passed as props

@cahdeemer @alleyco Children - an array of other components

@cahdeemer @alleyco

@cahdeemer @alleyco Component name matches name in endpoint

@cahdeemer @alleyco Properties from conﬁg object passed as props

@cahdeemer @alleyco Child nodes

@cahdeemer 03 @alleyco Modular Design

@cahdeemer @alleyco

@cahdeemer @alleyco ATOMS MOLECULES ORGANISMS TEMPLATES PAGES Brad Frost: Atomic
Design

@cahdeemer @alleyco

Design

@cahdeemer @alleyco

Design

@cahdeemer @alleyco Organisms

@cahdeemer @alleyco Vertical slices Endpoints Modular design YOU MOUNT HEADLESS

get here? 3. Beneﬁts & Tradeoffs 4. Choosing Headless 5. Headless in the Wild 6. Headless State of Mind 7. On Not Losing Your Head Headless sculptures at the Archaeological Museum of Ancient Corinth. Photo by Matthew Kang.

@cahdeemer @alleyco Get out of your head.

@cahdeemer @alleyco

@cahdeemer @alleyco Asking for Help 1. Act of strength &
courage 2. Smart & eﬃcient to use the resources available 3. Models positive behavior 4. Surfaces issues others may have

@cahdeemer @alleyco Leverage Small Wins

@cahdeemer @alleyco Progress Principle “Of all the things that can
boost emotions, motivation, and perceptions during a workday, the single most important is making progress in meaningful work. And the more frequently people experience that sense of progress, the more likely they are to be creatively productive in the long run.” Teresa Amabile and Steven J. Kramer “The Power of Small Wins” Harvard Business Review, May 2011

@cahdeemer @alleyco

@cahdeemer @alleyco Take a break

@cahdeemer @alleyco

@cahdeemer @alleyco Beneﬁts of a walk • 60% more creative
after a walk • 5-16 minutes • Also reduces stress, improves memory, focus, and concentration • Helps surface new ideas

@cahdeemer @alleyco

@cahdeemer @alleyco Beneﬁts of sleeping on it • 60-90 minute
nap more effective at boosting brain performance than 200 mg of caffeine • REM sleep enhances creative problem solving • Dreaming helps the brain recognize and reorganize learned material

@cahdeemer @alleyco

@cahdeemer @alleyco Closing

@cahdeemer @alleyco #headlessheroes

@cahdeemer @alleyco Thank You

Going Headless without Losing Your Head: Gettin...

Going Headless without Losing Your Head: Getting Started with Decoupled WordPress

More Decks by Christina Deemer

Other Decks in Programming

Featured

Transcript