A presentation at DrupalCon Prague 2022 in in Prague, Czechia by Jeremy Chinquist
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
The standard Drupal 9 content editing experience is on-par with other major CMS systems. An editor is logged in and viewing their article on the front-end, then they click a tab to go to the back-end and edit their content. In order to view their changes, they go away from the edit form and preview.
Decoupled systems add another layer of complexity. An editor is not necessarily logged in. The changes are not immediately visible. There is no administration toolbar. As a result, editor UX suffers and editors often reject the decoupled system. Don’t make that mistake.
This short talk centers around how we addressed these problems. What tools we developed to connect the dots. I will give insights our company learned from over 2 years of working in decoupled Drupal systems.
for free. You
can too.