A Look at

the Ongoing Efforts to Revitalize Drupal’s Front End

Nedcamp 2024

https://bit.ly/drupal-fe-ned

Part 0

Housekeeping

Look at Meeeee!

brianperry.dev

Twitter Bluesky
@brianperry.dev

Disclaimer:

I don't know sh!t.

So...

What's going on in Front End Drupal?

Part 1

Everything is terrible and we're all slowly dying.

Can I spiral for a little bit?

Nobody likes Twig...

and Nobody likes Layout Builder...

(Except for Rod)

and we're missing out on all of the innovation in the JavaScript ecosystem...

and the robots are coming for our jobs...

and WordPress is burning itself to the ground...

and don't get me started on this whole election thing...

and the Patriots are 3 and 7.

(Ok, maybe the last few are unrelated.)

(Pause for group spiraling)

Part 2

Actually, Drupal FE got kinda good while we were panicking.

You can disable caches and enable debugging in the UI!

Single Directory Components improve DX

SDCs make components a core primitive in Drupal

Recipes aren't exclusively a FE concern, but are still great

And the web platform is making our lives easier every day.

  • CSS without SASS
  • jQuery Without jQuery
  • ESNext
  • ES Modules / Import Maps
  • Custom Elements
  • View Transitions

Part 3

Page builders: the cause of, and solution to all of life's problems.

Back to spiraling

Instructions: choose a competing page builder, and freak out about it.

At the very least, Layout Builder has fallen behind.

This has led to a proliferation of alternative page builders.

And soon Experience Builder

Live Demo? Why not!

Page builders can be a double edged sword

See Karen and Jeff's Keynote

Part 4

Improving Drupal's Front End by not using Drupal's Front End.

Decoupled use cases aren't going away

Next.js for Drupal has substantial adoption

There are powerful new tools in the contrib ecosystem

  • GraphQL Compose
  • Decoupled Preview iFrame
  • Frontend Editing

Pitch-burgh funded the Drupal API Client

Exciting new projects are popping up all the time

Sanctuary

My humble attempt to combine many great tools together

  • Astro starter kits
    • Astro Dev Toolbar App
    • Type safety and inferred schemas
  • Drupal Recipes
    • Integrated preview
    • Frontend editing

Sneak Peek!

Another live demo? Sure!

Part 5

The wild ideas might not be so wild after all.

JSX Theme Engine

  • Renders entire page using JSX.
  • Still "in Drupal"
  • Translation layer for render arrays
    • Props - serialized attributes
    • Slots - JSX Fragment or HTML element

I swear to you, it actually works.

Similar concepts in Laravel

XB evolves this concept into a 'semi-coupled' theme engine.

  • Form API form injected into React app.

Imagine if you could choose between Twig and JSX at any level of your theme?

Photo by notorious v1ruS on Unsplash

Way too much to get into here.

Even wilder exploratory concepts in the issue queue

My dream version of this is similar to Astro's Islands Architecture

Islands Module - my experiment

The WWW (Wild World of WebAssembly)

Ambitious variations of modern JS in Drupal will eventually hit an SSR wall.

Can WASM solve this?

Part 6

So what does it all mean?

Reminder:

I don't know sh!t.

Drupal appears to be going all in on Experience Builder

Whether you like it or not

This work may also represent Drupal's one real shot to expand beyond Twig.

Before it's too late

A more JS friendly Drupal is a more decoupled friendly Drupal as well.

JSON storage everywhere

Now is the time to challenge everything you thought you knew about Drupal FE.

Push.

Experiment.

Contribute.

Maybe even pray.

Thanks!

Any questions?