Creating an enterprise level editorial experience for Drupal 8 using React

With the powerful web APIs it has become relatively easy to create decoupled applications with Drupal 8 as a backend. A number of lighthouse applications have been created and powerful demo systems and starter kits such as 'Reservoir' und 'Contenta' have emerged.

Usually decoupled applications are used to display content, but the editing of content still takes place in the backend.

However, technologies like React can perfectly be used to create a great editorial experience. Given the powerful REST APIs of Drupal, a decoupled editing system can easily be integrated.

In a recent project, we have created a decoupled application with React, that allows for editing content directly in the frontend. Using the possibilities of React to the fullest, we have created a modern editorial experience with 'in-place' editing, 'context-sensitive' editing, 'drag-n-drop' content placement and creation, and much more.

In this session, we will present the application and our vision of what an enterprise level editorial experience should look like.

Besides the niceness of the application, we also discuss the challenges we encountered and our planned future development.

The main takeaways of this session will be, what to expect when going fully decoupled with an editorial experience and how this approach fits into the development of Drupal.

Transcript

1. Creating an enterprise level editorial experience for Drupal 8 using React
2. <SPAM>
3. Ruben Teijeiro @rteijeiro
4. drupalhero.es
5. drupal.surf
6. 1xinternet.de
7. </SPAM>
8. Decoupled is about Multichannel
9. Content must be distributed across the different channels
10. https://softloom.com Corporative website e-Commerce Blog Marketing Automation CRM ERP Helpdesk Search index Social Media Advertisement Chats Mobile Apps Videogames Email
11. Content must be adapted to different devices
12. https://softloom.com Computers Gaming consoles Smartphones Wearables Digital Signage Smart home Voice Assistants VR Devices Internet of Things Bio technologies
13. Speed and consistency of the message across the channels
15. Drupal is doing a great job providing digital experiences
16. Being an API-First CMS allows Drupal to serve multiple channels
17. Drupal architecture allows the physical decoupling of Content Management Content Delivery Content Presentation
18. Content Management Content Delivery Content Presentation Traditional CMS Page-based system for content authoring and presentation Content is stored mixed with the presentation Delivers pages and content composed by the user to a single channel Headless CMS Content authoring Content delivery by API No functionality, presentation depends on other systems Decoupled CMS Content authoring Content delivery through a website or API Presentation can be rendered server side and by client applications
19. Decoupled is not only about delivery and presentation
20. Content authoring is Story Telling
21. Editors prefer other systems
22. They expect the same from Drupal
23. Redefining the very core of Drupal will cause panic
24. Not every case is the same Listen to your editors
25. Analyse every use case and scenario differently and…
26. START SMALL
27. Paragraphs
29. Media Library
31. Layout Builder
33. Elementor Live Page Builder
35. Content Calendar
37. Drupal Guthenberg
39. DX8
41. OpenStory.io
43. Drupal HAX https://www.drupal.org/project/hax
45. Glazed Builder
47. Droopler
49. • Page refreshes are common • More time spent building than creating content • Happy editors mean better content • Content is king! Pain Points
50. There are not pages in Decoupled but we need to have the ability to get all the data needed to build our GUI pages in one single request
51. DEMO
52. Under the hood
53. + = Drupal Dreact React Repal
55. Roadmap
57. Learn more
58. Wednesday
59. Thursday
60. Friday
61. Contribution Sprints
62. Questions?
63. Thanks!