[編集と共有] Alibaba のトップ 15 フロントエンド オープンソース プロジェクト、どれを使用したか見てみましょう!

この記事では、Alibaba の人気のあるフロントエンド オープンソース プロジェクトについて取り上げます。どのプロジェクトを使用したことがありますか?まだ使用したことがない場合は、試してみてください。

概要全文:

• Ant デザイン: エンタープライズ レベルの UIデザイン言語と React コンポーネント ライブラリ

• Element UI: Vue 2.0 に基づくデスクトップ コンポーネント ライブラリ

• Egg .js: エンタープライズ レベルの Node.js フレームワーク

• Icejs: React ベースのミッドエンドおよびバックエンド アプリケーション ソリューション

• UmiJS： プラグイン可能なエンタープライズ レベルの React アプリケーション フレームワーク

• #G2： データ駆動型の高度なインタラクションを備えたビジュアル グラフィック構文

• ahooks: 高品質で信頼性の高い React Hooks ライブラリ

• Formily: MVVM フォームソリューション

• Rax： クロスコンテナ レンダリング エンジン

• ##LowCodeEngine：

  ローコード エンジン

• Midway：

  未来志向のクラウド統合 Node.js フレームワーク

• BizCharts：

  Universalチャート コンポーネント ライブラリ

#Hilo：
• HTML5 インタラクティブ ゲーム エンジン
  ## ソリューション

• ##Fusion Design: エンタープライズ レベルのミッドエンドおよびバックエンド UI ソリューション

• ##1. Ant Design

  Ant Design は、エンタープライズ レベルの UI デザイン言語および React コンポーネント ライブラリです。これには次の特徴があります。

エンタープライズ レベルのミッドエンドおよびバックエンド製品から抽出されたインタラクティブな言語とビジュアル スタイル。 すぐに使える高品質な React コンポーネント。

TypeScript を使用して開発され、完全な型定義ファイルが提供されます。

フルリンクの開発および設計ツール システム。
• 数十の国際言語がサポートされています。
• あらゆる細部にまで踏み込んだテーマのカスタマイズ機能。
• ##Ant Design Github (⭐️ 81.5k):
• github.com/ant-design/…

Ant Design Pro Github (⭐️ 32.7k):

• github.com/ant-design/…Ant Design モバイル Github (⭐️ 10.5k):
• github.com/ant-design/…2. 要素 UI
• 要素は、次のツールのセットです。開発 作成者、デザイナー、プロダクト マネージャーによって作成された Vue 2.0 に基づくデスクトップ コンポーネント ライブラリ。

Github (⭐️ 52.5k):

github.com/ElemeFE/ele…

3. Egg.js

Egg.js はエンタープライズ レベルの Node.js フレームワークです。Egg のプラグイン メカニズムは非常にスケーラブルです。

プラグインは 1 つのことだけを行います。 Egg はこれらのプラグインをフレームワークで集約し、独自のビジネスシナリオに合わせて構成をカスタマイズするため、アプリケーション開発コストが非常に低くなります。次のような特徴があります。 Egg に基づいて上位層フレームワークをカスタマイズする機能を提供します。

拡張性の高いプラグイン機構

組み込みマルチ- プロセス管理 Koa に基づいて開発され、優れたパフォーマンスを実現

安定したフレームワーク、高いテスト カバレッジ
• プログレッシブ開発
• #Github (⭐️ 18.1k):
• github.com/eggjs/egg

4. Icejs

Feibing は React-研究開発フレームワーク「icejs」は、基本構築、ルーティング、デバッグなどの基本機能に加え、マイクロフロントエンドや統合などの機能を提供し、ビジュアル操作やマテリアル再利用などを組み合わせたアプリケーション中心の研究開発ソリューションです。研究開発の敷居を下げるソリューション。次のような特徴があります:

• Vite モードと Webpack モードの両方をサポートし、企業は必要に応じて選択できます
• すぐに使えるエンジニアリング機能: TypeScript/Webpack5/Vite/Style Scheme/Mock/...
• ビジネスに適したベスト プラクティス: ディレクトリ仕様、コード仕様、ルーティング スキーム、ステータス管理、データ要求など。
• 複数のアプリケーション モード: SPA、MPA をサポートし、サーバー側レンダリングもサポートSSR と静的構築 SSG
• 強力なプラグイン機能: すべての公式機能はプラグインを通じて実装され、ビジネスはプラグインを通じてさまざまな機能を拡張できます
• リッチ ドメイン ソリューション: マイクロ フロントエンド ソリューション Icestark、統合ソリューション、React Hooks ソリューション ahooks、フォーム ソリューション Formily など。

Github (⭐️ 17.3k): github.com/alibaba/ice

5. UmiJS

umi は、プラグイン可能なエンタープライズレベルの反応アプリケーション フレームワークです。 Umi はルーティングに基づいており、設定されたルーティングと従来のルーティングの両方をサポートして、完全なルーティング機能を保証し、それに応じて機能を拡張します。そして、ソースコードからビルドされた製品までのあらゆるライフサイクルをカバーする完全なライフサイクルのプラグインシステムを搭載し、さまざまな機能拡張やビジネスニーズをサポートします。

• エンタープライズ レベル、セキュリティ、安定性、ベスト プラクティス、および制約機能の観点から、より多くの
• プラグインが検討されます。 Umi 自体もプラグインで構成されています
• MFSU、Vite よりも高速な Webpack パッケージング ソリューション
• React Router 6 に基づいた完全なルーティング
• デフォルトで最速 Request
• SSR および SSG
• 安定したホワイト ボックスのパフォーマンスと良好な ESLint および Jest
• React 18 へのフレームレベルのアクセス
• Monorepo のベスト プラクティス

Github (⭐️ 12.9k): github.com/umijs/umi

6. G2

G2 は、従来の統計グラフ用のデータ駆動型の高度にインタラクティブなビジュアル グラフィック構文のセットであり、高い使いやすさと拡張性を備えています。 G2 を使用すると、チャートのさまざまな面倒な実装の詳細に注意を払う必要がなく、Canvas または SVG を使用して、1 つのステートメントでさまざまなインタラクティブな統計チャートを構築できます。

Github (⭐️ 11.3k): github.com/antvis/g2

7.ahooks

ahooks は高品質で信頼性の高い React Hooks ライブラリのセットです。現在の React プロジェクトの開発プロセスでは、使いやすい React Hooks ライブラリのセットが不可欠です。ahooks があなたの選択肢になることを願っています。 。これには次のような特徴があります。

• 学習と使用が簡単
• SSR をサポート
• 入出力関数の特殊な処理を行い、クロージャの問題を回避します
• ビジネスから洗練された多数の高度なフックが含まれています
• 豊富な基本的なフックが含まれています
• TypeScript を使用して構築され、完全な型定義ファイルを提供します

Github (⭐️ 10.1k): github.com/alibaba/hoo…

8.正式に

Formily は、フォーム ドメイン モデルに基づいた抽象化 MVVM フォーム ソリューションです。 React では、フォームのツリー全体のレンダリングの問題が制御モードで非常に顕著になります。特にデータ連携のシナリオではページフリーズが発生しやすくなっていますが、Formilyではこの問題を解決するためにフォームの各フィールドの状態を分散管理することで、フォームの動作パフォーマンスを大幅に向上させています。同時に、JSON スキーマ プロトコルを深く統合しているため、バックエンド主導のフォーム レンダリングの問題を迅速に解決できます。次のような特徴があります。

• 高性能
• すぐに使用可能
• 高効率を実現するリンク ロジック
• クロスエンド機能、ロジックはフレームワークを超えて使用可能、ターミナル間で再利用可能
• ダイナミック レンダリング機能

Github (⭐️ 8.3k): github.com/alibaba/for…

9.Rax

Rax は Alibaba で最も広く使用されているクロスエンド ソリューションで、開発者が Web や小規模なプログラムを作成できるようにサポートします。 , Flutter など、異なるコンテナ内のクロスエンド アプリケーション。次のような特徴があります:

• Rax の構文レベルは React に基づいており、Hooks や Context などの 80% 以上のサポートを備えた React API を使用できます。
• 公式サポート R&D フレームワーク Rax App は TypeScript をサポートします、Less/Sass およびその他の基本. エンジニアリング機能、MPA、SPA、SSR および複数の機能をサポート
• 完全な Rax 構文を通じて、Alipay/WeChat/Byte などのさまざまなベンダーにわたる小規模プログラムの開発をサポートし、ダウングレード可能to Web
• Web 標準に基づいて、Web アプリケーション、Flutter アプリケーション (Kraken)、Weex アプリケーションなど、複数のコンテナにわたるクロスエンド アプリケーションをサポートします
• クロスエンド エコシステムなどの豊富なクロスエンド エコシステム-エンドコンポーネント Fusion Mobile、クロスエンド API Uni API

Github (⭐️ 7.8k): github.com/ alibaba/rax

10 . LowCodeEngine

LowCodeEngine ローコード エンジンは、ローコード プラットフォーム開発者向けに提供される強力な拡張機能を備えたローコード R&D フレームワークです。 Alibaba Front-end Committee と DingTalk が共同で制作しています。ユーザーは、ローコード エンジンに基づいてビジネス ニーズを満たすローコード プラットフォームを迅速にカスタマイズできます。

エンタープライズ レベルのローコード プラットフォームから抽出されたコア エンジンは、拡張用に設計されており、最小のカーネルと最強のエコロジーの設計コンセプトを追求しています。
• 箱から出してすぐに使用可能 マテリアル システム、セッター、プラグインなどを含む高品質のエコロジー要素。
• マテリアル システム、セッターのフルリンク R&D サイクルをサポートする完全なツール チェーン、プラグインおよびその他のエコロジー要素
• 強力な拡張性、約 100 のさまざまな垂直ローコード プラットフォームをサポートしています
• TypeScript を使用して開発され、完全な型定義ファイルを提供します

##Github (⭐️ 7.6k):

github.com/alibaba/low…11. ミッドウェイ

Midway は、サーバーレス サービスの構築に適したツールで、従来のアプリケーション、マイクロサービス、ミニ プログラム バックエンド用の Node.js フレームワークです。 Koa、Express、または Egg.js をベース Web フレームワークとして使用できます。 Socket.io、GRPC、Dubbo.js、RabbitMQ など、スタンドアロンで使用するための基本的なソリューションも提供します。さらに、Midway はフロントエンド/フルスタック開発者向けの Node.js サーバーレス フレームワークでもあります。次の 10 年間のアプリを構築します。 AWS、Alibaba Cloud、Tencent Cloud、および従来の VM/コンテナ上で実行できます。 React や Vue と簡単に統合できます。

Github (⭐️ 5.9k):

github.com/midwayjs/mi…12. BizCharts

BizCharts は Alibaba の汎用チャート コンポーネント ライブラリであり、エンタープライズ ミドルおよびバックエンド向けの効率的でプロフェッショナルで便利なデータ視覚化ソリューションの作成に特化しています。G2 および G2Plot カプセル化に基づく React チャート ライブラリであり、Alibaba の経験を積んでいます。 3 年間の洗礼を経て、柔軟性、使いやすさ、豊富さの点で、従来のチャートと高度にカスタマイズされたチャートのビジネス実装のニーズを満たします。

Github (⭐️ 5.9k):

github.com/alibaba/Biz…13. Hilo

Hilo は、Alibaba Group が開発した HTML5 クロスターミナル ゲーム ソリューションで、開発者が HTML5 ゲームを迅速に作成できるようにします。これには次の機能があります。

Hilo は、AMD、CMD、COMMONJS、スタンドアロンなどの複数のモジュール パラダイムのパッケージ バージョンをサポートします。さらに、必要に応じてモジュールとタイプを追加および拡張できます。

非常に合理化されたモジュール設計、完全なオブジェクト指向;
• 複数のレンダリング方法、DOM、Canvas、Flash、WebGL などを提供します。複数のレンダリング ソリューション (現在特許取得済み);
• フルエンド ブラウザ サポートと高性能ソリューション、独自の Flash レンダリング ソリューションは、低バージョンの IE ブラウザでも「クール」に実行できます。「ゲーム」DOM レンダリング ソリューションは、低パフォーマンスのモバイル ブラウザで発生するパフォーマンスの問題を大幅に解決;
• 物理エンジンのサポート - Chipmunk、自己拡張物理実装をサポート; ボーン アニメーションのサポート - DragonBones、組み込みボーン アニメーション システム - Tahiti (現在使用中)社内);
• 豊富なケース、成熟したフレームワークは、複数の Alibaba Double イレブンおよび年半ばのプロモーションのインタラクティブ マーケティング活動によってテストされています。

Github (⭐️ 5.8k):

github.com/hiroteam/Hi…＃＃＃１４。

Github (⭐️ 4.9k):

github.com/alibaba/x-r…15. Fusion Design

Fusion Design は、設計と開発の間の UI 構築の効率を向上させるために設計された作業方法です。 DPL モデルに基づいてデザインとフロントエンド間の標準プロトコルとワークフローを構築することで、ビジネス要件を満たす DPL を迅速に構築し、DPL 構築効率とアプリケーション効率を向上させ、企業が UI 構築を迅速に実装できるようにします。

Github (⭐️ 4.2k):

github.com/alibaba-fus…元のアドレス: https://juejin.cn/post/7135382523672002590

(学習ビデオ共有:

Web フロントエンドの入門

)

以上が[編集と共有] Alibaba のトップ 15 フロントエンド オープンソース プロジェクト、どれを使用したか見てみましょう!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。