Aurelia Une nouvelle vision des frameworks JavaScript

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, Angular, et plus encore.

Ce sont tous d'excellents outils, mais avez-vous entendu parler d'Aurelia 2 ?
Lorsque j'ai rencontré 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 lui, je pense maintenant que c'est l'un des meilleurs frameworks du marché, sinon le meilleur.

Pourquoi est-ce que je pense cela ?

Laissez-moi vous expliquer. Je suis passé de React.js à Aurelia et, au départ, j'ai supposé qu'il s'agissait simplement d'un autre framework JavaScript. Cependant, au fur et à mesure que j’approfondissais, j’ai commencé à réaliser son véritable potentiel et sa puissance.

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

1. Agrégateur d'événements

Le premier est l'Event Aggregator, un concept que vous connaissez peut-être si vous avez travaillé dans l'écosystème C#, mais voici comment cela fonctionne dans Aurelia :

L'Event Aggregator fonctionne de la même manière que les modèles de messagerie basés sur les événements couramment utilisés en C#. C'est un système pub/sub qui vous permet de publier et de vous abonner à des événements personnalisés au sein de vos applications Aurelia.

Cela facilite la communication découplée entre les différentes parties de votre application. Tout comme en C#, où des agrégateurs ou médiateurs d'événements sont utilisés pour rationaliser la gestion des événements, l'Event Aggregator d'Aurelia est exploité par le framework lui-même pour publier des événements à différentes étapes du cycle de vie de l'application et lors d'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
        });
    }
 }

Grâce à cela, nous pouvons facilement mettre en œuvre une architecture basée sur les événements, abordant et résolvant les problèmes de couplage souvent rencontrés avec React et des frameworks similaires.

2. Injection de dépendances

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

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

De plus, cette approche facilite le développement piloté par les tests (TDD), car elle permet une simulation et des tests 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 une composition dynamique de vues et de modèles de vues. 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.
Dans le modèle de vue utilisé avec , vous avez accès à tous les événements du 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.

Utiliser l'élément en pratique :

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

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

Comment ça marche :

• Composition dynamique : L'attribut component.bind lie dynamiquement le DynamicComponent en tant que modèle de vue.

• Passer des paramètres : L'attribut model.bind transmet les 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 nette des préoccupations via le modèle MVVM (Model-View-ViewModel).

Vue : La structure de l'interface utilisateur est entièrement découplée de la logique. Il se lie simplement au ViewModel pour afficher les données et capturer les interactions des utilisateurs.

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

Modèle : Aurelia conserve les données de base de l'application séparées de View et ViewModel, en conservant 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 cet article, je me suis concentré sur trois concepts puissants d'Aurelia 2 : l'agrégateur d'événements, l'injection de dépendances et la composition dynamique, mais ceux-ci ne représentent qu'une petite partie de ce que le framework a à offrir.

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

Pour avoir une image complète et approfondir ses capacités, je vous encourage fortement à explorer la documentation d'Aurelia 2 pour une compréhension plus complète.

PS : Ceci est mon premier post, et j'espère qu'il vous a plu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!