Aurelia Eine neue Sicht auf JavaScript-Frameworks

In letzter Zeit wurden Gespräche über JavaScript-Frameworks von beliebten Namen wie React (technisch gesehen eine Bibliothek), Next.js, Svelte, Angular und mehr dominiert.

Das sind alles tolle Tools, aber haben Sie schon von Aurelia 2 gehört?
Als ich Aurelia zum ersten Mal begegnete, war meine Reaktion: „Was ist das?“ Aber nachdem ich zwei Jahre lang damit gearbeitet habe, glaube ich jetzt, dass es eines der besten Frameworks auf dem Markt ist, wenn nicht sogar das beste.

Warum denke ich das?

Lassen Sie es mich erklären. Ich bin von React.js zu Aurelia gewechselt und habe zunächst angenommen, dass es sich nur um ein weiteres JavaScript-Framework handelt. Als ich jedoch tiefer eintauchte, begann ich, sein wahres Potenzial und seine wahre Kraft zu erkennen.

Dieser Artikel dient als Einführung in Aurelia 2, in dem ich einige seiner leistungsstarken Konzepte und die Gründe, warum es herausragt, vorstelle.

1. Ereignisaggregator

An erster Stelle steht der Event Aggregator, ein Konzept, mit dem Sie vielleicht vertraut sind, wenn Sie im C#-Ökosystem gearbeitet haben, aber so funktioniert es in Aurelia:

Der Event Aggregator funktioniert ähnlich wie die ereignisbasierten Nachrichtenmuster, die üblicherweise in C# verwendet werden. Es handelt sich um ein Pub/Sub-System, mit dem Sie benutzerdefinierte Ereignisse in Ihren Aurelia-Anwendungen veröffentlichen und abonnieren können.

Dies erleichtert die entkoppelte Kommunikation zwischen verschiedenen Teilen Ihrer App. Genau wie in C#, wo Ereignisaggregatoren oder -mediatoren zur Optimierung der Ereignisbehandlung verwendet werden, wird Aurelias Ereignisaggregator vom Framework selbst genutzt, um Ereignisse in verschiedenen Phasen des Anwendungslebenszyklus und während bestimmter Aktionen zu veröffentlichen.

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.publish('ea_channel', ‘PAYLOAD’)
    }
 }

import { IEventAggregator, resolve } from 'aurelia';

export class SecondComponent {

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.subscribe('ea_channel', payload => {
            // Do stuff inside of this callback
        });
    }
 }

Damit können wir mühelos eine ereignisgesteuerte Architektur implementieren und so die Kopplungsprobleme angehen und lösen, die häufig bei React und ähnlichen Frameworks auftreten.

2. Abhängigkeitsinjektion

Dependency Injection (DI) ist ein Entwurfsmuster, das die Erstellung von Objekten mit ihren erforderlichen Abhängigkeiten erleichtert, ohne dass die Objekte selbst für die Erstellung dieser Abhängigkeiten verantwortlich sind. Dies fördert die lose Kopplung zwischen Klassen und ihren Abhängigkeiten und verbessert die Modularität und Testbarkeit.

Aurelia bietet ein leistungsstarkes und flexibles DI-System, das den Prozess der Verkabelung verschiedener Teile Ihrer Anwendung vereinfacht. Mit Aurelias DI wird die Verwaltung und Einfügung von Abhängigkeiten nahtlos, was zu saubererem, besser wartbarem Code führt.

Darüber hinaus erleichtert dieser Ansatz die testgetriebene Entwicklung (TDD), da er ein einfaches Verspotten und Testen einzelner Komponenten ermöglicht, ohne dass eine komplexe Einrichtung oder eng gekoppelte Abhängigkeiten erforderlich sind.

3. Dynamische Komposition

Aurelias Element ermöglicht die dynamische Komposition von Ansichten und Ansichtsmodellen. Es verhält sich wie ein benutzerdefiniertes Element, erfordert jedoch keinen spezifischen Tag-Namen und ermöglicht so flexible und wiederverwendbare UI-Komponenten.
Innerhalb des Ansichtsmodells, das mit verwendet wird, haben Sie Zugriff auf alle Standard-Lebenszyklusereignisse von Aurelia sowie eine zusätzliche Aktivierungsmethode, die zum Initialisieren oder Übergeben von Parametern an das Ansichtsmodell verwendet werden kann.

Verwendung des -Elements in der Praxis:

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.publish('ea_channel', ‘PAYLOAD’)
    }
 }

Wie es funktioniert:

• Dynamische Komposition: Das Attribut „component.bind“ bindet die DynamicComponent dynamisch als Ansichtsmodell.

• Übergabe von Parametern: Das Attribut model.bind übergibt Parameter an die Aktivierungsmethode im dynamisch zusammengesetzten Ansichtsmodell.

Belangetrennung

Einer der Gründe, warum ich Aurelia 2 liebe, ist die saubere Trennung von Belangen durch das MVVM-Muster (Model-View-ViewModel).

Ansicht: Die UI-Struktur ist vollständig von der Logik entkoppelt. Es wird einfach an das ViewModel gebunden, um Daten anzuzeigen und Benutzerinteraktionen zu erfassen.

ViewModel: Hier geschieht die gesamte Logik. Es kontrolliert die Daten, verwaltet Geschäftsregeln und aktualisiert die Ansicht, ohne sich Gedanken darüber zu machen, wie sie angezeigt werden.

Modell: Aurelia hält die Kernanwendungsdaten sowohl von der Ansicht als auch vom ViewModel getrennt und sorgt so für Klarheit und Fokus.

Diese Trennung macht die Anwendung hochgradig modular, einfacher zu warten und viel einfacher zu testen, was einen flexibleren, skalierbaren Code ermöglicht.

Fazit

In diesem Beitrag habe ich mich auf nur drei leistungsstarke Konzepte aus Aurelia 2 konzentriert – Event Aggregator, Dependency Injection und Dynamic Composition –, aber das ist nur ein kleiner Teil dessen, was das Framework zu bieten hat.

Aurelia 2 ist vollgepackt mit Funktionen, die beim Erstellen sauberer, skalierbarer und wartbarer Anwendungen helfen.

Um sich ein vollständiges Bild zu machen und tiefer in seine Fähigkeiten einzutauchen, empfehle ich Ihnen dringend, die Aurelia 2-Dokumentation für ein umfassenderes Verständnis zu erkunden.

PS: Dies ist mein erster Beitrag und ich hoffe, er hat Ihnen gefallen!

Das obige ist der detaillierte Inhalt vonAurelia Eine neue Sicht auf JavaScript-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!