Drupal - A Tool for JavaScript developers?

A presentation at DrupalCon Prague 2022 in September 2022 in Prague, Czechia by Wolfgang Ziegler

Slide 1

Slide 1

Slide 2

Slide 2

Drupal - A Tool for JavaScript developers? by Wolfgang Ziegler // fago Open Web Community - Drupalcon Prague 2022

Slide 3

Slide 3

Wolfgang Ziegler // fago Managing Partner, CTO at Contributions ○ Drupal 8 Entity API & Typed Data API ○ Contrib: Lupus CE Renderer, Custom Elements, Rules, Entity API, Field Collection, Profile2 drupal.org/u/fago @the_real_fago at Twitter

Slide 4

Slide 4

JavaScript Frontends are popular.

Slide 5

Slide 5

Web framework popularity Source: https://insights.stackoverflow.com/survey/2021#most-popular-technologies-webframe

Slide 6

Slide 6

A new generation of web developers. … how do they relate to Drupal?

Slide 7

Slide 7

Could JavaScript frontend developers be Drupal sitebuilders?

Slide 8

Slide 8

“ “ Drupal is for ambitious site builders — Dries Buytaert https://dri.es/drupal-is-for-ambitious-site-builders May 4, 2022

Slide 9

Slide 9

Ambitious sitebuilders … ➔ sit in between the developer and content authors ➔ get a lot of things done by installing and configuring modules & by using Drupal through the UI. ➔ when needed, they can use custom code to make their site exactly how they want it to be They are not proficient in PHP

Slide 10

Slide 10

Customizations by sitebuilders ➔ Most customizations happen close to the user, in UI ➔ For decoupled sites this mostly affects the frontend ✅ ➔ Typical needs should require zero-code

Slide 11

Slide 11

JavaScript developer needs ➔ Configure Drupal as headless CMS ◆ Configurable data model ◆ Great editing experience out of the box ➔ Quick results ◆ SAAS / Cloud hosting? ◆ Pleasant frontend DX (API?)

Slide 12

Slide 12

Popular CMS options ➔ SAAS ➔ OpenSource ◆ Contentful ◆ Strapi ◆ Prismic ◆ Directus (& SAAS as well) ◆ Storyblok ◆ Tina(& SAAS as well) ◆ Sanity ◆ Cockpit ◆ Magnolia ◆ … ◆ ButterCMS ◆ …

Slide 13

Slide 13

“ Strapi is the leading open-source headless CMS. It’s 100% JavaScript, fully customizable and developer-first. “ Source: https://strapi.io September, 2022

Slide 14

Slide 14

Slide 15

Slide 15

Headless Drupal … done fast! ➔ Quick results ◆ SAAS / One-click setup hosting options ✅ ◆ Quick test-drive (DrupalPod, Simplytest.me) ✅ ➔ Pleasant frontend DX ❓ ◆ JSON API (+ extras?) ◆ GraphQL (v3, v4, compose) ◆ Lupus Custom Elements Renderer (no UI)

Slide 16

Slide 16

Possible hurdle: Config staging ➔ Is it even wanted? Skip it? ➔ If so - where to export changes? ◆ It should work without a Drupal localdev env! ➔ Auto-create PRs from Drupal ◆ https://www.drupal.org/project/config_pr ◆ https://www.drupal.org/project/config_patch

Slide 17

Slide 17

But… How to get started? ● There are plenty of options! (Hosting, APIs, Auth…) ● We have guides! https://www.drupal.org/docs/develop/decoupled-drupal ● but its WIP and leaves more questions than answers 😔

Slide 18

Slide 18

➔ https://www.drupal.org/docs/develop ?

Slide 19

Slide 19

But still… How to get started? ➔ Promote: Decoupled Drupal Stacks ➔ We got some. ◆ https://next-drupal.org ◆ https://www.drupal.org/project/gatsby ◆ https://www.drupal.org/project/lupus_decoupled ◆ http://druxtjs.org

Slide 20

Slide 20

Idea: Decoupled Drupal Stacks (2/2) ➔ Make getting started with stacks easy: ◆ Leverage distribution recipes! ◆ Integrate with project browser ➔ Promote well-supported stacks ◆ Install-time selection of frontend stacks

Slide 21

Slide 21

Laravel.com

Slide 22

Slide 22

Thank you! Your thoughts?

Slide 23

Slide 23

Join us for contribution opportunities 20-23 September, 2022 Room C2 + C3 Mentored Contribution 23 September: 09:00 - 18:00 Room C2 + C3 First Time Contributor Workshop 20 September: 17:15 - 18:00 Room D9 21 September: 10:30 - 11:15 Room D9 23 September: 09:00 - 12:30 Room C2 #DrupalContributions General Contribution 20 - 22 September: 9:00 - 18:00 Room C3 23 September: 9:00 - 18:00 Room C2 + C3

Slide 24

Slide 24

What did you think? Please fill in this session survey directly from the Mobile App.

Slide 25

Slide 25

We appreciate your feedback! Please take a moment to fill out: 1 the general conference survey Flash the QR code OR It will be sent by email 2 the Individual session surveys (located under each session description)