presentatie headless drupal capgemini 2016
TRANSCRIPT
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
Questions? - Shoot!
Bekijk ook
http://www.slideshare.net/wouters_frederik