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

Creating an enterprise level editorial experience for Drupal 8 using React

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.

Ruben Teijeiro

June 11, 2019
Tweet

More Decks by Ruben Teijeiro

Other Decks in Technology

Transcript

  1. Creating an enterprise level editorial
    experience for Drupal 8 using React

    View Slide


  2. View Slide

  3. Ruben Teijeiro
    @rteijeiro

    View Slide

  4. drupalhero.es

    View Slide

  5. drupal.surf

    View Slide

  6. 1xinternet.de

    View Slide


  7. View Slide

  8. Decoupled is about Multichannel

    View Slide

  9. Content must be distributed
    across the different channels

    View Slide

  10. https://softloom.com
    Corporative website
    e-Commerce
    Blog
    Marketing Automation
    CRM
    ERP
    Helpdesk
    Search index
    Social Media
    Advertisement
    Chats
    Mobile Apps
    Videogames
    Email

    View Slide

  11. Content must be adapted to
    different devices

    View Slide

  12. https://softloom.com
    Computers
    Gaming consoles
    Smartphones
    Wearables
    Digital Signage
    Smart home
    Voice Assistants
    VR Devices
    Internet of Things
    Bio technologies

    View Slide

  13. Speed and consistency of the
    message across the channels

    View Slide

  14. View Slide

  15. Drupal is doing a great job
    providing digital experiences

    View Slide

  16. Being an API-First CMS allows
    Drupal to serve multiple channels

    View Slide

  17. Drupal architecture allows the
    physical decoupling of
    Content
    Management
    Content
    Delivery
    Content
    Presentation

    View Slide

  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

    View Slide

  19. Decoupled is not only about
    delivery and presentation

    View Slide

  20. Content authoring is
    Story Telling

    View Slide

  21. Editors prefer other systems

    View Slide

  22. They expect the same from Drupal

    View Slide

  23. Redefining the very core of Drupal
    will cause panic

    View Slide

  24. Not every case is the same
    Listen to your editors

    View Slide

  25. Analyse every use case and
    scenario differently and…

    View Slide

  26. START SMALL

    View Slide

  27. Paragraphs

    View Slide

  28. View Slide

  29. Media Library

    View Slide

  30. View Slide

  31. Layout Builder

    View Slide

  32. View Slide

  33. Elementor
    Live Page Builder

    View Slide

  34. View Slide

  35. Content Calendar

    View Slide

  36. View Slide

  37. Drupal Guthenberg

    View Slide

  38. View Slide

  39. DX8

    View Slide

  40. View Slide

  41. OpenStory.io

    View Slide

  42. View Slide

  43. Drupal HAX
    https://www.drupal.org/project/hax

    View Slide

  44. View Slide

  45. Glazed Builder

    View Slide

  46. View Slide

  47. Droopler

    View Slide

  48. View Slide

  49. • Page refreshes are common
    • More time spent building than creating content
    • Happy editors mean better content
    • Content is king!
    Pain Points

    View Slide

  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

    View Slide

  51. DEMO

    View Slide

  52. Under the hood

    View Slide

  53. + =
    Drupal Dreact
    React
    Repal

    View Slide

  54. View Slide

  55. Roadmap

    View Slide

  56. View Slide

  57. Learn more

    View Slide

  58. Wednesday

    View Slide

  59. Thursday

    View Slide

  60. Friday

    View Slide

  61. Contribution Sprints

    View Slide

  62. Questions?

    View Slide

  63. Thanks!

    View Slide