Drupal to Add React to Core as Twig Theme Alternative

JavaScript Development Frameworks: Angular, React, Vue, Gatsby, Polymer, & Glimmer

After being proposed initially by Dries Buytaert in 2017 at DrupalCon, Vienna, community members now estimate that 2020 will be the year when Drupal officially adds React as a theme option to the core CMS distribution. Drupal 7 primarily uses PHPTemplate as the theme engine, while Drupal 8 implements the Twig & Symfony2 frameworks. Although both professionally licensed and open source themes for Drupal 8 have been successful on Twig/Symfony2, there is a growing development sector advancing decoupled or “headless” methodologies based on Node.js. What is not clear is the level of support required for Node.js in the future of retail web hosting for Drupal, with some sites opting for a progressively decoupled or fully decoupled approach as alternatives to monolithic traditional installations. There are currently different installation requirements for running Drupal 8 on NGINX vs. Apache, whereas Node.js is equally compatible with both server formats for building new decoupled Drupal solutions.

React in Drupal Core: JavaScript Development Frameworks – Vue, Gatsby, & Ember

The decision to adopt a JavaScript framework for Drupal themes has been under consideration for many years, hindered by fragmentation in the development sector. Early favorites were Angular & Ember, while React, Vue, & Gatsby are currently popular choices. The JavaScript & Node.js development sector is rapidly changing & innovating, requiring specialized knowledge for programmers. As Buytaert wrote:

“Most people seem to want a way to compose interfaces and interactions with reusable components (e.g. libraries like React, Vue, Polymer, and Glimmer) rather than use a framework with a heavy focus on MV* workflows (e.g. frameworks like Angular and Ember).”

Interest in decoupled Drupal solutions increased when D8 core changed from using PHPTemplate as the theme template engine to Twig/Symfony2. Many pro developers with highly complex Drupal 7 sites to convert or upgrade found it easier to adopt a JavaScript approach with Angular, React, Vue, Gatsby, etc. vs. re-writing PHP themes with Twig/Symfony2. In some ways this may also be influenced by web server performance & page load speeds for Drupal 8 running with Node.js/NGINX under the decoupled approach, as well as new advances in cloud hosting like containers, Kubernetes, & elastic cluster web server solutions with integrated load balancing.

Angular JavaScript Development: “Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop. Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering. Angular puts you in control over scalability.”Learn More About Angular.

Decoupled Drupal: Using React, Angular, Vue, Ember, & Gatsby for Theme Development

React, Angular, Vue, etc. can all be used with Drupal without Node.js, however the integration modules for these JavaScript frameworks require NPM or Yarn installed on the web server to operate. This may create incompatibility with some web hosting plans designed specifically for PHP support. It is recommended to upgrade to a VPS plan to build a custom web server environment for Drupal 8 & Node.js development.

RESTful APIs & Drupal 8: Use React vs. Conventional MVC Frameworks

“In this hands-on session, you will learn how to build a decoupled website using React ecosystem on the front-end and Drupal 8 as the content management system and a data source.” (DrupalCon Dublin 2016)

Key Takeaways:

• How to configure Drupal to expose RESTful resources using Drupal 8
• Enable CORS support for the domains/port running our React application
• Authenticate requests using JWT
• Consume data on front-end using Redux store
• Pass data from Redux store React components

Pantheon Decoupled CMS: ‘Drupal and WordPress are both traditionally “monolithic” CMSs, with presentation baked in via the theme. However, due to the need for more flexibility and freedom, many developers have begun decoupling the CMS, using it for content management, editorial, and administrative tools, while implementing a separate frontend component dedicated to the user experience which communicates with the CMS via a web API.’ Learn More About Decoupled CMS Architecture.

Drupal 8 & JavaScript – Web Developer Resources:

There is a large library of JavaScript & Drupal development resources available online. These pages provide a good overview to using React with Drupal 8:

• Introduction to React and Drupal
• 8 Things to Know About React for Drupal Devs
• An Introduction to Drupal for React Developers

Consider the different web hosting requirements for Drupal 8 + Node.js and the advantages of React in core. These Drupal 8 modules provide integration functionality:

• Webpack bundler
• Webpack Vue.js
• Webpack React
• jDrupal (for Angular)

If the dependency for React in Drupal 8 includes NPM, all shared web hosts may not support it. Learn more about NPM & Drupal 8 integration:

• NPM
• npm.js

NPM requires Node.js to be installed on the web server, but is not part of the Node.js package. Many shared Linux web hosts do not support this at the present time, requiring a VPS, Cloud, or Dedicated hosting plan. Some shared Linux web hosts now support Node.js but this is not common on most platforms, i.e. Pantheon with specific Node.js environments. Otherwise Yarn needs to be installed on CentOS with Drush which is also not common or default among most cPanel web hosting companies.

NPM Command Line Tools: “Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others. The npm registry hosts the world’s largest collection of free, reusable code. Libraries like jQuery, Bootstrap, React, and Angular, and components from frameworks such as Ember. Packages for mobile, IoT, front end, back end, robotics… everything you need to start building amazing things. Assemble packages like building blocks to quickly develop awesome new projects.”Learn More About NPM Package Manager for Node.js.

Outlook: React Not Likely to Replace Drupal 8 Themes Based on PHP & Twig

Although adoption of React in Drupal core will potentially open up a new sector of theme possibilities, it is not likely to replace the PHP options powered by Twig/Symfony2 in popular usage. More shared Linux web hosting companies are adding support for Node.js, but the majority use it as an upsell to a VPS plan. If user demand on cPanel hosting increases for Node.js support, the companies will likely add the functionality to their web stack. Companies like Pantheon are already offering customized Node.js platform support for Drupal 8 hosting, and Acquia now has this option on their cloud as well. These managed cloud plans are excellent for hosting Drupal 8 websites with Node.js in a high performance environment for production.

Acquia Cloud Node.js: “The Acquia Cloud Node.js Application Service is a native runtime service for executing back-end (server-side) Javascript applications. Our Node.js environment can be utilized to serve most of today’s popular JavaScript applications like GraphQL, React, Ember, and many more.” Learn More.