In today’s rapidly growing ‘experience the interface’ age, user experience has been elevated to a new height. It is all about those “little things” that add up to a professional, compelling brand presence. And while developing the visitor interface (client-side) with popular front end technologies has been making huge strides, not much was done for the other user of the Drupal websites, i.e, admin.

At DrupalCon Vienna, the Drupal community decided to do something about it.

It decided to adopt a more modern approach and started working on a strategic initiative to improve Drupal administrative and editorial UI using React. Here’s what triggered the need and how far has the community moved forward with it:

the-saga-of-drupa-javascript-srijan-technologies

What Triggered the Drupal Javascript Driven Interface Initiative?

Drupal’s admin experience has disappointingly remained (mostly) the same from version 6 to 8: basic and plain-looking forms, lack of expected visual niceties, such as live previews, and drag and drop.

The style guide proposal for Drupal 8 (Seven Style Guide) is intended to help shape and direct administrative UI development, with the goal being a theme-and brand-consistent administrative experience.

The community has been rife about the need for a compelling admin experience, preferably one on Javascript, since it is popularly used for headless projects.

“Drupal 8.7 focuses on bringing the new javascript driven design system.”

The admin interface is moved to become more component based, which means Admin theme maintainers need to maintain lesser efforts. It can be customized, but that carries an additional cost and plenty of work.

Drupal's own administration interface has not yet embraced a modern JavaScript framework. This is where the need is to provide a cutting-edge experience for its own users: the site's content creators and administrators.

the-saga-drupal-and-javascript-driven-admin-srijan

An example of Ember-enhanced Drupal.com

As more and more organizations are approaching headless as the way of building, not working in sync with JS makes it harder to accelerate the overall Drupal project growth. This also makes it difficult to accelerate certain improvements to Drupal's authoring and site-building experience.

The absence of Javascript from Drupal also makes it tough to demonstrate how new best practices and JavaScript approaches could be leveraged and extended (by core and contributed modules) to create new Drupal features.

Further, the need comes as a part of the Drupal evolution journey where on the whole, it has moved towards providing a more seamless user experience with existing tools and better processes.

The Drupal Javascript-driven Admin Interface

According to Drupal.org the goal of the Admin UI & JavaScript Modernisation initiative is to provide a re-imagined content authoring experience and site administration.

The Drupal Javascript-driven Admin InterfaceAdmin experience in Drupal, built on top of modern JavaScript foundations

It includes:

  1. Creating a new "design system" for Drupal's editing and administrative interface, and implementing this incrementally
  2. Creating a decoupled, single-page React application that manages Drupal administration
  3. Modernizing the underlying JavaScript code and enhancing Drupal's APIs to support all types of decoupled applications.

Basically, the focus is to simplify, modernize and embrace the change for admin experience.

  1. Simplify: As mentioned, the admin interface hasn’t changed much in these years.  The redesign is based on a modern administrative experience with the aim to make it approachable for content authors, using a JavaScript framework (React). The intent is to create a standalone decoupled application, *not* to change anything about the Drupal theme and render layers.
  2. Modernize: Work on modernizing the code base to ensure consistency and adherence with best practices, adding native tools for testing JavaScript. The aim here is to help build a community of JavaScript-savvy Drupalist core developers and happy, energized JavaScript maintainers
  3. Embrace: The third point to focus is on embracing the changes in workflows, tools, and practices familiar to existing JavaScript developers. This is aimed to bring more of these developers into the Drupal community, both as users and as contributors.

The Challenges with React Based Admin Interface

Progress in improving Drupal's web services support and JavaScript-based administration interface is intriguing, but it doesn’t come without its challenges.

One of the prime challenges is between the release cycles. React’s release cycles are faster than Drupal’s. If the community needs to be in sync with React they need to find ways to accommodate this challenge.

Another disadvantage includes delaying the initial rendering of some admin content until after the browser downloads and parse a JavaScript framework or potentially complicated workarounds to generate the initial render with Drupal when these frameworks tend to be executed server-side with Node.js.

The third challenge comes from within a sect of the community which believes that instead of bringing up a new JS technology, the focus must be on using modern PHP.

What’s More With Javascript Driven Interface?

  1. Stabilizing the JSON API module: JSON API is a widely-used specification for building web service APIs in JSON for developers to access the content and configuration managed in Drupal.
  2. Improving JavaScript testing infrastructure: Drupal's testing infrastructure is excellent for testing PHP code, but until now, it was not optimized for testing JavaScript code. As the amount of JavaScript code in Drupal's administrative interface will increase, the testing infrastructure needs to be updated. Completing this is essential to ensure we do not introduce regressions, as we proceed with the other items in our roadmap.
  3. Creating a design for a React-based administration UI: Drupal's current content modeling UI requires a lot of clicking, saving and reloading. By using React, the user experience can be made more application-like, intuitive and faster to use.
  4. Allow contributed modules to use React or Twig: An architecture that can support both (with or without react) at the same time. This will allow us to introduce JavaScript-based UIs incrementally instead of enforcing a massive paradigm shift all at once.
  5. Implement missing web service APIs: While adding web service APIs to Drupal has been working for many years now, not all of Drupal has web services support yet. Drupal lacks the necessary web service APIs to retrieve a list of all available permissions in the system.
  6. Make the React UI extensible and configurable: One of the benefits of Drupal's current administration UI is that it can be configured and extended by contributed modules.

Conclusion

As more organizations are building decoupled applications served by Drupal, moving forward to improve content workflow and editorial interface with javascript is the way to move ahead.

Contact our experts at business@srijan.net to discuss its potential for your business.

Posts You May Like...