Velocity は、Java ベースの Web ページ テンプレート エンジンです。10 年以上前、Velocity は Java コードを Web ページから分離し、開発者が Web 開発と Java 開発を並行して実行できるようにしました。この 10 年間のフロント エンドとバック エンドの分離の波に伴い、これらの古い Velocity ベースのシステムを振り返ってみると、バックエンドとフロントエンドのメンテナンスの両方で多くの問題が発生するでしょう。
(1) バックエンドの人員メンテナンス: フロントエンド開発モードに慣れていないため、UI と Js フレームワークを学ぶのに多大な労力がかかります。
(2) フロントエンドの人員メンテナンス：Velocity レンダリングは Java 環境に依存しているため、Maven プロジェクトや環境構成の学習に多大な労力を必要とし、フロントエンド MVC フレームワークのバージョンが古いため、開発効率が低くなります。
この状況は小売業の一部の古いシステムに広く存在しており、ビジネス要件が継続的に繰り返されるため、システムの保守コストがますます増大します。頻繁な反復が必要なページ モジュールの場合、一般的な対策はフロントエンドとバックエンドの分離スキームを採用してページ全体をリファクタリングすることですが、その後、全体のリファクタリングのコストが膨大になり、主に以下の点に反映されます。ポイント:
(1) すべてのビジネス シナリオと要件をカバーする必要がある。
(2) すべてのシナリオをカバーするテスト資料が不足している。
(3) ページのリファクタリング自体はビジネス価値をもたらしません。
私たちのチームはBサイド事業を担当しましたが、事業の立ち上げが早いため、これらのVelocityシステムのメンテナンスは避けられません。
古いシステムのメンテナンスが困難であるという問題点を目指して、古いシステムへの侵入が少なく、実際に技術アーキテクチャを段階的にアップグレードする技術的ルートを模索してきました。 +MVC+MVVC ハイブリッド アーキテクチャ、(2) Velocity の単一ファイル コンポーネント化機能の確立、(3) Velocity ローカル サンドボックス環境の作成、(4) Velocity ページのフロント エンドとバック エンドの分離。以下にそれぞれ詳細な説明を示します。
1. Velocity + MVC + MVVC ハイブリッド アーキテクチャを構築する
Velocity システムの多くは依然として JQuery などの Js フレームワークを使用しており、開発効率が低く、早急な改善が必要です。MVC フレームワークと MVVC フレームワークと比較すると、MVVC フレームワークはビュー層のロジックをカプセル化しており、開発効率が大幅に向上します。
したがって、最初のステップは、MVVC フレームワークを Velocity ページに導入して、2 つの技術アーキテクチャの共存を実現することです。Vue とそれをサポートする UI コンポーネント ライブラリを紹介しましたが、Vue を検討する際の主な要素は次のとおりです。
(1) Vue は、Js リソース リンクの導入と使用をサポートしています。つまり、スクリプト タグの行を Velocity ページに追加すると、すぐに使用できます。
(2) Velocity のページ書き込み構文は、Vue のテンプレート構文に非常に似ています。
ハイブリッド アーキテクチャ内では、テンプレートのレンダリングは 2 つの手順で実行する必要があります。まず、Velocity テンプレートがサーバー側で Vue テンプレートとしてレンダリングされ、Vue テンプレートがクライアント側で最終ページとしてレンダリングされます。
ハイブリッド アーキテクチャの問題は、セッション内の一部のキー パラメーターがサーバーから直接出力されるため、Vue がこれらのパラメーターを直接取得できないことです。したがって、パラメーターを渡すための解決策は、事前にページにいくつかのプレースホルダーを埋め込むことです。 、DOMにアクセスして取得します。
後続の要件が反復されると、ビジネス ロジックを古い MVC テクノロジ スタックから新しい MVVC テクノロジ スタックに徐々に移行して、開発とメンテナンスの効率を向上させることができます。
2. Velocity の単一ファイルのコンポーネント化機能を確立する
プロジェクトの規模が大きい場合、異なるモジュール間に類似の関数やロジックが存在する場合があります。その場合、モジュールレベルの関数の再利用をどのように実現するかが課題となります。
したがって、2 番目のステップは、コンポーネント化機能を Velocity システムに導入して、ページをまたがるコードの再利用を実現することです。Velocity システムはレンダリングに Java 環境に依存しているため、NodeJs ベースのフロントエンド エンジニアリング機能を適用するのは難しく、Vue の単一ファイル コンポーネント化機能を直接使用することはできません。幸いなことに、Velocity のインクルード (#include) および解析 (#parse) 機能を Vue の API インターフェイスと組み合わせて使用すると、革新的な Velocity+Vue 単一ファイル コンポーネント化テクノロジを実装できます。
Vue に精通している場合は、Vue の単一ファイル コンポーネント、つまり、Vue コンポーネントを説明するファイル名が .vue 接尾辞で終わるファイルについてもよく知っている必要があります。3 つの軸の内部構造: テンプレート、スクリプト、スタイル、簡単に言うと、コンポーネントのテンプレートレンダリング、ロジックインタラクション、および CSS スタイルをそれぞれ説明します。
Velocity 単一ファイル コンポーネントの編成方法は、この階層構造を指します。ファイル名が .vm 接尾辞で終わるファイルは、Velocity コンポーネントを記述するために使用されます。エンジニアリング能力の欠如により、違いは次のとおりです: (1)下位バージョンの閲覧ブラウザと互換性を持たせるには、script タグを使用してテンプレートをホストする必要があります。ブラウザの互換性を考慮しない場合は、テンプレート タグを直接使用することもできます。(2) コンポーネントの登録を行うには手動で Vue.component を呼び出す必要があります。
単一ファイルのコンポーネント化を実現した後、Velocity ページはより粒度の高いコンポーネントを通じてレイヤーごとに組み立てられるため、システムのビジネス結合の度合いがさらに軽減されます。
3. Velocity ローカル サンドボックス環境の作成 + フロントエンド エンジニアリング
最初の 2 つのステップでシステム アーキテクチャ全体が大幅に最適化されましたが、まだ解決されていない問題点があります。Velocity レンダリングは Java 環境に依存しており、ローカル開発に慣れているフロントエンドの学生は言葉を失うでしょう。小さな問題がある場合は、ローカルでブラインド開発 -> オンラインでコンテナをデプロイ -> 効果を確認 -> ブラインドで修正を続ける必要があり、数時間が経過します。
そこで第 3 ステップとして、Velocity のローカルコンパイル開発環境を実現し、ホットアップデートを実現するエンジニアリング技術を導入します。
Velocity のローカル コンパイルを解決するための中心的なアイデアは、サーバーの環境変数をシミュレートし、Velocity 構文のコンパイルをサポートすることです。Velocity に基づいて一連のフロントエンド サンドボックス プロジェクトを構築しました。前者はプロジェクト内のサーバー側変数をモックすることによって実装され、これらの環境変数はローカル JSON データ ソースに保持されます。後者は Velocity 文法 AST リファクタリングに基づいています。 、および Webpack 内のファイルのリアルタイム解析と環境パラメーターの挿入をサポートする解析エンジン Velocity-loader のセット。
サンドボックス機能の導入後、開発プロセスはVelocityのローカルリアルタイム開発に変わり、ホットアップデートはミリ秒レベルに達しており、開発体験はクールの一言に尽きる。
4. Velocityページのフロントエンドとバックエンドの分離
実際、最初の 3 つのステップと比較すると、Velocity ページのフロントエンドとバックエンドの完全な分離に非常に近づいています。
4 番目のステップは、フロントエンドの独立した Velocity ページの構築と展開を真に実現し、サーバー側のレンダリングへの依存を完全に取り除くことです。ただし、Vue-loader は実際にはプロジェクトのコンパイル中にテンプレート構文をレンダリング関数に解析し、テンプレート構文の構造を破壊しているため、クライアント側での Velocity の動的解析をサポートできず、レンダリング環境変数を固定する必要があります。Velocity の動的データ レンダリング部分を実現するには、クライアント側の Ajax に依存して動的データとページを更新するために Vue 構文に書き直す必要があります。
これまでのところ、Velocity のバックエンド アプリケーションからフロントエンド エンジニアリングへの段階的な進化を完全に認識していますが、道のりは長く、私はそれを上下に探索し、すべての読者が一緒に議論することを歓迎します。
著者: Jingdong Retail Chen Zhen
コンテンツソース: JD Cloud 開発者コミュニティ