Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 k...
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 fron...
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
- Cu...
Waarom Headless?
OpenLucius.com - Drupal Social Intranet
Hoe Headless | Drupal 8
- REST API in core & Services module.
- R...
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...
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 o...
API design & tools
API Design
- REST: Representational State Transfer
- Roy Fielding
- “Architectural Styles and the Design of Network-based ...
API Design
- Richardson Maturity Model:
- Level 0: the swamp of POX (single endpoint: /content?type=article)
- Level 1: Re...
API Design
- Object schema bepalen
- Repeatable proporties en field names
- Juiste data types: b.v. integers voor nummers ...
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 voorbeel...
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?
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Headless Drupal - Wat, Waarom, Hoe & Uitdagingen
Upcoming SlideShare
Loading in …5
×

Headless Drupal - Wat, Waarom, Hoe & Uitdagingen

801 views

Published on

Slides van presentatie @ drupaljam.nl 2016: Wat is headless / decoupled Drupal en hoe implementeer je het? Waarom word ik er blij van en welke uitdagingen kwamen wij tegen?

Zie ook blog voor kort verslagje: http://blog.openlucius.com/nl/blog/very-headless-drupal-jam

Published in: Software
  • Be the first to comment

  • Be the first to like this

Headless Drupal - Wat, Waarom, Hoe & Uitdagingen

  1. 1. Joris Snoek Headless Drupal OpenLucius.nl - Drupal Social Intranet
  2. 2. Wat, Waarom & Hoe in Drupal. Headless Drupal Uitdagingen, Code Voorbeelden & Vragen.
  3. 3. Headless Drupal implementaties
  4. 4. Tonight show Drupal & Node.js + Backbone.js
  5. 5. Weather.com Drupal & Angular
  6. 6. Radio France International Drupal & Symfony 2
  7. 7. Wat is headless?
  8. 8. Focus deze sessie op JS/HTML - frameworks, niet apps
  9. 9. Waarom headless?
  10. 10. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? Onafhankelijke teams, ook zonder Drupal kennis.
  11. 11. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? “I love CSS” - No backend developer ever.
  12. 12. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? “I love to style Drupal markup” - No frontend developer ever.
  13. 13. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? 100-miljoen-miljard apparaten en schermen.
  14. 14. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? 100-miljard-miljoen apps.
  15. 15. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? Makkelijker beheer en onderhoud.
  16. 16. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? Performance.
  17. 17. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? Toekomstgericht
  18. 18. Waarom Headless? OpenLucius.com - Drupal Social Intranet Waarom Headless Drupal? ‘Applicatie experience’.
  19. 19. Headless techniek
  20. 20. Hoe headless in Drupal 7 & 8?
  21. 21. Waarom Headless? OpenLucius.com - Drupal Social Intranet Hoe Headless | Drupal 7 - Modules: Services, RestWS, Restful - Custom endpoint gefaciliteerd door Service module
  22. 22. 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.
  23. 23. Headless uitdagingen - ‘Building an API is not enough’.
  24. 24. Headless uitdagingen - SEO
  25. 25. Headless uitdagingen - Meertaligheid: Localization & Content translation
  26. 26. Headless uitdagingen - Formulieren
  27. 27. Headless uitdagingen - Menu’s
  28. 28. Headless uitdagingen - Layout control
  29. 29. Headless uitdagingen - Foreign authorisation
  30. 30. Headless uitdagingen - Contact formulier
  31. 31. Headless uitdagingen - Search
  32. 32. 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
  33. 33. Headless uitdagingen - Veel lagen, meer complexiteit
  34. 34. Headless uitdagingen - Drupal core & Services module: Hoeveelheid data en traffic per endpoint.
  35. 35. Headless uitdagingen - Hosting
  36. 36. Headless uitdagingen - Budget
  37. 37. Headless? Coupled? Decoupled? Progressive Decoupled? Monolytic?
  38. 38. Progressive decoupled - Criteria document and comparison matrix
  39. 39. Go for headless?
  40. 40. Go for headless? - Meerdere onafhankelijke development teams? - Rigide front-end requirements? - Multi channel publishing?
  41. 41. Go for headless? - Mate van Drupal ervaring bij front-enders? - Data van verschillende bronnen? - Dev team site builders of API devs?
  42. 42. API design & tools
  43. 43. API Design - REST: Representational State Transfer - Roy Fielding - “Architectural Styles and the Design of Network-based Software Architectures”
  44. 44. 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
  45. 45. API Design - Object schema bepalen - Repeatable proporties en field names - Juiste data types: b.v. integers voor nummers i.p.v strings
  46. 46. API Design - API versioning - in URL of in accept header - Services module kan faciliteren
  47. 47. Overige API technieken - GraphQL, HAL, Siren, Collection+JSON, Uber - HAL, JSON-LD (+ Hydra), Mason
  48. 48. API tools - swagger.io (Designing, traffic inspector, documentation) - Postman Chrome plugin (Testing) - Apiary (Designing)
  49. 49. API tools - API Blueprint (Designing) - Jsonapi.org (Designing) - Dredd (Testing) - Aglio (Documentation)
  50. 50. Voorbeelden
  51. 51. Voorbeeld | Drupal 7 Services of RESTful module: • Standaard endpoints met (te) veel voorgedefinieerd Drupal style output.
  52. 52. Voorbeeld | Drupal 7 custom endpoints m.b.v. Services: Bepaal geheel zelf de output m.b.v. custom queries ==> Zie voorbeeld code
  53. 53. Voorbeeld - Drupal 8 core + REST UI module
  54. 54. Voorbeeld|Drupal 8 custom endpoints: http://enzolutions.com/articles/2014/12/16/how-to-create-a-rest-resource-in-drupal-8/
  55. 55. Vragen?

×