検索
ホームページ開発ツールGitGitHub プロジェクト共有: 6 つの非常に貴重なビジュアル構築オープンソース プロジェクト

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

webpackreact/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 は研究開発指向のコードビジュアル設計であり、編集プラットフォーム。dreamweavergui のような、プログラマーにとってのビジュアル編集です。

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

  • ローコード プラットフォームに依存せず、二次開発はシームレスにコード開発モードに入ることができます
  • すべてを同時にサポート 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 サイトの他の関連記事を参照してください。

声明
この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助!

实战:vscode中开发一个支持vue文件跳转到定义的插件实战:vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PM

vscode自身是支持vue文件组件跳转到定义的,但是支持的力度是非常弱的。我们在vue-cli的配置的下,可以写很多灵活的用法,这样可以提升我们的生产效率。但是正是这些灵活的写法,导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法,提高工作效率,所以写了一个vscode支持vue文件跳转到定义的插件。

5个常见的JavaScript内存错误5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AM

JavaScript 不提供任何内存管理操作。相反,内存由 JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集。

Node.js 19正式发布,聊聊它的 6 大特性!Node.js 19正式发布,聊聊它的 6 大特性!Nov 16, 2022 pm 08:34 PM

Node 19已正式发布,下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性,希望对大家有所帮助!

浅析Vue3动态组件怎么进行异常处理浅析Vue3动态组件怎么进行异常处理Dec 02, 2022 pm 09:11 PM

Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,希望对大家有所帮助!

聊聊如何选择一个最好的Node.js Docker镜像?聊聊如何选择一个最好的Node.js Docker镜像?Dec 13, 2022 pm 08:00 PM

选择一个Node​的Docker镜像看起来像是一件小事,但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢?

聊聊Node.js中的 GC (垃圾回收)机制聊聊Node.js中的 GC (垃圾回收)机制Nov 29, 2022 pm 08:44 PM

Node.js 是如何做 GC (垃圾回收)的?下面本篇文章就来带大家了解一下。

【6大类】实用的前端处理文件的工具库,快来收藏吧!【6大类】实用的前端处理文件的工具库,快来收藏吧!Jul 15, 2022 pm 02:58 PM

本篇文章给大家整理和分享几个前端文件处理相关的实用工具库,共分成6大类一一介绍给大家,希望对大家有所帮助。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境