あなたがフロントエンド開発者であれば、HTML、CSS、JavaScript はマスターしなければならない 3 つの重要な基本スキルです。もちろん、それを使いこなすには非常に熟練した技術も必要です。学ぶための最良の方法は、現在注目のオープンソース プロジェクトを理解することです。この記事では、より多くの開発者が学習を拡大できるよう、中国で最も高い評価と 100 を超えるコレクションを持つフロントエンド テクノロジのオープンソース プロジェクトを取り上げます。
1. ミニマリストのモジュラー フロントエンド UI フレームワーク Layui
評価: 9.3; コレクション数: 873
認可契約: MIT
開発言語: JavaScript、HTML/CSS
オペレーティング システム: クロスプラットフォーム
コードアドレス: https://gitee.com/sentsin/layui
Layui は、独自のモジュール仕様で書かれたセンチメンタルなフロントエンド UI フレームワークであり、ネイティブ HTML/CSS/JS の記述形式と構成形式に従います。非常に低く、すぐに使用できます。外観はシンプルですが、内部は充実しており、コア コードから API に至るまですべての詳細が注意深く作成されており、迅速なインターフェイス開発に非常に適しています。 Layui の最初のバージョンは、2016 年の黄金の秋にリリースされました。Layui は、MVVM の最下位層に基づいた UI フレームワークとは異なりますが、方向性に反することなく、自然に戻ることを信じています。正確に言うと、サーバー側プログラマ向けにカスタマイズされており、さまざまなフロントエンド ツールの複雑な設定に関与する必要はなく、ブラウザ自体とすべての要素および操作に取り組むだけで済みます。必要なものがすぐに見つかります。
2. JavaScript チャート ライブラリ ECharts
評価: 8.9; コレクション: 2448
ライセンス契約: BSD
開発言語: JavaScript
オペレーティング システム: クロスプラットフォーム
ソース コード アドレス: https:// gitee .com/echarts/echarts
ECharts は、Baidu のフロントエンド技術部門によって開発された Javascript ベースのデータ視覚化チャート ライブラリであり、直観的で鮮やか、インタラクティブでカスタマイズ可能なデータ視覚化チャートを提供します。下部レイヤーは ZRender (新しい軽量キャンバス クラス ライブラリ) に基づいており、座標系、凡例、プロンプト、ツールボックス、その他の基本コンポーネントを作成し、折れ線グラフ (面グラフ) を構築します。ヒストグラム (棒グラフ)、散布図 (バブル チャート)、円グラフ (ドーナツ チャート)、K ライン チャート、マップ、力指向のレイアウト チャート、およびコード チャートの組み合わせもサポートしています。複数のチャートの表示。
3. 国内のクロススクリーンレスポンシブフロントエンドフレームワークパズル Pintuer
評価: 8.7、コレクション: 220
認可契約: Apache
開発言語: JavaScript、HTML/CSS
オペレーティングシステム: クロスプラットフォーム
ソースコードアドレス: https://gitee.com/pintuer/pintuer
Puzzle Pintuer.com: 国内の優れた HTML、CSS、JS クロススクリーン応答型のオープンソース フロントエンド フレームワークで、最新のブラウザー技術を使用して、迅速なフロントエンド開発 テキスト、アイコン、メディア、テーブル、フォーム、ボタン、メニュー、グリッド システムなどのスタイル ツールキットのシステム。ジグソーを使用して、シンプルでエレガントなフロントエンドを迅速に構築します。このインターフェイスにより、携帯電話、タブレット、デスクトップ コンピューター、その他のデバイスに自動的に適応し、ゲームをプレイするのと同じくらい楽しく簡単にフロントエンド開発を行うことができます。
Jigsaw フロントエンド フレームワークは、従来の CSS フレームワークに基づいて、HTML5、CSS3、JS およびその他のテクノロジーを組み合わせたアプリケーションを追加し、最新のブラウザー テクノロジーに適用され、古いブラウザーと新しいブラウザーを組み合わせます。開発者はフレームワークファイルをプロジェクトに導入するだけで迅速な共同開発が可能となり、PCサイトとモバイルサイトを同時に構築するというこれまでの状況を一変させ、あらゆるデバイスへのワンストップ対応を実現し、大幅な改善を実現しました。開発効率。
4. 軽量マテリアルデザインフロントエンドフレームワーク MDUI
評価: 8.6、コレクション: 215
ライセンス契約: MIT
開発言語: JavaScript、HTML/CSS
オペレーティングシステム: クロスプラットフォーム
ソースコードのアドレス: https://github.com/zdhxiong/mdui
MDUI は、マテリアル デザインの軽量フロントエンド フレームワークであり、マテリアル デザインのドキュメントに従って開発され、マテリアルのコンポーネントの 1:1 実装を実現するよう努めています。デザイン。
複数のテーマのサポート: MDUI には 19 のメインカラー、16 のアクセントカラー、および夜のテーマがあります。 CSS クラスを追加するだけでテーマを切り替えることができます。
軽量: すべてのテーマを含む CSS ファイルはわずか 26.4 KB の縮小 + gzip、JavaScript ファイルはわずか 12 KB の縮小 + gzip で、依存関係はありません。
レスポンシブ: モバイルファーストで、すべての画面に適応します。
5. Win10 スタイルのフロントエンド応答性 UI フレームワーク Win10-UI
評価: 8.5、コレクション: 170
ライセンス契約: SATA
開発言語: JavaScript、HTML/CSS
オペレーティング システム: クロスプラットフォーム
ソースコードアドレス: https://github.com/yuri2peter/win10-ui
Win10-UI は、win10 スタイルのバックグラウンド UI フレームワークです。デスクトップ アイコン、ウィンドウ サブページ管理、スタート メニュー、動的タイル、その他のコンポーネントを含む、Win10 デスクトップ要素を豊富に使用しています。主流の最新ブラウザやモバイル画面サイズと互換性があり、フロントエンド インターフェイスの迅速な開発に適しています。バックエンド管理システム。
Win10-UI は、従来の UI フレームワークのレンダリング設計を採用しており、複雑な JS コードを順不同で記憶し、HTML 構造を適用するだけでデスクトップ要素を簡単にレンダリングできます。同時に、アクティブに呼び出される API も保持されるため、上級開発者は UI の詳細を定義できます。あまり多くの「ルール」を定義する必要はありません。css と js を使用して完全に機能を拡張し、独自のバックエンド UI にすることができます。
6.ノードターミナルインターフェースライブラリblessed-contrib
評価: 8.5; コレクション: 125
認可契約: MIT
開発言語: JavaScript
オペレーティングシステム: クロスプラットフォーム
ソースコードアドレス: https : //github.com/yaronn/blessed-contrib
blessed-contrib は、Node.js を使用してターミナル アプリケーション インターフェイスを構築するためのライブラリです。
7. ORY Editor、React と Redux に基づく最新のコンテンツエディタ
評価: 8.3; コレクション: 109
ライセンス契約: AGPL
開発言語: JavaScript
オペレーティング システム: クロスプラットフォーム
ソースコードアドレス: https://github.com/ory/editor
ORY は、開発者ツールを構築および保守する会社です。ORY Editor は、React を使用して書かれた、スマートでスケーラブルな最新の Web エディター (「WYSIWYG」) です。 。 contenteditable の制限にうんざりしている場合は、これが良い選択となるでしょう。
ORY Editor は、Squarespace と同様に Web サイトの作成に使用できますが、オフラインで動作し、ORY Editor で作成されたサイトはデバイスに保存され、独自のデザインやプラグインを作成できます。
8. モバイルアプリケーションアニメーションエフェクトフレームワーク Lottie
評価: 8.3; コレクション: 317
ライセンス契約: Apache
開発言語: Java、Objective-C、JavaScript
オペレーティングシステム: Android
ソースコードアドレス:
Android: https://github.com/airbnb/lottie-android
iOS: https://github.com/airbnb/lottie-ios
React Native: https://github.com/airbnb /lottie-react-native
Lottie は、Airbnb によって開発されたオープンソース ツールで、ネイティブ アプリケーションにアニメーション効果を追加できます。 Lottie は現在、After Effects アニメーション特殊効果をリアルタイムでレンダリングできる iOS、Android、および React Native バージョンを提供しています。
現在、Lottie はパスのトリミング、マスキング、カバーなどの操作をサポートしています。頻繁に使用される項目の読み込みを高速化するためのオプションのキャッシュ メカニズムもあります。このアプリの目標は、開発者やアニメーターがアプリのアニメーションをより簡単に作成できるようにし、それによって全体的なインタラクティブ性の要素を向上させることです。
9. Insdepテーマのテーマ最適化パッケージJQuery EasyUI 1.5.x
コレクション数: 101
ライセンス契約: GPL
開発言語: JavaScript
オペレーティングシステム: クロスプラットフォーム
ソースコードアドレス: https://gitee.com/weavors/JQuery-EasyUI-1.5.x-Of-Insdep-Theme
Insdep テーマは、Baidu エディターとクロッパーを備えた EasyUI 1.5.x に基づく無料の美化テーマ パッケージです、Highcharts、justgage、plupload、およびこのテーマに適合したその他のサードパーティのプラグイン美化パッチ。また、一般的に使用されるさまざまな Jquery プラグインが美化されています。将来的には、スタイルを美しくするために、より多くのテーマ、コンポーネント、サードパーティのプラグインが提供される予定です。
10. Neditor、Ueditor に基づく最新のリッチ テキスト エディタ
評価: 8.3; コレクション: 503
認可契約: MIT
開発言語: JavaScript
オペレーティング システム: クロスプラットフォーム
アドレス: https://gitee.com/notadd/neditor
Baidu フロントエンド チームは多大な努力を重ね、現在、Ueditor は最も便利な中国語リッチ テキスト エディターとして認められています。しかし、時間が経つにつれて、百度編集者はそれほど美しくないと誰もが感じます。そこで、Ueditor を修正して、現在の Neditor を入手しました。
11. Vue.js に基づく UI コンポーネント ライブラリ iView
評価: 8.3; コレクション: 475
認可契約: MIT
開発言語: HTML/CSS
オペレーティング システム: クロスプラットフォーム
コードアドレス: https://gitee.com/icarusion/iview
iView は、主に PC インターフェイスのミドルエンド製品とバックエンド製品を提供する、Vue.js に基づく UI コンポーネント ライブラリのセットです。
特徴
高品質、機能豊富
フレンドリーなAPI、自由で柔軟なスペースの使用
単一ファイルのVueコンポーネント開発モデルを使用
npm + webpack + babelに基づいて開発され、ES2015をサポート
12 .Vue 2.0 コンポーネント ライブラリに基づく Element
評価: 8.2; コレクション数: 609
認可契約: MIT
開発言語: JavaScript
オペレーティング システム: クロスプラットフォーム
ソース コード アドレス: https:/ /github.com/ElemeFE/element
Element は、開発者、デザイナー、プロダクト マネージャー向けに用意された Vue 2.0 ベースのコンポーネント ライブラリであり、Web サイトを迅速に形にするためのサポート設計リソースを提供します。 Ele.me のフロントエンド チームによってオープンソース化されています。
13.HTML5 クロススクリーン フロントエンド フレームワーク Amaze UI
評価: 8.1; コレクション: 1213
認可契約: MIT
開発言語: JavaScript、HTML/CSS
オペレーティング システム: クロスプラットフォーム
ソースコードアドレス: https://gitee.com/amazeui/amazeui
Amaze UI は、最先端の国際的な「コンポーネントベース開発」と「モバイルファースト」の設計コンセプトを採用しており、開発者はその豊富なコンポーネントに基づいて、発売からわずか半年で HTML5 Web アプリケーションを迅速に構築できます。 Amaze UI 中国で最も人気のあるフロントエンド フレームワークとなり、現在 Github に 10,000 近くのスターがあり、世界中の 500,000 人の開発者にサービスを提供しています。
14. WeUI、WeChat用に特別に設計されたUIライブラリ
評価: 7.7; コレクション: 2002
ライセンス契約: MIT
開発言語: JavaScript、HTML/CSS
オペレーティングシステム: クロスプラットフォーム
WeUI は、WeChat モバイル Web アプリケーション専用に WeChat の公式デザイン チームによって設計された UI ライブラリです。
WeUI は、WeChat のネイティブなビジュアル エクスペリエンスと一致する基本的なスタイル ライブラリであり、WeChat Web 開発向けにカスタマイズされており、ユーザーの使用認識をより統一できます。ボタン、セル、ダイアログ、トースト、記事、アイコンなどのさまざまな要素が含まれています。
15. ダッシュボード WebApp テンプレート AdminLTE
評価: 7.6; コレクション: 136
ライセンス契約: MIT
開発言語: JavaScript、HTML/CSS
オペレーティング システム: クロスプラットフォーム
住所: https://github.com/almasaeed2010/AdminLTE/
AdminLTE は、管理ダッシュボードおよびコントロール パネル用の人気のあるオープンソース WebApp テンプレートです。これは、レスポンシブ HTML テンプレートである Bootstrap 3 に基づく CSS フレームワークです。すべての Bootstrap コンポーネントを活用して、使用されるほとんどのプラグインを設計およびスタイル設定し、バックエンド アプリケーションとして使用できる一貫したユーザー インターフェイス デザインを作成します。 AdminLTE はモジュール設計に基づいており、その上で簡単にカスタマイズしたり作り直したりできます。
16. Web オンライン展開システム ツール Walle
評価: 7.4; コレクション: 359
認可契約: MIT
開発言語: PHP、HTML/CSS
オペレーティング システム: クロスプラットフォーム
シンプルな構成、充実した機能、スムーズなインターフェースを備え、すぐに使える Web デプロイメント システム ツールです。 git および svn のバージョン管理をサポートし、さまざまな Web コードのリリースをサポートし、PHP、Python、JAVA などのコードのリリースとロールバックを Web 経由でワンクリックで完了できます。
17. ウェブサイト管理バックエンドテンプレート Charisma
評価: 7.4; コレクション数: 1055
ライセンス契約: Apache
開発言語: HTML/CSS
オペレーティングシステム: クロスプラットフォーム
Twitter Bootstrap で作成されたレスポンシブな Web サイト管理の背景テンプレートには、9 セットの美しいテーマが含まれています。 18.オープンソースのカンバン管理システムLibreboard
レーティング：7.4;ライセンス契約：MIT開発言語：JavaScript、HTML/CSS
オペレーティングシステム：クロスプラットフォームa カードベースの組織であるカンバンのオープンソース実装。 LibreBoard は、Trello のオープンソース バージョンと考えることができます。 LibreBoard は、Sandstorm プラットフォーム用のワンクリック インストールと検証済みの Docker イメージを提供します。
上記の内容は、フロントエンド開発に関する国内の人気オープンソースプロジェクト18件を簡単に紹介したものであり、皆様のお役に立てれば幸いです。
関連する推奨事項:
Microsoft オープンソース プロジェクト Web サイトの紹介 - CodePlex
優れた PHP オープン ソース プロジェクトのコレクション
PHP オープン ソース プロジェクトの概要
以上が国内の上位 18 の HTML、CSS、JavaScript オープンソース プロジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
