オープンソースから1年後、Fes.jsはエンタープライズレベルの汎用フロントエンドアプリケーションソリューションにアップグレードされました

Fes.jsの誕生 

あっという間に入社して5年になり、銀行の接客事業に関わるミドルエンドやバックエンドのアプリケーションの開発に取り組んでいますが、やや退屈で退屈なことになるでしょう。毎日類似性の高い開発作業を行っているので、ミドルおよびバックグラウンドのアプリケーション開発の効率を包括的に最適化および改善するためのよりスマートな方法を考えました。

過去の研究から3つの重要なポイントが抽出されました。1つは非常にアジャイルな開発経験を必要とするFast、2つ目は学習コストが低く、使いやすいEasy、最後にコードの堅牢性と堅牢性が高いStrongです。優れたパフォーマンス;これにより、Vue3ベースのフロントエンドアプリケーションソリューションであるFes.jsが構築されます。

規則、設定、およびコンポーネント化の設計アイデアにより、ユーザーはコンポーネントを使用してページコンテンツを構築することだけに関心があります。技術的な曲線は平坦で、簡単に始めることができます。いくつかのプロジェクトの後、安定する傾向があります。豊富なVue 3エコロジーとFes.jsプラグインにより、ビジネス開発がより機敏かつスムーズになります。

Fes.jsの成長

2020年のオープンソースの開始当初、 Fes.jsはミッドエンドおよびバックエンドのアプリケーションソリューションとしてのみ位置付けられていましたが、現在はH5を開発する機能が追加され、一般的なフロントエンドアプリケーションソリューションに進化しています。次に、  Fes.js がどのような変換を行ってこの反復アップグレードを完了したかを共有します。これが参考になることを願っており、アップグレードされた Fes.jsを試すことを楽しみにしています。 

v1バージョン

ミドルおよびバックグラウンドのフロントエンドアプリケーションのほとんどは、次のことを処理する必要があります。

1. ビルド、開発、ビルド

2. エントリindex.html

3. main.jsと入力し、vueインスタンスを初期化します

4. ルーティング関連

5. 許可関連

6. ページレイアウト

7. インターフェイスリクエスト

8. ..。

当時、Vue-CLIやチーム内のmnなどのCLIツールは非常に人気があり、ビルド関連のものや、プロジェクト自体で処理する必要のあるその他のものを処理していました。次に、新しいプロジェクトを開発する手順は、最初に古いプロジェクトをコピーし、次にコードを変更してから新しい関数を追加し、時間の経過とともにいくつかの問題を見つけることです。

1. 「最適化される」コードを継承するため、慣れていない場合は変更するのが非常に面倒であり、変更しないと隠れた危険があります。

2. テクノロジースタックは古く、アップグレードは非常に手間がかかります。新しいセットを作成することをお勧めします。

3. リクエストツール機能、それを書くための10の方法、それを維持するのは面倒です

次に、これらの一般的な機能をカプセル化するフレームワークを提供し、コード仕様とコード編成を統合し、コードの最適化とアップグレードをフレームワークに渡します。ユーザーはそれについて心配する必要はありません。v1バージョンはこれらのことを行います。

デザインのアイデア

モジュール分割

1. fes-cliは、プリコンパイル、プロジェクトの作成、開発とデバッグの有効化、パッケージ化と公開などの機能を提供するコマンドラインツールです。
2. Fes-coreは、アクセス許可管理、ストレージ管理、ルーティング管理、インターフェイス管理、状態管理、データディクショナリ管理、環境管理などの固定ページレイアウトとAPIを提供するランタイムフレームワークです。プラグインの形式でランタイム拡張機能を提供します。
3. fes-uiは、30以上のPC側コンポーネントライブラリを含むコンポーネントライブラリであり、追加、削除、変更、検査などのページをすばやく作成できます。

Fes-uiの使い方

1.グローバルインストールコマンド

wnpm i @webank/fes-cli -g

2.プロジェクトの依存関係を宣言します

{"dependencies": {        "@webank/fes": "^1.0.0"    }}

3.依存関係をインストールした後、プロジェクトのルートディレクトリで実行します

fes dev 

v1バージョンが誕生したので、アプリケーションの開発を家の建設と比較すると、fes.jsを使用することは、大まかな家を提供することと同じであり、装飾するだけで済みます。

 

v2バージョン

v1をしばらく繰り返し実行した後、いくつかの問題が発生しました。

1.モジュール分割が不合理

v1バージョンは、fes-uiの概念をユーザーから保護します。ユーザーは、これらのコンポーネントをインストールして登録する方法を知る必要はありません。package.jsonで依存関係@ webank / fesを宣言し、コードでコンポーネントを使用するだけです。理想は完璧ですが、現実は非常に細いです。fes-uiは高頻度で更新され、fes-coreは低頻度で更新されます。@ webank / fesはfes-uiに依存しているため、fes-uiがメジャーバージョン番号の更新およびアップグレードと互換性がない場合、@ webank / fesもメジャーバージョンのアップグレードに従う必要があります。これにより、@webankの使いやすさと安定性に課題が生じます。 /fes。

2.グローバルfesコマンド

v1バージョンでは、ユーザーがfesコマンドをローカルおよびグローバルにインストールし、ビルドプラットフォームにfesコマンドをグローバルにインストールすることを想定しています。これにより、さまざまなプロジェクトのインストール時間を大幅に節約できます。fes-cliが非常に安定していて、ほとんど更新されていない場合は、機能します。ただし、実際には、fes-cliも更新して繰り返す必要があります。同時に、fes-cliが提供するプレビルド、モック、その他の機能には、プロジェクトの協力が必要です。さまざまなプロジェクトで必要になる可能性があります。異なるバージョンのfes-cliを使用します。

v2バージョンで上記の問題を解決する準備をします。

デザインのアイデア

実行中のアイデアはv1バージョンと同じであり、2つの変更を行う必要があります。

1. @ webank/fesを@webank/fes-coreと@webank/ fes-uiに分割し、2つのモジュールを分離します
2. Fes-cliは、プロジェクトの起動、非グローバルインストールに変更されます。

モジュール分割

使い方

1.プロジェクトの依存関係を宣言します

{    "dependencies": {        "@webank/fes-core": "^2.0.0",        "@webank/fes-ui": "^2.0.0",    },    "devDependencies": {        "@webank/fes-cli": "^2.0.0",    }}

2.依存関係をインストールした後、プロジェクトのルートディレクトリで実行します 

fes dev 

また、V2バージョンはVueを1.0から2.0に、webpackを4.0にアップグレードし、より優れた開発エクスペリエンスをもたらします。

 

v3バージョン

V2バージョンをしばらく実行した後、いくつかの問題が発生しました。

1.スケーラビリティが弱い

V2バージョンは、拡張機能を提供するためにVueのプラグイン機能をカプセル化します。Vueプラグインは実行時に処理を実行しますが、ビルドフェーズでは処理できません。たとえば、src / iconsフォルダーのsvgファイルからVueコンポーネントを自動的に生成して登録したい場合、Vueプラグインを実装できません。ファイル名に基づいて追加のコードを生成するには、ビルドフェーズ中にアイコンフォルダをスキャンする必要があります。

2.硬化しすぎ

fes.jsを使用することは、固定レイアウトのラフな家に基づいてさまざまなものを装飾および追加するようなものです。時代は変わりつつあり、ユーザーはより良い生活体験を望んでいます。彼らは大まかな住宅パターンに満足していませんが、fes.jsはパターンを変えることができません。

これらの問題を解決するために、fes.jsは拡張機能を強化し、プラグインがランタイムとビルド時間をサポートできるようにする必要があります。2つ目は、ラフルームのレイアウトを固定するのではなく、ラフルームの部屋をプラグインとして抽象化し、ユーザーがラフルームの形成に使用するプラグインを自由に選択できるようにすることです。  V3は、プラグインメカニズムを使用してコード全体を書き換えます。

デザインのアイデア

webpackや他のビルダーがコンパイルを実行する前に、各プラグインはファイル、構成、環境変数を読み取り、対応するロジックを実行し、ランタイムコードを.fes一時ディレクトリに書き込んでから、ランタイムコードの依存関係をエントリファイルfes.jsに追加できます。 。このようにして、プラグインはビルド時と実行時の拡張性をサポートできます。このアーキテクチャでは、コアロジックはプラグインのライフサイクル管理です。

プラグインメカニズム

fesdevの実行中のプロセスを実行します。

モジュール分割

Fesには、ビルド、ルーティング、エントリファイル、ランタイムプラグインメカニズムのコンテンツなど、プリセットビルドインとランタイムの組み込みパッケージがありますが、ビジネス関連のコンテンツは含まれていないため、fes.jsは一般的なものに変換されています。フロントエンドアプリケーションソリューション。

点線のプラグインは、ビジネスニーズに応じて自由に選択できます。たとえば、開発中のバックグラウンドアプリケーションの場合、レイアウトではfe​​s-plugin-layoutを使用でき、権限設定ではfes-plugin-accessを使用できます。

プラグイン

使い方

1.プロジェクトの依存関係を宣言します

{    "dependencies": {        "@fesjs/fes": "^2.0.0"    }}

2.依存関係をインストールした後、プロジェクトのルートディレクトリで実行します

fes dev 

また、V3バージョンはVueを3.0に、webpackを5.0にアップグレードし、開発エクスペリエンスをさらに最適化しました。同時に、新しいVue3ベースのコンポーネントライブラリFES-Designがリリースされました。FES-Designの設計システムは現在も継続的に調査されています。より優れた、よりプロフェッショナルなエンタープライズレベルの製品設計システムをユーザーに提供したいと考えています。将来の蓄積。

 

V4バージョン

v3バージョンが開発されたとき、webpack 5.0がリリースされたばかりです。webpackエコシステムを考慮して、ビルダーとしてwebpackを引き続き使用し、構築関連のロジックはwebpackを中心に展開しました。昨年、esbuilder、vite、tscなどのさまざまなビルダーソリューションがフロントエンドサークルに登場しました。viteを体験した後、私は本当に香りがよいと感じます。Webpackはそれを完全に打ち負かすことはできません。あなたがそれを打ち負かすことができない場合は、それに参加してください！

デザインのアイデア

v3バージョンのwebpackに関連する構築ロジックは、パッケージ@ webank / prefix-built-inにあり、それらが削除されて新しいモジュールfes-builder-webpackが形成され、新しいモジュールfes-builder-viteが形成されます。 Vite開発構築ロジックに基づいています。名前がfes-builder-で始まるパッケージは、最初にロードされる構築ロジックの処理を担当するプラグインのセットであり、ロジックの実装方法は引き続きプラグインメカニズムに基づいています。

モジュール分割

使い方

1.プロジェクトの依存関係を宣言します{

    "dependencies": {        "@fesjs/fes": "^3.0.0",        "@fesjs/builder-vite": "^3.0.0"    }}

2.依存関係をインストールした後、プロジェクトのルートディレクトリでfesdevを実行します

 

Fes.jsの未来

fes.jsが将来どうなるかはわかりませんが、fes.jsはトレンドに沿って、それに適したものになると思います。fes.jsとfes-designはどちらもオープンソースです。ぜひ体験してください。

fes.js：

アドレス：https ：//github.com/WeBankFinTech/fes.js

ドキュメント：fesjs.mumblefe.cn/next

fes-design：

アドレス：https ：//github.com/WeBankFinTech/fes-design

ドキュメント：fes-design.mumblefe.cn