Ashday's Digital Ecosystem & Development Tips Blog

Better Admin Interfaces with React and Drupal 8

React JS logo and Ashday logo

As you may or may not have noticed, we’re having a lot of fun over here at Ashday building Drupal sites with React. Check out our own site, for example. We are really digging this new direction for front-end and you can learn more about why we did it how we approached it in other articles, but here we are going to talk about how we approached the Drupal editorial experience, because honestly - we just didn’t find a lot of great resources out there discussing how this might be done well in a decoupled experience.

Something about Gift-Horses

While we can’t speak with authority on the potential detriment of literally looking gift-horses in the mouth, we can speak to the idea that we should be grateful for what we’ve been given, and Drupal has given us a lot! If you were in this industry when most of us built everything from scratch, you’ll know that it’s a crazy pile of work to do the most basic things and nothing is taken for granted. Need a login form? Sure thing. Oh, now you need flood control? Um, ok. Captcha? Boy. Password reset? Ugh. Ok, I need a week just to get user authentication in place.

Drupal does so much out of the box and we aren’t about to throw it all away so we can call ourselves fully decoupled, which is the idea that Drupal isn’t providing any of the front-end at all. It’s worth noting that some are pursuing the concept of “Progressively Decoupled,” where only select components of the front-end site are managed with React, but we don’t prefer that approach in most cases because we don’t want the overhead of taking on traditional Drupal theming and a React build out, yet with less obvious design constraints, potentially extra hosting, multiple development workflows, duplicated styles, etc - leaving us short of many of the benefits of going decoupled at all.

We prefer to an approach that we’ve, for the moment, dubbed “Deliberately Decoupled.”

Deliberately Decoupled

What we mean by “Deliberately Decoupled” is that we aren’t decoupling purists, who see ourselves just as much evangelists of a particular approach as we are just software engineers, and we also aren’t operating by a FOMO (fear of missing out), where anxiety about not being on a bandwagon drives our decisions. We prefer to leverage what we think is beneficial for our clients and the site, and secondarily abide by our preferences. A good example is the Open Source philosophy. We love open source! But we aren’t for a minute going to bypass a proprietary library that does something really cool just because it’s not open source. It’s the same with decoupling. We want what gives us good bang for the buck - either in the deliverable, or the cost, or the UX, or whatever else is impactful - and it helps far more than it hurts. So, for the largely public facing ends of our sites, we hands-down love what React is giving us and rarely find Drupal’s out of the box front-end solution to be easier or more flexible. On the back-end? For the editorial and admin experience, we really have no interest in trying to replace everything Drupal provides unless there is a major overarching requirement or clear benefit that can justify hundreds or thousands of hours of additional work. There are some projects that do merit it, such as when you have highly dynamic and interactive forms, but if that’s not the case Drupal can do the job on its own.

Considering Outsourcing? Consider Ashday!  Request your free consultation today. 

One prime example of leveraging cool stuff in Drupal is the use of Paragraphs for content. If you haven’t heard of Paragraphs, you really must check it out. It’s been our favorite way to give editors the ability to create interesting and dynamic content creation without the cringe-worthy experience of complex WYSIWYG and HTML source editing, especially when it comes to the mobile experience. Nearly all of the Ashday.com pages are built with paragraphs, so that means an editor can do parallax, add related content boxes, throw in some CTAs, etc. Pretty cool! And as you’ll see later, we leverage React for our pages, but Drupal’s admin for editing the paragraphs and it creates a clean and intuitive editorial experience.

So does all this mean for editing we just hand over Drupal Admin accounts to our users so they can swim through the Sea Nettle-like admin experience say good luck? Hardly. Let’s get into the nitty gritty.

Our Philosophy - Less is More

Generally speaking, Drupal doesn’t matter much to the user. Of course Drupal matters, but not really to the end user just trying to do their editorial work. Not as far as they are aware. And they shouldn’t have to be “aware”. Do you remember when you first looked into Drupal? Do you remember how weird the world was as you learned that a “node” is “content”, but then so is a “block” (kinda), and a “view” is a query but maybe with a page attached, or a “taxonomy” is hierarchical data, but with display pages? All frameworks have to be abstracted sufficiently, which means making up generic terms and concepts that only make sense when you’ve spent time with them. Well, guess what? Most users would really rather not just learn all of those concepts and instead just easily write content and update their site. The key to that is to reduce, simplify and obfuscate.

Drupal’s admin is very friendly to developers, but unnecessarily verbose when it comes to editors. They don’t need half the contextual menus, vertical tabs, sidebars, etc most of the time. And the stuff they do need should be stripped down to the obvious and helpful. So let’s hide tons of help text on a WYSIWYG with multiple text format options and use Paragraphs + a simple WYSIWYG instead. Let’s rename any buttons or links that have the word “node” in them because really, who cares if it’s a node? Let’s put our field labels inline to save vertical space and use something like Field Group to organize them cleanly. And let’s take away that rats’ nest default Drupal menu and create an alternative that just gives them what they care about. Here is an example of what we’re talking about.

 

From this…

Example of Drupal admin showing  contextual menus, vertical tabs, and sidebars.

 

To this. 

Example of streamlined Drupal Menu. 

 

In addition, let’s take the coolness of contextual admin, like Drupal provides, and make it more intuitive as well. If you hover over a block you can edit it or configure it. If you’re on a node page, you get view and edit links in the tab bar. And you can even sometimes use the new inline editing features in Drupal 8. The problem, though, is that once again the user has to understand what each of these elements are and why they’re all different in terms of the triggering UX. We are having a lot of fun in React finding more consistent and creative ways to manage content without understanding it.

 

So here’s a rudimentary example using Ashday.com.

Example of Drupal contextual admin, showing node page.

 

You see some sorting icons and some edit icons. That’s it. Technically, those sortable sections are paragraphs, which - thanks to React - can be sorted inline - but are also editable individually apart from the others. The “Free Consultation” button in the header is a React button tied to a few settings stored in some custom Drupal configuration in the back-end. Further, that edit icon in the page title area can be used to edit the entire page at once so you can change the page title and things like meta tags, although the next step is to probably provide more direct access to edit those things so that you don’t have to know what all is buried in a node form. So the goal here is for the user to have just some basic concepts to think about, like edit and sort, instead of Edit Node vs Configure Block vs Edit Block vs Sort Paragraph vs Some Other Drupal Configuration Buried Deep In the Admin or Form.

And by the way, here’s what happens when you click the edit link on the header button, vs the first paragraph. 

 

Edit link on header button

Intuitive Drupal 8 admin

  

Edit link on first paragraph

Screen shot of admin interface for Drupal page built with React.

 

So despite varied back-end architectural implementations, the user has a very similar experience contextually editing something. A simple page mask + offcanvas + clean form. Its cool stuff, all made easier with the ability to re-use display elements in React all while still getting a ton out of Drupal’s back-end for content management and forms. Simple, kinda easy, and totally user friendly.

Looking to use react for your next digital project? Find out how Ashday can use React to make your project a success.

Updated: Jun 15, 2018 1:00:00 PM