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

Going Headless without Losing Your Head: Strategies for Making Your First Decoupled Web App a Success

Going Headless without Losing Your Head: Strategies for Making Your First Decoupled Web App a Success

Slides for my 2019 LibertyJS talk

Christina Deemer

October 25, 2019
Tweet

More Decks by Christina Deemer

Other Decks in Programming

Transcript

  1. @alleyco @cahdeemer Going Headless without Losing Your Head: Strategies for

    Making Your First Decoupled Web App a Success Christina Deemer, UX Developer, Alley
  2. @alleyco @cahdeemer About Alley • We are a full-service digital

    agency • WordPress VIP partner • We are hiring - visit alley.co for more info!
  3. @alleyco @cahdeemer About Me • Pronouns She/Her • 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. @alleyco @cahdeemer The goal for today is to provide you

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

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

    3. Choosing Headless 4. Headless in the Wild 5. Headless State of Mind 6. On Not Losing Your Head Ancient statues of Cleopatra and Diocrides, Delos, Greece
  7. @alleyco @cahdeemer 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. @alleyco @cahdeemer Monolithic / Traditional CMS (data layer & content)

    CMS FRONT END CMS API FRONT END Headless / Decoupled
  9. @alleyco @cahdeemer Agenda 1. Headless 101 2. Benefits & Tradeoffs

    3. Choosing Headless 4. Headless in the Wild 5. Headless State of Mind 6. On Not Losing Your Head Headless Buddhas in Ayutthaya. Photo by ChiladaTour
  10. @alleyco @cahdeemer Headless Decisions • Front-end framework • SEO strategy

    • Deployment plan • Workflow • Data / API structure • Design system
  11. @alleyco @cahdeemer Agenda 1. Headless 101 2. Benefits & Tradeoffs

    3. Choosing Headless 4. Headless in the Wild 5. Headless State of Mind 6. On Not Losing Your Head Statue at Qianling. Photo by Matteo Compareti.
  12. @alleyco @cahdeemer Good candidates for traditional CMS/SSR • Blogs •

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

    High-traffic • Advanced features • Multi-site instances • Sophisticated editorial workflow • Non-traditional sites: games, interactives, maps
  14. @alleyco @cahdeemer Agenda 1. Headless 101 2. Benefits & Tradeoffs

    3. Choosing Headless 4. Headless in the Wild 5. Headless State of Mind 6. On Not Losing Your Head Winged Victory of Samothrace. Photo by muratart
  15. @alleyco @cahdeemer Irving, an ecosystem for your headless CMS •

    Developed by very smart people at Alley • Open-source • Battle-tested on enterprise level clients • Find it here: https://github.com/alleyinteractive/irving
  16. @alleyco @cahdeemer Irving, an ecosystem for your headless CMS Extends

    the WordPress REST API WORDPRESS CORE COMPONENTS API IRVING CORE WP-IRVING
  17. @alleyco @cahdeemer Irving, an ecosystem for your headless CMS The

    start of the show (Such a diva) WORDPRESS CORE COMPONENTS API IRVING CORE WP-IRVING
  18. @alleyco @cahdeemer Irving, an ecosystem for your headless CMS •

    React-based • Takes a string of JSON components and hydrates React components • Isomorphically rendered
  19. @alleyco @cahdeemer 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.
  20. @alleyco @cahdeemer 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
  21. @alleyco @cahdeemer 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
  22. @alleyco @cahdeemer Asynchronous data loading allows data to be loaded

    to the page without disrupting other processes
  23. @alleyco @cahdeemer 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
  24. @alleyco @cahdeemer 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
  25. @alleyco @cahdeemer Agenda 1. Headless 101 2. Benefits & Tradeoffs

    3. Choosing Headless 4. Headless in the Wild 5. Headless State of Mind 6. On Not Losing Your Head Ashmolean Museum, University of Oxford | AN1924.162
  26. @alleyco @cahdeemer 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
  27. @alleyco @cahdeemer • 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
  28. @alleyco @cahdeemer Agenda 1. Headless 101 2. Benefits & Tradeoffs

    3. Choosing Headless 4. Headless in the Wild 5. Headless State of Mind 6. On Not Losing Your Head Headless sculptures at the Archaeological Museum of Ancient Corinth. Photo by Matthew Kang.
  29. @alleyco @cahdeemer 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
  30. @alleyco @cahdeemer 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
  31. @alleyco @cahdeemer 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
  32. @alleyco @cahdeemer 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