presentatie headless drupal capgemini 2016

HEADLESS DRUPAL @ VRT

Frederik Wouters 06/06/2016

Table of contents

Who am I Customers

Projects Technologies

Headless @ vrt (from frontend to backend) Angular vs React Examples Zones - Frontpage Zones – detail Frontend data sources Frontend data sources – drupal

Recap

Who am I?

Frederik Wouters 23 nov 1983 From Leuven

Posterity

Who am I

Actual action heroes

Discipline, dedication and friendship... Maar development first!

- Tom Rogie / Famous tester

Customers’ Projects

Amplexor: Infrabel, Kinepolis, Base …

Wieni: tourmanager.be, Q-music

Medialaan: Joe, Q-music

VRT: stubru, mnm, radio1, radio2,

klara, campagnes

Customers’ Technologies

Amplexor: D6 + solr + varnish ( + jenkins) Wieni: D7 + solr + varnish ( + jenkins) Medialaan: D7 + solr + varnish ( + jenkins) VRT: D5 –D6 – D7+ elasticsearch+ varnish ( +

jenkins) + Angular

Drupal 5 in 2016

It’s not so bad but hey, It’s almost weekend (on Monday)

- Stephan Celis / previous D5 developer

Headless @ VRT

Front end framework? Examples Zones - Frontpage Zones – detail Frontend data sources Frontend data sources – drupal Drupal – Json Api version Search Caching

New technology - hooray

The wieni situation

Wieni-X (digitaal productiehuis) Wieni + VRT = Strategic cooperation https://youtu.be/k9FhJYGtGHk Wieni.be

Internal development team

Angular & React

Vrt: Angular no more pageloads E.g. Radioplayer in page Heavy onetime pageload SEO (sadface)

Wieni: React Frontend/backend Nodejs SEO (happyface)

VRT chose angular

Re-use of directives (html + JS) = react component

In site audioplayer (not in use yet) Hosting = static

Wieni chose React

Re-use of react components SEO (server side html rendering) Node server

Examples

Angular Stubru Mnm

React Klara radio1

Examples = Stubru

Examples - mnm

Examples - klara

Examples – radio1

Zones - Front

Examples - overview

Examples – menu zone

MENU’s

Examples – ndequeue zone

NodeQueues

Examples – articles zone

Articles

Examples – flagged zone

Flagged articles

Zones - Artikel detail

Artikel detail - zones

Artikel afbeelding Nodequeue (banner) Most_read (GA) Paragraphs Elastic Search

mnmdetail

Artikel afbeelding Elastic Search Nodequeue (banner) Most_read (GA) Paragraphs

radio1detail

Artikel afbeelding Programma

(entity_rel) Nodequeue (banner) Most_read (GA) Paragraphs Elastic Search Discus (flag)

Klara detail

Artikel afbeelding Programma

(entity_rel) Nodequeue (banner) Most_read (GA) Paragraphs Elastic Search Discus (flag)

Services.vrt.be Hitlijst.vrt.be

Frontend data sources

Sources Drupal (backend) Services Hitlist

Drupal Articles Article_detail Paragraphs

data

Article detail

Article detail paragraphs

Drupal : Json

We did not use services. Api versioning Custom json representation of every node and its fields.

(these are classes). Add different cache-control header on each path.

Would do different:no

API versions

Our api is versioned.

Original Stubru : 1.1Original MNM : 1.2 Breaking changes for klara : 1.3More Breaking changes for klara: 1.4Radio 1 added to 1.4

Every new version we updated other sites to this newer version too.

It seems that 1.1 still works , we should deprecate this.

Search

Module “Elasticsearch connection” and submodules

Search api Open to frontend via light bootstrap search.php

(faster).

Would do different:Use “search api”

Caching

Opcode cache (APC) object caching (Memcache) Reverse proxy caching (Varnish)

Is controlled by headers. Cache-Control:public, max-age=0, s-maxage=86400

Load problems:not really

Cache invalidations - events

node alterations (purge path per type) Nodequeue alterations Settings form save Deploy …

Cache invalidations – sync/async

We have both sync and async invalidations Purges take time. Editors dont like waiting

E.g. On node_save Sync invalidate node detail json path Async invalidate nodequeues (this node bolongs to)

Recap

Do you really want headless Are there multiple api consumers? What is the breakdown of these users (html <> json) Do you really want to re-implement drupal specifix?

Should you do headless?

Depends on what you’re doing.

Headless - advantages

Outsource design + frontend website

Stay owner of your content & data structure

Implementation of new site without dataloss

Implementation of new client Develop

Headless - Limitations

Slowness of new features (change in backend + frontend)

Re-usable features in backend and frontendframeworks

So much work webforms in angular Routing in angular (and coupling

with drupal) 404 handling , … Develop

Thanks for listening

Mail: wouters.f@gmail.com Cell: +32 498 53 55 76 Linkedin

Questions? - Shoot!

Want to join?

Point your accountmanager to Marijke.Celis@vrt.be

Bekijk ook

http://www.slideshare.net/wouters_frederik