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

WordCamp NYC 2019

Transcript

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