Web フロントエンド フレームワークには、1. 単一のアプリケーション インターフェイスを作成するためのフロントエンド フレームワークである Angular、2. ユーザー インターフェイスを構築するための JavaScript 開発フレームワークである React、3. A のセットである vue が含まれます。ユーザー インターフェイスを構築するためのプログレッシブ JavaScript フレームワーク、4. Bootstartp、HTML、CSS、JavaScript に基づくフロントエンド フレームワーク、5. QUICK UI、エンタープライズ レベルの Web フロントエンド開発ソリューションのセット、6. SUI、フロントエンド-コンポーネントライブラリを終了します。
このチュートリアルの動作環境: Windows 7 システム、Dell G3 コンピューター。
「クライアント」とも呼ばれる Web フロントエンドは、ユーザーが見て体験できる Web サイトの視覚的な側面、つまり、ユーザーが見るすべてのものと Web ブラウザーが表示するものを指します。ユーザーが見ることができるもの、ユーザーが触れたり体験したりするすべてのもの、つまり、Web フロントエンドには、Web ページの構造、Web の外観、Web レベルでのインタラクションの実装が含まれます。
Web フロントエンド フレームワークとは
1. Angular
AngularJS が開発されていますMisko Hevery 他著 2009 年に設立され、後に Google に買収されました。多くの製品で使用されている優れたフロントエンド JS フレームワークです。これは、高度なコンセプトを備えたフロントエンド開発フレームワークであるだけでなく、エンドツーエンドのソリューションでもあります。これは、アーキテクチャ設計における MVC パターンに従い、データと論理処理コンポーネントの疎結合を提唱します。 AngularJSは命令技術によりHTMLの自然な拡張を実現し、コンパイル技術によりデータモデルと表示ビューの双方向の自動同期を実現し、複雑なDOM操作を軽減します。さらに、フロントエンドの自動テストテクノロジの優れたサポートも提供します。
Angular は、単一のアプリケーション インターフェイスを作成するためのフロントエンド フレームワークであり、データ バインディング、サービス、ディレクティブ、依存関係の注入などの多くのコア機能を備えています。強力なモジュール機能とカスタム コマンドの利点を備えています
#特徴:
#1. 優れたアプリケーション構造- #2. 双方向データ バインディング
-
3. 手順
-
4.HTML テンプレート
-
#5. 埋め込み、挿入、テストが可能
##利点:
##1. テンプレート機能強力で豊富な、非常に豊富な角度命令セットが付属しています。
2. これは、サービス、テンプレート、双方向データ バインディング、モジュール化、ルーティング、フィルター、依存関係注入、その他の機能を含む、比較的完全なフロントエンド フレームワークです。 -
3. 命令をカスタマイズする 命令をカスタマイズした後は、プロジェクト内で複数回使用できます。
-
4.ng のモジュール性は、アジャイル開発チームにとって、再利用可能なコードを簡単に記述できる Java の要素 (依存関係の注入) を大胆に導入しています。非常に役立ちます。
-
5.angularjs はインターネット大手の Google によって開発されており、これは強固な基盤とコミュニティ サポートがあることも意味します。
1. Angular は簡単に始めることができますが、使い始めると多くの概念が必要になります。奥が深く、学習中に理解するのが難しいです。
2. ドキュメントの例が非常に少ないです。公式ドキュメントは基本的に API についてのみ説明しており、例はありません。多くの場合、具体的な使用方法は Google から提供されるか、直接提供されます。 Angular著者のMisko氏は尋ねます。
-
3. IE6/7 との互換性はあまり良くありませんが、jQuery を使用して独自のコードを記述し、いくつかの問題を解決できます。
-
4. 命令の適用に関するベスト プラクティス チュートリアルはほとんどありません。Angular は実際には非常に柔軟です。一部の作成者の使用原則に従わない場合でも、簡単に作成できます。 js や js などのさまざまなコード jQuery のように考えると、多くの dom 操作があります。
-
5.DI 依存関係の注入では、コード圧縮が必要な場合は明示的に宣言する必要があります。
- #2. React
React は Facebook によって制作され、正式バージョンは 2013 年にリリースされました。 angular 4 年かかりましたが、革新的な VirtualDOM のおかげで、パフォーマンスの点で angularJS を上回り、リリースされると非常に人気になりました。 VirtualDOM、JSX、Diff アルゴリズムなど多くの機能を備え、ES6 構文をサポートし、関数型プログラミングを使用するため、敷居は若干高くなりますが、柔軟性が高く、開発の可能性が広がります。
特徴
1. 宣言型設計: React は、アプリケーションを簡単に記述できる宣言型パラダイムを採用しています。
2. 効率: React は DOM をシミュレートすることで、DOM との対話を最小限に抑えます。
-
3. 柔軟性: React は既知のライブラリやフレームワークとうまく連携します。
1. 高速: UI レンダリング プロセス中に、React は実装するマイクロオペレーションを渡します。実際の DOM に対するローカル更新。
2. クロスブラウザーの互換性: 仮想 DOM は、クロスブラウザーの問題の解決に役立ち、IE8 でも問題ない標準化された API を提供します。
3、Vue
Vue は、(2014 年に) リリースされた最後のフレームワークとして、前任者の angular と反応機能 (VirtualDOM、双方向データ バインディング、差分アルゴリズム、応答性属性、コンポーネント開発など) および関連する最適化が行われ、より使いやすく、使い始めやすくなり、初心者にはあまり適していません。
機能:
1. 軽量フレームワーク
2. 双方向データ バインディング 定義済み
3. コマンド
4. プラグイン
利点:
#1. シンプル: 公式ドキュメントは非常に明確で、Angular よりも学びやすいです。
2. 高速: 非同期バッチ処理で DOM を更新します。
3. 構成: 分離された再利用可能なコンポーネントを使用してアプリケーションを構成します。
4. コンパクト: ~18kbmin gzip、依存関係なし。
5. 強力: 式では、依存する推定可能なプロパティ (computedproperties) を宣言する必要がありません。
6. モジュールに優しい: NPM、Bower、または Duo を通じてインストールできます。すべてのコードが Angular のさまざまな規制に従うことを強制されるわけではなく、使用シナリオはより柔軟です。
欠点:
4. Bootstartp
Bootstrap は、HTML、CSS、JavaScript をベースにした Twitter のオープンソース フロントエンド フレームワークです。 。これは、Web アプリケーションの迅速な開発のために設計されたフロントエンド ツールキットです。 V3 バージョン以降はレスポンシブ レイアウトをサポートし、モバイル デバイスの優先順位に準拠します。
Bootstrap は、動的 CSS 言語 Less で記述されたエレガントな HTML および CSS 仕様を提供します。 Bootstrap は発売以来非常に人気があり、NASA の MSNBC (Microsoft National Broadcasting Company) Breaking News など、GitHub 上の人気のオープンソース プロジェクトとなっています。 WeX5 フロントエンド オープン ソース フレームワークなど、国内のモバイル開発者に馴染みのある一部のフレームワークも、Bootstrap ソース コードに基づいてパフォーマンスが最適化されています。
正式アドレス: https://getbootstrap.com
中国語アドレス: http://www.bootcss.com/
Bootstrap の機能
Bootstrap は、その非常に便利な機能により非常に人気があります。主なコア機能は次のとおりです。
1) クロスデバイスおよびクロスブラウザ
批判されている IE7 および 8 を含む、すべての最新のブラウザと互換性があります。もちろん、このコースでは IE9 より前のブラウザは考慮されません。
2) レスポンシブレイアウト
PC側で様々な解像度の表示に対応するだけでなく、モバイルPADや携帯電話などの画面のレスポンシブな切り替え表示にも対応します。
3) 提供される包括的なコンポーネント
Bootstrap は、ナビゲーション、ラベル、ツールバー、ボタン、開発者が呼び出すのに便利な一連のコンポーネントなど、非常に実用的なコンポーネントを提供します。
4) 組み込みの jQuery プラグイン
Bootstrap は、開発者が Web 上でさまざまな一般的な特殊効果を実装することを容易にする、実用的な jQuery プラグインを多数提供します。
5) HTML5、CSS3
HTML5 のセマンティック タグと CSS3 属性のサポートが十分にサポートされています。
6) LESS 動的スタイルのサポート
LESS は、変数、ネスト、操作混合コーディングを使用して、より高速で柔軟な CSS を記述します。 Bootstrapでうまく開発できます。
5. QUICK UI
QUICK UI は、基本的なフレームワークで構成される、エンタープライズ レベルの Web フロントエンド開発ソリューションの完全なセットです。 , UI コンポーネント ライブラリ。スキン パッケージ、サンプル プロジェクト、ドキュメントで構成されます。 QUICKUI を使用する開発者は、作業負荷を大幅に軽減し、開発効率を向上させ、強力で美しく、互換性のある Web アプリケーション システムを迅速に構築できます。
6. MDC Web
Web 用マテリアル コンポーネント (MDC Web)、Google が Web 用に設計した新しいフロントエンド フレームワーク。 MDC Web は開発者によるマテリアル デザインの実装を支援し、コンポーネントは Google のエンジニアと UX デザイナーのコア チームによって開発されます。これらのコンポーネントにより、信頼性の高い開発ワークフローが可能になり、美しく機能的な Web プロジェクトを構築できます。
7、純粋な
Bootstrap、Patternfly、MDC Web は非常に強力な CSS フレームワークですが、非常に面倒で複雑です。軽量の CSS フレームワークが必要な場合は、Pure.css を試すことをお勧めします。これは CSS プログラミングに近いですが、優れた Web ページの構築にも役立ちます。 Pure は、最小限のフットプリントを備えた軽量の CSS フレームワークで、Yahoo によって開発され、BSD ライセンスの下でオープンソースです。
8. Foundation
Foundation は、世界で最も先進的なレスポンシブ フロントエンド フレームワークであると主張しています。プロフェッショナルな Web サイトを構築するための高度な機能とチュートリアルを提供します。このフレームワークは多くの企業や組織で使用されており、広範なドキュメントが利用可能です。
9. Bulma
Flexbox に基づく Bulma のオープン ソース フレームワークは、MIT ライセンスの下でオープン ソースです。 CSS ファイルを 1 つだけ必要とする非常に軽量なフレームワーク。 Bulma には簡潔で明確なドキュメントがあり、必要なテーマを簡単に選択できます。デザインで使用できる Web コンポーネントも多数あります。
10. スケルトン
軽量フレームワークのスケルトン。スケルトン ライブラリの長さはわずか約 400 行で、フレームワークはいくつかの基本的な CSS フレームワーク コンポーネントのみを提供します。 Skeleton は、すぐに使い始めるのに役立つ詳細なドキュメントを引き続き提供します。
11. Materialize
Materialize は、マテリアル デザイン スタイルに基づいた最新の応答性の高いフロントエンド フレームワークで、最も困難な作業を解決します。カスタム コンポーネントを結合すると、デフォルトのスタイルが提供されます。 Materialise のドキュメント ページは非常に包括的で、理解しやすいものです。そのコンポーネント ページには、ボタン、カード、ナビゲーションなどが含まれます。
12. Boot flat
Boot flat は、Twitter の Bootstrap から派生したオープンソースの CSS フレームワークです。 Boot flat は Bootstrap よりもシンプルで軽量です。文字がほとんどない画像がほとんどです。
13. PatternFly
PatternFly は Red Hat のオープンソース CSS フレームワークで、Bootstrap とは異なり、美しい Web サイトを作成したい人向けです。 PatternFly は開発者向けに設計されており、棒グラフ、チャート、ナビゲーションなどのコンポーネントを提供するエンタープライズ アプリケーション開発者を主な対象としています。実際、Red Hat は OpenShift を作成するためにこれを使用しました。 PatternFly は、静的 HTML に加えて、Facebook によって開発された人気のある JavaScript フレームワークである ReactJS フレームワークもサポートしています。 PatternFly には、エンタープライズ レベルのアプリケーションに適した棒グラフ、チャート、パターン、レイアウトなどの高度なコンポーネントが多数含まれています。
14. flex
Flex はまだ開発段階にあり、正式な Apache プロジェクトではありません。Flex4.8 は正式なものではありません。 Apache プロジェクトのいずれかのバージョン。 、このバージョンは Flex の新時代の始まりを示しており、Flex の将来は 1 つの企業ではなくコミュニティによって推進されることになります。開発者は、バグの修正や機能の追加など、コードを提供することで Flex の改善に貢献できます。
上記は、Xiaoqian が共有する Web フロントエンド開発で一般的に使用されるフレームワークの一部です。プログラマーは、ビジネス ニーズに基づいて、シンプルで直感的かつ強力なフロントエンド開発フレームワークを選択し、作業を迅速かつ簡単にし、開発効率を向上させることができます。
15. SUI
「SUI はブートストラップに基づいて開発されたフロントエンド コンポーネント ライブラリであり、一連の設計仕様でもあります。 SUI を使用すると、美しいページをデザインして実装するのが非常に便利になります。」確かに、退屈な公式広告を直接引用した方が自分の脳細胞を節約できます (囧...) もちろん、広告にあるように、以前に Bootstrap を使用したことがある場合は、簡単に SUI に切り替えることができます。タオバオがフロントエンドの敗者に与えるものである。 。
Github: https://github.com/sdc-alibaba/suit
公式ウェブサイト: http://suit.taabao.org/suit/docs/index.html
(学習ビデオ共有: Web フロントエンド )
以上がWeb フロントエンドにはどのようなフレームワークがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
