Successfully reported this slideshow.
Your SlideShare is downloading. ×

Custom elements - An alternate Render API for decoupled Drupal

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Custom elements - An alternate Render API for decoupled Drupal

  1. 1. Makers & Builders - by Wolfgang Ziegler // fago Custom Elements: An alternate Render API for decoupled Drupal
  2. 2. About me Wolfgang Ziegler // fago ○ ○
  3. 3. Decoupled Drupal? Why? ● ● More reasons: ➔ https://drunomics.com/blog/custom-elements-our-solution-soft-decoupled-drup al
  4. 4. … so why Custom Elements? ➔ ➔ ➔ ➔ ➔
  5. 5. Example: Some paragraphs
  6. 6. Custom Elements everywhere = Components everywhere
  7. 7. A bit of history...
  8. 8. Lupus Nuxt.js Drupal Stack
  9. 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. 10. Drupal modules
  11. 11. Custom Elements module ➔ CustomElement ➔ CustomElement
  12. 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. 13. Generating Custom Elements ● ● ● ●
  14. 14. Adding your processor your_module.services.yml
  15. 15. src/Processor/ParagraphTwitterProcessor:
  16. 16. Creating custom elements
  17. 17. Lupus Custom Elements Renderer ● ● ○ _format => 'custom_elements' ○ /example-path?_format=custom_elements ● CustomElement
  18. 18. Custom route (1/2) lupus_ce_renderer.routing.yml:
  19. 19. Example Controller srcControllerCustomElementsController.php
  20. 20. Lupus Custom Elements Renderer (2/3) ● ● ○ ○ ○ ○
  21. 21. Lupus Custom Elements Renderer (3/3) ● ○ ○ ● GET /example-page?_content_format=json GET /example-page?_content_format=markup
  22. 22. Example responses
  23. 23. Layout Builder + Custom Elements ● ● $rootElement->toRenderArray() ● ○ $customElement->setSlotFromRenderArray()
  24. 24. Frontend
  25. 25. ● ● ○ ○ ● ● ●
  26. 26. Example Vue.js Component
  27. 27. PgText.vue
  28. 28. Authentication
  29. 29. Authentication ● ● ●
  30. 30. Shared Cookie-based Authentication ● ● ● ●
  31. 31. Getting started
  32. 32. What’s needed? nuxtjs-drupal-ce
  33. 33. Getting started
  34. 34. Performance & Caching
  35. 35. Handling Cache Metadata ● CustomElement CacheableDependencyInterface ● addCacheableDependency(), addCacheTags() are available ● CacheMetadata is bubbled up the tree during render/serialization
  36. 36. Caching strategy ● ○ ● ● ○
  37. 37. Plan: Optional request inlining ● ●
  38. 38. Custom Elements as Render API ○ ○ ○ ○
  39. 39. Custom Elements as Render API (2/2) ○ ○ ○ ○
  40. 40. Comparison to JSONAPI ● ○ ● ● the contract
  41. 41. #custom-elements
  42. 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. 43. What did you think?

×