Dernièrement, les conversations sur les frameworks javascript ont été dominées par des noms populaires comme React (techniquement une bibliothèque), next.js, svelte, angulaire, et plus.

Ce sont tous d'excellents outils, mais avez-vous entendu parler d'Aurelia 2?
Quand je suis tombé sur Aurelia pour la première fois, ma réaction a été: "Qu'est-ce que c'est?" Mais après 2 ans de travail avec, je crois maintenant que c'est l'un des meilleurs frameworks, sinon le meilleur.

Pourquoi je pense que oui?

Laissez-moi expliquer. Je suis passé à Aurelia à partir de react.js, et au départ, j'ai supposé que c'était juste un autre cadre JavaScript. Cependant, alors que je suis plus approfondi, j'ai commencé à réaliser son véritable potentiel et son pouvoir.

Cet article servira d'introduction à Aurelia 2, où je présenterai certains de ses concepts puissants et pourquoi il se démarque.

1. Aggrégateur d'événements

Tout d'abord est l'agrégateur d'événements, un concept que vous connaissez peut-être si vous avez travaillé dans l'écosystème C #, mais voici comment il fonctionne dans Aurelia:

L'agrégateur d'événements fonctionne de manière similaire aux modèles de messagerie basés sur des événements couramment utilisés dans C #. Il s'agit d'un système de pub / sous-sous vous qui vous permet de publier et de vous abonner à des événements personnalisés dans vos applications Aurelia.

Cela facilite la communication découplée entre différentes parties de votre application. Tout comme dans C #, où les agrégateurs d'événements ou les médiateurs sont utilisés pour rationaliser la gestion des événements, l'agrégateur d'événements d'Aurelia est exploité par le cadre lui-même pour publier des événements à différentes étapes du cycle de vie de l'application et pendant des actions spécifiques.

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
        });
    }
 }

Avec cela, nous pouvons implémenter sans effort une architecture axée sur les événements, s'adressant et résolvant les maux de tête souvent rencontrés avec React et des cadres similaires.

2. Injection de dépendance

Injection de dépendance (DI) est un modèle de conception qui facilite la création d'objets avec leurs dépendances requises, sans que les objets soient eux-mêmes responsables de la création de ces dépendances. Cela favorise le couplage lâche entre les classes et leurs dépendances, améliorant la modularité et la testabilité.

Aurelia propose un système DI puissant et flexible qui simplifie le processus de câblage dans différentes parties de votre application. Avec le DI d'Aurelia, la gestion et l'injection des dépendances deviennent transparentes, ce qui entraîne un code plus propre et plus maintenable.

De plus, cette approche facilite le développement basé sur le test (TDD), car elle permet une moquerie et un test simples de composants individuels sans avoir besoin d'une configuration complexe ou de dépendances étroitement couplées.

3. Composition dynamique

L'élément d'Aurelia permet la composition dynamique des vues et des modèles de vue. Il agit comme un élément personnalisé mais sans nécessiter de nom de balise spécifique, permettant des composants d'interface utilisateur flexibles et réutilisables.
À l'intérieur du modèle de vue utilisé avec, vous avez accès à tous les événements de cycle de vie standard d'Aurelia, ainsi qu'une méthode d'activation supplémentaire qui peut être utilisée pour initialiser ou transmettre des paramètres au modèle de vue.

en utilisant l'élément dans la pratique:

comment cela fonctionne:

• Composition dynamique : l'attribut composant.bind lie dynamiquement le dynamicComponent comme modèle de vue.

• Passage des paramètres : L'attribut modèle.bind transmet des paramètres à la méthode Activate dans le modèle de vue composé dynamiquement.

séparation des préoccupations

L'une des raisons pour lesquelles j'aime Aurelia 2 est sa séparation propre des préoccupations via le modèle MVVM (modèle-View-ViewModel).

Voir : la structure d'interface utilisateur est entièrement découplée à partir de la logique. Il se lie simplement au ViewModel pour afficher les données et capturer les interactions utilisateur.

ViewModel : C'est là que toute la logique se produit. Il contrôle les données, gère les règles commerciales et met à jour la vue, sans se soucier de la façon dont elle est affichée.

modèle : Aurelia maintient les données d'application principales distinctes à la fois de la vue et de la vue, en maintenant la clarté et la concentration.

Cette séparation rend l'application hautement modulaire, plus facile à maintenir et beaucoup plus simple à tester, permettant un code plus flexible et évolutif.

Conclusion

Dans ce post, je me suis concentré sur trois concepts puissants d'Aurelia 2 - agrégatrice d'evénations, injection de dépendance et composition dynamique - mais ce ne sont qu'une petite partie de ce que le cadre a à offrir.

Aurelia 2 regorge de fonctionnalités qui aident à créer des applications propres, évolutives et maintenables.

pour obtenir l'image complète et plonger plus profondément dans ses capacités, je vous encourage fortement à explorer la documentation Aurelia 2 pour une compréhension plus complète.

ps: c'est mon premier message, et j'espère que vous l'avez aimé!