[drupalday2017] - Decoupled frontend con Drupal 8 e OpenUI 5
0 likes260 views
The document discusses the concept of a decoupled frontend using Drupal 8 and OpenUI5, highlighting its benefits such as customization, performance, and ease of migration. It outlines Drupal 8's REST capabilities and the advantages of an API-first approach in the context of modern web development. Additionally, it introduces OpenUI5, detailing its key features like support for various data models and accessibility, while also addressing the challenges posed by cloud-based services.
![[drupalday2017] - Decoupled frontend con Drupal 8 e OpenUI 5](https://image.slidesharecdn.com/donato-rotunnodrupal8andopenui5-170315153655/85/drupalday2017-Decoupled-frontend-con-Drupal-8-e-OpenUI-5-27-320.jpg)
![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](https://image.slidesharecdn.com/donato-rotunnodrupal8andopenui5-170315153655/85/drupalday2017-Decoupled-frontend-con-Drupal-8-e-OpenUI-5-31-320.jpg)
![Love at first “define”
define([
'./cart',
'./inventory'
], function(cart, inventory) {
….
});
http://requirejs.org/docs/api.html#define](https://image.slidesharecdn.com/donato-rotunnodrupal8andopenui5-170315153655/85/drupalday2017-Decoupled-frontend-con-Drupal-8-e-OpenUI-5-32-320.jpg)
[drupalday2017] - Decoupled frontend con Drupal 8 e OpenUI 5
- 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
- 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
- 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
- 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