Client - pigtastic/UBQ-Smarthome GitHub Wiki
Bereits im Frontend ist es wichtig, die Struktur des Projekts möglichst klar und einfach zu halten. Da das gesamte Projekt auf eine gute Skalierbarkeit abzielt, ist es wichtig, das auch der Client auf diese Änderungen schnell und einfach angepasst werden kann. Die Komponenten bezogene Architektur von Angular bietet daher wesentliche Vorteile für das Projekt.
Für einen Client mit dem Angular Framework, sind die Komponenten die wichtigsten Bausteine. Bei Gaia sind diese für das anzeigen und interagieren mit der UI zuständig. Hier werden User Events verarbeitet und es erfolgt ein unidirektionaler von den Parent zu den Child Komponenten.
Die Komponenten sind über das Child-Parent Prinzip verbunden, das bedeutet im Parent werden über @Output Daten and das Child weitergeben, welches über @Input die Daten annimmt. Möchte das Child Daten verteilen, werden Events gestartet, auf die jede Komponente, also auch der Parent, reagieren kann.
Die verschiedenen Seiten des Frontends werden über Angular Routen gesteuert. Über Angular Routing können Komponenten dynamisch geladen und angezeigt werden. Das Routing ist eines der wesentlichen Bestandteile um das Frontend als Single Page Applikation bereitzustellen. Da Gaia eine Plattform für kleine SmartHomes bis zur kompletten GebäudeAutomation werden soll, sind die Routen direkt mit LazyLoading eingebunden. Die Geräte der Gruppen beispielsweise, werden erst dann geladen, sobald die Gruppen auch auf der UI angezeigt werden. Dadurch wird die Payload beim aufrufen der Applikation stark reduziert und die Performance verbessert.
Die Daten für die App werden entkoppelt von den Komponenten über Services bereitgestellt. Über Dependency Injection greifen die Komponenten auf die Services zu und starten das abholen der Daten vom Server. Die Services nutzen den Apollo Client um mit GraphQL Anfragen and die API zu schicken. Die Queries und Mutations dazu werden in GraphQL Dateien angelegt.
Durch ein externes Tool werden automatisch Typen vom Server und die Queries und Mutations vom Client zu einer Datei generiert, von der aus eben diese importiert und genutzt werden können. Das sorgt für eine Typsicherheit am Client und eine einfachere Nutzbarkeit.
Die ganze Struktur ist Angular typisch als Baum aufgebaut. Das bedeutet es gibt einen Einstiegspunkt in die Applikation von der aus alle Komponenten voneinander Erben.
