GitHub プロジェクト共有: 6 つの非常に貴重なビジュアル構築オープンソース プロジェクト

私はこれまでローコード可視化に関連する技術や製品を研究しており、企業の研究開発コストを削減することを主な目的として、多くの可視化構築プロジェクトを主導してきました。 #and 製品納品サイクルの短縮 , インターネット技術の発展に伴い、多くの優れた技術製品が次々と世に出ています。次に、非常に貴重な ビジュアル構築プロジェクトをいくつか紹介します。 、企業のデジタル変革を支援します。

1. Formily - Alibaba 統合フロントエンド フォーム ソリューション

上記に表示されているのはスクリーンショットです

Formily

エディターのこのツールは、Alibaba 技術チームによって開発され、完全にオープン ソースです。これを使用して、自然なフロー レイアウト フォーム構築アプリケーションを作成できます。現在、Formily は、次のような複数のコンポーネント ライブラリとフレームワークをすでにサポートしています:

antd

• element
• vant
• next
• semi
• つまり、あなたが

react

フレームワーク開発者であっても、vue# であっても## フレームワーク開発者は、これを使用して独自のフォーム制作プラットフォームを構築できます。

#ただし、唯一の欠点は、技術者以外の人にとってはあまりフレンドリーではないことです。例えば、ドラッグ＆ドロップは自然なフローレイアウトであり、要素の位置を完全に自由に移動させることができないため、一部のカスタマイズされたシーンや自由度の高いシーンには適していません。

# プロジェクト リンク:

github.com/alibaba/des…

興味がある場合は、学習して参照してください。

2. Amis - Baidu フロントエンド ローコード フレームワーク

#amis

はローコード フロントエンドです。

JSON 構成を使用してページを生成するフレームワーク。これにより、ページ開発の作業負荷が軽減され、効率が大幅に向上します。

フロントエンド開発はますます複雑になり、学習の敷居はますます高くなっています。人気のある UI コンポーネント ライブラリを使用するには、npm## を理解する必要があります。 #、yarn

、

webpack、react/vue など、ES6 構文に精通している必要があり、できれば状態も理解している必要があります。 Redux などの管理機能は、関数型プログラミングに触れたことがない場合、始めるのが非常に困難ですが、開始すると、これには巨大な生態系があることがわかります。 2347 関連ライブラリは似たような機能を持つものが多く、選択にコストがかかります。 ほとんどのページを最も簡単な方法で生成するために、amis のソリューションは JSON に基づいて構成されています。その独自の利点は次のとおりです:

フロントエンドを知る必要はありません: Baidu 内では、ほとんどの amis ユーザーはこれまでにフロントエンド ページを作成したことがなく、JavaScript も知りませんが、専門的で複雑なページを作成することができます。バックエンド インターフェイスは、他のすべてのフロントエンド UI

ライブラリでは実行できないものです。

• フロントエンド テクノロジのアップデートの影響を受けません: Baidu 内で最も古いライブラリですamis ページは 6 年以上前に作成され、現在も使用されています。その年の Angular/Vue/React バージョンは現在廃止され、人気のある
Gulp## が使用されています。 # も
• Webpack に置き換えられます。これらのページが amis を使用していない場合、現在のメンテナンス コストは非常に高くなります。 は次の方法で完全に作成できます。ビジュアル ページ エディター ページ : 一般に、フロントエンド ビジュアル エディターは静的プロトタイプの作成にのみ使用できますが、amis ビジュアル エディターで作成されたページは直接オンライン ## にできます。 # プロジェクト リンク: github.com/baidu/amis
• 興味がある場合は、学習して参照することもできます。3 . H5-Dooring—H5 ページ構築アーティファクト (誰もが確実な方法でページを作成できます)

#H5-Dooring

は国内の大手テクノロジー企業によって開発されたプロレベルのビジュアル ローエンド システムです。H5 ページを作成するコード プロジェクトは、ブロックを構成するのと同じくらい簡単です。H5 ページ、H5 Web サイト、PC Web サイト、

LowCode プラットフォームを簡単に構築できます。 ##同時エディタ

は複数の言語をサポート

、スマート グリッド レイアウトやフリー レイアウトなどのさまざまなレンダリング モードをサポートしています。技術者以外の人でも使用するのに非常に適しています。所要時間は 10 分です。美しいページを構築するための技術的なアーキテクチャは次のとおりです:

H5-Dooring で視覚的に構築したページはワンクリックでオンラインにでき、 ページ コードのダウンロードをサポートしていることは注目に値します , そのため、テクノロジーを理解していない人でもページを自分のサーバーに簡単にデプロイできます。これは、技術に詳しくない人にとっては単純にありがたいことです。プラットフォームは、より良いユーザー エクスペリエンスを作成するために引き続き反復されています。

プロジェクトリンク : github.com/MrXijiang/h…

4. mometa - 研究開発向けのローコード メタプログラミング エディタ

mometa は従来の主流のローコード プラットフォーム (amis/h5-dooring など) ではなく、mometa は研究開発指向のコードビジュアル設計であり、編集プラットフォーム。dreamweaver、gui のような、プログラマーにとってのビジュアル編集です。

これを使用して解決できる問題は次のとおりです。

• ローコード プラットフォームに依存せず、二次開発はシームレスにコード開発モードに入ることができます
• すべてを同時にサポート WYSIWYG ビジュアル編集を使用して効率と開発エクスペリエンスを向上
# マテリアル エコロジー、カスタマイズ可能なマテリアルを提供し、マテリアルの使用エクスペリエンスを向上させ、再利用率を向上させます
• # #mometa

この位置付けはプログラマーのローカル開発モデルに基づいており、ビジュアル コーディングの機能が追加されています (ローカル コード ファイル自体も変更されます)。 これは、

No-Code (amis/h5-dooring) プラットフォーム ソリューションというよりは、補助的なコーディング ツールに似ています。プロジェクト リンク: github.com/imcuttle/mo…

その他の機能紹介:

5. V6.Dooring—ビジュアル大画面制作ツール

データ視覚化と言えば、誰もが何らかの形でそれに触れたことがあるはずです。技術的な観点から見ると、最も直感的なのは、次のようなフロントエンド視覚化フレームワークです。

echart

antv
• Chart.js
• D3.js
• Vega
• これらのライブラリは、視覚的なグラフを簡単に作成するのに役立ちます。
V6.Dooring

は、ドラッグ アンド ドロップによってさまざまなビジュアル チャートを大きなデジタル画面に統合できる設計ソリューションを提供し、開発コストとサイクルを大幅に削減し、企業のデジタル トランスフォーメーションを加速します。 :

製品の使いやすさを実現するために、V6.Dooring

は次のコア モジュールを設計しました:

ドラッグ アンド ドロップの実装

マテリアル センターの設計
• ダイナミック レンダラーの実装
• 構成パネルの設計
• コントロール センター
• function Assisted Design
• そのエディターは次のとおりです:

V6.Dooring

も開発されていることは注目に値します。

H5-Dooring 著者が研究開発を主導しましたので、興味があれば研究してみてください。6. form-generator—要素 UI フォームのデザインとコード ジェネレーター

要素 UI

フォーム デザインおよびコード ジェネレーター。## に基づいて、生成されたコードを

vue 上で直接実行できます。 #Element プロジェクト; JSON フォームをエクスポートし、サポートするパーサーを使用して JSON を実際のフォームに解析することもできます。 これは Formily に似ていると思います。どちらも技術面の構築プロジェクトです。

プロジェクト リンク: github.com/JakHuang/fo…

概要

今日の共有はこれで終わりです。将来的には、価値の高い使用プロジェクトと技術的な実用的な共有を継続して行っていきます。良い提案、フィードバックもいつでも歓迎します。 (学習ビデオの共有:

基本プログラミング ビデオ

)

以上がGitHub プロジェクト共有: 6 つの非常に貴重なビジュアル構築オープンソース プロジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。