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

Headless Drupal - DCTransylvania 2018

Headless Drupal - DCTransylvania 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 04, 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. View Slide

  4. Sevilla

    View Slide

  5. Stockholm

    View Slide

  6. Conil

    View Slide

  7. 1xINTERNET.de

    View Slide

  8. DrupalHero.es
    @Drupal_Heroes

    View Slide

  9. drupalsurfcamp.com

    View Slide

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

    View Slide

  11. View Slide

  12. Web Applications
    Architecture Evolution

    View Slide

  13. Monolithic Application

    View Slide

  14. View Slide

  15. Microservices

    View Slide

  16. The Future of
    Web Applications

    View Slide

  17. Mobile Web/Apps

    View Slide

  18. Browserless Devices

    View Slide

  19. Internet of Things

    View Slide

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

    View Slide

  21. Loosely Coupled Architecture

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. UX

    View Slide

  26. Accessibility

    View Slide

  27. Multilingual

    View Slide

  28. Security

    View Slide

  29. Drupalgeddon III

    View Slide

  30. API-First
    Drupal

    View Slide

  31. Headless Drupal

    View Slide

  32. Decoupling

    View Slide

  33. Decouple Front-end

    View Slide

  34. View Slide

  35. View Slide

  36. Decouple Editorial UI

    View Slide

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

    View Slide

  38. 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

  39. Decoupled In-Place Editing App

    View Slide

  40. Decoupled In-Place Editing App

    View Slide

  41. Drupal 9?

    View Slide

  42. Accessible Solutions

    View Slide

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

    View Slide

  44. Artifcial Intelligence

    View Slide

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

    View Slide

  46. Fully Decoupled
    Vs
    Progressively Decoupled

    View Slide

  47. Drupal
    Initiatives

    View Slide

  48. 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

  49. 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

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

    View Slide

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

    View Slide

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

    View Slide

  53. http://www.drupaldeploy.org

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. Market Trends

    View Slide

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

    View Slide

  59. Digital Assets Management

    View Slide

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

    View Slide

  61. 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

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

    View Slide

  63. Demo

    View Slide

  64. Resources
    https://github.com/RESTful-Drupal/restful
    https://github.com/amitaibu/restful-blessed
    https://groups.drupal.org/headless-drupal
    https://github.com/Gizra/generator-hedley
    http://blog.loadimpact.com/blog/first-steps-with-crud-using-backbone-
    js-and-drupal-8/
    http://blog.loadimpact.com/blog/headless-drupal-8-retrieving-content-
    using-backbone-js/

    View Slide

  65. More Headless Drupal at DCTransylvania

    View Slide

  66. More Headless Drupal at DCTransylvania

    View Slide

  67. Join the Code Sprints!!

    View Slide

  68. JOIN US FOR
    SPRINT
    Friday, 4 May, 2018
    First time
    Sprinter Workshop
    Core sprint General Sprint
    12:00-12:30
    Room: Sprint
    9:00-18:00
    Room: Sprint
    9:00-18:00
    Room: Sprint
    #drupalsprints

    View Slide

  69. See you at Frontend United!

    View Slide

  70. See you at Drupal HackCamp!

    View Slide

  71. Come to Drupal Europe!!

    View Slide

  72. Questions?
    ?

    View Slide

  73. WHAT DID YOU THINK?
    Locate this session at the DrupalCamp Transylvania website:
    https://drupaltransylvania.ro/schedule
    Take the survey!
    https://www.surveymonkey.com/r/drupaltransylvania
    THANK YOU!

    View Slide