Decoupled frontend with Drupal 8 e OpenUI 5

Slides from DrupalDay 2017 in Rome

Transcript

1. Decoupled frontend with Drupal 8 e OpenUI 5 DrupalDay 2017 - Rome, 03/03/2017
2. Whaaat?
3. Whaaat?
4. About me Name: Donato Rotunno Age: 42 Birthplace: Lucania (Basilicata), Italy Profession: Frontend developer and Web Content Accessibility passionate Company: Liip AG, Fribourg, Switzerland Github: ralf57 Twitter: ralf57
5. About my nickname The Greatest American Hero, a.k.a Ralph supermaxieroe
6. Agenda Decoupled frontend: why and what? A quick look at Drupal 8 REST implementation Discovering OpenUI 5 Demo Questions
7. What is a decoupled frontend? An application which interacts with another application exposing data via external API (REST, SOAP, etc)
8. Why a decoupled frontend?
9. Fully customizable frontend Twig templating engine Easily override default markup Free to adopt any assets (JS, CSS, Images, etc) management strategy. Built-in or external tools
10. Why a decoupled frontend?
11. Innovation, desire to move on
12. Better performance
13. Only expose what you need (regardless of user permissions)
14. Implement a completely different UI pattern
15. Make the migration to a “Drupal as Content Repository” easier
16. Traditional Drupal setup Frontend Backend + Editor
17. API-driven Drupal setup Frontend Backend + Editor REST API
18. API-driven Drupal setup + decoupled Editor Frontend Backend (content repository) REST API Editor
19. The attack of API-first CMSes
20. The attack of API-first CMSes • Different targets: from newbie (Wix) to developer (Contentful) • Offered as SaaS, with subscription-based business model • Pros: low setup costs, SDK, rapid Frontend scaffolding • Cons: data in the Cloud, technology (service) lock-in
21. RESTful API’s with Drupal 8 https://www.drupal.org/docs/8/core/modules/rest/overview
22. • Already possible in Drupal 7 via Via RESTful Web Services module • In Drupal 8 it builds on top of Symfony Components • In D8 core (although better use Views to expose resources)
23. RESTful features Multiple formats (JSON, XML, HAL+JSON, CSV) Multiple Authentication mechanisms (Cookie, OAuth, OAuth 2.0 Token Bearer, HTTP Basic Authentication) Most HTTP verbs supported, except PUT (De)Serialization
24. Useful modules and tools https://www.drupal.org/project/rest_api_doc Automatically generate API docs https://www.getpostman.com/ Develop and Test your API https://www.drupal.org/project/devel Especially “Devel generate” in order to add some (dummy) content
25. An introduction to OpenUI 5 http://openui5.org
26. Yet Another Framework? http://todomvc.com/
28. Motivations (my guess) • Hey, it’s 2015! • Many products are being moving to the cloud • The need to provide a solid User Experience, regardless of the device • Keep the technology lock-in
29. OpenUI 5 key features • MVC pattern implementation • Built-in support for several data model types (JSON, XML, OData) • Extensible • Comes with 200 UI controls • Responsive • Very good Accessibility support • (almost)Fully tested and good support for custom extensions testing • Backed by SAP
30. OpenUI 5 key features • No EcmaScript 6 • Uses jQuery • Themeable via Less pre-processing • Support for different view formats (XML, HTML, Javascript, JSON) • Free and open source, hackable on Github
31. Love at first “define” sap.ui.define([ 'jquery.sap.global', 'sap/ui/core/Element', 'sap/ui/core/library' ], function(jQuery, Element, library) { "use strict"; ……… }); https://raw.githubusercontent.com/SAP/openui5/master/src/sap.ui.core/src/sap/ui/core/search/SearchProvider.js
32. Love at first “define” define([ './cart', './inventory' ], function(cart, inventory) { …. }); http://requirejs.org/docs/api.html#define
33. VS
34. Showtime!!!
35. Questions?
36. Thank you all! DrupalDay 2017 - Rome, 03/03/2017