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:
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 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.
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.
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.
- Creating a new "design system" for Drupal's editing and administrative interface, and implementing this incrementally
- Creating a decoupled, single-page React application that manages Drupal administration
Basically, the focus is to simplify, modernize and embrace the change for admin experience.
The Challenges with React Based Admin Interface
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.
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.
- 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.
- 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.
- 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.
- 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.
Contact our experts at firstname.lastname@example.org to discuss its potential for your business.