Lesezeit: 3 Minuten

 

Sheriff - Ordnung schaffen in TypeScript-Anwendungen

Der bisher in Angular gesetzte Aufbau von Anwendungen mit Modulen wird langsam durch die Einführung der Standalone Components in den neueren Angular Versionen ersetzt. Bei der Verwendung der Module in Angular war automatisch eine Ordnerstruktur vorhanden. Neben der Übersichtlichkeit verhindern die Module auch noch den unerlaubten Zugriff von außerhalb auf Komponenten, Services oder Funktionen, welche nur für den Gebrauch innerhalb eines Moduls gedacht sind. Durch den Wegfall der Angular Module ist es nötig, die Grenzen innerhalb einer Anwendung auf einem anderen Weg zu definieren. 

Auch wenn die Angular Module wegfallen, kann dennoch die Ordnerstruktur beibehalten werden, denn dadurch werden einfache Grenzen durch die Aufteilung in Domänen erschaffen. Dies wird auch als Horizontal Slicing bezeichnet. Mit der Gruppierung sollte auch klar sein, dass der Zugriff auf die Bestandteile einer Domäne von außerhalb eingeschränkt sein sollte und diese nur durch explizite Freigaben über die API angesprochen werden können.

Jedoch kann man eine Anwendung nicht nur horizontal in Domänen aufteilen, sondern zusätzlich auch in die Tiefe. Dies wird als Vertical Slicing bezeichnet.

Anhand des Schaubilds ist erkennbar, dass sich eine Domäne in unterschiedliche Features, den sogenannten Smart Components, gliedern lässt. Diese Komponenten haben externe Abhängigkeiten und lösen bspw. auch das Laden von Daten aus.
Ein Feature kann sich aus mehreren UI-Elementen zusammensetzen. Diese werden auch als Dumb Components bezeichnet, da sie oftmals nur bereits aufbereitete Daten an der Oberfläche anzeigen. In den jeweiligen Data Access Ordnern sind Entities, diverse Logik, Services und Utils beinhalten Hilfsfunktionen.

Vertical Slicing hat also den Vorteil, dass sich Entwickler im Projekt schnell zurechtfinden und wissen, an welcher Stelle sie ihre Implementierungen ablegen müssen. Aber ein weitaus wichtigeres Argument für diese Aufteilung ist die Möglichkeit, die Zugriffe innerhalb der Domäne zu steuern. Das spielt eine große Rolle, weil ein Feature Abhängigkeiten zu UI-Elementen, Data-Access oder Hilfsfunktionen in der Util haben kann, wohingegen eine Hilfsfunktion keine Abhängigkeiten zu höheren Ebenen wie der UI-Elemente haben sollte. 

Es ist ersichtlich, dass die horizontale und vertikale Aufteilung einer Anwendung sinnvoll ist, um gewisse Grenzen und Abhängigkeiten zu definieren. Wie aber lässt sich diese Aufteilung und der Dependency Flow beim Entwickeln der Applikation forcieren?
 

Sheriff

Eine Antwort auf diese Frage ist die Bibliothek Sheriff. Sie ermöglicht die Einhaltung der Domänengrenzen und des Dependency Flows mit Hilfe von ESLint.

Im einem Angular Projekt können diese Bibliotheken mit folgenden Befehlen installiert werden:

npx ng add @angular-eslint/schematics
npm install –save-dev @softarc/eslint-plugin-sheriff

Durch die Integration von Sheriff wird in einer Anwendung Module Encapsulation aktiviert. Dafür muss lediglich in einem Ordner die index.ts Datei als Barrell File hinzugefügt werden und dieser wird von Sheriff wie ein Modul behandelt. Die ergänzte index.ts bestimmt, was nach außen hin sichtbar ist und jeder Zugriff auf das Modul muss über die entsprechende index.ts referenziert werden. Falls dennoch versucht wird von außerhalb auf ein nicht in der index.ts exportiertes Element zuzugreifen, wird dies im Code entsprechend als Fehler vom Linter gekennzeichnet.

Die Regeln, die den Dependency Flow festlegen, werden in der SheriffConfig erfasst und im Root Verzeichnis des Projektes abgelegt. Bei der Konfiguration werden die Ordner, die als Modul fungieren sollen, innerhalb der 'tagging' Eigenschaft markiert. Die Konfiguration im Codeblock zeigt, wie für verschiedene Pfade die Zugriffsregeln getagged werden. Die Zeile für src/app/booking/feature ist so zu verstehen, dass das Verzeichnis der Domäne booking zugehörig ist und vom Typ feature ist. Das Verzeichnis src/app/booking/feature hat also 2 Tags.

Die Eigenschaft 'depRules' der SheriffConfig listet die erlaubten Abhängigkeiten auf.

Im Beispiel wird für die Domäne booking diese Zugriffsregel definiert 'domain:booking': ['domain:booking', 'shared']. Die Konfiguration lässt zu, dass innerhalb der Domäne keine Restriktionen vorhanden sind. Zusätzlich darf auch auf die Domäne 'shared' zugegriffen werden. Zeile 'type:feature': 'type:data' hingegen lässt den Zugriff von feature zu data zu, jedoch ist ein Zugriff aus dem data Modul in ein feature Modul nicht zulässig.

 

Fazit

Sheriff fängt das fehlende Modul System bei Angular Projekten auf, welche als Standalone Component Anwendungen gebaut werden. Die Integration der Bibliothek ermöglicht auf einfachen Weg eine horizontale und vertikale Aufteilung der Anwendung, wie bereits erläutert. 

Im Vergleich zu Barrel Files, bei welchen zwar definiert ist, welche Klassen und Funktionen nach außen hin sichtbar sind, ist Sheriff weitaus mächtiger. Es werden hier - ähnlich wie bei Barrel Files -  Elemente exponiert, aber zusätzlich werden unerlaubte Zugriffe deutlich markiert und verhindert.

Hinzu kommt, dass es keine Rolle spielt, ob Angular als Framework verwendet wird oder eine andere Technologie. Relevant ist nur, dass TypeScript als Sprache verwendet wird.

Sheriff ist eine leichtgewichtige Library, bei der der Einsatz eine Überlegung wert ist. Denn wer will nicht mit relativ wenig Aufwand viel Struktur in eine Anwendung bringen?

Blogautor

David Nguyen
Softwareentwickler ARS Computer und Consulting GmbH
Sven Grabowski
Softwareentwickler ARS Computer und Consulting GmbH
Ihr Erfolg ist unser Ziel

Stehen Sie vor komplexen IT-Projekten? Mit unserer Expertise bieten wir Ihnen maßgeschneiderte Lösungen. Erfahren Sie mehr.

Werde Teil unseres Teams

Wir suchen ständig nach neuen Talenten. Für dich haben wir genau die richtige Stelle. Schau dir unsere offenen Positionen an.

Noch Fragen? Wir helfen Ihnen gerne!

Webcast 29.08.22

Ordnung schaffen in Microsoft Teams

Ein unkontrolliertes Wachstum in Teams verhindert ein produktives Arbeiten und eine sinnvolle Nutzung der Anwendung. Behalten Sie mit dem Teams Manager die Kontrolle über Ihre Teams-Infrastruktur und verhindern Sie drastischen Wildwuchs.

Blog 16.05.24

Angular 18: Das nächste Kapitel

Angular 18 bringt Leistungsverbesserungen, neue Features und Entwicklerwerkzeuge mit sich. Erfahren Sie mehr über Zoneless Angular, verbesserte Bundling-Strategien und Barrierefreiheitsverbesserungen. Entdecken Sie die Zukunft von Angular!

Blog 01.08.24

Migration von HOST-Anwendungen zu AWS: Modernisierung

Legacy-Systeme bieten oft wertvolle Funktionen für Unternehmen. Dieser Artikel beschreibt, wie HOST-Anwendungen in die Cloud migriert werden können, ohne dass die Datensicherheit leidet. Lernen Sie, wie moderne AWS-Services nahtlos in bestehende Host-Landschaften integriert werden und profitieren Sie von den Vorteilen von Serverless-Technologien.

Blog 19.09.24

Die Zukunft datenbankzentrierter IT-Architekturen

Datenbankzentrierte IT-Architekturen prägen viele Unternehmen. Doch ist dieser Ansatz noch zukunftsfähig? Dieser Artikel beleuchtet die Herausforderungen und Alternativen.

Blog 02.02.24

So kommt Ordnung in den Infrastructure as Code-Werkzeugkaste

Ordnung im IaC-Dschungel: Welches Tool passt? Dieser Artikel gibt Überblick über die wichtigsten Werkzeuge für Infrastructure as Code.

Blog 06.11.23

Hurra, hurra - Angular Version 17 ist da!

Erfahren Sie, welche aufregenden neuen Funktionen und Verbesserungen Angular Version 17 mit sich bringt. Von der neuen deklarativen Control Flow Syntax bis hin zum Deferred Loading und vielem mehr - Angular 17 revolutioniert die moderne Webentwicklung. Lesen Sie mehr auf unserem Blog!

Kompetenz 14.05.24

Graphentechnologie

Wir helfen Ihnen, das volle Potential der Graphen zu nutzen, um Ihr Unternehmen zu transformieren. Unser Fachwissen reicht von der Modellierung von Graphdatenbanken und Graph Data Science bis hin zu generativer KI.

Bild zur Newsmeldung Zugriffsberechtigung
News 08.04.20

Bringen Sie Ordnung in Ihren Berechtigungsdschungel

Wie behalten Sie die Übersicht über Ihre Zugriffsberechtigungen?

Atlassian Access - Cloud Competence Center
Produkt 28.09.22

Atlassian Access

Atlassian Access bietet eine zentrale Admin-Konsole zur Verwaltung der eingesetzten Cloud-Produkte, wie z.B. Jira, Confluence, Bitbucket und Trello.

Blog

9 Tipps & Tricks für Angular

Angular ist unter Webentwicklern ein beliebtes Framework für das Programmieren von Web-, Desktop- und mobilen Anwendungen. In unserer Anleitung haben wir neun Tipps & Tricks zusammengestellt, welche Angular-Einsteigern und Profis die Webentwicklung garantiert erleichtert.

Lösung

Adobe – ein hervorragendes Kundenerlebnis schaffen

Kunden erwarten ein ansprechendes und personalisiertes Einkaufserlebnis – und das in Echtzeit. Schaffe jetzt deine digitale Transformation mit dem Marktführer Adobe.

Referenz 28.11.23

DB Systel: Re-Platforming Mainframe. Mehr als Lift & Shift.

Erfahren Sie, wie DB Systel ihren Mainframe mit minimalen Anpassungen in die Cloud migriert hat.

Event

Rapid Application Development – Schnellstart für Ihre App

Im Webinar werden die beiden Technologien IBM Starter Kits sowie Node Red vorgestellt. Ziel ist es, Ihnen ein Verständnis für die Vor- und Nachteile der Technologien zu liefern sowie erste Einblicke in deren Benutzung zu geben, insbesondere in die Weboberfläche und den Building-Blocks.

Headerbild zu Application Modernization
Service

Anwendungen mit Application Modernization optimieren

Application Modernization (deutsch: Anwendungsmodernisierung) konzentriert sich darauf, bestehende Applikationen zu modernisieren. Der Schlüssel zum Erfolg bei der Anwendungsmodernisierung liegt letztendlich in der Strategie und der Auswahl von Projekten.

Produkt 11.04.23

Ideenmanagement-Software für lokale Anwendungen

Ideenmanagement-Software mit SAP-Technologie: Optimieren Sie Ihr Ideenmanagement für mehr Beteiligung und höheren Nutzen.

Produkt 11.04.23

Kampagnenmanagement-Software für die Anwendung in der Cloud

Stärken Sie Ihre Innovationskraft mit target Campaign Management – unser Kampagnenmanagement-Tool für Ihre erfolgreiche Innovationskampagne.

Event Archive 12.05.23

Domino Anwendung modernisieren oder ablösen

Erfahren Sie im Webinar, wie Sie erfolgreich HCL Domino Notes modernisieren oder ablösen können.

Wissen

Mehrwerte schaffen bei Kreditprozessen mit IBM BPM

Als Unternehmer eines Kreditinstituts kommt man an dem Thema der Kreditprozesse kaum mehr vorbei. Wir möchten Ihnen mit unserer Erfahrung aus diesem Sektor und den Produkten IBM BPM und ODM helfen, an dieser Stelle Mehrwerte zu schaffen.

Blog 05.09.24

Effiziente DevOps-Teams: Teamschnitte und Kommunikation

Erfahre, wie durch gezielte Teamschnitte und optimale Kommunikationsmodi die kognitive Last in DevOps-Teams reduziert wird. So erreichst du effizientere Zusammenarbeit und kontinuierlichen Fortschritt.

Referenz

Digitale Transformation: HUK ersetzt Papier durch Cloud

ARS unterstützte HUK-COBURG dabei, Papierprozesse durch moderne Cloud-Microsites zu ersetzen, um fehlende Versicherungsdaten effizient zu erfassen.

Bleiben Sie mit dem TIMETOACT GROUP Newsletter auf dem Laufenden!