Presentatie headless drupal capgemini 2016
-
Upload
frederik-wouters -
Category
Internet
-
view
181 -
download
5
Transcript of Presentatie headless drupal capgemini 2016
![Page 1: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/1.jpg)
HEADLESS DRUPAL @ VRT
Frederik Wouters 06/06/2016
![Page 2: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/2.jpg)
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
![Page 3: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/3.jpg)
Who am I?
Frederik Wouters 23 nov 1983 From Leuven
![Page 4: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/4.jpg)
Posterity
![Page 5: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/5.jpg)
Who am I
![Page 6: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/6.jpg)
![Page 7: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/7.jpg)
Actual action heroes
Discipline, dedication and friendship... Maar development first!
- Tom Rogie / Famous tester
![Page 8: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/8.jpg)
Customers’ Projects
Amplexor: Infrabel, Kinepolis, Base …
Wieni: tourmanager.be, Q-music
Medialaan: Joe, Q-music
VRT: stubru, mnm, radio1, radio2,
klara, campagnes
![Page 9: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/9.jpg)
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
![Page 10: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/10.jpg)
Drupal 5 in 2016
It’s not so bad but hey, It’s almost weekend (on Monday)
- Stephan Celis / previous D5 developer
![Page 11: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/11.jpg)
Headless @ VRT
Front end framework? Examples Zones - Frontpage Zones – detail Frontend data sources Frontend data sources – drupal Drupal – Json Api version Search Caching
![Page 12: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/12.jpg)
New technology - hooray
![Page 13: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/13.jpg)
The wieni situation
Wieni-X (digitaal productiehuis) Wieni + VRT = Strategic cooperation https://youtu.be/k9FhJYGtGHk Wieni.be
![Page 14: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/14.jpg)
Internal development team
![Page 15: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/15.jpg)
Angular & React
Vrt: Angular no more pageloads E.g. Radioplayer in page Heavy onetime pageload SEO (sadface)
Wieni: React Frontend/backend Nodejs SEO (happyface)
![Page 16: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/16.jpg)
VRT chose angular
Re-use of directives (html + JS) = react component
In site audioplayer (not in use yet) Hosting = static
![Page 17: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/17.jpg)
Wieni chose React
Re-use of react components SEO (server side html rendering) Node server
![Page 18: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/18.jpg)
Examples
Angular Stubru Mnm
React Klara radio1
![Page 19: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/19.jpg)
Examples = Stubru
![Page 20: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/20.jpg)
Examples - mnm
![Page 21: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/21.jpg)
Examples - klara
![Page 22: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/22.jpg)
Examples – radio1
![Page 23: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/23.jpg)
Zones - Front
![Page 24: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/24.jpg)
Examples - overview
![Page 25: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/25.jpg)
Examples – menu zone
MENU’s
![Page 26: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/26.jpg)
Examples – ndequeue zone
NodeQueues
![Page 27: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/27.jpg)
Examples – articles zone
Articles
![Page 28: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/28.jpg)
Examples – flagged zone
Flagged articles
![Page 29: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/29.jpg)
Zones - Artikel detail
![Page 30: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/30.jpg)
Artikel detail - zones
Artikel afbeelding Nodequeue (banner) Most_read (GA) Paragraphs Elastic Search
![Page 31: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/31.jpg)
mnmdetail
Artikel afbeelding Elastic Search Nodequeue (banner) Most_read (GA) Paragraphs
![Page 32: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/32.jpg)
radio1detail
Artikel afbeelding Programma
(entity_rel) Nodequeue (banner) Most_read (GA) Paragraphs Elastic Search Discus (flag)
![Page 33: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/33.jpg)
Klara detail
Artikel afbeelding Programma
(entity_rel) Nodequeue (banner) Most_read (GA) Paragraphs Elastic Search Discus (flag)
![Page 34: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/34.jpg)
Services.vrt.be Hitlijst.vrt.be
![Page 35: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/35.jpg)
Frontend data sources
Sources Drupal (backend) Services Hitlist
Drupal Articles Article_detail Paragraphs
![Page 36: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/36.jpg)
data
![Page 37: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/37.jpg)
Article detail
![Page 38: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/38.jpg)
![Page 39: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/39.jpg)
Article detail paragraphs
![Page 40: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/40.jpg)
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
![Page 41: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/41.jpg)
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.
![Page 42: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/42.jpg)
Search
Module “Elasticsearch connection” and submodules
Search api Open to frontend via light bootstrap search.php
(faster).
Would do different:Use “search api”
![Page 43: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/43.jpg)
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
![Page 44: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/44.jpg)
Cache invalidations - events
node alterations (purge path per type) Nodequeue alterations Settings form save Deploy …
![Page 45: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/45.jpg)
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)
![Page 46: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/46.jpg)
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.
![Page 47: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/47.jpg)
Headless - advantages
Outsource design + frontend website
Stay owner of your content & data structure
Implementation of new site without dataloss
Implementation of new client Develop
![Page 48: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/48.jpg)
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
![Page 50: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/50.jpg)
Questions? - Shoot!
![Page 52: Presentatie headless drupal capgemini 2016](https://reader036.fdocumento.com/reader036/viewer/2022062401/58f35c951a28abaa1c8b45ef/html5/thumbnails/52.jpg)
Bekijk ook
http://www.slideshare.net/wouters_frederik