Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Camunda GraphQL Extension (09/2017 Berlin)

Presentation of Camunda GraphQL Extension at Camunda Community Day 2017 in Berlin

  • Als Erste(r) kommentieren

Camunda GraphQL Extension (09/2017 Berlin)

  1. 1. Camunda GraphQL A query language for the Camunda API
  2. 2. Loydl Unternehmensberatung Harald Loydl IT Consultant harald.loydl@loydl.ch Daniel Vogel Fullstack Javascript Developer daniel.vogel@loydl.ch
  3. 3. Content 1. What is GraphQL? 2. Camunda GraphQL Demo 3. Camunda GraphQL Architecture 4. How to build GraphQL Clients 5. Outlook
  4. 4. 1. What is GraphQL? • API query language • Types / Schema • Clients query the server using GraphQL • Introspection • Automatic documentation • The better REST
  5. 5. Your Domain Model is a Graph User Task tasks 0..* 0..1 assignee
  6. 6. Task TaskEntity
  7. 7. User UserEntity
  8. 8. Root Query = All Query Capabilities of the Server à Capability to query for tasks: http://localhost:8080/graphql/?query={tasks{name}}
  9. 9. Query RootResolver
  10. 10. DEMO: Camunda GraphQL
  11. 11. Demo: Get task names Query: Result:
  12. 12. Demo: Get task names using REST http://localhost:8080/engine-rest/engine/default/taskQuery: Result: Over-Fetching GraphQL: 411 Bytes REST: 5000 Bytes à 12 x more data 92% of data not needed
  13. 13. Demo: Get tasks + assignee Query: Result:
  14. 14. Demo: Get tasks + assignee in REST http://localhost:8080/engine-rest/engine/default/task http://localhost:8080/engine-rest/engine/default/user/demo/profile Queries Result: Under-Fetching • Multiple requests needed • responses need processing to final JSON à (N+1) request problem on client side
  15. 15. Demo: Type ahead/code completion, syntax check
  16. 16. Container Shared Process Engine Camunda Java API REST GraphQL web/mobileTasklistClient Server web/mobile microservice React.js new Tasklist RESTRESTREST REST React /Native Angular iOS Android JavaScript Architecture:
  17. 17. GraphQL-Server Implementation • @SpringBootApplication as deployable war-file • Configurable • Basically one Java dependencies: graphql-java • GraphQL schema text files *.graphqls (no Java code) • GraphiQL client included, accessible via http://server/graphql/ • Security: Basic Auth, JWT
  18. 18. GraphQL client • GraphiQL client at server:port/graphql/ • for exploring the Servers GraphQL capabilities • Apollo Client from www.apollodata.com: • Batching and Caching • React /Native, Angular 2/4, iOS, Java/Android, plain JavaScript • Apollo Client Dev Tools (Chrome): Debugging the client • Production ready
  19. 19. Demo: Vanilla JavaScript Apollo Client
  20. 20. GraphQL new Tasklist node.js + React.js render React.js Forms schema Deployed Process Application BPMN processes Prototype schemaschema resolverresolverresolver Camunda Java API formKey React.js Form React.js Form React.js Form Client:Server: Server:
  21. 21. GraphQL Tasklist • shows how to use the GraphQL Apollo Client and React.js • GraphQL queries defined in code:
  22. 22. GraphQL Client Use Cases • Dashboards / Monitoring – realtime/reactive • Reporting • Mobile Clients • Other Services as “Clients” in a SOA/Microservices Architecture
  23. 23. Camunda GraphQL Benefits • GraphQL is the better REST… • Efficiency: Fewer bytes and roundtrips • Type System: express our API data in a more natural way • No more client specific endpoints (Web vs. mobile) • Separation of concerns (backend vs frontend) • No API versioning, formal deprecation • Improved developer experience
  24. 24. Outlook • Increase Java API coverage as you need it… • … but keep GraphQL Schema coherent with Java API • GraphQL used in Microservice Architectures (API-Gateway?) • Push realtime updates to clients with GraphQL subscriptions • Camunda Tasklist, Cockpit, Admin as GraphQL clients • GraphQL in Camunda Core
  25. 25. Links • Camunda GraphQL on GitHub: https://github.com/camunda/camunda-bpm-graphql • GraphQL Schema Language Cheat Sheet • Explore GraphQL: https://www.graphql.com/ • GraphQL Specification (Facebook) • Swagger to GraphQL: https://github.com/yarax/swagger-to-graphql • Moving API from REST to GraphQL: https://medium.com/@raxwunter/moving-existing-api-from-rest-to- graphql-205bab22c184 • GraphQL Schema Visualization: https://apis.guru/graphql-voyager/

×