In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, 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

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 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
OPTASY: Ranked as Top Drupal Developers of February 2020
OPTASY strikes again! We've got listed among the top Drupal developers of 2020... FindBestDevelopment, the leading ranking platform for the web development industry, featured us in their “Best Drupal Development” category. Take it as a “hall of fame” showcasing 10 of the best Drupal development companies in the... world.   And we've just earned our spot there. What a great way to start the year!   But Who Is FindBestDevelopment? It's a market research and reputation platform that “detects” and rates the top software development companies in the world.    And they do that... monthly. Source: FindBestDevelopment.com Take it as a free, trusted and conveniently exhaustive resource at hand for when you look for top professionals in fields like AI, eCommerce, Drupal, web, mobile app or IoT. “And how do they evaluate and rank the IT service providers included in their tops? What criteria do they use?” A legitimate question to ask yourself.  FindBestDevelopment conducts an in-depth investigation of the targeted companies and:   analyses their business practices compares them to the industry standards   For instance, in the case of a team of Drupal developers, their editorial staff would evaluate:   the team's overall experience as a Drupal services provider its specific processes the reporting its portfolio and the impact of the projects included there   Source: FindBestDevelopment.com There are 8 different categories that FindBestDevelopment updates on a monthly basis:   Best Web Development Best Mobile Application Development Best Custom Software Development Best eCommerce Development Best WordPress Development Best Drupal Development Best IoT Development Best Artificial Intelligence Development From a Small Drupal Agency to... the Top 10 Drupal Developers Looking back, way back (2005), when OPTASY was just a small team of Drupal enthusiasts, and analyzing our trajectory, we do get a bit... dizzy. Little did we know (or hope to dare) that we would come 3rd place in the “Best Drupal Development Awards” on the world's most reputed ranking platform. Source: FindBestWebDevelopment.com It's overwhelming, it's rewarding and it's... a huge confidence-booster. Seeing the other 9 finalists — companies that we've been looking up to — and knowing that our past projects played a key role in this evaluation, we get both a confirmation and an incentive to live up to these higher standards.   Thank You! We have Drupal in our DNA: we've been living and breathing Drupal since... 2005. And yet... if it hadn't been for our clients':   innovative ideas that they wanted implemented in their projects:  unique functionalities turned into custom Drupal modules, high standards in terms of visual aesthetics turned into custom Drupal themes daring goals that they set for their projects courage to adopt new approaches and emerging technologies to deliver the best user experience to their customers   … we wouldn't have been here, among the world's top 10 Drupal developers. ... Read more
Adriana Cacoveanu / Feb 03'2020
IoT in Mobile App Development: 4 Key Benefits You Can Reap (and 3 Challenges to Consider)
How are you planning to get your share of the pie? Where the "pie" is made of all those opportunities that IoT in mobile app development brings. But what are those opportunities translated into benefits more precisely? Why would you want to build an application that completes a network of IoT devices? And how will IoT change the way mobile applications get developed in 2020?   Source: Gartner.com Are there any challenges and risks to implementing this technology into your mobile apps that you should... prepare for? Now, let's see:   what are the most... irresistible benefits to developing your mobile solution for the IoT what are the best IoT mobile app development tools to put on your shortlist what's a common example of an IoT-enabled mobile app what kind of risks you face when you integrate a mobile application with IoT   1. Why Would You Want to Integrate IoT into Your Mobile Apps?  Why would you be interested in making your mobile apps IoT-friendly this year? How will it benefit you?   1.1. Users Get Hooked on Your IoT App: It's "Too" Convenient And the "less human effort" factor is the main reason why you'd want to integrate mobile apps with IoT. For it all bubbles up to the user experience that you'll provide: Your mobile app will be the "brain" of the whole network of interconnected devices, fridges, air conditioners, TVs, etc. Installed on the user's smartphone or smartwatch, it'll help him/her to cut down on the effort needed to... check the security cameras, switch off the light, turn on the AC and so on.   1.2. You Boost Your Team's Productivity By bringing IoT in mobile app development, you bring more... productivity in your workplace. An IoT-enabled mobile app will:   automate your business processes and specific in-house operations streamline your software products' development lifecycles empower your team to manage multiple tasks simultaneously provide you with real-time measurement and data analysis In short: with their repetitive tasks automated, your team gets to work on more complex, innovation-focused tasks.    1.3. You Get Actionable Insights into Your Users' Engagement Behavior Just imagine: an entire network of appliances, devices, gadgets, and servers exchanging data. And your IoT mobile app collecting ALL that data. Image by Tumisu from Pixabay You'll get some valuable insights into your users' needs, don't you think? Real-time information that you can leverage to:   simplify your business process make prompt and relevant adjustments to the user experience you provide   1.4. You Engage Users with A Highly Interactive Mobile App And interactivity is the shortest path to... higher engagement. Integrating IoT into your mobile app will make it not only interactive but highly customizable, as well.    It opens up a huge "playground" for your team, where they can test and implement various features and IoT-based functionalities. Where they get as creative and daring as they want with their customization work. 2. A Common Example of an IoT Mobile App Would Be... The one installed on a guest's IoT-enabled smartphone, that enables him to open his hotel room. No key or access card needed to... enter the room he booked. And this is but one of the top IoT app development trends to look forward in 2020.  Here are some more types of IoT apps that'll steal the spotlight this year:   smart warehousing apps workforce management apps healthcare apps blockchain apps AI & Big Data apps 3. What's The Best IoT Platform for Mobile App? Let's say that you've decided to incorporate this technology into your next mobile app: What IoT mobile app development tools should you check out first? What are your best options?   Here's a top 3 for you:   Xively: it ships with a conveniently rich collection of IoT features to help you get you started Android Ubidots: connect your Android account to Ubidots and just push your mobile app to multiple devices Thingworx: it provides you with a heavy load of complex tools to market your app with 4. IoT in Mobile App Development: Challenges and Concerns "But are there any?" There are. So, make sure you ponder on them before you rush to... reap the benefits and seize the opportunities of integrating IoT in your mobile apps.   4.1. A Huge Shift in the Concept of "Data Ownership" The risks concerning data security are head of the list: How much of your/ your customers' data privacy would you trade to access the benefits of IoT?   Because: automating your team's redundant tasks granting your users the highest level of convenience .. does come with a "price tag" on. The cost is... data. Data stored in cloud and unrestricted control over consumer data...   4.2. Distributed Computing Performances ...compared to today's technology. You might want to take this aspect into consideration, as well, before you just jump on the IoT in mobile app development trend.   4.3. The Need to Restructure Your Operating Procedures from the Ground Up Also, the way information is being transferred and your existing protocols.   The END!     Now, comparing the opportunities to the challenges, would you consider integrating IoT into your mobile apps this year?  Image by Niran Kasri from Pixabay ... Read more
Adriana Cacoveanu / Jan 30'2020