Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Going Headless without Losing Your Head: Gettin...

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

WordCamp NYC 2019

Christina Deemer

September 15, 2019
Tweet

More Decks by Christina Deemer

Other Decks in Programming

Transcript

  1. @cahdeemer @alleyco Going Headless without Losing Your Head: Getting started

    with Decoupled WordPress Christina Deemer, UX Developer, Alley
  2. @cahdeemer @alleyco About Alley • We are a full-service digital

    agency • WordPress VIP partner • We are hiring!
  3. @cahdeemer @alleyco About Me • Career-changer • Certificate 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
  4. @cahdeemer @alleyco The goal for today is to provide you

    with the resources, perspective, and confidence to begin your first headless project
  5. @cahdeemer @alleyco Agenda 1. Headless 101 2. How did we

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

    get here? 3. Benefits 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
  7. @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.
  8. @cahdeemer @alleyco Monolithic / Traditional CMS (data layer & content)

    CMS FRONT END CMS API FRONT END Headless / Decoupled
  9. @cahdeemer @alleyco Agenda 1. Headless 101 2. How did we

    get here? 3. Benefits 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
  10. @cahdeemer @alleyco Content in the 90s • Static HTML Files

    • Hard to update content • Still awesome Disney.com in 1996
  11. @cahdeemer @alleyco Web 2.0 • First billion online • Rise

    of the CMS (and WordPress!) • Easier to build sites and update content WordPress in 2003
  12. @cahdeemer @alleyco The Rise of Mobile • iPhone introduced in

    2007 • M-dot sites • Responsive design & media queries
  13. @cahdeemer @alleyco Today • The next billion online • New

    channels for content • Users have high expectations • Performance and flexibility are key
  14. @cahdeemer @alleyco Agenda 1. Headless 101 2. How did we

    get here? 3. Benefits & 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
  15. @cahdeemer @alleyco Headless Decisions • Front-end framework • SEO strategy

    • Deployment plan • Workflow • Data / API structure • Design system
  16. @cahdeemer @alleyco Agenda 1. Headless 101 2. How did we

    get here? 3. Benefits & 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.
  17. @cahdeemer @alleyco Good candidates for traditional CMS • Blogs •

    Brochure sites • Portfolio Sites • Small sites
  18. @cahdeemer @alleyco Good candidates for headless • Complex content •

    High-traffic • Advanced features • Multi-site instances • Non-traditional sites: games, interactives, maps
  19. @cahdeemer @alleyco Agenda 1. Headless 101 2. How did we

    get here? 3. Benefits & 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
  20. @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
  21. @cahdeemer @alleyco Irving, a framework for Headless WordPress • Caching

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

    WordPress REST API WORDPRESS CORE COMPONENTS API IRVING CORE WP-IRVING
  23. @cahdeemer @alleyco Irving, a framework for Headless WordPress Node JS

    back end Running a React application WORDPRESS CORE COMPONENTS API IRVING CORE WP-IRVING
  24. @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.
  25. @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
  26. @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
  27. @cahdeemer @alleyco Asynchronous data loading allows data to be loaded

    to the page without disrupting other processes
  28. @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
  29. @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)
  30. @cahdeemer @alleyco Agenda 1. Headless 101 2. How did we

    get here? 3. Benefits & 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
  31. @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
  32. @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)
  33. @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
  34. @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
  35. @cahdeemer @alleyco Agenda 1. Headless 101 2. How did we

    get here? 3. Benefits & 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.
  36. @cahdeemer @alleyco Asking for Help 1. Act of strength &

    courage 2. Smart & efficient to use the resources available 3. Models positive behavior 4. Surfaces issues others may have
  37. @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
  38. @cahdeemer @alleyco Benefits of a walk • 60% more creative

    after a walk • 5-16 minutes • Also reduces stress, improves memory, focus, and concentration • Helps surface new ideas
  39. @cahdeemer @alleyco Benefits 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