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

An introduction to OpenUI 5

http://openui5.org

Yet Another Framework?

http://todomvc.com/

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