DrupalCon Europe 2020

1. Makers & Builders - by Wolfgang Ziegler // fago
Custom Elements:
An alternate Render API for decoupled Drupal

2. About me
Wolfgang Ziegler // fago
○
○

3. Decoupled Drupal? Why?
●
●
More reasons:
➔ https://drunomics.com/blog/custom-elements-our-solution-soft-decoupled-drup
al

4. … so why Custom Elements?
➔
➔
➔
➔
➔

5. Example: Some paragraphs

6. Custom Elements everywhere
=
Components everywhere

7. A bit of history...

8. Lupus Nuxt.js Drupal Stack

9. Architecture overview
GET /home GET /api/home
Custom ElementsHTML
Server-Side-
Rendering
Static
GET /home
HTML
Subsequent
pages
GET /api/article/example
Custom Elements

10. Drupal modules

11. Custom Elements module
➔ CustomElement
➔ CustomElement

12. CustomElement Object tree
<node type=”page” title=”Some example node” status=1>
</node>
<pg-text slot=”default”>Lorem Ipsum… </pg-text>
<pg-text slot=”default”>Lorem Ipsum… </pg-text>
<pg-text slot=”default”>Lorem Ipsum… </pg-text>
<pg-image slot=”hero” src=”the-image.jpg” alt=… </pg-image>
<field-tags slot=”tags” href=”tags/1”>Tag1</field-tags>
Attributes
Slots

13. Generating Custom Elements
●
●
●
●

14. Adding your processor
your_module.services.yml

15. src/Processor/ParagraphTwitterProcessor:

16. Creating custom elements

17. Lupus Custom Elements Renderer
●
●
○
_format => 'custom_elements'
○
/example-path?_format=custom_elements
● CustomElement

18. Custom route (1/2)
lupus_ce_renderer.routing.yml:

19. Example Controller
srcControllerCustomElementsController.php

20. Lupus Custom Elements Renderer (2/3)
●
●
○
○
○
○

21. Lupus Custom Elements Renderer (3/3)
●
○
○
●
GET /example-page?_content_format=json
GET /example-page?_content_format=markup

22. Example responses

23. Layout Builder + Custom Elements
●
●
$rootElement->toRenderArray()
●
○
$customElement->setSlotFromRenderArray()

24. Frontend

25. ●
●
○
○
●
●
●

26. Example Vue.js Component

27. PgText.vue

28. Authentication

29. Authentication
●
●
●

30. Shared Cookie-based Authentication
●
●
●
●

31. Getting started

32. What’s needed?
nuxtjs-drupal-ce

33. Getting started

34. Performance & Caching

35. Handling Cache Metadata
● CustomElement CacheableDependencyInterface
● addCacheableDependency(), addCacheTags() are available
● CacheMetadata is bubbled up the tree during render/serialization

36. Caching strategy
●
○
●
●
○

37. Plan: Optional request inlining
●
●

38. Custom Elements as Render API
○
○
○
○

39. Custom Elements as Render API (2/2)
○
○
○
○

40. Comparison to JSONAPI
●
○
●
●
the contract

41. #custom-elements

42. Join us for
contribution opportunities
Mentored
Contribution
9h00-18h00 CET
First Time
Contributor Workshop
10h00-12h00 CET
General
Contribution
9h00-18h00 CET
#DrupalContributions
#custom_elements

43. What did you think?