Slide 1

Slide 1 text

Decoupled frontend with Drupal 8 e OpenUI 5 DrupalDay 2017 - Rome, 03/03/2017

Slide 2

Slide 2 text

Whaaat?

Slide 3

Slide 3 text

Whaaat?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

About my nickname The Greatest American Hero, a.k.a Ralph supermaxieroe

Slide 6

Slide 6 text

Agenda Decoupled frontend: why and what? A quick look at Drupal 8 REST implementation Discovering OpenUI 5 Demo Questions

Slide 7

Slide 7 text

What is a decoupled frontend? An application which interacts with another application exposing data via external API (REST, SOAP, etc)

Slide 8

Slide 8 text

Why a decoupled frontend?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Why a decoupled frontend?

Slide 11

Slide 11 text

Innovation, desire to move on

Slide 12

Slide 12 text

Better performance

Slide 13

Slide 13 text

Only expose what you need (regardless of user permissions)

Slide 14

Slide 14 text

Implement a completely different UI pattern

Slide 15

Slide 15 text

Make the migration to a “Drupal as Content Repository” easier

Slide 16

Slide 16 text

Traditional Drupal setup Frontend Backend + Editor

Slide 17

Slide 17 text

API-driven Drupal setup Frontend Backend + Editor REST API

Slide 18

Slide 18 text

API-driven Drupal setup + decoupled Editor Frontend Backend (content repository) REST API Editor

Slide 19

Slide 19 text

The attack of API-first CMSes

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

RESTful API’s with Drupal 8 https://www.drupal.org/docs/8/core/modules/rest/overview

Slide 22

Slide 22 text

● 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)

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

An introduction to OpenUI 5 http://openui5.org

Slide 26

Slide 26 text

Yet Another Framework? http://todomvc.com/

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Love at first “define” define([ './cart', './inventory' ], function(cart, inventory) { …. }); http://requirejs.org/docs/api.html#define

Slide 33

Slide 33 text

VS

Slide 34

Slide 34 text

Showtime!!!

Slide 35

Slide 35 text

Questions?

Slide 36

Slide 36 text

Thank you all! DrupalDay 2017 - Rome, 03/03/2017