BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース モダンなマイクロフロントエンドライブラリのPiral

モダンなマイクロフロントエンドライブラリのPiral

原文(投稿日:2021/06/30)へのリンク

Piralは、Reactをベースとしてモジュラー「マイクロフロントエンド」アプリケーションを開発するためのJavaScriptライブラリである。

マイクロフロントエンドは、マイクロサービスの概念をフロントエンドアプリケーションに拡張したものである。単一のSPA(シングルページアプリケーション)を複数の自己完結型アプリケーションに分割することで、開発者がJavaScriptアプリケーションの増大するサイズと複雑さに取り組むことを支援する。

単純なマイクロフロントエンドのセットアップには、現在のルートに基づいて自己完結型のモジュールのセットをロードするシェルアプリケーションが含まれている。

Piralでは、シェルアプリケーションは「Piralインスタンス」と呼ばれる。自己完結型のモジュールは「Pilets」と呼ばれ、どちらもPiral CLIを介して生成できる。

Piralインスタンスは、アプリケーションの3つの側面を管理する。

  1. アプリケーションのレイアウト(フッター、ヘッダーなど)
  2. 個々のPilets間で共有できる共有コンポーネント
  3. Piletsのロード方法を管理し、共有コンポーネントを統合できる場所を定義する

Piletsは、Webサイトのさまざまな側面を管理する個々のWebアプリケーションである。Piral CLIのデフォルトはReactであるが、開発者は、提供されているプラグインを使って、AngularやVue.jsなどの他のライブラリを使用してPiletsを構築できる。

Piralの使用を開始するには、下記の通り、最初にPiral CLIをグローバルにインストールする。

npm I piral-cli -g

Piral CLIがインストールされると、次のコマンドを実行して新しいPiralアプリケーションを生成できる。

piral new --target app-name

これにより、ベースレイアウトを含む単純なシェルアプリケーションが生成される。Piletsを生成する前に、まずpiral buildを実行する必要がある。これにより、releaseとemulatorの2つのパッケージを含むdistフォルダが生成される。

エミュレータパッケージは、Piletsを生成するために使われる。そして、通常は、すべてのモジュールが確実に最新のレイアウトを使用するように、プライベートNPMレジストリに公開される。

Piletを生成するには、次のコマンドを実行する。

pilet new emulator-name --target pilet-name

エミュレーター名は、npmパッケージまたはエミュレーターインスタンスへのローカルパスのいずれかである。

新しく作成されたPiletを開始するには、pilet debugを実行する。これによってサーバが起動し、http://localhost:1234/からアクセスできる。

Piralは、Piletインスタンスをホストするフィードサービスに依存している。開発者は、提供された例に基づいて独自のフィードサービスを設定するか、Piralが提供する無料のフィードサービスを使用できる。

フィードを設定したら、作成したフィードからPiletをプルするようにPiralインスタンスを設定する必要がある。これは、Piralアプリケーションのindex.tsxにあるfeedUrlを変更することで実施できる。

Piralは、MITライセンスの下で利用できるオープンソースライブラリである。コントリビューションは、Piral GitHubプロジェクトに参加することが推奨されている。その際、コントリビューター規約の行動規範に従う必要がある。

この記事に星をつける

おすすめ度
スタイル

BT