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

Slides for my 2019 LibertyJS talk

Transcript

1. @alleyco @cahdeemer
2. @alleyco @cahdeemer Going Headless without Losing Your Head: Strategies for Making Your First Decoupled Web App a Success Christina Deemer, UX Developer, Alley
3. @alleyco @cahdeemer
4. @alleyco @cahdeemer About Alley • We are a full-service digital agency • WordPress VIP partner • We are hiring - visit alley.co for more info!
5. @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
6. @alleyco @cahdeemer
7. @alleyco @cahdeemer
8. @alleyco @cahdeemer You belong here.
9. @alleyco @cahdeemer The goal for today is to provide you with the resources, perspective, and confidence to begin your first headless project
10. @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
11. @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
12. @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.
13. @alleyco @cahdeemer Monolithic / Traditional CMS (data layer & content) CMS FRONT END
14. @alleyco @cahdeemer Monolithic / Traditional CMS (data layer & content) CMS FRONT END CMS API FRONT END Headless / Decoupled
15. @alleyco @cahdeemer CMS API FRONT END Headless / Decoupled Your choice of Framework or System
16. @alleyco @cahdeemer CMS API FRONT END Headless / Decoupled Your choice of Headless CMS
17. @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
18. @alleyco @cahdeemer Headless benefits: speed
19. @alleyco @cahdeemer Headless benefits: flexibility
20. @alleyco @cahdeemer Headless benefits: breakthrough UX
21. @alleyco @cahdeemer
22. @alleyco @cahdeemer
23. @alleyco @cahdeemer Headless Decisions • Front-end framework • SEO strategy • Deployment plan • Workflow • Data / API structure • Design system
24. @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.
25. @alleyco @cahdeemer
26. @alleyco @cahdeemer Project dimensions to consider • Type • Content • Size • Traffic • Editorial needs
27. @alleyco @cahdeemer Good candidates for traditional CMS/SSR • Blogs • Brochure sites • Portfolio Sites • Small sites
28. @alleyco @cahdeemer Good candidates for headless • Complex content • High-traffic • Advanced features • Multi-site instances • Sophisticated editorial workflow • Non-traditional sites: games, interactives, maps
29. @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
30. @alleyco @cahdeemer
31. @alleyco @cahdeemer
32. @alleyco @cahdeemer
33. @alleyco @cahdeemer Portrait of Washington Irving by John Wesley Jarvis, 1809
34. @alleyco @cahdeemer
35. @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
36. @alleyco @cahdeemer Irving, an ecosystem for your headless CMS WORDPRESS CORE COMPONENTS API IRVING CORE WP-IRVING
37. @alleyco @cahdeemer Irving, an ecosystem for your headless CMS Extends the WordPress REST API WORDPRESS CORE COMPONENTS API IRVING CORE WP-IRVING
38. @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
39. @alleyco @cahdeemer Irving, an ecosystem for your headless CMS • React-based • Takes a string of JSON components and hydrates React components • Isomorphically rendered
40. @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.
41. @alleyco @cahdeemer Irving’s Isomorphic Rendering Node.js Server Browser Isomorphic Code Redux React-Redux Content Server Request #1 Request #2
42. @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
43. @alleyco @cahdeemer
44. @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
45. @alleyco @cahdeemer Asynchronous data loading allows data to be loaded to the page without disrupting other processes
46. @alleyco @cahdeemer
47. @alleyco @cahdeemer
48. @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
49. @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
50. @alleyco @cahdeemer
51. @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
52. @alleyco @cahdeemer 01 Headless Workflow
53. @alleyco @cahdeemer
54. @alleyco @cahdeemer Vertical Slice Services Data UI/UX
55. @alleyco @cahdeemer Deep Expertise I-shaped employees
56. @alleyco @cahdeemer Deep Expertise T-shaped employees Cross-functional knowledge
57. @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
58. @alleyco @cahdeemer
59. @alleyco @cahdeemer Vertical Slice of Work
60. @alleyco @cahdeemer Workspace with both code bases available
61. @alleyco @cahdeemer
62. @alleyco @cahdeemer FE and BE files open and accessible
63. @alleyco @cahdeemer
64. @alleyco @cahdeemer Multiple terminals open
65. @alleyco @cahdeemer 02 @alleyco API Endpoints
66. @alleyco @cahdeemer Gets post only
67. @alleyco @cahdeemer
68. @alleyco @cahdeemer https://www.oursite.com/wp-json/wp/v2/posts/?tag=25
69. @alleyco @cahdeemer • Custom API endpoints • GraphQL • Extend the API Advanced WP REST API options
70. @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
71. @alleyco @cahdeemer Gets post only Gets entire page
72. @alleyco @cahdeemer
73. @alleyco @cahdeemer “name” : “content-item”
74. @alleyco @cahdeemer Config is passed as props
75. @alleyco @cahdeemer Children - an array of other components
76. @alleyco @cahdeemer
77. @alleyco @cahdeemer Component name matches name in endpoint
78. @alleyco @cahdeemer Properties from config object passed as props
79. @alleyco @cahdeemer Child nodes
80. @alleyco @cahdeemer 03 @alleyco Modular Design
81. @alleyco @cahdeemer
82. @alleyco @cahdeemer ATOMS MOLECULES ORGANISMS TEMPLATES PAGES Brad Frost: Atomic Design
83. @alleyco @cahdeemer ATOMS MOLECULES ORGANISMS TEMPLATES PAGES Brad Frost: Atomic Design
84. @alleyco @cahdeemer
85. @alleyco @cahdeemer ATOMS MOLECULES ORGANISMS TEMPLATES PAGES Brad Frost: Atomic Design
86. @alleyco @cahdeemer
87. @alleyco @cahdeemer ATOMS MOLECULES ORGANISMS TEMPLATES PAGES Brad Frost: Atomic Design
88. @alleyco @cahdeemer Organisms
89. @alleyco @cahdeemer Vertical slices Endpoints Modular design YOU MOUNT HEADLESS
90. @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.
91. @alleyco @cahdeemer Get out of your head.
92. @alleyco @cahdeemer
93. @alleyco @cahdeemer
94. @alleyco @cahdeemer
95. @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
96. @alleyco @cahdeemer Leverage Small Wins
97. @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
98. @alleyco @cahdeemer
99. @alleyco @cahdeemer Take a break
100. @alleyco @cahdeemer
101. @alleyco @cahdeemer
102. @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
103. @alleyco @cahdeemer
104. @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
105. @alleyco @cahdeemer
106. @alleyco @cahdeemer Closing
107. @alleyco @cahdeemer #headlessheroes
108. @alleyco @cahdeemer Thank You