$30 off During Our Annual Pro Sale. View Details »

Headless Drupal - DrupalCamp Spain 2018

Headless Drupal - DrupalCamp Spain 2018

"The front-end moves faster than Drupal, whether Drupal likes it or not" This reference from "The state of the Front-end" session at DrupalCon Amsterdam explains that we need different ways to retrieve content from a Drupal site for an easy integration with new front-end frameworks and other 3rd-party applications. This allows non-experienced front-end developers to start theming Drupal using the tools they are used to, providing at the same time multiple integrations with other platforms through APIs. Currently there is a debate about how to achieve this and what direction Drupal will take in the future. In this workshop there will be explained different approaches to solve common problems and what possible solutions are provided by Drupal and its contributed modules. You can join this discussion, share your thoughts and experiences with others, and help Drupal to go on the right track.

Ruben Teijeiro

May 26, 2018
Tweet

More Decks by Ruben Teijeiro

Other Decks in Technology

Transcript

  1. Headless Drupal
    #HeadlessDrupal
    Ruben Teijeiro
    @rteijeiro

    View Slide

  2. Ruben
    Teijeiro
    @rteijeiro
    Networker
    Connecting
    Open Minds

    View Slide

  3. Stockholm

    View Slide

  4. Conil

    View Slide

  5. 1xINTERNET.de

    View Slide

  6. DrupalHero.es
    @Drupal_Heroes

    View Slide

  7. drupalsurfcamp.com

    View Slide

  8. "The front-end moves faster than Drupal,
    whether Drupal likes it or not" @eatings

    View Slide

  9. View Slide

  10. Web Applications
    Architecture Evolution

    View Slide

  11. Monolithic Application

    View Slide

  12. View Slide

  13. Microservices

    View Slide

  14. The Future of
    Web Applications

    View Slide

  15. Mobile Web/Apps

    View Slide

  16. Browserless Devices

    View Slide

  17. Internet of Things

    View Slide

  18. What is Drupal doing for
    catching up with the future
    trends?

    View Slide

  19. Loosely Coupled Architecture

    View Slide

  20. I love Twig!! Drupal 8 Front-end is
    @mortendk Certifed

    View Slide

  21. Dynamic Page Cache
    https://www.drupal.org/docs/
    8/core/modules/dynamic-
    page-cache/overview

    View Slide

  22. Big Pipe
    https://www.drupal.org/docs/8/core/modules/
    bigpipe/overview

    View Slide

  23. UX

    View Slide

  24. Accessibility

    View Slide

  25. Multilingual

    View Slide

  26. Security

    View Slide

  27. Drupalgeddon III

    View Slide

  28. API-First
    Drupal

    View Slide

  29. Headless Drupal

    View Slide

  30. Decoupling

    View Slide

  31. Decouple Frontend
    Visitor-facing Experiences with Drupal as a Backend

    View Slide

  32. View Slide

  33. Decouple Drupal
    Administrative UI

    View Slide

  34. https://developer.wordpress.com/calypso/

    View Slide

  35. Decoupled In-Place Editing App

    Full inline editing (WYSIWYG)

    Zero latency editing

    No page reloads

    Instant previewing

    “App feeling” for editor experience

    Easy access to information for visitors
    (aka non-editors) like in a standard
    decoupled scenario
    Drupal JSON API & React

    View Slide

  36. Decoupled In-Place Editing App

    View Slide

  37. Decoupled In-Place Editing App

    View Slide

  38. Drupal 9?

    View Slide

  39. Accessible Solutions

    View Slide

  40. https://www.drupal.org/project/alexa
    https://www.youtube.com/watch?v=pZ-tBUdmzpo

    View Slide

  41. Artifcial Intelligence

    View Slide

  42. Chatbots
    https://www.youtube.com/watch?v=n7XyB1BoDF4

    View Slide

  43. Mixed Reality

    View Slide

  44. Augmented Reality
    https://www.youtube.com/watch?v=ZroFBG7-P7Q

    View Slide

  45. Fully Decoupled
    Vs
    Progressively Decoupled

    View Slide

  46. Drupal
    Initiatives

    View Slide

  47. API-First Initiative
    Making Drupal API-frst means making the data stored and
    managed by Drupal available for other software.
    https://www.drupal.org/node/2757967

    View Slide

  48. JSON API
    Generate an API server that implements the {json:api}
    specifcation.
    https://www.drupal.org/project/jsonapi
    https://www.drupal.org/project/jsonapi_extras

    View Slide

  49. @wimleers
    https://github.com/acquia/reservoir

    View Slide

  50. GraphQL
    https://www.drupal.org/project/graphql
    http://graphql.org/swapi-graphql
    @thefubhy

    View Slide

  51. Workfow Initiative
    https://www.drupal.org/node/2721129

    View Slide

  52. http://www.drupaldeploy.org

    View Slide

  53. RELAXed Web Services
    https://www.drupal.org/project/relaxed
    @dickolsson

    View Slide

  54. @prestonso
    https://github.com/acquia/waterwheel.js
    https://github.com/acquia/waterwheel.swift

    View Slide

  55. Progressive Web Apps
    @nod_
    https://www.drupal.org/project/pwa

    View Slide

  56. Market Trends

    View Slide

  57. Content Repositories
    https://www.acquia.com/products-services/acquia-content-hubvid

    View Slide

  58. Digital Assets Management

    View Slide

  59. API-frst CMS
    https://www.contentful.com

    View Slide

  60. Directus
    https://getdirectus.com
    Directus is an API-driven content management framework
    for custom databases. It decouples content for use in apps,
    websites, or any other data-driven projects.

    View Slide

  61. Contenta CMS
    http://www.contentacms.org
    Contenta is an API-First Drupal distribution

    View Slide

  62. Demo

    View Slide

  63. Resources
    https://dri.es/working-toward-a-javascript-driven-drupal-
    administration-interface
    https://www.drupal.org/project/drupal/issues/2926656
    https://github.com/jsdrupal/drupal-admin-ui
    https://wimleers.com/blog/api-first-drupal-two-big-maintainability-
    milestones
    https://www.lullabot.com/articles/drupal-javascript-initiative-the-road-
    to-a-modern-administration-ui
    https://www.drupal.org/project/jsdrupal

    View Slide

  64. More Headless Drupal at DrupalCamp Spain
    Saturday
    15:30

    View Slide

  65. More Headless Drupal at DrupalCamp Spain
    Sunday
    10:00

    View Slide

  66. More Headless Drupal at DrupalCamp Spain
    Sunday
    11:30

    View Slide

  67. Join the Code Sprints!!

    View Slide

  68. See you at Frontend United!

    View Slide

  69. See you at Drupal HackCamp!

    View Slide

  70. Don’t miss Decoupled Drupal Days!!

    View Slide

  71. Come to Drupal Europe!!

    View Slide

  72. Questions?
    ?

    View Slide

  73. Thanks!

    View Slide