May 6, 2021

A Drop of Decoupled Menu Initiative

The Decoupled Menu Initiative Team ran an online Hackathon during DrupalCon North America 2021. It is always a pleasure to see participation from a diverse group consisting of senior backend and frontend developers to those who have just started using Drupal. Here, I am examining why it held importance, what we achieved and how we can drive it forward. You can lend a hand in this initiative, even if you have never participated before in this or have just started using Drupal!

Hackathon header

Google Suggest — more than just a suggestion

Back in 2004, Google introduced a revolutionary little feature called Google Suggest. It supercharged the search field to offer suggestions as you type, without a page reload. The nifty “requests” between the server and the web page provided a pleasing user experience.

Since then, web developers’ focus on user experience has narrowed the gap between desktop and web. Javascript led this revolution. Numerous Frameworks sprung up like daffodils in spring. Early implementations such as Google Suggest used small requests between the web page and the server. Over time as the network bandwidth increased, these few bytes became hundreds, then kilobytes and much more. These requests started witnessing increased complexity, complex application and high volume. The structure, relationship, security of the data began posing more challenges.

The expectation from Content Management Systems changed to meet the excellent user experience. Instead of providing a simple text or a piece of pre-rendered code snippets, they (frontend dev) started demanding structured data like JSON from the server. This allowed Frontend Developers to write much cleaner and complex logic than ever before. Thus began a new era of Content Management System, where various CMSs started focusing on providing API endpoints serving JSON content.

Why Headless and what is in it for Drupal?

A Headless CMS is a backend only content management system built as a content repository that makes content accessible via an API for display on any device.

Many web pages are trying to mimic the native App’s user experience nowadays. An area where traditional CMS are struggling to cope up. Drupal is no longer being used to display just web pages. Multichannel publishing is becoming common. Drupal can serve content-hungry applications inside a smartphone or a shy data-cautious app inside a smartwatch.

Drupal as Headless CMS

Including JSON:API in core laid the foundation stone for Drupal to embrace the Headless CMS ability. Contenta CMS and DruxtJS used this foundation wholeheartedly. Decoupled Menu Initiative aims to make Headless CMS experience better for Drupal users. This core initiative is using the “menu in a decoupled systems” scenario to recognize improvements. 

Hackathon Highlights

Hackathon during the Drupalcon NA 2021 was quite successful in identifying and implementing a lot of improvements. It was thrilling to see people from various disciplines join hands to enhance the decoupled Drupal experience. There was an overwhelming interest in improving the documentation and trying out the fresh “General Project” category on Drupal.org.

Shibin Blog author

Shibin Das

Senior Backend Developer
Profile on Drupal.org

shibin@factorial.io

Hackathon organized several events around the following projects:

components

Generic Drupal Web Components

A library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Drupal.

svelte

Drupal svelte component menu

A decoupled menu component for Drupal in Svelte.

documentation

 Documentation

Identified various personas. Guides targeting different personas are planned. We have a rough outline now.

Following key statistics were achieved during hackathon:

  • Over 39 issues to work on, 11 fixed, 10+ credits issued
  • Gitlab CI integrations for linting and tests 
  • Storybook integration
  • Tugboat integration with Gitlab CI
  • Lighthouse branch previews (using Tugboat integration)
  • Consuming Web Component hosted on Drupal.org inside a React App
  • Collected over 14 pages of idea on how to improve documentation
  • Drafted a rough plan on how to further collaborate about documentation

Hackathon helped accelerate development on issues collected over time in the Drupal.org issue queue. It’s a great way to get help and give help. I look forward to attending more hackathons like this to brainstorm and improve the Decoupled Drupal experience.

How can you Help?

Are you somebody who has just started using Drupal? Or are you a veteran developer? No matter who you are and where you are from, you can help drive this initiative forward!