1. 背景の紹介
ウェブマスター ワークベンチは、多様なビジネス形態を持つ JD Logistics のすべてのウェブマスターおよび運用マネージャーに効率的な作業プラットフォームを提供することに尽力しています。私たちは、柔軟性、高いコラボレーション、強力な適応力を備えた機敏なチームを構築するために、チームの研究開発効率を向上させ、機敏なビジネスの実現に努めます。
2. 効率化事例の説明
2.1. 問題点の分析
ウェブマスター ワークベンチのレポート ページとタスク カード ページのほとんどは、同じ UI スタイルと対話方法を持っていますが、新しいビジネス要求に直面した場合、開発者は作業の重複を避けることが難しく、その結果、チームの開発効率が低下し、制御が困難になります。コードの品質、プロジェクトの問題、メンテナンスの問題、その他多くの問題。
2.2. 解決策
ビジネス シナリオに基づいて、コード エディター、バージョン管理、パーサー、機能オーケストレーションなどをカバーするローコード ツール チェーンが構築され、ビジュアル開発機能、プリセット コンポーネント、統合展開などの機能が提供されます。グラフィカル インターフェイスとコンポーネントの助けを借りて、開発者はアプリケーション開発プロセスを加速し、ビジネス ニーズに迅速に対応し、タイムリーに提供することができます。
3. 事例演習の手順
3.1. 主要な設計と実践方法
ローコード ツール チェーンは、フォーム駆動型データを中核として取り込み、インターフェイス ベースの低コストのインタラクション手法と少量のグルー コードを通じてビジネス分析を実行し、開発ニーズを満たし、効率的で柔軟かつ保守可能な需要開発エクスペリエンスを提供します。 。その主なアーキテクチャは、カスタマイズされた DSL、ページ エディター、コンポーネント ライブラリ、属性管理、レンダラー、展開とリリース、マテリアル管理、その他のモジュールです。
各モジュールの主な役割は次のとおりです。
1. DSL : DSL は、ローコード ツール チェーンの中核として、コンポーネント記述プロトコル、ページ記述プロトコル、フィールド ロジック プロトコルなどをカバーし、ツール チェーンの制約と拡張を目的としています。マテリアルを拡張するプロセスでは、対応する DSL 仕様に従う必要があります。プレビュー段階とリリース段階では、DSL を通じて JSON が生成されます。同時に、エディターとパーサーも通信に DSL に依存します。
2.ページ エディター: ページ エディターには豊富なアトミック コンポーネントが含まれています。視覚的な方法でコンポーネントまたはページ テンプレートを選択し、描画ボード上にページを配置します。アセンブリ後、ページ エディターは DOM 要素、スタイル、ページに含まれるメソッドおよびその他の情報 JSON 形式の DSL。
3.属性管理: 属性管理では、スタイル、データ バインディング、トリガーとイベントの 3 つの基本設定が提供されます。スタイル関数は、ページまたはコンポーネントの外観と動作を設定するために使用されます。データ バインディング関数は、ページ要素をデータ モデル内のフィールドにバインドして、データの表示と操作を実現します。トリガーとイベントの設定は、特定のメソッドにバインドできます。条件付きで実行されます。
4.レンダラー: ツール チェーン エディターとレンダラーは、データ駆動型ビューの考え方に準拠し、保存された JSON ファイルを再帰的に解析して、DSL プロトコルに従ってページを動的に生成します。ページを編集する際、最新の運用効果をリアルタイムでシミュレートでき、これを利用してタイムリーに構成を調整し、ビジネス ニーズに最適なレベルを達成できます。
5.デプロイメントとリリース: デプロイメントとリリースでは、最終的に生成された DSL を OSS に保存し、新しいページの URL アドレスを生成します。DSL は新しいページのアドレスに従って取得され、パーサーによって解析され、ユーザーに提供されます。ユーザーはオンデマンドでページ要素をロードします。
6.マテリアル管理：ツールチェーンは、アプリケーション開発で使用されるさまざまなリソースやコンポーネントを管理するためのマテリアル管理機能を提供し、開発者がコンポーネントやアプリケーションのさまざまなバージョンを追跡および管理して、チームコラボレーション中の一貫性と一貫性を確保できるようにします。また、再利用可能なフォームとテンプレートも提供するため、開発者はデータ入力とレポート表示のためのインターフェイスを迅速に作成できます。
ローコード ツール チェーンの全体的な目標は効率の向上であるため、ソリューション設計プロセスでは、ツールの使いやすさと拡張性にも特別な注意を払いました。ツール チェーンは、ワークベンチ本来の高いパフォーマンスに影響を与えません。
3.1.1. コア機能
ローコード ツール チェーンの中核機能は、通信プロトコル、ビジュアル エディター、データ モデル、ビジネス ロジック、レンダラ、デプロイメント、バージョン管理、その他の機能。以下は、主要なモジュールの簡単な紹介に過ぎません。
1.ページ記述プロトコル DSL 設計
ページ記述プロトコルとして、XML ではなく JSON を選択しました。これは、より強力な記述機能があると思われます。主な理由は、JSON をページ記述プロトコルとして使用すると、読みやすさ、柔軟性、スケーラビリティの向上に役立つだけでなく、JSON の実装 JavaScript との自然な統合、およびRESTful API との互換性。これにより、開発者はより直感的で便利な、クロスプラットフォームの開発エクスペリエンスを得ることができます。ページ UI コンポーネント ツリー JSON は SchemaNodeTree と見なすことができ、各 SchemaNode 構造はコンポーネントのプロパティとイベントを個別に処理します。
1.ビジュアルエディター
コンポーネント ライブラリ、情報セット、関数から UI まで、コーディングを必要とせず、UI 操作のためのすべての設定を統合した使いやすいビジュアル エディターを提供します。開発者は、関連する概念を簡単に習得するだけで、簡単な操作でページを迅速に構築できます。具体的な機能は以下の通りです。
•コンポーネント ライブラリ: ボタン、テーブル、フォーム、名刺などの豊富なプリセット コンポーネントが含まれています。ユーザーはコンポーネント ライブラリから適切なコンポーネントを選択してページを作成できます。
•リアルタイム プレビュー: この機能は、デザインを迅速に調整および最適化して、見たままの効果を実現するのに役立ちます。
•レイアウト ツール: レイアウト ツールをサポートし、開発者がグリッド レイアウトなどのページの構造と配置を構成できるようにします。
•動的データ バインディング: 開発者は、簡単な設定を通じてユーザー インターフェイス要素をデータ モデルのフィールドにバインドし、動的なデータ表示を実現できます。
•イベント トリガー: イベントをバインドすることで、開発者はユーザー インタラクションまたはブラウザ イベントが発生したときに実行されるアクションを定義できます。クリック、ページの初期化、フォームの送信、ページングの切り替え、その他のイベントなど。
•バージョン管理: 設計の履歴バージョンを記録および管理することで、開発者が以前の設計状態に戻ることができ、変更の追跡と回復に役立ちます。
DSL の制約の下で、まず、コンポーネント名とそれに対応する構築方法を格納するために特に使用されるコンポーネント構築マッピング テーブルを確立します。次に、構築エンジンを実装しました。コア機能は、DSL から変換された ComponentNode を読み取り、再帰的深さトラバーサルを使用して ComponentNode とそのサブノードを継続的に読み取り、対応するコンポーネントの構築メソッドを取得し、 ComponentNode VueNode として構築されます。最後に、機能コードの重複を減らし、将来の拡張を容易にするために、処理プロセスの一部のリンクをアスペクトに組み込むアスペクト設計スキームを採用し、柔軟な処理の目標を達成し、外部呼び出し元によるカスタマイズ開発を容易にしました。
1.データエンジン
データ エンジンはメタデータ モデルを作成し、ビジネス オーケストレーション機能を強化し、抽象プロセス ノードを使用してカスタム タスク、トリガー ルール、および閉ループ ルールを実装します。研究開発チームは、多様なビジネス シナリオのニーズを満たすためにマイクロプロセス ノードを継続的に拡張しています。
1.レンダラーの設計
ローコード ツール チェーンのレンダラーは、ビジュアル エディターで定義されたコンポーネント、レイアウト、スタイル情報を実際の UI 要素に変換する役割を担う重要なコンポーネントです。レンダラーが提供するリアルタイム レンダリング機能により、開発者は最適な結果を得ることができます。エディター 即時フィードバック。動的データ バインディングにより、レンダリングされた UI 要素をアプリケーションのデータ モデルと同期して更新できます。
最下位レベルでは、統合された ComponentManager によってグローバルに管理されるコンポーネント プールを実装しました。その上には拡張層があり、各コンポーネントの実装に対応します。たとえば、パーサーは SchemaNode を対応するコンポーネントに解析し、コンポーネントにパーソナライズされた機能を与える役割を果たし、バリデーターは検証ロジックを実装し、アクションはイベントの処理を担当し、パラメーターの取得、インターフェイスの呼び出し、データ設定などの機能をカプセル化します。最上位層は外部インターフェイスを提供し、エンジン全体のレンダリング結果を表示する役割を果たします。
3.1.2. 災害復旧計画
非ローコード モジュールの場合、フロントエンド ページはレンダリングとフレーム構築のためのコード リソースとともにブラウザによってロードされ、データはさまざまなリモート インターフェイスを非同期的に呼び出すことによってロードされます。この場合、データが要求されない場合でもページ構造が正常にレンダリングされることを保証するために、コードの品質に重点を置く必要があるだけです。ユーザーの観点から見ると、システムは白い画面などの不具合なく常に利用可能です。
ツール チェーンを使用してフロントエンド ページを生成した後、ページ本文の記述ロジックがブラウザから転送され、コード リソースがリモート ストレージ OSS にロードされます。この目的を達成するために、私たちは OSS 障害のシナリオに焦点を当てました。全体的な処理ロジックは次のとおりです。
ページの作成と公開のプロセス中に、データを OSS に二重書き込みして、2 つの異なるファイル アドレス A と B を生成します。OSSを利用する場合はアドレスAを優先します。A に障害が発生すると、システムはアドレス B に切り替えて、二重書き込みアドレスを切り替えながら B を使用し続けます。A と B が同時に障害を起こさない限り、システム全体の可用性は十分に保証されます。
3.1.3. アクセス方法
ドッキング エンジニアリング機能: 依存関係の導入。ウェブマスター ワークベンチで依存関係ファイルを導入するために使用できるコードはわずか 4 行です。
import pageBuilder from '@xxx/page-builder'
import '@xxxx/page-builder/page-builder/page-builder.css'
Vue.use(pageBuilder, { registerComponents: { AreaCondition: NewAreaCondition } });
<page-builder :url="'http://test.xxxxx.com/name/jsonName.json'"></page-builder>
3.2. プラットフォームの使用状況の表示
(感度解除後は内部システムページは一時的に表示されず、プロセスの説明のみが表示されます)
3.2.1. ページの作成
ページのインフラストラクチャを調整する -> ページの基本を構成する -> ページ要素イベントの定義 -> ページ要素バインディング イベント
3.2.2. ページの公開
作成したページをプレビューして、期待どおりの効果が得られることを確認します -> ワンクリックでページを公開し、ページにアクセスするための URL アドレスを取得します
3.2.3. タスクエンジンのリリース
タスクの作成 -> タスクトリガールールと閉ループルールの設定 -> タスクの生成
3.3. 実践のハイライト
4. 効率を向上させ、成果を達成する
4.1. パフォーマンスの向上
ツール チェーンは 2023 年 7 月に使用開始されました。使用開始以来、同部門の需要提供サイクルは大幅に改善され、5 月から 9 月にかけて、需要のフルサイクルの提供指標は 21.06 日から 14.71 日に短縮されました。同時に、需要スループットも大幅に増加し、618 封鎖期間中の特別な変更を除くと、月間平均スループットは 245 から 275 に増加しました。
4.2. 人間の効率の向上
第 3 四半期には、ウェブマスター ワークベンチのフロントエンド ローコード ツールを使用して、7 つのレポート要件と 5 つのタスク カード要件の開発を効率的に完了しました。レポートとカードの開発時間は 2 日から 4 時間に短縮され、ワークベンチ上での新しい To Do タスク タイプの配信サイクルは 7 日から 2.5 日に大幅に短縮されました。
同時に、バックエンド データ エンジンの使用により 11 のビジネス要件の開発が効率的に完了し、平均して各要件で 1 日あたり最大 0.5 ～ 3 人が開発時間を節約でき、研究開発効率がさらに向上し、需要スループットの向上とビジネスの機敏な提供、需要の期待。
4.3. 影響
4.3.1. 利用促進効果
ツールチェーンの利用開始後はロジスティックス側で共有され、3つのアジャイルチームで利用され、その後の推進活動も準備中です。これまでに23件のリクエストが受け付けられました。
4.3.2. 技術の共有と推進
1. JD Logistics Technology 月報に掲載
2. 物流フロントエンドチャネルでの高品質コースの共有
5. まとめとフォローアップ計画
ローコード ツール チェーンは、「ローコード -> マッピングとモデリング -> 特定のドメイン シナリオのビジュアル構築システム」をコア リンクとして採用し、開発プロセスを継続的に標準化し、チームの全体的な研究開発効率を向上させ、迅速な提供を実現します。ビジネスニーズ。チームのアジャイル配信能力をまったく新しいレベルに引き上げます。
フォローアップ計画:
技術的なスキル
・フロントエンドローコードとバックエンドローコードのシームレス接続を実現し、ページ開発効率をさらに向上
•コンポーネント間のエレガントな相互接続を実現し、他のプラットフォームとの接続を開き、複雑なページの構築を迅速に実現します。
•コンポーネントエコシステムを構築し、コンポーネント拡張のための外部研究開発をサポートします。
チームデリバリー
•共通レポート ページとタスク カード ページのローコード生成から学びます。物流分野のすべてのフロントエンド研究開発担当者にサービスを提供するユニバーサル コード生成プラットフォームに変換
•産学連携モデルを需要提供から継続的創造へ変える
•チームの需要実現能力を向上させ、新たな高みに到達し、ビジネス開発に新たなエネルギーを与える
著者: JD Logistics Guo Changsha
出典：JD Cloud Developer Community Ziyuanqishuo Tech 転載の際は出典を明記してください
Bilibiliは2度クラッシュ、テンセントの「3.29」第1レベル事故…2023年のダウンタイム事故トップ10を振り返る Vue 3.4「スラムダンク」リリース MySQL 5.7、莫曲、李条条…2023年の「停止」を振り返る 続き” (オープンソース) プロジェクトと Web サイトが 30 年前の IDE を振り返る: TUI のみ、明るい背景色... Vim 9.1 がリリース、 Redis の父 Bram Moolenaar に捧げ、「ラピッド レビュー」LLM プログラミング: Omniscient 全能&&愚かな 「ポスト・オープンソースの時代が来た。ライセンスの有効期限が切れ、一般ユーザーにサービスを提供できなくなった。チャイナ ユニコムブロードバンドが突然アップロード速度を制限し、多くのユーザーが苦情を申し立てた。Windows 幹部は改善を約束した: Make the Start」メニューもまた素晴らしいです。 パスカルの父、ニクラス・ヴィルトが亡くなりました。