In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

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

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

by Adrian Ababei on Oct 09 2017

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?

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Blog Placeholder
The design and development industry continues to grow more competitively over the years. Agencies that have specific niches and all-around firms are popping left and right. Aside from those, there are also different types of development and design works. As a player in this game, we are driven by our clients’ reception. We value their success and their feedback more than anything else because that’s how we will continue to thrive and grow. We are OPTASY, a digital commerce, marketing, and web development agency based in Toronto. With 16 years of experience under our belt, we’ve experienced so many ups and downs that equipped us with the knowledge we need. We’re an internationally renowned and award-winning team that continues to work hard for our clients. With that said, it has just recently come to our attention that we’ve been selected by Clutch, an established B2B review agency, as one of our nation’s industry leaders. Our team has ranked among the top Drupal and Magento designers and developers because of our spot on projects. "We are thrilled to have been chosen as one of the leading web developers by Clutch!" - Adrian Ababei, CEO of OPTASY, Inc. Clutch also created a list of the top fifteen companies. They measured agencies’ ability to deliver and service focus to determine the industry leaders — and OPTASY ranked sixth on their Leaders Matrix. In addition to that, our team is also found on The Manifest’s, Clutch’s sister site, top 100 mobile app developers in Canada list. This helps us prove that we can handle different projects and deliver phenomenal results. These two recognitions are igniting our drive to further our success this 2021. We are grateful for those who support us, especially our clients. This means so much to the whole OPTASY team.  What can we help you with? Contact us and let’s start collaborating! ... Read more
Adrian Ababei / Feb 15'2021
Drupal 9 Features: From “No New Features” to... 9 New Shiny Things You Can Expect to See in Drupal 9
What new Drupal 9 features can you expect to see on June 3rd, 2020? For, it's a bit confusing, isn't it?   on one hand, you have the “no new features“ statement on the other hand, you get answers like: “the easiest upgrade in a decade”, “newer PHP libraries”, “a brand new admin theme”, and so on   So, are there any new shiny things in Drupal 9 that you can look forward to? Or maybe get worried about... There is one shiny new feature and 8... improvements, from what I've seen. And I've grouped all together in a list. Here it is: 1. The New Shiny Thing: Easy Upgrade from Drupal 8 to Drupal 9 A smooth upgrade experience, this is the only new shiny thing that Drupal 9 ships with. In short, moving to Drupal 9 will be as easy as updating from one minor Drupal 8 version to another. Source: Drupal.org Word of caution: the upgrade path to Drupal 9 is “buttery smooth” if and only if you stick to a “healthy” routine of weeding out old and deprecated code from your current codebase. 2. Drupal 7 and 8 Will Continue to Get Supported Alongside Drupal 9 One of the biggest Drupal 9 vs Drupal 8 (and even Drupal 9 vs Drupal 7) difference is the overlap of security coverage: Till Drupal 9, whenever a new stable version got released, the previous one lost its support. Starting with the 9th version of the CMS, Drupal 7, and Drupal 8 will continue to get community support till November 2021. In other words, Drupal 8, cleaned-up of all deprecated API will continue to work on Drupal 9.  And Drupal 7 will get community support for... 1-1.5 years after Drupal 9 gets released.  One of the unexpected Drupal 9 features. For it disrupts the way that the Drupal community used to approach major versions once they were no longer “the latest” ones. 3. Claro Becomes the Default Administration Theme … once it gets stable. 4. New Drupal 9 Features: CKEditor 5 Gets Implemented ... in a future version of Drupal 9. Security support will drop for CKEditor 4 sometime around Drupal 9's end of life. Therefore, Drupal 9's roadmap includes adding CKEditor 5 to a future version (and eventually removing CKEditor 4 completely in Drupal 10).   5. The Workspace Module Goes from Experimental to Stable Source: Drupal.org How is this good news for you? Let's say that you need to prepare multiple versions of your Drupal site and, depending on certain factors, to push live only one of them. The Workspace module allows you do to precisely that: to replicate content between workspaces on the same Drupal site. And, luckily, the module will be generally available starting with Drupal 9... 6. What's New in Drupal 9? Twig 2 That's right, Drupal 9 comes with support for newer PHP libraries. Support for Twig 2 here included. 7. Drupal 9 Will Be Backward-Compatible with Drupal 8 from Day One What are the new Drupal 9 features? Minor upgrade versions of Drupal 8 will be backward-compatible with Drupal 9. This means that all your Drupal 8 components will work with Drupal 9. This ninth version of Drupal is built on top of Drupal 8, basically.  In other words: no need to panic that your (Drupal 8) website's key features will no longer be valid in Drupal 9. This is going to be the first time that 2 major versions of Drupal are fully compatible.   8. From Symfony 3 to Symfony 4.4 “What's new in Drupal 9?” Symfony 4.4. Since its third version will no longer be supported in November 2021, Symfony 4.4 gets integrated with Drupal 9. All while making sure that Drupal 9 is forward-compatible with Symfony 5, as well...   9. Olivero Becomes Drupal's New Default Theme New Drupal version, new front-end theme. Olivero will come to replace Bartik, the current default theme in Drupal.   Wrap-Up: 5 Drupal 9 Requirements Your Drupal Site Should Meet Now you know which are the predictable, the new and the... shiny new features in Drupal 9. What next? How do you ensure that your Drupal website's Drupal 9-ready? Here are 5 key steps to take for a buttery-smooth upgrade:   Make sure your environment is Drupal 9-compatible: PHP 7.3, MySQL 5.7.8, Drush 10   Update to the latest minor versions of Drupal 8 as soon as they get released: you'll be able to upgrade your website to Drupal 9 only from Drupal 8.8. and Drupal 8.9    Keep your modules up to date: do all your contributed modules run on their latest versions?   Weed out any deprecated API from the custom projects that your website's using   Update core to Drupal 9   Word of caution: if your website (still) runs on Drupal 7, upgrade to Drupal 8.  To sum up, the shortest path to a smooth upgrade to Drupal 9 is sticking to the best practices:   remove all deprecated code (go for an automated tool like drupal-check or Rector to identify deprecations on your website) update your Drupal core and contributed projects to their latest versions   Or, you can leave all the preparations to us. Just drop us a line and we'll evaluate your website's level of... readiness:   Is there any deprecated code still “lingering in there? Does it run on Drupal 7? Are there any outdated versions of PHP or MySQL that it is still using?   Then, we can come up with a plan to get it Drupal 9-ready. Image by Marsel Elia from Pixabay   ... Read more
Adriana Cacoveanu / May 20'2020
OPTASY Is Proud to be Named a Top Canadian E-commerce Development Partner by Clutch
Here at OPTASY, we know it can seem impossible for a new business to tackle their challenges while also implementing high-quality web development solutions. That’s why we’re here to help! We’re a Canadian Drupal firm and web development company that’s provided web solutions with outstanding results. Our team is dedicated, knowledgeable, and can help your company thrive!  Source: Clutch.com In recognition of our efforts, we’ve been named a top Canadian e-commerce development firm by Clutch, a development research resource.  We’d like to thank our superstar clients for helping us get this far! They engaged with Clutch analysts to assess our impact on their day to day operations. Our evaluation took into account the quality of our services and deliverables, attention to their project timelines, and the value of our work in relation to our pricing. We’re happy to announce that we’ve maintained a lovely 4.8 out of five stars in reflection of that data!  Take a look at one of our recent reviews below:  "We are thrilled to have been chosen as one of the leading web developers by Clutch!"  - Adrian Aabei, CEO of OPTASY, Inc. For those who might not know, Clutch is a verified market research firm that leverages a unique rating methodology to compare leaders across sectors. They showcase our development work on Visual Objects, Clutch’s sister site that centers on portfolio items. They feature us in their directory of top e-commerce developers.  We’re proud to receive this feedback and look forward to helping even more clients meet their potential! Contact OPTASY today if you’d like to learn more about how we can help you thrive!  Image by Megan Rexazin from Pixabay   ... Read more
Adriana Cacoveanu / Feb 06'2020