Content Editing Challenges in a Decoupled (Drupal) Environment

A presentation at DrupalCon Prague 2022 in September 2022 in Prague, Czechia by Jeremy Chinquist

Slide 1

Slide 1

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Content Editing Challenges in a Decoupled (Drupal) Environment Track: Users & Editors Mag. Jeremy Chinquist1 1 drunomics GmbH September 21, 2022 / DrupalCon Europe Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 2

Slide 2

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Table of Contents 1 Introduction 2 Research & Current State-of-the-Art 3 Our Proposed Solution 4 Conclusion References Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 3

Slide 3

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Outline 1 Introduction 2 Research & Current State-of-the-Art 3 Our Proposed Solution 4 Conclusion References Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 4

Slide 4

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Education & experience Jeremy Chinquist Project Manager at drunomics G.m.b.H. / Profile Master’s Degree in Information Management, Technical University of Vienna (Vienna, Austria) B.A. in Computer Science, St. John’s University (MN, USA) Entrepeneur, volunteer for various organisations. Mag. Jeremy Chinquist More at LinkedIn Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 5

Slide 5

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Background Decoupled environments are just that, decoupled. The content producers are often left hanging. Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 6

Slide 6

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References The Content Creator’s Context Issues content creators face in a decoupled project: Missing administrative links to edit, delete, etc. No preview method. (Note: access unpublished is not a good hack!) Missing administrative details of the content including: publishing status publishing date/time moderation status revisions Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 7

Slide 7

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Our Expertise Recent decoupled projects include: lupus.digital & lupus.digital contentpool Valuita.at an instance of lupus.digital Wirtschaftsverlag implementing the lupus.digital contentpool for an array of sites such as Handwerk+Bau. Kurier implementing an in-house solution called Hermes for an array of public websites including Kurier.at. Participation in talks for the Burda’s Thunder Initiative Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 8

Slide 8

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References The Developer’s Context We, as developers, like decoupled solutions: Performance: resource loading is optimized. Backend traffic reduced when using static generation. Security Development velocity: Back-end setup is fast. Content creators can start adding content early. Maintainable: Drupal can be updated without touching the front-end, and vice versa. Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 9

Slide 9

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References The Consequences Content creators develop workarounds: Two separate browsers: Drupal Admin UI & frontend Content is published prematurely for previewing! (Search engines may even index!) The content creator gets frustrated! May reject the CMS. Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 10

Slide 10

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References The Goals How can the content creator experience be optimized in a decoupled environment? Enable content creators to have immediate access to content workflows in the front-end. Inform content creators what they are viewing: a preview, published content or unpublished. Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 11

Slide 11

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References The Goals (2) When making changes, don’t forget anonymous readers and search engines! Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 12

Slide 12

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Outline 1 Introduction 2 Research & Current State-of-the-Art 3 Our Proposed Solution 4 Conclusion References Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 13

Slide 13

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Research There is much ado about Admin UIs and Wordpress Admin UIs… 5 Best Admin UI Design Examples in 2020 (Martinez 2020) Designing an admin panel (Behler 2021) … but few resources about editor decoupled experiences. A questionnaire would be perfect! But in my case this is informal feedback from content creators. Most don’t consider the content creators, e.g. Decoupled architecture Molnar 2020 Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 14

Slide 14

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Our current solution: valuita.at A preview of a real-world example: (this is a decoupled site) Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 15

Slide 15

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Our current solution: lupus.digital (1) Requires login on the front-end (just a button click) Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 16

Slide 16

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Our current solution: lupus.digital (2) Loads back-end resources ONLY after front-end login (point for SEO!) Requires the content creator to (really) login for the back-end (security) Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 17

Slide 17

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Our current solution: lupus.digital (3) Once logged in, the Drupal tabs are loaded (somewhat helpful, but we can do better!) Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 18

Slide 18

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Our current solution: Handwerk+Bau Hide the advertisements and display meta information instead? (check) Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 19

Slide 19

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Current State-of-the-Art Ongoing discussion: simply leverage the Admin Toolbar? We’ll come back to that shortly. Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 20

Slide 20

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Outline 1 Introduction 2 Research & Current State-of-the-Art 3 Our Proposed Solution 4 Conclusion References Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 21

Slide 21

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Conceptual Design Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 22

Slide 22

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Conceptual Design: Benefits Improve placement Make compact Improve usability (and thus acceptance) Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 23

Slide 23

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Backend Extras for the Editor Communication with content creators is essential: Make the API transparent Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 24

Slide 24

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Backend Extras for the Editor Communication with content creators is essential: The manager knows which version lupus.digital feature release they are on (released 2x / year). A handbook lists the important features. The statically generated front-end status is up-to-date with all Drupal content changes (0 changes to push). Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 25

Slide 25

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Outline 1 Introduction 2 Research & Current State-of-the-Art 3 Our Proposed Solution 4 Conclusion References Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 26

Slide 26

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Results … we have to leave you hanging, the proposal is in active development. Then we will publish the results on the drunomics Blog. Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 27

Slide 27

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Thank you! Thank you! Twitter: jjchinquist LinkedIn: https://www.linkedin.com/in/jeremychinquist-b543a224/ Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 28

Slide 28

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References Thank you! Let’s get the discussion started. The current proposal brings the back-end to the front-end Fabian Franz: “Don’t bring the back-end fo the front-end. Bring the decoupled front-end into Drupal & leverage the admin toolbar.” Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment

Slide 29

Slide 29

Introduction Research & Current State-of-the-Art Our Proposed Solution Conclusion References References Behler, Christian (2021). Designing an admin panel. URL: https://uxdesign.cc/designing-an-adminpanel-3e77c19870f4 (visited on 03/01/2021). Martinez, Peter (2020). 5 Best Admin UI Design Examples in 2020. URL : https://mockitt.wondershare.com/ui-uxdesign/admin-ui-design.html (visited on 2020). Molnar, Zsolt (2020). Decoupled architecture. URL: https://inviqa.com/blog/decoupledarchitecture-how-modernise-your-frontend (visited on 04/28/2020). Mag. Jeremy Chinquist Content Editing Challenges in a Decoupled (Drupal) Environment