Using React JS for Drupal's Administrative UIs: What to Expect?

He proposed it:

“... make some of Drupal's own administrative UIs more powerful and easier to use, I proposed that we add a modern JavaScript to core.” (Dries Buytaert's keynote presentation, DrupalCon Vienna)

... and stirred waves of enthusiasm, of unveiled skepticism and never-ending debates. What would using React JS for Drupal's administrative UIs mean for you?

You, the site builder. You, the content creator?

And this is precisely what we'll try to answer in this blog post as we'll be:

 

• presenting you the context: why is integrating a JavaScript framework right into Drupal core even needed?
• pointing our Drupal's long way to becoming “ JS ready”
• highlighting the reasons why React's most likely to win this “popularity contest” over other JS technologies
• highlighting the challenges to expect and to plan out for (to overcome) if React is, indeed, the “chosen one”
• outlining the clear benefits that YOU will get if a JavaScript framework, more precisely if React does get integrated into Drupal core
   

3 Inconveniences for Currently Not Having a JavaScript Framework in Drupal Core

While headless Drupal 8 has proven to be a powerful content repository for front-end apps, not having a JS framework integrated into its very core has been the cause of certain … limitations:

 

• it kept putting off addressing well-known editorial and site-building UX issues
• it made it almost impossible to help Drupal core contributors realize how they could leverage certain JavaScript approaches and advanced practices; how they could transpose them into new modules and new Drupal features
• it has been a break on assimilating more JavaScript experts and JS expertise into the Drupal community 
   

From Improving Its Web Services APIs to Being Ready for Integrating a JS Framework in Core

You're closer than ever, as a site builder/content creator, to using React JS for Drupal's administrative UIs. Yet, this didn't happen overnight:

1. first Dries Buytaert (Drupal CMS's founder himself) and his team decided to stabilize Drupal's web services APIs
2. then to step up their efforts even more for improving them
3. and it's just now that they've decided that Drupal's finally matured and 100% ready for this major integration 
    

Meanwhile, Drupal users have done wonders leveraging Drupal 8's web services APIs:

 

• front-end apps have been built alongside Drupal, which has been backing them up as their content repository
• … and modern, JavaScript frameworks have been used for powering these apps' front-ends, with no restriction, whatsoever, on the particular JS technologies that web developers chose to use
   

Now having passed the “decoupled architecture test” and having managed to adapt itself to all JavaScript frameworks used as front-ends, Drupal's ready to...  level up!

To incorporate a JavaScript framework in its core.

And, implicitly, it's time for the Drupal community, as well, to commit to a unique framework that will be used for its administrative front-end.

 

Why React JS?

We'll start by answering the “Why React JS over Angular or Ember?” question:

“Because of its component-based nature.”

And there's a growing “trend” among web developers to create user interfaces by putting together reusable component libraries. Luckily, React makes it easy to build self-contained components and to simply “assemble” them in big-sized apps.

Therefore, the other 2 JS frameworks (focused on MV* specific workflows instead), are off the table.

And now, let's list other reasons for using React JS for Drupal's administrate UIs:

 

1. it's backed up and constantly updated with new libraries, new tutorials etc. by a worldwide, active community of developers
    
2. it powers large-scale web projects such as Facebook, Airbnb, WordPress, The New York Times 
    
3. it's this community itself that bundled up an ecosystem of no less than 16.000 libraries around it
    
4. its different approach to virtual DOM (Document Object Model): it “detects” precisely those virtual DOM objects that need to be updated and it's strictly those parts of the real DOM that it updates (instead of updating the entire DOM tree); a major performance boost indeed
    
5. it poses no problems working with it thanks to its rather straightforward programming approach
    
6. it “plays well” with all the other JS frameworks
    
7. licensing issues reported in the past have been resolved
    
8. it's widely used by the JavaScript developers 
    

Expected Challenges of Working With React JS

For there are challenges that the Drupal's main contributors are planning out for when it comes to using React JS for Drupal's core. And so should you:

 

• modularity, itself, will turn out to be a major challenge to plan out for
• Drupal will need to “keep up with” React's much more alert release cycle 
• Drupal theming for decoupled UIs will never be the same again: React's approach will prevail
   

Using React JS for Drupal's Administrative Interfaces: What's in It for You?

For adopting a JS framework for Drupal's own administrative UIs (and React seems to be the winning “competitor), does translate into key benefits for you, as well:

 

• whether you're a Drupal site builder or a content creator, using Drupal will get much easier (talking about addressing its old UX issues right?) in a reversible, incremental way
   
• building modern UIs will get a lot more streamlined when you have a modern, JS toolbox right at hand... in Drupal core!
   
• a JavaScript framework would automatically speed up (“app-like speed”) content modeling, configuration tools, content listing
   
• if you're a Drupal developer, you can stay reassured that your Drupal expertise will stay relevant in a JavaScript technologies-centered web
   
• ... that, your future React-focused sills will be future-proofed (thanks to this JS technology's high popularity among web developers)
   

What do you think? Do you find adding a JavaScript framework to Drupal core a good idea or not?

And what about using React JS for Drupal? Would you have gone for another JS technology instead if you could have chosen the one to power your administrative UIs from now on?