Flying Code LowCode フロントエンド テクノロジー シリーズ: プロダクションとフライ コード探索を迅速かつ簡単に検証する方法 | JD Cloud テクニカル チーム

データから大規模モデルのアプリケーションまで、開発のヒントを共有する杭州元創会議が 11 月 25 日に開催されました。

この記事では、データ センターとイベント センターがプロトコルに従ってどのように動作するか、環境に関係なく vue2.x と vue3.x をどのようにサポートできるか、本番ページの問題を特定する方法という 3 つの側面を分析します。

1. データセンターおよびイベントセンターの設計

Feima はデータドリブン + イベントドリブンの製品であり、Feima の動作環境を考慮して、Feima はストア自体をカプセル化します。

データセンター: 同じページに複数の Feima タグが存在する可能性があり、Feima はインスタンス化を通じてストアを実装します。Feimao にアクセスする場合の詳細については、図 1 を参照してください。

図1

 

実行時に、Feima はこのパーツのインスタンスを作成します。詳細については図 2 を参照してください

図2

 

データセンターは、さまざまなテクノロジー スタックの基礎となる機能を借用して、現在の運用環境に基づいたデータ フローを実現します。図 2 の JSONSchema は、図 1 の paasDSL から取得されるか、ページ ID を通じて取得されます。その中でページの pageId が最も優先されます。

イベント センター : ページ ライフ サイクル機能やユーザー操作が発生するとイベントがトリガーされ、イベントが他のイベントをトリガーする場合もあります。イベントタイプの詳細については、Feima [LowCode フロントエンド技術 (3)] を参照してください。フライング コード イベントは、オブジェクトをインスタンス化することによって実装されます。イベントがトリガーされると、イベント インスタンスのeventCenter が作成されます。編集状態イベントのプロダクトのeventIdは、イベント センターに対応します。場合によっては、ポップアップ ボックスが消えると他のイベントがトリガーされ、他のイベントがタスクを実行し続けることがあります。Feima は、ポップアップ ボックスが消えたときを監視し、前のタスクの実行を継続するイベント拡張メカニズムを導入しています。詳細については図 3 を参照してください

画像3

 

イベント センターはデータ センター内のデータ変更をトリガーし、データ センターはコンポーネント関連の UI 変更をトリガーします。それらの間の関係は、図 4 で詳しく説明されています。矢印の向きは、毎回発生するわけではありません。たとえば、ページのライフ サイクル機能には、必ずしもイベントが構成されている必要はありません。ページの実行中、ライフ サイクルにイベントが構成されていない場合は、機能を使用すると、イベント センターはトリガーされません。

図4

2. 環境に依存しない設計

フロントエンド プロジェクトの技術スタックの違い 現在主流の技術スタックには、vue (vue2.x、vue3.x) と React があります。同部門の内部テクノロジースタックによると、Feima は vue2.x と vue3.x をサポートしています。詳細については、図 5 を参照してください

図5

 

フライングコード実行状態のコンポーネントはh関数を使用して開発されており、コンポーネント内で環境が判断されます。各コンポーネントはデータセンターに関連付けられており、データセンターはコンポーネントに更新を通知します。コンポーネントのイベントはイベント ハブに関連付けられます。ボタンを例に挙げると、isV3() を使用して、現在の実行環境が適応用の vue3 であるかどうかを判断します。詳細については図 6 を参照してください

図6

 

複雑なビジネス シナリオに対する Feima の設計アイデアは回路図の設計と一致しており、Feima 自体もコンポーネントであり、Feima 自体のネストもサポートしています。詳細については、図 7 を参照してください。

図7

 

質問: Feima サポートは反応しますか?

現在のビジネス シナリオの要件に従って、データ センターとイベント センターに反応機能を追加するだけです。現行モデルは変わりません。

3. 実稼働ページでの問題の特定

FMHelper は、編集モードでページ上の多くの問題を監視できます。ページのプレビュー後に問題が見つかった場合、ビルダーは問題を特定し、目的の効果を達成するために編集モードで変更を加えるフロントエンドの経験が必要です。フロントエンドの知識があまりない場合は、それをすばやく見つけて修正することが、フライング コード探索の方向性の 1 つです。
Feima は、利便性、堅牢性、ゼロテストの方向性を模索し続けています。

4: まとめ

この章では、データ センターとイベント センターが契約に従ってどのように機能するか、依存せずに vue2.x および vue3.x をサポートできるかどうかという 3 つの側面を含め、本番環境および Flying Code の探索を実現するために Flying Code をどのように便利かつ迅速に検証できるかを分析します。環境に関すること、運用ページで問題を特定する方法について詳しく紹介します。次の章では、【Flying Code LowCode フロントエンド技術 (7)】Flying Code Canvas 技術の紹介を紹介します。

著者: JD Technology の Wang Guanghui

出典：JD.comには開発者コミュニティがありますので、転載の際は出典を明記してください。

Alibaba Cloudが深刻な障害に見舞われ、全製品が影響(復旧) Tumblr がロシアのオペレーティングシステムAurora OS 5.0 を冷却新しいUIが公開 Delphi 12とC++ Builder 12、RAD Studio 12多くのインターネット企業がHongmengプログラマーを緊急採用UNIX時間17 億時代に突入しようとしている (すでに突入している) Meituan が兵力を募集し、Hongmeng システム アプリの開発を計画Amazon が Linux 上の .NET 8 への Android の依存を取り除くために Linux ベースのオペレーティング システムを開発独立した規模はFFmpeg 6.1「Heaviside」がリリースされました

{{名前}}

{{名前}}