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

Ambitious Editorial Experiences with Headless Drupal - Frontend United Utrecht 2018

Ambitious Editorial Experiences with Headless Drupal - Frontend United Utrecht 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

June 05, 2018
Tweet

More Decks by Ruben Teijeiro

Other Decks in Technology

Transcript

  1. @rteijeiro

    View Slide

  2. Ruben
    Teijeiro
    @rteijeiro
    Drupal Hero

    View Slide

  3. drupalhero.es

    View Slide

  4. 1xINTERNET.de

    View Slide

  5. Conil

    View Slide

  6. Front-end technologies evolve
    faster than Back-end technologies

    View Slide

  7. View Slide

  8. Web Applications
    Software Evolution

    View Slide

  9. Custom Development from
    Scratch

    View Slide

  10. Popular CMSs

    View Slide

  11. Web Applications
    Architecture Evolution

    View Slide

  12. Corporative Website

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. Monolithic Application

    View Slide

  17. View Slide

  18. Microservices

    View Slide

  19. Web Trends

    View Slide

  20. Mobile Web/Apps

    View Slide

  21. Browserless Devices

    View Slide

  22. Internet of Things

    View Slide

  23. Market Trends

    View Slide

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

    View Slide

  25. Digital Assets Management

    View Slide

  26. Commercial API-frst CMSs
    https://www.contentful.com

    View Slide

  27. Open Source API-frst CMSs
    https://getdirectus.com

    View Slide

  28. What is Drupal
    doing to catch up
    with this trends?

    View Slide

  29. Loosely Coupled Architecture

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. UX

    View Slide

  35. Accessibility

    View Slide

  36. Multilingual

    View Slide

  37. Security

    View Slide

  38. Drupalgeddon III

    View Slide

  39. API-First
    Drupal

    View Slide

  40. Headless Drupal

    View Slide

  41. Decoupling

    View Slide

  42. Decouple Frontend

    View Slide

  43. Visitor-facing Experience

    View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. Accessible Solutions

    View Slide

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

    View Slide

  49. Artifcial Intelligence

    View Slide

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

    View Slide

  51. Mixed Reality

    View Slide

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

    View Slide

  53. Editorial Experience

    View Slide

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

    View Slide

  55. Drupal 9?

    View Slide

  56. Drupal
    Initiatives

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

  62. http://www.drupaldeploy.org

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  67. Das App

    View Slide

  68. Decoupled In-Place Editing App
    Drupal 8 + JSON API + React

    View Slide


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

    View Slide

  70. View Slide


  71. Page – Content Entity

    Fields - Entity references to
    Paragraphs

    Accordion

    Moodboard

    Text

    Image


    View Slide

  72. View Slide

  73. View Slide

  74. Pain Points

    View Slide

  75. Performance
    Complex data structure for JSON-
    API
    Possible Solution: GraphQL

    View Slide

  76. Content lock for collaborative editing
    Possible solutions:

    Middleware: Nodejs instance

    Entity reference revisions

    View Slide

  77. UX Limitations
    Possible solutions:

    Improve editorial experience

    View Slide

  78. Demo?

    View Slide

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

  80. Join the Code Sprints!!

    View Slide

  81. drupalsurfcamp.com

    View Slide

  82. See you at Drupal HackCamp!

    View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. Questions?
    ?

    View Slide

  87. Thanks!

    View Slide