API-First Drupal and the Future of the CMS

2. ©2016 Acquia Inc. Welcome! Preston So (@prestonso) has been a web developer and designer since 2001, a creative professional since 2004, and a Drupal developer since 2007. As Development Manager of Acquia Labs, Preston leads new open-source and research initiatives at Acquia. Preston has presented keynotes at conferences on three continents in both English and Portuguese and speaks about diverse topics such as decoupled Drupal, responsive design, front-end development, and user experience. – drupal.org/u/prestonso – preston.so@acquia.com

4. ©2016 Acquia Inc. What we’ll cover – Imagining the future – The world around us is evolving – API-first Drupal – Web services and SDKs – The JavaScript renaissance – Epilogue: Drupal’s API-first future

6. Think back to your first Drupal site

7. Think about where Drupal is now

8. What did digital experiences look like in 2008?

9. What did digital experiences look like in 2012?

10. What do digital experiences look like in 2016?

11. What will digital experiences look like in 2020?

12. Simone Biles Katie Ledecky

13. Wearables Conversational interfaces Internet of Things (IoT) Augmented and virtual reality AI and machine learning

14. Wearables Conversational interfaces Internet of Things (IoT) Augmented and virtual reality AI and machine learning

16. We are in the midst of a content revolution ...

17. … and a reinvention of content delivery.

18. The web is now just the bare minimum among touchpoints. IoT apps Native apps Chat apps Single- page apps Other back ends Set-top boxes

19. We’re moving from standalone digital experiences to entire digital ecosystems ... Native mobile app Website IoT app Native app Chat app Single- page app Other back ends Set-top box Content store

20. Pull-based Push-based … from pull-based content delivery to push-based content delivery ... Amazon Echo push notification AR/VR notification overlay In-store product alerts

21. … and from consumption of content to interaction with content. Amazon Echo push notification User- generated response Interaction with AR/VR interface AR/VR notification overlay

22. In New York City, Drupal feeds information to kiosks in the MTA. Drupal 8 provides data to smartphone apps linked to Tesla vehicles. Lufthansa supplies its in- flight entertainment systems with Drupal 8.

23. Drupal is now a centerpiece of application ecosystems. IoT apps Native apps Chat apps Single- page apps Other back ends Set-top boxes

24. But we have new competition: the headless CMS. IoT apps Native apps Chat apps Single- page apps Other back ends Set-top boxes

25. And we have new devices or touchpoints every day. IoT apps Native apps Chat apps Single- page apps Other back ends Set-top boxes Smart watches Fitness devices Arduino boards Beacons AR/VR apps Rasp- berry Pi Conver- sational UIs LED displays

26. IoT apps Native apps Chat apps Single- page apps Other back ends Set-top boxes Smart watches Fitness devices Arduino boards Beacons AR/VR apps Rasp- berry Pi Conver- sational UIs LED displays Our mission is to make Drupal the best API-first CMS.

28. Think of Earth as one contiguous unit: a monolith.

29. Earth responds to requests from decoupled bases. request response

30. Drupal is a monolithic CMS backing decoupled applications. HTTP request HTTP response

31. HTTP request HTTP response Site or repository built in Drupal Decoupled application

32. HTTP request HTTP response (JSON, XML) Site or repository built in Drupal Decoupled application REST API Decoupled application HTTP client

33. ©2016 Acquia Inc. API-first (decoupled) Drupal – Decoupled Drupal, or API-first Drupal, is the process of employing Drupal as a data service which exposes data for consumption by other applications. – Drupal can be used to back other back-end applications (Rails, .NET, PHP) as well as native applications, single- page JavaScript applications, and IoT applications. – A REST API is the most common entry point for decoupled applications.

34. Monolithic vs. decoupled Drupal Drupal front end PHP Data Templates HTML Drupal Decoupled application PHP Data Templates HTML Other language JSON REST API

35. Drupal Native Android application PHP Data Templates App code Java JSON Drupal Single-page application (universal JavaScript) PHP Data Templates HTML JS JSON REST API REST API

36. Silex application Data Templates HTML or app code JSON Drupal Native iOS application PHP Obj-C PHP REST API

38. HTTP request HTTP response (JSON, XML) Site or repository built in Drupal Decoupled application Web services Decoupled application Software development kit (SDK) API-first ideal

39. Web services Full feature set Single REST API in core Specification flexibility SDKs For JavaScript apps For native apps For back-end apps How can we outperform headless CMSes?

40. Web services in Drupal 8 are currently spread across a variety of implementations. Core REST modules Services (D8) RELAXed Web Services Content entity CRUD Views REST exports Resource plugins Configuration entity CRUD Configurable route prefixes User login and logout Translations Revisions File attachments Entity Query API Sorting and range Conditions Pagination

41. We need a full feature set and unified REST API in Drupal core. Future core REST Content entity CRUD Views REST exports Resource plugins Configuration entity CRUD Configurable route prefixes User login and logout Translations Revisions File attachments Sorting and range Conditions Pagination

42. Application developers should be able to use the specification of their choice. HAL+ JSON JSON APICouchDB GraphQL

43. DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS

44. DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS JavaScript Native app Rails IoT app

45. Currently, consuming Drupal data requires a basic understanding of Drupal’s REST API. JavaScript application I need the title of node/1. But where can I get to it? And how do I get just the title? Current core REST Here is the node ID, the node UUID, the node type, the node language, the node title, the node author, the node created

46. Waterwheel is an ecosystem of SDKs that accelerate development of Drupal-backed applications. JavaScript application I need the title of node/1. But where can I get to it? And how do I get just the title? Current core REST Waterwheel.js SDKI need to get node/1 (and I know the route is /node/1?_format=json).

47. Waterwheel is an ecosystem of SDKs that accelerate development of Drupal-backed applications. JavaScript application Current core REST Waterwheel.js SDK Here is the node ID, the node UUID, the node type, the node language, the node title, the node author, the node created The title of the first article is “Blueberry Hill” (and I know it’s in the response at response.title[0].value).

48. github.com/acquia/waterwheel-js github.com/acquia/waterwheel-swift

50. Static pages Subscribe to our newsletter You have been successfully subscribed! E-mail address Submit full-page refresh Drupal Drupal front end PHP Data Templates HTML Drupal Drupal front end Data Templates HTML

51. Dynamic pages with Ajax Subscribe to our newsletter E-mail address Submit Drupal Drupal front end PHP Data Templates HTML Subscribe to our newsletter Success! E-mail address Submit Subscribe to our newsletter E-mail address Submit AJAX request AJAX response

52. Dynamic pages with client-side rendering Subscribe E-mail Submit HTTP request HTTP response Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Success! Here are others that might interest you: Lorem ipsum dolor sit amet, consectetuer adipiscing. Drupal Decoupled front end REST API

53. ©2016 Acquia Inc. Rewards of fully decoupled Drupal – Separation of concerns (structure vs. presentation) – Content syndication (write once, publish everywhere) – Differentiated development velocities between front and back end (independent front-end redesigns) – Rich application ecosystem (auxiliary applications such as SPAs, native mobile, and IoT)

54. ©2016 Acquia Inc. Risks of fully decoupled Drupal – Additional point of failure (REST API, other hosting) – No cross-site scripting protection or input sanitization – No in-place, in-context editing or administration – No layout and display management – No previewable content workflow – No modules affecting the front end – No system notifications (errors, messages) – No BigPipe progressive loading or cache tags – No accessible markup or user experience benefits

55. ©2016 Acquia Inc. When should you decouple Drupal? – A site powering one or more other sites – A site powering one or more other applications – A site powering multiple sites or applications – Standalone applications – Standalone sites

56. ©2016 Acquia Inc. For standalone sites and apps … – You don’t need the overhead of a decoupled architecture to power a standalone site or application. – Doing so can lead to workarounds that duplicate, interrupt, or otherwise obfuscate the integrity of end-to- end Drupal. – There is a better solution: progressive decoupling.

57. Fully decoupled Drupal Subscribe E-mail Submit HTTP request HTTP response Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Success! Here are others that might interest you: Lorem ipsum dolor sit amet, consectetuer adipiscing. Drupal JavaScript framework REST API

58. Fully decoupled Drupal Subscribe E-mail Submit HTTP request HTTP response Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Success! Here are others that might interest you: Lorem ipsum dolor sit amet, consectetuer adipiscing. Drupal JavaScript framework REST API

59. Progressively decoupled Drupal Subscribe E-mail Submit HTTP request HTTP response Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Success! Here are others that might interest you: Lorem ipsum dolor sit amet, consectetuer adipiscing. Drupal REST API Drupal front end JS framework

60. ©2016 Acquia Inc. Risks of fully decoupled Drupal – Additional point of failure (REST API, other hosting) – No cross-site scripting protection or input sanitization – No in-place, in-context editing or administration – No layout and display management – No previewable content workflow – No modules affecting the front end – No system notifications (errors, messages) – No BigPipe progressive loading or cache tags – No accessible markup or user experience benefits

61. ©2016 Acquia Inc. Rewards of progressively decoupled Drupal – No additional point of failure (REST API, other hosting) – Cross-site scripting protection and input sanitization – In-place, in-context editing and administration – Layout and display management – Previewable content workflow – Modules affecting the front end – System notifications (errors, messages) – BigPipe progressive loading and cache tags – Accessible markup and user experience benefits

63. Think again about where Drupal is now

64. How can we make Drupal more API-first?

65. How can we benefit from a native user experience and editorial capabilities?

66. Should Drupal be decoupled out of the box?

67. Should all CMSes be decoupled out of the box?

68. More information ➔ API-first initiative ◆ www.drupal.org/node/2757967 ➔ API-first initiative at DrupalCon Dublin ◆ events.drupal.org/dublin2016/sessions/api-first-initiative ➔ API-first initiative at DrupalCon Baltimore ◆ events.drupal.org/baltimore2017/sessions/api-first-initiative