Candylabs entwickelt MVPs und digitale Produkte, mit denen mehrere Millionen Nutzer weltweit interagieren - meistens als Webanwendungen oder als mobile Apps. Hierfür greifen wir auf eine etablierte Toolbox aus Technologien und Frameworks zurück, die ein stabiles und zukunftssicheres Fundament für fast alle Anwendungen bietet.
Diesen Ansatz wählen wir natürlich auch für eigene Softwareprodukte. So basiert die Architektur von Horizon, unserem Tool für die automatisierte Durchführung von Customer-Demand-Tests, auf bewährten Konzepten: ein Backend verarbeitet sämtliche Daten und kann über ein Web-Frontend genutzt werden. Für die Kommunikation dieser Dienste wird eine API bereitgestellt. Hier setzt Candylabs schon seit vielen Jahren als Early Adopter konsequent auf GraphQL.
Warum GraphQL?
GraphQL wurde, wie auch React, initial von Facebook entwickelt und 2015 veröffentlicht. Das Konzept geht von einem radikal anderen Ansatz aus, als klassische REST-APIs, denn statt einzelne Endpunkte für alle Datentypen anzubieten kann der Entwickler exakt formulieren, welche Daten in welcher Beziehung zueinander abgefragt werden sollen.
Ein Schema gibt dabei exakt vor, welche Abfragen möglich sind und wie Daten aufgebaut sind.Wenn das interface eines Frontends in React umgesetzt wird, dann ergänzt GraphQL durch ähnliche mentale Konzepte das Setup perfekt. Frameworks wie Apollo ergänzen sich auf Frontend sowie auf Backend-Seite perfekt und versprechen einfache und abgestimmte Integration.
Anwendung in Horizon
Das Backend unseres Anwendungsfalles Horizon stellt für alle Datenflüsse einen einzigen GraphQL-Endpunkt zur Verfügung. Genauer ist Horizon (Achtung, Buzzwords) in einer hybriden Microservice-Architektur entwickelt. D.h. der Großteil der Funktionen wird in einem monolithischen Service abgebildet, während Spezialfunktionen in Einzel-Services ausgegliedert werden. GraphQL unterstützt ein Feature namens “Federation”: Alle Anfragen des Frontends werden von einem Gateway entgegengenommen, das Gateway kennt alle Schnittstellen der Horizon-Services und leitet die Anfragen vollautomatisiert an die entsprechenden Dienste weiter. Der Frontend-Entwickler muss dazu die genaue Architektur der Backend-Services gar nicht kennen, da er nur das gesamte Schema des Gateways verarbeitet. Im Frontend sowie dem Backend wird das Framework Apollo eingesetzt. Beide Implementierungen sind aufeinander abgestimmt und nehmen dem Entwickler durch integrierte Caching-Mechanismen und eine tiefe React-Integration viel Arbeit ab.
GraphQL in fünf Minuten
Für Interessierte hier ein kurzer Einstieg in GraphQL. Zugegebenermaßen ist eine gewisse Einstiegshürde vorhanden. Sobald die grundlegenden Konzepte aber sitzen, kann das Wissen auf jedes Projekt angewendet werden! Für eine GraphQL-API sind drei Konzepte wichtig: es gibt ein Schema, welches die Struktur der Daten und alle zur verfügung stehenden Optionen beschreibt, Queries, worüber Daten gelesen werden, sowie Mutations, womit Daten manipuliert werden können.
Das Schema
Ein Schema ist das Herzstück eines GraphQL-Servers und definiert die Funktionen und Eigenschaften einer API mit ihren Ressourcen. Durch das Schema wissen Clients, welche Operationen möglich sind und welche Daten zurückgegeben werden. Geschrieben werden Schemata in einer einfach konsumierbaren Syntax namens Schema Definition Language (SDL). Diese ist unabhängig von der eingesetzten Programmiersprache oder dem Framework der Anwendung und damit immer gleichbleibend. Durch die unkomplizierte Syntax ist mit wenigen Blicken zu erkennen, welche Ressourcen in einer API verfügbar sind.
Ein Schema für einen beispielhaften Onlineshop, der in der Lage ist, die zuvor beschriebene Query zu verarbeiten, könnte wie folgt aussehen (bestehend aus Definitionen für Kunden, Produkte, Bestellungen, sowie eine Verknüpfung zwischen Produkten und Bestellungen):
Die letzte Definition ist keine Objektdefinition, sondern gibt an, auf welche Typen wir mit unserem GraphQL Client zugreifen können. Mögliche Abfragen und die benötigten Parameter werden hier definiert. So bietet diese API an, Kunden, Produkte und Bestellungen mit ihrer jeweiligen ID zu finden, oder alle Produkte des Shops auszulesen. Mit einem Ausrufezeichen markierte Attribute sind Pflichtfelder, die zwingend angegeben werden müssen.
Queries
Queries sind in der Welt von GraphQL die Art und Weise, wie Daten aus einem Backend abgefragt werden. Eines der schönsten Features an GraphQL ist es, dass genau so viele Daten abgefragt werden, wie benötigt werden. Nicht mehr und nicht weniger.
Wir haben bereits ein Beispiel gesehen, in dem eine komplexe Datenabfrage über mehrere Objekttypen spielend einfach war, was bei einer herkömmlichen REST-API mehrere Abfragen zur Folge gehabt hätte. Deswegen nun hier ein recht simples Beispiel für eine Query, die gezielt eine Abfrage an unser Schema schickt:
Hier wird nach Verarbeitung vom GraphQL-Server eine Liste mit Kunden, gefüllt mit ihren Identifikationsnummern und Namen, zurückgegeben. Die Antwort des Backends könnte bei dieser Query wie folgt aussehen:
Die gelieferten Daten und Datentypen sind hierbei durch das Schema klar definiert und verhindern so ungewollte Überraschungen. Der JSON-Datentyp, der von GraphQL geliefert wird, lässt sich problemlos von so gut wie jeder Sprache und Framework weiterverarbeiten.
Die Verarbeitung von Anfragen des Clients wird serverseitig von sog. Resolvern übernommen. Diese werden in der gewünschten Programmiersprache geschrieben und definieren, wie genau Daten abgefragt bzw. verändert werden. .
Mutationen
Mit Mutations können Daten im Backend modifiziert und Daten im Frontend aktualisiert werden. Ähnlich wie in REST APIs sind Create, Update sowie Delete-Vorgänge möglich. Mutations können in der API nach Belieben benannt werden, um dem Client eine bessere Übersicht zu verschaffen. Folgendes Beispiel definiert eine Mutation, um einen neuen Kunden in unserem Onlineshop anzulegen:
Die Mutation createCustomer schickt zwei Pflichtparameter mit dem Datentyp String an den GraphQL-Server, welcher wiederum die Mutation verarbeitet und das neu angelegte Objekt mitsamt seiner generierten ID an den Client zurücksendet.
Bewährt und zukunftssicher
Zusammen mit React bietet GraphQL ein ausgereiftes und breit unterstütztes Fundament für Webanwendungen und Apps aller Art. Im Frontend hat das Platzhirsch-Framework Apollo bereits ausgezeichnete Dienste erwiesen. Da für fast alle Programmiersprachen Bibliotheken existieren, ist die Integration in unser etabliertes MVP-Toolset einfach. Viele Dienste (Contentful, GraphCMS) und Software-Produkte (Gatsby, aber auch WordPress) bieten GraphQL-APIs an oder können sie verarbeiten. Die Standardisierung erlaubt einfache Interoperabilität und für uns eine zuverlässige und etablierte Erweiterung unserer Toolchain.
GraphQL ist ein noch relativ junger Standard, durch die weite Akzeptanz und die Betreuung durch eine unabhängige Stiftung ist er aber nicht nur für den Einsatz bei kleinen Startups geeignet, sondern auch für gewachsene Unternehmen im Enterprise-Umfeld. Candylabs hat bereits eine Vielzahl an Projekten mit GraphQL umgesetzt und unterstützt Sie gerne bei Ihren Projekten.
Sie möchten Ihr MVP verwirklichen?
