Headless Drupal - Wat, Waarom, Hoe & Uitdagingen

Joris Snoek

Headless Drupal

OpenLucius.nl - Drupal Social Intranet

Wat, Waarom & Hoe in Drupal.

Headless Drupal

Uitdagingen, Code Voorbeelden & Vragen.

Headless Drupal implementaties

Tonight show Drupal & Node.js + Backbone.js

Weather.com Drupal & Angular

Radio France International Drupal & Symfony 2

Wat is headless?

Focus deze sessie op JS/HTML - frameworks, niet apps

Waarom headless?

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? Onafhankelijke teams, ook zonder Drupal kennis.

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? “I love CSS” - No backend developer ever.

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? “I love to style Drupal markup” - No frontend developer ever.

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? 100-miljoen-miljard apparaten en schermen.

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? 100-miljard-miljoen apps.

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? Makkelijker beheer en onderhoud.

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? Performance.

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? Toekomstgericht

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Waarom Headless Drupal? ‘Applicatie experience’.

Headless techniek

Hoe headless in Drupal 7 & 8?

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Hoe Headless | Drupal 7 - Modules: Services, RestWS, Restful - Custom endpoint gefaciliteerd door Service module

Waarom Headless?

OpenLucius.com - Drupal Social Intranet

Hoe Headless | Drupal 8 - REST API in core & Services module. - REST UI & Views - Custom endpoints middels core REST API + services.

Headless uitdagingen - ‘Building an API is not enough’.

Headless uitdagingen - SEO

Headless uitdagingen - Meertaligheid: Localization & Content translation

Headless uitdagingen - Formulieren

Headless uitdagingen - Menu’s

Headless uitdagingen - Layout control

Headless uitdagingen - Foreign authorisation

Headless uitdagingen - Contact formulier

Headless uitdagingen - Search

Headless uitdagingen - Search, Pager, Views exposed filters, Meta tags, OpenGraph, - Google Analytics (bv events), Preview, Edit in place, Toolbar, - Image styles, Block management, Paragraphs, XML Sitemap, etc etc - Site name, logo & site slogan

⁃ Logging en error reporting

Headless uitdagingen - Veel lagen, meer complexiteit

Headless uitdagingen - Drupal core & Services module: Hoeveelheid data en traffic per endpoint.

Headless uitdagingen - Hosting

Headless uitdagingen - Budget

Headless? Coupled? Decoupled?

Progressive Decoupled? Monolytic?

Progressive decoupled - Criteria document and comparison matrix

Go for headless?

Go for headless? - Meerdere onafhankelijke development teams? - Rigide front-end requirements? - Multi channel publishing?

Go for headless? - Mate van Drupal ervaring bij front-enders? - Data van verschillende bronnen? - Dev team site builders of API devs?

API design & tools

API Design - REST: Representational State Transfer - Roy Fielding - “Architectural Styles and the Design of Network-based Software Architectures”

API Design - Richardson Maturity Model: - Level 0: the swamp of POX (single endpoint: /content?type=article) - Level 1: Resources (multiple endpoints: /articles, /articles/1, and /articles/1/delete) - Level 2: HTTP verbs (endpoint per content type faciliteert GET, POST, DELETE, PATCH) = RESTful

API Design - Object schema bepalen - Repeatable proporties en field names - Juiste data types: b.v. integers voor nummers i.p.v strings

API Design - API versioning - in URL of in accept header - Services module kan faciliteren

Overige API technieken - GraphQL, HAL, Siren, Collection+JSON, Uber - HAL, JSON-LD (+ Hydra), Mason

API tools - swagger.io (Designing, traffic inspector, documentation) - Postman Chrome plugin (Testing) - Apiary (Designing)

API tools - API Blueprint (Designing) - Jsonapi.org (Designing) - Dredd (Testing) - Aglio (Documentation)

Voorbeelden

Voorbeeld | Drupal 7 Services of RESTful module: • Standaard endpoints met (te) veel voorgedefinieerd Drupal

style output.

Voorbeeld | Drupal 7 custom endpoints m.b.v. Services: Bepaal geheel zelf de output m.b.v. custom queries ==> Zie voorbeeld code

Voorbeeld - Drupal 8 core + REST UI module

Voorbeeld|Drupal 8 custom endpoints: http://enzolutions.com/articles/2014/12/16/how-to-create-a-rest-resource-in-drupal-8/

Vragen?