← Zur Übersicht

Aurelia Plugin Architektur Teil 1 ✨

Die Aurelia Plugin Architektur (Teil 1)

Inhalt

  1. Motivation
  2. Grundlagen
  3. Hauptteil
  4. Zusammenfassung & Ausblick

Motivation

Die Entwicklung von modernen Webapplikationen nimmt einen immer größer werdenden Teil der Arbeiten von Entwicklern in Anspruch. Umso wichtiger ist es wartbaren, lesbaren und leicht erweiterbaren Code zu schreiben. Dies ermöglicht es auch einem anderen Entwickler, in vielen Monaten oder Jahren, mit der Codebase der immer größer werdenden Anwendung zu arbeiten. Ein unübersichtliches oder nicht recht durchdachtes Frontend-Projekt kann sehr schnell zum Wartungsalbtraum für jeden Entwickler werden.

In diesem Blogpost zeige ich anhand eines Beispiels die Verwendung von Plugins in Aurelia. Ich bin überzeugt, das Plugins eine Lösung für die angesprochenen Probleme darstellen.

Grundlagen

Plugins sind in Aurelia eine Möglichkeit Codeteile atomar auszulagern und so wesentlich wartbarer und übersichtlicher zu machen.

Um dies zu gewährleisten ist es wichtig, dass auch die Plugins gut strukturiert und in ihren Aufgaben eigenständig sind. Das will ich anhand von Beispielen verdeutlichen:

Negativbeispiel

Ein Monolith von einer Frontend Applikation die ALLE Aufgaben übernimmt. Monolithische Architekturen können groß und unflexibel werden. Nachträgliche Anpassungen können nicht vorhergesehene Auswirkungen haben. Das führt dazu, dass nicht mehr benötigte Codeteile fast nie gelöscht werden und trägt zur Monolithisierung bei.

DONT

Positivbeispiel

Eine Applikation die Ihre Aufgaben gut strukturiert in Plugins unterteilt hat. Hier sind die Komponenten sehr viel übersichtlicher und wartbarer da Abhängigkeiten - sofern vorhanden - klar zu erkennen sind. Außerdem kann eins dieser Plugins leicht aus diesem Projekt extrahiert und in einem anderen Projekt verwendet werden.

DO

Diese Handhabung gibt uns außerdem die Möglichkeit einen Fehler wesentlich schneller ausfindig zu machen und mit einer kleinen Änderung zu beheben. Danach wird eine Versionsnummer erhöht und das Plugin als Paket veröffentlicht. Ein möglicher Fehler ist so in allen Anwendung, die dieses Plugin verwenden, zeitgleich behoben.

Hauptteil

In unserem Beispiel werden wir zunächst Schritt für Schritt ein einfaches Plugin erstellen und es dann von einer Aurelia Applikation konsumieren lassen.

Ein gute Einführung in den Umgang mit der Aurelia CLI findest du hier: Aurelia CLI Doku/Tutorial

Beginne damit dir von der CLI einen neuen Client generieren zu lassen:

au new

Nutze an dieser Stelle folgende Einstellungen:

  • name: PluginExampleClient
  • Default Typescript
  • RequireJS
  • Yes
  • Yes

Damit hast du eine Aurelia Typescript Anwendung generiert. Außerdem benötigen wir ein "Plugin Skeleton"; wir verwenden das von 5Minds.

Aurelia Plugin Skeleton

Dieses Skeleton verfügt bereits über ein Beispiel, in dem die grundlegende Konfiguration vorbereitet wurde. Außerdem befindet sich dort auch eine README.md die den Aufbau und die Anbindung des Skeletons näher erläutert.

Um nun das Plugin von unserer Aurelia Anwendung nutzen zu lassen, folgen wir dieser Schritt für Schritt Anleitung:

  1. Umbennen des Skeletons:

    Öffne mithilfe des Editors deiner Wahl die package.json des Aurelia Plugin Skeleton und änderen den Eintrag name in sample-plugin

    Umbenennen

  2. Verlinken des npm-Pakets:

    Der Einfachheit halber werden wir das "sample-plugin"-Paket in den Client verlinken. Öffne die Console deiner Wahl, wechsel in das Verzeichnis des Plugins und gib

    npm install

    ein um die Dependencies zu installieren. Dann

    npm run build

    um das Plugin zu "builden". Und schließlich

    npm link.

    link1

    Dies ermöglicht uns das direkte/lokale Verlinken eines npm-packets. Das ist vor allem zum Entwickeln nützlich, da es uns erlaubt Änderungen im Packet direkt in der Applikation zu sehen.

    Öffne nun das Verzeichnis des Aurelia Clients und führe diese Befehle aus:

    npm link sample-plugin

    und

    npm install

    um das Paket lokal zu verlinken und zu installieren.

    link2

  3. Anpassen der aurelia.json

    Die aurelia.json findest du im "aurelia_project"-Ordner im root Verzeichnis der Aurelia Applikation.

    Füge dem Eintrag "bundles" folgendes hinzu:

     {
       "name": "sample-plugin",
       "path": "../node_modules/sample-plugin/dist/amd",
       "main": "index",
       "resources": [
         "example/resources/elements/my-example.html",
         "example/resources/elements/my-example.js"
       ]
     }
    

    aurelia-json

  4. Anpassen der main.ts

    Füge folgende Zeile zur der "main.ts"-Datei hinzu:

    aurelia.use.plugin('sample-plugin');

    Dies registriert das Plugin in der Aurelia Applikation und sorgt dafür, dass wir im nächsten Schritt das angegebene Element nutzen können.

    main-ts

  5. Nutzen des Plugins in der "app.html"

    Ändere deine "app.html" folgendermaßen:

     <template>
       <require from="sample-plugin/example/resources/elements/my-example"></require>
       <h1>${message}</h1>
       <my-example></my-example>
     </template>
    

    app-html

    Wie du siehst haben wir einfach nur zwei Zeilen hinzugefügt. Der "Require-Pfad" wird relativ von der "aurelia.json" aus angegeben.

  6. Baue und starte die Anwendung

    Öffne deine Konsole und nutze den Befehl

    au run

    in dem Rootordner deiner Aurelia Anwendung um sie starten.

    Navigiere mit dem Browser deiner Wahl zu

    localhost:9000

    Nun solltest du diese beiden Textzeilen sehen:

    Ziel

    Herzlichen Glückwunsch! Du hast dein erstes Plugin erfolgreich an eine Aurelia Anwendung angebunden.

Zusammenfassung & Ausblick

Auf unserem Bildschirm sehen wir nun also die beiden Zeilen "Hello World" und "MyExample Works!. Das "Hello World" ist natürlich die Standard Nachricht der frisch generierten Aurelia Anwendung. Bei dem Satzteil "MyExample Works!" wird es allerdings etwas komplizierter:

Wir haben also das Plugin per npm link in unsere Applikation gebracht. Durch das Anpassen der "package.json", "aurelia.json" sowie der "main.ts", haben wir es unserer Applikation ermöglicht, die angegebenen Komponenten aus dem Plugin zu nutzen.

Mit dem "require" in der eigentlichen HTML-Datei, können wir nun die angegebene Komponente verwenden.

Ein Blick in die beiden Dateien, der "my-example"-Komponente im Plugin, zeigt uns auch wo der Satzteil "MyExample Works!" herkommt. Er ist nämlich als Variable definiert und wird durch das HTML der Komponente zur Anzeige gebracht.

In den nächsten Posts der Serie, werden wir uns komplexeren Szenarien zuwenden. Auch die Interaktion zwischen ViewModel und Plugins soll demonstriert werden. Auch das Eventhandling von Auriela wird Teil der nächsten Teile sein.

Bis zum nächsten Mal.