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.

Transcript

1. @rteijeiro
2. Ruben Teijeiro @rteijeiro Drupal Hero
3. drupalhero.es
4. 1xINTERNET.de
5. Conil
6. Front-end technologies evolve faster than Back-end technologies
8. Web Applications Software Evolution
9. Custom Development from Scratch
10. Popular CMSs
11. Web Applications Architecture Evolution
12. Corporative Website
16. Monolithic Application
18. Microservices
19. Web Trends
20. Mobile Web/Apps
21. Browserless Devices
22. Internet of Things
23. Market Trends
24. Content Repositories https://www.acquia.com/products-services/acquia-content-hubvid
25. Digital Assets Management
26. Commercial API-frst CMSs https://www.contentful.com
27. Open Source API-frst CMSs https://getdirectus.com
28. What is Drupal doing to catch up with this trends?
29. Loosely Coupled Architecture
30. I love Twig!! Drupal 8 Front-end is @mortendk Certifed
31. Dynamic Page Cache https://www.drupal.org/docs/ 8/core/modules/dynamic- page-cache/overview
32. Big Pipe https://www.drupal.org/docs/8/core/modules/bigpipe/overview
33. Big Pipe https://www.drupal.org/docs/8/core/modules/bigpipe/overview
34. UX
35. Accessibility
36. Multilingual
37. Security
38. Drupalgeddon III
39. API-First Drupal
40. Headless Drupal
41. Decoupling
42. Decouple Frontend
43. Visitor-facing Experience
47. Accessible Solutions
48. https://www.drupal.org/project/alexa https://www.youtube.com/watch?v=pZ-tBUdmzpo
49. Artifcial Intelligence
50. Chatbots https://www.youtube.com/watch?v=n7XyB1BoDF4
51. Mixed Reality
52. Augmented Reality https://www.youtube.com/watch?v=ZroFBG7-P7Q
53. Editorial Experience
54. https://developer.wordpress.com/calypso
55. Drupal 9?
56. Drupal Initiatives
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
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
59. GraphQL https://www.drupal.org/project/graphql http://graphql.org/swapi-graphql @thefubhy
60. RELAXed Web Services https://www.drupal.org/project/relaxed @dickolsson
61. Workfow Initiative https://www.drupal.org/node/2721129
62. http://www.drupaldeploy.org
63. Progressive Web Apps @nod_ https://www.drupal.org/project/pwa
64. @prestonso https://github.com/acquia/waterwheel.js https://github.com/acquia/waterwheel.swift
65. @wimleers https://github.com/acquia/reservoir
66. Contenta CMS http://www.contentacms.org Contenta is an API-First Drupal distribution
67. Das App
68. Decoupled In-Place Editing App Drupal 8 + JSON API + React
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
71. • Page – Content Entity • Fields - Entity references to Paragraphs • Accordion • Moodboard • Text • Image • …
74. Pain Points
75. Performance Complex data structure for JSON- API Possible Solution: GraphQL
76. Content lock for collaborative editing Possible solutions: • Middleware: Nodejs instance • Entity reference revisions
77. UX Limitations Possible solutions: • Improve editorial experience
78. Demo?
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
80. Join the Code Sprints!!
81. drupalsurfcamp.com
82. See you at Drupal HackCamp!
86. Questions? ?
87. Thanks!