最近、JavaScriptフレームワークに関する会話は、React（技術的にはライブラリ）、next.js、svelte、angularなどの人気のある名前によって支配されています。

これらはすべて素晴らしいツールですが、Aurelia 2について聞いたことがありますか？

私が最初にアウレリアに出会ったとき、私の反応は「それは何ですか？」でした。しかし、2年間の仕事の後、私は今、それが最高ではないにしても、そこにいる最高のフレームワークの1つであると信じています。

なぜそう思うのですか？

説明させてください。私はReact.jsからAureliaに移行しましたが、最初はそれが単なるJavaScriptフレームワークであると思いました。しかし、私がより深く掘り下げたとき、私はその本当の可能性と力に気づき始めました。

この記事は、Aurelia 2の紹介として機能します。ここでは、その強力な概念のいくつかと際立っている理由を紹介します。

1。イベントアグリゲーター

最初のUPはイベントアグリゲーターです。これは、C＃エコシステムで働いていた場合によく知っている概念ですが、Aureliaでの作品は次のとおりです。

イベントアグリゲーターは、C＃で一般的に使用されるイベントベースのメッセージングパターンと同様に機能します。これは、Aureliaアプリケーション内のカスタムイベントを公開および購読できるパブ/サブシステムです。

これにより、アプリのさまざまな部分間の分離された通信が容易になります。イベントアグリゲーターまたはメディエーターを使用してイベント処理を合理化するC＃と同じように、Aureliaのイベントアグリゲーターは、アプリケーションのライフサイクルのさまざまな段階および特定のアクション中にイベントを公開するためにフレームワーク自体によって活用されます。

Import {Ieventaggregator、Resolve} from 'aurelia'; Class FirstComponentをエクスポート{ readonly ea：ieventaggregator = resolve（ieventaggregator）; bound（）{ this.ea.publish（ 'ea_channel'、「ペイロード」） } }

Import {Ieventaggregator、Resolve} from 'aurelia'; エクスポートクラスのSecondComponent { readonly ea：ieventaggregator = resolve（ieventaggregator）; bound（）{ this.ea.subscribe（ 'ea_channel'、payload => { //このコールバックの内部に何かをします }）; } }

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

2。 依存関係注射

依存関係注射（DI）は、オブジェクト自体がそれらの依存関係を作成する責任を負うことなく、必要な依存関係を持つオブジェクトの作成を促進する設計パターンです。これにより、クラスとその依存関係の間のゆるい結合が促進され、モジュール性とテスト可能性が向上します。

Aureliaは、アプリケーションのさまざまな部分を配線するプロセスを簡素化する強力で柔軟なDIシステムを提供します。 AureliaのDIでは、依存関係を管理および注入することがシームレスになり、よりクリーンで保守可能なコードが得られます。

さらに、このアプローチにより、テスト駆動型開発（TDD）が簡単になります。複雑なセットアップまたは密接に結合した依存関係を必要とせずに、個々のコンポーネントの簡単なモッキングとテストを可能にするためです。

3。動的構成

Aureliaの要素は、ビューとビューモデルの動的な構成を可能にします。それはカスタム要素のように機能しますが、特定のタグ名を必要とせず、柔軟で再利用可能なUIコンポーネントを可能にします。。 使用されているビューモデルの内部では、Aureliaのすべての標準ライフサイクルイベントにアクセスでき、ビューモデルにパラメーターを初期化または渡すために使用できる追加のアクティベートメソッドがアクセスできます。

要素を実際に使用する：

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

dynamic composition

：component.bind属性は、動的コンポーネントをビューモデルとして動的にバインドします。

• パスパラメーター：モデルの属性は、動的に構成されたビューモデルのアクティブ化メソッドにパラメーターを渡す。

• 懸念の分離

  私がAurelia 2を愛している理由の1つは、MVVM（Model-View-ViewModel）パターンを介した懸念のきれいな分離です。

view ：UI構造はロジックから完全に分離されています。それは単にViewModelにバインドしてデータを表示し、ユーザーインタラクションをキャプチャします。

viewmodel

：これがすべてのロジックが発生する場所です。データを制御し、ビジネスルールを処理し、表示の表示を心配することなく、ビューを更新します。

モデル

：Aureliaは、ビューとViewModelの両方からコアアプリケーションデータを分離し、明確さとフォーカスを維持します。

この分離により、アプリケーションのモジュラーが高く、メンテナンスが容易になり、テストがはるかに簡単になり、より柔軟でスケーラブルなコードが可能になります。

結論

この投稿では、Aurelia 2の3つの強力な概念（イベントアグリゲーター、依存関係の注入、動的な構成）に焦点を当てていますが、これらはフレームワークが提供するもののほんの一部にすぎません。

Aurelia 2には、清潔でスケーラブルで保守可能なアプリケーションを構築するのに役立つ機能が詰め込まれています。

全体像を把握し、その機能をさらに深く掘り下げるために、より包括的な理解のためにAurelia 2ドキュメントを探索することを強くお勧めします。

PS：これは私の最初の投稿です。