Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Decoupled frontend with Drupal 8 e OpenUI 5

Decoupled frontend with Drupal 8 e OpenUI 5

Slides from DrupalDay 2017 in Rome


Donato Rotunno

March 06, 2017

Other Decks in Programming


  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/

  27. None
  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