Decoupled frontend with Drupal 8 e OpenUI 5
DrupalDay 2017 - Rome, 03/03/2017
Whaaat?
Whaaat?
About me
Name: Donato RotunnoAge: 42Birthplace: Lucania (Basilicata), ItalyProfession: Frontend developer and Web Content Accessibility passionateCompany: Liip AG, Fribourg, SwitzerlandGithub: ralf57Twitter: ralf57
About my nickname
The Greatest American Hero, a.k.a Ralph supermaxieroe
Agenda
Decoupled frontend: why and what?
A quick look at Drupal 8 REST implementation
Discovering OpenUI 5
Demo
Questions
What is a decoupled frontend?
An application which interacts with another application exposing data via external API
(REST, SOAP, etc)
Why a decoupled frontend?
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
Why a decoupled frontend?
Innovation, desire to move on
Better performance
Only expose what you need
(regardless of user permissions)
Implement a completely different UI pattern
Make the migration to a “Drupal as Content Repository”
easier
Traditional Drupal setup
FrontendBackend
+ Editor
API-driven Drupal setup
FrontendBackend
+Editor
REST API
API-driven Drupal setup + decoupled Editor
FrontendBackend(content
repository)
REST API
Editor
The attack of API-first CMSes
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
RESTful API’s with Drupal 8
https://www.drupal.org/docs/8/core/modules/rest/overview
● 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)
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
Useful modules and tools
https://www.drupal.org/project/rest_api_docAutomatically generate API docs
https://www.getpostman.com/Develop and Test your API
https://www.drupal.org/project/develEspecially “Devel generate” in order to add some (dummy) content
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
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
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
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
Love at first “define”
define([
'./cart',
'./inventory'
], function(cart, inventory) {
….
});
http://requirejs.org/docs/api.html#define
VS
Showtime!!!
Questions?
Thank you all!
DrupalDay 2017 - Rome, 03/03/2017