フロントエンド開発入門

Liferay DXPは、完全に自由な開発者フロントエンドを提供します。手作業でのJavaScriptのコーディングに対する好みや、Liferayのフロントエンドフレームワークの使用経験の有無、jQuery、Lodash、またはモジュールに対する好みに関わらず、希望するフロントエンドフレームワークを使用することができます。

Liferay DXPを以前のバージョンから使用しているユーザーは、Liferayではなじみ深いAlloy UIを引き続き使用できますが、一番好きなフロントエンドテクノロジーを使用することもできます。

  • EcmaScript ES2015+
  • Metal.js (Liferayが開発)
  • AlloyUI(Liferayが開発)
  • jQuery(付属)
  • Lodash(付属)

モジュールをロードするには、いつ必要なのか、ビルド時の場所はどこなのか、モジュールを一緒にバンドルするのか、個別にロードするのかについて把握しておき、実行時にアセンブルする必要があります。これらのタスクを追跡するのは大変ですが、 Liferay DXPのローダー(YUI/AUI、AMD、およびAMD形式のnpm)がロードを処理するため、すべての詳細を心配する必要はありません。モジュールに関するわずかな情報を提供するだけで、Liferay DXPのローダーが残りを処理します。

アプリケーションでnpmパッケージを使用する場合は、liferay-npm-bundlerを使用できます。 これはまさに上記の目的のために構築されており、時間を節約するために一般的なモジュールタイプ(AMD、React、Angular JSなど)のプリセットもいくつか提供しています。これによりOSGiバンドルが作成され、すべてのnpm依存関係が抽出され、Liferay AMD Loader用にコードがトランスパイルされます。

Liferay DXP用のJavaScriptアプリケーションを開発する際、Liferay DXP固有の情報、またはWebサービスにアクセスする必要がある場合があります。LiferayのグローバルJavaScript Objectでは 、この情報を公開しており、JavaScriptアプリケーションでLiferay DXPを活用しながら、好きなフロントエンドフレームワークとテクノロジーを使用することができます。

LexiconとClay

Liferay DXPでは、Lexiconと呼ばれる独自の設計言語を使用して、Liferay製品のエコシステム全体で一貫したUIとユーザーエクスペリエンスを構築するための共通フレームワークを提供しています。LexiconのWeb実装(CSS、JS、およびHTML)はClayと呼ばれています。一連のCSSクラスまたはタグライブラリを介して、アプリケーション開発者は自動的に使用することができます。

テンプレート

テンプレート化には、Java EEのJSP、FreeMarker、GoogleのSoy(別名Closure Templates)など、好きなものを使用できます。

テーマ

Liferay DXPテーマは、サイトのルック&フィールを提供します。テーマは、CSS、JavaScript、HTML、およびFreeMarkerテンプレートを組み合わせたものです。デフォルトのテーマもありますが、独自のルック&フィールを作成することもできます。

Theme Builder GradleプラグインLiferay Theme GeneratorDev Studio DXPBlade CLIテーマテンプレートを使って最適な開発ツールを選択できるため、洗練されたテーマの作成に専念することができます。

フロントエンドの拡張

Liferay DXPのモジュール性は、開発のカスタマイズや拡張ポイントという形で、フロントエンド開発者に多くの利点をもたらします。これらの拡張機能は、アプリケーションの安定性、適合性、および将来的な進化を保証します。

以下は、利用可能なフロントエンド拡張の一部です。

Read on to learn more.

« 拡張ポイントを見つけるLiferay Portal 6から7へ »
この記事は役に立ちましたか?
1人中1人がこの記事が役に立ったと言っています