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

Das sind alles großartige Werkzeuge, aber haben Sie von Aurelia 2 gehört?
Als ich auf Aurelia zum ersten Mal stieß, war meine Reaktion: "Was ist das?" Aber nach 2 Jahren der Arbeit damit glaube ich jetzt, dass es eines der besten Frameworks da draußen ist, wenn nicht sogar das Beste.

Warum denke ich schon?

Lass mich erklären. Ich wechselte von React.js nach Aurelia und nahm zunächst an, dass es sich nur um ein weiteres JavaScript -Framework handelte. Als ich jedoch tiefer tauchte, begann ich, sein wahres Potenzial und die wahre Kraft zu erkennen.

Dieser Artikel wird als Einführung in Aurelia 2 dienen, in der ich einige seiner mächtigen Konzepte präsentieren werde und warum er auffällt.

1. Ereignisaggregator

Zunächst ist der Ereignisaggregator, ein Konzept, mit dem Sie vielleicht vertraut sind, wenn Sie im C# -ökosystem gearbeitet haben, aber hier ist, wie es in Aurelia funktioniert:

Der Ereignisaggregator fungiert ähnlich wie die in C#verwendeten ereignisbasierten Messaging-Muster. 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 Rationalisierung der Ereignisbehandlung verwendet werden, wird der Event -Aggregator von Aurelia vom Rahmen selbst zur Veröffentlichung von Ereignissen in verschiedenen Phasen des Lebenszyklus der Anwendung und während spezifischer Aktionen genutzt.

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, die die Kupplungskopfschmerzen adressiert und beheben, die häufig mit React und ähnlichen Frameworks ankommen.

2. Abhängigkeitsinjektion

Abhängigkeitsinjektion (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 der DI von Aurelia wird die Verwaltung und Injektion von Abhängigkeiten nahtlos und führt zu einem saubereren, wartbaren Code.

Zusätzlich erleichtert dieser Ansatz die testgesteuerte Entwicklung (TDD), da er ein einfaches Verspotten und Testen einzelner Komponenten ermöglicht, ohne dass eine komplexe Einrichtung oder fest gekoppelte Abhängigkeiten erforderlich sind.

3. Dynamische Komposition

Aurelias Element ermöglicht eine dynamische Komposition von Ansichten und Ansichtsmodellen. Es wirkt wie ein benutzerdefiniertes Element, ohne jedoch einen bestimmten Tag -Namen zu benötigen, der flexible und wiederverwendbare UI -Komponenten ermöglicht.
In dem View -Modell, mit dem Sie verwendet werden, haben Sie Zugriff auf alle Standard -Lebenszyklusereignisse von Aurelia sowie eine zusätzliche Aktivitätsmethode, mit der Parameter in die Initialisierung oder Übergabe von Parametern an das Ansichtsmodell verwendet werden können.

Verwenden Sie das Element in der Praxis:

wie es funktioniert:

• dynamic composition : Das Attribut der Komponente.bind bindet dynamisch den dynamischen Komponenten als das Ansichtsmodell.

• übergeben Parameter : Das model.bind -Attribut übergibt Parameter an die Aktivitätsmethode im dynamisch komponierten Ansichtsmodell.

Trennung von Bedenken

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

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

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

model : Aurelia hält die Kernantragsdaten sowohl von der Ansicht als auch von der ViewModel, die Klarheit und Fokus beibehält.

Diese Trennung erleichtert die Anwendung sehr modular, leichter zu pflegen und viel einfacher zu testen, was einen flexibleren, skalierbaren Code ermöglicht.

Abschluss

In diesem Beitrag habe ich mich auf nur drei mächtige Konzepte aus Aurelia 2 konzentriert - Ereignisaggregator, Abhängigkeitsinjektion und dynamische Komposition -, aber dies sind nur ein kleiner Teil dessen, was das Gerüst zu bieten hat.

aurelia 2 ist mit Funktionen gepackt, die dazu beitragen, saubere, skalierbare und wartbare Anwendungen aufzubauen.

Um das vollständige Bild zu machen und tiefer in seine Fähigkeiten eintauchen, ermutige ich Sie dringend, die Dokumentation von Aurelia 2 für ein umfassenderes Verständnis zu erkunden.

ps: Dies ist mein erster Beitrag, und ich hoffe es hat dir gefallen!