Get Traction with Interaction: Modeling Interactive Content with React and Contentful

How do we make content come to life in our readers' hands with React? In this talk, I describe the approach we use at Clue to render interactive content in the middle of text-based articles on our React-based content site, helloclue.com, in a way similar to the interactive pieces publications such as The New York Times and the New Yorker have been developing. I cover the content model, the code, and the production process Clue uses to create interactive content that works for both our developers and our writers.

Transcript

1. Jesse Pinho • @jessepinho • jessepinho.com
2. Jesse Pinho • @jessepinho • jessepinho.com
3. Jesse Pinho • @jessepinho • jessepinho.com
4. PERIODS Jesse Pinho • @jessepinho • jessepinho.com
5. PERIODS BIOLOGY Jesse Pinho • @jessepinho • jessepinho.com
6. PERIODS BIOLOGY ANATOMY Jesse Pinho • @jessepinho • jessepinho.com
7. Jesse Pinho • @jessepinho • jessepinho.com
8. Jesse Pinho • @jessepinho • jessepinho.com
9. Jesse Pinho • @jessepinho • jessepinho.com
10. Jesse Pinho • @jessepinho • jessepinho.com
11. Jesse Pinho • @jessepinho • jessepinho.com
12. Jesse Pinho • @jessepinho • jessepinho.com
14. Jesse Pinho • @jessepinho • jessepinho.com
15. Jesse Pinho • @jessepinho • jessepinho.com
16. Jesse Pinho • @jessepinho • jessepinho.com
17. Jesse Pinho • @jessepinho • jessepinho.com
18. Writers can make changes to text without waiting for a code deploy. Jesse Pinho • @jessepinho • jessepinho.com
19. Content can be translated using Contentful's existing localization functionality. Jesse Pinho • @jessepinho • jessepinho.com
20. The setup isn't brittle. Jesse Pinho • @jessepinho • jessepinho.com
21. Writers don't have to deal with code. Jesse Pinho • @jessepinho • jessepinho.com
22. Writers are able to preview their changes and get quick feedback. Jesse Pinho • @jessepinho • jessepinho.com
23. https://nyti.ms/2SAtg3V Jesse Pinho • @jessepinho • jessepinho.com
24. Jesse Pinho • @jessepinho • jessepinho.com
25. Jesse Pinho • @jessepinho • jessepinho.com
26. Jesse Pinho • @jessepinho • jessepinho.com
27. Jesse Pinho • @jessepinho • jessepinho.com
28. http://bit.ly/contentful-microcopy Jesse Pinho • @jessepinho • jessepinho.com
29. Jesse Pinho • @jessepinho • jessepinho.com
30. storybynumbers/rich-text-to-react Jesse Pinho • @jessepinho • jessepinho.com
31. Jesse Pinho • @jessepinho • jessepinho.com
32. Jesse Pinho • @jessepinho • jessepinho.com
33. Jesse Pinho • @jessepinho • jessepinho.com
34. Jesse Pinho • @jessepinho • jessepinho.com
35. Jesse Pinho • @jessepinho • jessepinho.com
36. Jesse Pinho • @jessepinho • jessepinho.com
37. Jesse Pinho • @jessepinho • jessepinho.com
38. Jesse Pinho • @jessepinho • jessepinho.com
39. Jesse Pinho • @jessepinho • jessepinho.com
40. 1. rich-text-to-react converts nodes to corresponding React components. 2. If a node is of type CustomBlock, the CustomBlock React component is loaded and rendered. 3. The CustomBlock loads a component from its registry and renders it. Jesse Pinho • @jessepinho • jessepinho.com
41. Jesse Pinho • @jessepinho • jessepinho.com
42. Jesse Pinho • @jessepinho • jessepinho.com
43. Jesse Pinho • @jessepinho • jessepinho.com
44. Jesse Pinho • @jessepinho • jessepinho.com
45. Jesse Pinho • @jessepinho • jessepinho.com
46. Jesse Pinho • @jessepinho • jessepinho.com
47. Jesse Pinho • @jessepinho • jessepinho.com
48. Jesse Pinho • @jessepinho • jessepinho.com
49. Goals 1. ✅ Writers can make changes to text without waiting for a code deploy. 2. ✅ Content can be translated using Contentful's existing localization functionality. 3. " The setup isn't brittle. 4. " Writers don't have to deal with code. 5. ✅ Writers are able to preview their changes and get quick feedback. Jesse Pinho • @jessepinho • jessepinho.com
50. Next steps 1. Better UI for editing microcopy 2. Tooling for managing translation of microcopy 3. Feedback from you! Jesse Pinho • @jessepinho • jessepinho.com
51. Twitter: @jessepinho GitHub: @jessepinho Web: jessepinho.com helloclue.com/jobs