drupal-js icon indicating copy to clipboard operation
drupal-js copied to clipboard

Published 20 hours ago • verified publisher icon eworx-org
→

Metadata

Best practices to integrate a Drupal 8.x+ backend with a JavaScript framework frontend

Drupal decoupled backend with JS frontend

Best practices, basic steps, lists of tools and tips to help you integrate a Drupal 8.x+ backend with a JavaScript frontend.

Note: Some examples below refer only to React development and are not JS agnostic. See also the Start with React short guide.

Table of Contents

  • JS
    • Popular JS frontend frameworks
    • Compare JS frameworks
    • Things to consider when selecting a frontend framework (in no particular order)
    • Tools for JS development
    • JS terminology
    • Learn JS frameworks basics
    • JS app structure
    • Styling a JS app
  • Drupal
    • About Drupal decoupled solutions
    • Drupal slack channels
    • Drupal modules
      • JSON API (core)
      • GraphQL
      • Other
    • Drupal Distributions
    • Drupal starter-kits with JS frameworks
    • npm packages for Drupal
    • Drupal common issues with decoupled
    • Implementation matrix
  • Framework: React
    • Learn React
    • Drupal + React
    • Articles for React
  • Framework: NextJS
    • Why choose NextJS
    • Learn NextJS
    • Drupal + NextJS
    • NextJS popular tools
    • Articles for NextJS
  • Framework: Nuxt.js
    • Why choose Nuxt.js
    • Drupal + Nuxt.js = Druxt
    • Druxt Quick-start templates
  • Final tips
  • Similar resources
  • CONTRIBUTING
  • LICENSE

JS

Popular JS frontend frameworks

Compare JS frameworks

Online services to use when comparing frameworks (trends, popularity, usage, downloads, benchmarks etc).

  • Questionnaires
    • https://2021.stateofjs.com/en-US/libraries/front-end-frameworks
    • https://www.jetbrains.com/lp/devecosystem-2021/javascript
    • https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-web-frameworks
  • Trends
    • https://trends.google.com/trends/explore?cat=733&date=today%205-y&q=React,Vue,Angular,Next
    • https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Csvelte%2Cvuejs3%2Cangular
    • https://www.npmtrends.com/next-vs-react-vs-svelte-vs-vue
  • Popularity
    • https://www.githubcompare.com/vercel/next.js+facebook/react+angular/angular.js+vuejs/vue
    • https://star-history.com/#facebook/react&vuejs/vue&angular/angular&vercel/next.js&Timeline
    • https://www.hntrends.com/2020/dec-year-unlike-any-other-tech-tools-didnt-change-much.html?compare=AngularJS&compare=Ember&compare=React&compare=Vue
    • https://frontpagemetrics.com/r/reactjs#compare=vuejs+angular2+sveltejs+nextjs
  • Usage
    • https://trends.builtwith.com/javascript/javascript-library
    • https://www.wappalyzer.com/technologies/javascript-libraries/react/
    • https://www.datanyze.com/market-share/frameworks-and-libraries--66/react-market-share
    • https://www.similartech.com/technologies/react-js
  • Analysis & dependencies
    • https://npmgraph.js.org
    • https://bundlephobia.com
    • https://packagephobia.com
  • Benchmarks
    • https://krausest.github.io/js-framework-benchmark
  • Browser Support
    • https://kangax.github.io/compat-table/es6
    • https://caniuse.com

Things to consider when selecting a frontend framework (in no particular order)

  • Performance
  • Stability
  • Development experience
  • Documentation and support
  • Vendors behind
  • Complexity and learning curve
  • CRUD requirements
  • Serving multiple platforms and consumers
  • Existing in-house knowledge

Tools for JS development

Note: Before using these tools try to use the built-in, bundled tools you get from each framework.

JS terminology

In order to start with JS you sould be familiar with the basic terms below. Note that some of them may refer to a specific JS framework.

  • CORS
  • Cache
  • Code splitting
  • Components
  • Composition
  • DOM
  • Data fetch
  • HMR (Hot Module Reload)
  • HOC (Higher Order Components)
  • Hook events
  • Injection
  • Invalidation
  • Isomorphic
  • PWA
  • Props
  • Routing
  • SEO
  • SSR, SSG, ISR, DSG, CSR
  • SWA
  • SideEffect
  • State
  • Web Vitals (LCP, FID, CLS)
  • a11y
  • es6/es7 etc
  • hydration
  • i18n
  • library
  • module
  • node daemon
  • package
  • virtual DOM

Learn JS frameworks basics

  • https://github.com/sorrycc/awesome-javascript
  • https://www.patterns.dev

JS app structure

ToDo: Add some example structure here..

Sources: 1, 2, 3, 4, 5

Styling a JS app

Drupal

About Drupal decoupled solutions

  • https://www.drupal.org/docs/develop/decoupled-drupal
  • Drupal core ideas: Drupal JavaScript Client Initiative
  • https://dri.es/headless-cms-rest-vs-jsonapi-vs-graphql
  • https://dri.es/how-to-decouple-drupal-in-2019
  • https://dri.es/drupal-looking-to-adopt-react
  • https://dri.es/advancing-drupal-web-services
  • https://www.drupal.org/industries/decoupled
  • https://www.lullabot.com/articles/should-you-decouple
  • https://www.softescu.com/en/blog/fully-decoupled-or-progressively-decoupled
  • https://medium.com/analytics-vidhya/decoupled-drupal-as-a-solution-bd0ec25f39cf
  • https://opensenselabs.com/blog/articles/different-options-decoupling-drupal
  • https://www.lullabot.com/articles/decoupled-hard-problems-routing
  • https://noti.st/brianperry/2Fvgeu/drupal-state-and-the-need-for-a-javascript-sdk
  • My Headless/Decoupled CMS Comparison Matrix, 2017, krynsky.com

Drupal slack channels

Drupal modules

Note: Modules in emphasis are the most used across the Drupal universe.

JSON API (core)

jsonapi.org, JSON API: Drupal core module documentation, Ecosystem modules for JSON:API

GraphQL

(Advice: Do not prefer GraphQL over JSON API except if there are special requirements)

Other

Drupal Distributions

  • https://www.contentacms.org
  • https://www.drupal.org/project/tide
  • https://github.com/systemseed/falcon
  • https://github.com/codingsasi/acephalous
  • https://www.drupal.org/project/ezcontent (using REST, not a decoupled example)

Drupal starter-kits with JS frameworks

  • https://next-drupal.org (Next)
  • https://druxtjs.org (Nuxt)
  • https://stack.lupus.digital (Nuxt)
  • https://github.com/acquia/next-acms (Next)
  • https://github.com/octahedroid/drupal-remix (Remix)
  • https://github.com/rbeach/drupal-remix (Remix example)

npm packages for Drupal

Drupal common issues with decoupled

  • Displaying embedded entities on CKEditor (eg Media) inside JS components
  • Multilingual
  • Subrequets and relationships in data
  • Customizing of responses like filtering, quering and altering
  • Routing and path aliases
  • Non entities data (e.g. metatags, redirects, path aliases, image styles)
  • Workflows (Content Moderation) and revisions
  • Node preview
  • Authentication
  • Invalidate partial cache
  • Forms

Implementation matrix

An example matrix for common requirements of a decoupled Drupal backend with JS frontend.

The table show which part of the app should take care of each functionality.

For example, we could get the site logo from Drupal but we could also use a static image on the JS side as a logo.

Notice that, in some cases, there may be a combination of the two parts or a 3rd party solution (eg an external CDN for image assets).

Requirement Drupal backend JS frontend
access and permissions ⬜ ⬜
authentication ⬜ ⬜
basic site settings (eg logo, site name, site slogan etc) ⬜ ⬜
breadcrumbs ⬜ ⬜
caching ⬜ ⬜
collections (views VS JSON API entity queries) ⬜ ⬜
CORS ⬜ ⬜
CRUD requirements ⬜ ⬜
embedded HTML on CKEditor ⬜ ⬜
file attachments ⬜ ⬜
forms ⬜ ⬜
image styles ⬜ ⬜
menus ⬜ ⬜
metatags ⬜ ⬜
mocking data ⬜ ⬜
modifying JSON response ⬜ ⬜
multilingual ⬜ ⬜
multisite ⬜ ⬜
partial cache invalidation ⬜ ⬜
path aliases ⬜ ⬜
preview ⬜ ⬜
redirects ⬜ ⬜
relationships and field references ⬜ ⬜
revisions ⬜ ⬜
routing ⬜ ⬜
search_api ⬜ ⬜
sub-requests ⬜ ⬜
third party scripts (eg gtag) ⬜ ⬜
UI translations ⬜ ⬜
workflows (content moderation) ⬜ ⬜
xml sitemap ⬜ ⬜

Framework: React

  • https://reactjs.org
  • https://github.com/enaqx/awesome-react
  • https://github.com/brillout/awesome-react-components

Learn React

Drupal + React

  • Guide: https://reactfordrupal.com
  • Starter: https://github.com/systemseed/drupal_reactjs_boilerplate
  • Example: https://github.com/DrupalizeMe/react-and-drupal-examples

Articles for React

  • https://www.smashingmagazine.com/2021/11/maintain-large-nextjs-application

Framework: NextJS

  • https://nextjs.org
  • https://github.com/unicodeveloper/awesome-nextjs

Why choose NextJS

  • Better SEO. Supports SSR, SSG, ISR.
  • Built in solutions for common requirements (routing, head/metatags, images, links, font optimization, data fetching, injected scripts, i18n, AMP)
  • Built in tools (Typescript, Sass, ESLint, Webpack, env variables, preview mode, polyfills)
  • Better Development Experience (DX) (zero config, built in tools, fast refresh)
  • Based on React (can use all the React goodies)

Learn NextJS

Drupal + NextJS

NextJS popular tools

  • https://swr.vercel.app (React Hooks for Data Fetching)
  • https://next-auth.js.org (Authentication for Next.js)
  • https://github.com/atilafassina/next-g11n (Translate and localize your Next.js app smoothly)
  • https://github.com/next-boost/next-boost (Adds a cache layer to your SSR applications)

Articles for NextJS

  • https://www.smashingmagazine.com/2021/11/maintain-large-nextjs-application
  • https://stackabuse.com/guide-to-getting-started-with-nextjs-create-a-nextjs-app

Framework: Nuxt.js

  • https://druxtjs.org
  • https://nuxtjs.org
  • https://github.com/nuxt-community/awesome-nuxt

Why choose Nuxt.js

  • Better SEO. Suppports SSR and SSG.
  • Built in solutions for common requirements (routing, head/metatags, images, links, font optimization, data fetching, injected scripts, i18n, AMP)
  • Built in tools (Typescript, Sass, ESLint, Webpack, env variables, preview mode, polyfills)
  • Better Development Experience (DX) (zero config, built in tools, fast refresh)
  • Based on Vue (can use all the Vue goodies)

Drupal + Nuxt.js = Druxt

Druxt = DRUpal + nuXT

  • druxtjs.org
  • Fully Decoupled Drupal, with Nuxt.js in the frontend.
  • Drupal JSON:API Client with Vuex caching.
  • Modular Vue.js component library system.
  • Slot and Wrapper theming system.
  • API and File proxy.

Druxt Quick-start templates

Final tips

  • Make it really "decoupled" (except if other requirements)
  • Keep it simple. Use the basic tools and extend when needed.
  • Less JS packages and less Drupal modules is prefferable.
  • Work only with NodeJS LTS versions.
  • Think in Components
  • Create enough Components
  • Modify the state directly
  • Add keys on the lists (inside JS Components)
  • Declare types, validate functions
  • Always test your Components and app
  • Dockerize your JS app
  • For security updates of npm packages prefer to update the main JS library used (eg Next, React etc) and not the several npm packages independently.
  • Drupal: Prefer Drupal modules from core (e.g. JSON API instead of GraphQL)
  • Drupal: Do not override the default Drupal field machine names on JSON
  • Drupal: prefer quering the search_api to get search results on the JS App when using 3rd party search engines like SOLR.
  • Start with the official starter kits (e.g create-react-app)

Similar resources

CONTRIBUTING

Contribution guide

LICENSE

MIT - Copyright (c) 2022 EWORX S.A.

← Metadata

29
Stars
7
Forks
Watchers

Owner

verified publisher icon eworx-org

Metadata

Best practices to integrate a Drupal 8.x+ backend with a JavaScript framework frontend

Back