AEM 向け SPA の開発

JS コンポーネントをモジュラー化します。

任意の順序、位置、サイズでレンダリングできるようにします。

アドビの SDK が提供するコンテナを使用して、コンポーネントを画面に配置します。

AEM を使用すると、ページと段落のシステムコンポーネントを使用できます。

各 JS コンポーネントに AEM コンポーネントを作成します。

AEM コンポーネントは、ダイアログと JSON の出力を定義します。

コンポーネントと JSON モデルに合意する

フロントエンド開発者とバックエンド AEM 開発者は、必要なコンポーネントとモデルについて合意し、SPA コンポーネントからバックエンドコンポーネントに 1 対 1 で一致させる必要があります。

AEM コンポーネントは、主に編集ダイアログを提供し、コンポーネントモデルを書き出すためにも必要です。

React コンポーネントでは、this.props.cqModel を介してアクセスする

コンポーネントについて合意が取れ、JSON モデルが設定されると、フロントエンド開発者は SPA を自由に開発でき、this.props.cqModel を介して JSON モデルに簡単にアクセスできます。

コンポーネントの render() メソッド ​を実装する

フロントエンド開発者は、自由に render() メソッドを実装し、cqModel プロパティのフィールドを使用できます。これにより、DOM およびページに挿入される HTML フラグメントが出力されます。これは、React でアプリを作成する標準的な方法です。

MapTo() を使用してコンポーネントを AEM リソースタイプにマッピングする

マッピングはコンポーネントクラスを格納し、Container コンポーネントによって内部的に使用され、提供されたリソースタイプに基づいてコンポーネントを取得して動的にインスタンス化します。

これはフロントエンドとバックエンドの間の「接着剤」の役割を果たすので、エディターは、どのコンポーネントが React コンポーネントに対応するのかがわかります。

Page と ResponsiveGrid は、基本 Container を拡張するクラスの好例です。

コンポーネントの EditConfig をMapTo() へのパラメーターとして定義する

このパラメーターは、コンポーネントがまだレンダリングされていないか、レンダリングするコンテンツがない場合に、コンポーネントの名前をどのように付けるかをエディターに指示するために必要です。

ページとコンテナに提供されている Container クラスを拡張する

ページと段落システムは、内部コンポーネントへの委任が期待どおりに機能するように、このクラスを拡張する必要があります。

HTML5 History API を使用したルーティングソリューションを実装する。

ModelRouter が有効な場合、pushState および replaceState 関数を呼び出すと、モデルの欠落したフラグメントを取得するためのリクエストが PageModelManager にトリガーされます。

ModelRouter の現在のバージョンでは、Sling Model エントリポイントの実際のリソースパスを指す URL の使用のみをサポートしています。バニティ URL またはエイリアスの使用はサポートされません。

ModelRouter は、無効にしたり、正規表現のリストを無視するように設定したりできます。