Web フロントエンド フレームワークには、1. 単一のアプリケーション インターフェイスを作成するためのフロントエンド フレームワークである Angular、2. ユーザー インターフェイスを構(gòu)築するための JavaScript 開(kāi)発フレームワークである React、3. A のセットである vue が含まれます。ユーザー インターフェイスを構(gòu)築するためのプログレッシブ JavaScript フレームワーク、4. Bootstartp、HTML、CSS、JavaScript に基づくフロントエンド フレームワーク、5. QUICK UI、エンタープライズ レベルの Web フロントエンド開(kāi)発ソリューションのセット、6. SUI、フロントエンド-コンポーネントライブラリを終了します。

このチュートリアルの動(dòng)作環(huán)境: Windows 7 システム、Dell G3 コンピューター。

「クライアント」とも呼ばれる Web フロントエンドは、ユーザーが見(jiàn)て體験できる Web サイトの視覚的な側(cè)面、つまり、ユーザーが見(jiàn)るすべてのものと Web ブラウザーが表示するものを指します。ユーザーが見(jiàn)ることができるもの、ユーザーが觸れたり體験したりするすべてのもの、つまり、Web フロントエンドには、Web ページの構(gòu)造、Web の外観、Web レベルでのインタラクションの実裝が含まれます。

Web フロントエンド フレームワークとは

1. Angular

AngularJS が開(kāi)発されていますMisko Hevery 他著 2009 年に設(shè)立され、後に Google に買(mǎi)収されました。多くの製品で使用されている優(yōu)れたフロントエンド JS フレームワークです。これは、高度なコンセプトを備えたフロントエンド開(kāi)発フレームワークであるだけでなく、エンドツーエンドのソリューションでもあります。これは、アーキテクチャ設(shè)計(jì)における MVC パターンに従い、データと論理処理コンポーネントの疎結(jié)合を提唱します。 AngularJSは命令技術(shù)によりHTMLの自然な拡張を?qū)g現(xiàn)し、コンパイル技術(shù)によりデータモデルと表示ビューの雙方向の自動(dòng)同期を?qū)g現(xiàn)し、複雑なDOM操作を軽減します。さらに、フロントエンドの自動(dòng)テストテクノロジの優(yōu)れたサポートも提供します。

Angular は、単一のアプリケーション インターフェイスを作成するためのフロントエンド フレームワークであり、データ バインディング、サービス、ディレクティブ、依存関係の注入などの多くのコア機(jī)能を備えています。強(qiáng)力なモジュール機(jī)能とカスタム コマンドの利點(diǎn)を備えています

#特徴:

#1. 優(yōu)れたアプリケーション構(gòu)造

• #2. 雙方向データ バインディング

• 3. 手順

• 4.HTML テンプレート

• #5. 埋め込み、挿入、テストが可能

• ##利點(diǎn):

##1. テンプレート機(jī)能強(qiáng)力で豊富な、非常に豊富な角度命令セットが付屬しています。

2. これは、サービス、テンプレート、雙方向データ バインディング、モジュール化、ルーティング、フィルター、依存関係注入、その他の機(jī)能を含む、比較的完全なフロントエンド フレームワークです。

• 3. 命令をカスタマイズする 命令をカスタマイズした後は、プロジェクト內(nèi)で複數(shù)回使用できます。

• 4.ng のモジュール性は、アジャイル開(kāi)発チームにとって、再利用可能なコードを簡(jiǎn)単に記述できる Java の要素 (依存関係の注入) を大膽に導(dǎo)入しています。非常に役立ちます。

• 5.angularjs はインターネット大手の Google によって開(kāi)発されており、これは強(qiáng)固な基盤(pán)とコミュニティ サポートがあることも意味します。
欠點(diǎn):

1. Angular は簡(jiǎn)単に始めることができますが、使い始めると多くの概念が必要になります。奧が深く、學(xué)習(xí)中に理解するのが難しいです。

2. ドキュメントの例が非常に少ないです。公式ドキュメントは基本的に API についてのみ説明しており、例はありません。多くの場(chǎng)合、具體的な使用方法は Google から提供されるか、直接提供されます。 Angular著者のMisko氏は尋ねます。

• 3. IE6/7 との互換性はあまり良くありませんが、jQuery を使用して獨(dú)自のコードを記述し、いくつかの問(wèn)題を解決できます。

• 4. 命令の適用に関するベスト プラクティス チュートリアルはほとんどありません。Angular は実際には非常に柔軟です。一部の作成者の使用原則に従わない場(chǎng)合でも、簡(jiǎn)単に作成できます。 js や js などのさまざまなコード jQuery のように考えると、多くの dom 操作があります。

• 5.DI 依存関係の注入では、コード圧縮が必要な場(chǎng)合は明示的に宣言する必要があります。
• #2. React

React は Facebook によって制作され、正式バージョンは 2013 年にリリースされました。 angular 4 年かかりましたが、革新的な VirtualDOM のおかげで、パフォーマンスの點(diǎn)で angularJS を上回り、リリースされると非常に人気になりました。 VirtualDOM、JSX、Diff アルゴリズムなど多くの機(jī)能を備え、ES6 構(gòu)文をサポートし、関數(shù)型プログラミングを使用するため、敷居は若干高くなりますが、柔軟性が高く、開(kāi)発の可能性が広がります。

特徴

1. 宣言型設(shè)計(jì): React は、アプリケーションを簡(jiǎn)単に記述できる宣言型パラダイムを採(cǎi)用しています。

2. 効率: React は DOM をシミュレートすることで、DOM との対話を最小限に抑えます。

• 3. 柔軟性: React は既知のライブラリやフレームワークとうまく連攜します。
利點(diǎn):

1. 高速: UI レンダリング プロセス中に、React は実裝するマイクロオペレーションを渡します。実際の DOM に対するローカル更新。

2. クロスブラウザーの互換性: 仮想 DOM は、クロスブラウザーの問(wèn)題の解決に役立ち、IE8 でも問(wèn)題ない標(biāo)準(zhǔn)化された API を提供します。

• 3. モジュール化: プログラム用に獨(dú)立したモジュール式 UI コンポーネントを作成して、1 つまたはいくつかのコンポーネントに問(wèn)題が発生したときに、それを簡(jiǎn)単に分離できるようにします。

• 4. 一方向データ フロー: Flux は、JavaScript アプリケーションで一方向データ レイヤーを作成するためのアーキテクチャです 5. 同型の純粋な JavaScript: 検索エンジン クローラーが依存しているため、サーバー側(cè)でサービスを提供するJavaScript を?qū)g行する代わりにアプリを事前レンダリングすると、SEO に役立ちます。 6. 優(yōu)れた互換性: たとえば、RequireJS は読み込みとパッケージ化に使用されますが、Browserify と Webpack は大規(guī)模なアプリケーションの構(gòu)築に適しています。これらの困難なタスクをそれほど困難にしないでください。欠點(diǎn): React 自體は単なる V であり、完全なフレームワークではないため、大規(guī)模なプロジェクト用の完全なフレームワークが必要な場(chǎng)合は、基本的に、大規(guī)模なアプリケーションを作成するために ReactRouter と Flux を追加する必要があります。

3、Vue

Vue は、(2014 年に) リリースされた最後のフレームワークとして、前任者の angular と反応機(jī)能 (VirtualDOM、雙方向データ バインディング、差分アルゴリズム、応答性屬性、コンポーネント開(kāi)発など) および関連する最適化が行われ、より使いやすく、使い始めやすくなり、初心者にはあまり適していません。

機(jī)能:

• 1. 軽量フレームワーク

• 2. 雙方向データ バインディング 定義済み

• 3. コマンド

• 4. プラグイン

利點(diǎn):

• #1. シンプル: 公式ドキュメントは非常に明確で、Angular よりも學(xué)びやすいです。

• 2. 高速: 非同期バッチ処理で DOM を更新します。

• 3. 構(gòu)成: 分離された再利用可能なコンポーネントを使用してアプリケーションを構(gòu)成します。

• 4. コンパクト: ~18kbmin gzip、依存関係なし。

• 5. 強(qiáng)力: 式では、依存する推定可能なプロパティ (computedproperties) を宣言する必要がありません。

• 6. モジュールに優(yōu)しい: NPM、Bower、または Duo を通じてインストールできます。すべてのコードが Angular のさまざまな規(guī)制に従うことを強(qiáng)制されるわけではなく、使用シナリオはより柔軟です。

欠點(diǎn):

• 1. 新生: Vue.js は新しいプロジェクトであり、 angular ほど成熟していません。

• 2. 影響はそれほど大きくありません。Google で調(diào)べたところ、Vue.js の多様性や豊富さは他の有名なライブラリに比べて劣っていることがわかりました。

• 3. IE8 はサポートされていません。

4. Bootstartp

Bootstrap は、HTML、CSS、JavaScript をベースにした Twitter のオープンソース フロントエンド フレームワークです。 。これは、Web アプリケーションの迅速な開(kāi)発のために設(shè)計(jì)されたフロントエンド ツールキットです。 V3 バージョン以降はレスポンシブ レイアウトをサポートし、モバイル デバイスの優(yōu)先順位に準(zhǔn)拠します。

Bootstrap は、動(dòng)的 CSS 言語(yǔ) Less で記述されたエレガントな HTML および CSS 仕様を提供します。 Bootstrap は発売以來(lái)非常に人気があり、NASA の MSNBC (Microsoft National Broadcasting Company) Breaking News など、GitHub 上の人気のオープンソース プロジェクトとなっています。 WeX5 フロントエンド オープン ソース フレームワークなど、國(guó)內(nèi)のモバイル開(kāi)発者に馴染みのある一部のフレームワークも、Bootstrap ソース コードに基づいてパフォーマンスが最適化されています。

正式アドレス: https://getbootstrap.com

中國(guó)語(yǔ)アドレス: http://www.bootcss.com/

Bootstrap の機(jī)能

Bootstrap は、その非常に便利な機(jī)能により非常に人気があります。主なコア機(jī)能は次のとおりです。

1) クロスデバイスおよびクロスブラウザ

批判されている IE7 および 8 を含む、すべての最新のブラウザと互換性があります。もちろん、このコースでは IE9 より前のブラウザは考慮されません。

2) レスポンシブレイアウト

PC側(cè)で様々な解像度の表示に対応するだけでなく、モバイルPADや攜帯電話などの畫(huà)面のレスポンシブな切り替え表示にも対応します。

3) 提供される包括的なコンポーネント

Bootstrap は、ナビゲーション、ラベル、ツールバー、ボタン、開(kāi)発者が呼び出すのに便利な一連のコンポーネントなど、非常に実用的なコンポーネントを提供します。

4) 組み込みの jQuery プラグイン

Bootstrap は、開(kāi)発者が Web 上でさまざまな一般的な特殊効果を?qū)g裝することを容易にする、実用的な jQuery プラグインを多數(shù)提供します。

5) HTML5、CSS3

HTML5 のセマンティック タグと CSS3 屬性のサポートが十分にサポートされています。

6) LESS 動(dòng)的スタイルのサポート

LESS は、変數(shù)、ネスト、操作混合コーディングを使用して、より高速で柔軟な CSS を記述します。 Bootstrapでうまく開(kāi)発できます。

5. QUICK UI

QUICK UI は、基本的なフレームワークで構(gòu)成される、エンタープライズ レベルの Web フロントエンド開(kāi)発ソリューションの完全なセットです。 , UI コンポーネント ライブラリ。スキン パッケージ、サンプル プロジェクト、ドキュメントで構(gòu)成されます。 QUICKUI を使用する開(kāi)発者は、作業(yè)負(fù)荷を大幅に軽減し、開(kāi)発効率を向上させ、強(qiáng)力で美しく、互換性のある Web アプリケーション システムを迅速に構(gòu)築できます。

6. MDC Web

Web 用マテリアル コンポーネント (MDC Web)、Google が Web 用に設(shè)計(jì)した新しいフロントエンド フレームワーク。 MDC Web は開(kāi)発者によるマテリアル デザインの実裝を支援し、コンポーネントは Google のエンジニアと UX デザイナーのコア チームによって開(kāi)発されます。これらのコンポーネントにより、信頼性の高い開(kāi)発ワークフローが可能になり、美しく機(jī)能的な Web プロジェクトを構(gòu)築できます。

7、純粋な

Bootstrap、Patternfly、MDC Web は非常に強(qiáng)力な CSS フレームワークですが、非常に面倒で複雑です。軽量の CSS フレームワークが必要な場(chǎng)合は、Pure.css を試すことをお?jiǎng)幛幛筏蓼?。これ?CSS プログラミングに近いですが、優(yōu)れた Web ページの構(gòu)築にも役立ちます。 Pure は、最小限のフットプリントを備えた軽量の CSS フレームワークで、Yahoo によって開(kāi)発され、BSD ライセンスの下でオープンソースです。

8. Foundation

Foundation は、世界で最も先進(jìn)的なレスポンシブ フロントエンド フレームワークであると主張しています。プロフェッショナルな Web サイトを構(gòu)築するための高度な機(jī)能とチュートリアルを提供します。このフレームワークは多くの企業(yè)や組織で使用されており、広範(fàn)なドキュメントが利用可能です。

9. Bulma

Flexbox に基づく Bulma のオープン ソース フレームワークは、MIT ライセンスの下でオープン ソースです。 CSS ファイルを 1 つだけ必要とする非常に軽量なフレームワーク。 Bulma には簡(jiǎn)潔で明確なドキュメントがあり、必要なテーマを簡(jiǎn)単に選択できます。デザインで使用できる Web コンポーネントも多數(shù)あります。

10. スケルトン

軽量フレームワークのスケルトン。スケルトン ライブラリの長(zhǎng)さはわずか約 400 行で、フレームワークはいくつかの基本的な CSS フレームワーク コンポーネントのみを提供します。 Skeleton は、すぐに使い始めるのに役立つ詳細(xì)なドキュメントを引き続き提供します。

11. Materialize

Materialize は、マテリアル デザイン スタイルに基づいた最新の応答性の高いフロントエンド フレームワークで、最も困難な作業(yè)を解決します。カスタム コンポーネントを結(jié)合すると、デフォルトのスタイルが提供されます。 Materialise のドキュメント ページは非常に包括的で、理解しやすいものです。そのコンポーネント ページには、ボタン、カード、ナビゲーションなどが含まれます。

12. Boot flat

Boot flat は、Twitter の Bootstrap から派生したオープンソースの CSS フレームワークです。 Boot flat は Bootstrap よりもシンプルで軽量です。文字がほとんどない畫(huà)像がほとんどです。

13. PatternFly

PatternFly は Red Hat のオープンソース CSS フレームワークで、Bootstrap とは異なり、美しい Web サイトを作成したい人向けです。 PatternFly は開(kāi)発者向けに設(shè)計(jì)されており、棒グラフ、チャート、ナビゲーションなどのコンポーネントを提供するエンタープライズ アプリケーション開(kāi)発者を主な対象としています。実際、Red Hat は OpenShift を作成するためにこれを使用しました。 PatternFly は、靜的 HTML に加えて、Facebook によって開(kāi)発された人気のある JavaScript フレームワークである ReactJS フレームワークもサポートしています。 PatternFly には、エンタープライズ レベルのアプリケーションに適した棒グラフ、チャート、パターン、レイアウトなどの高度なコンポーネントが多數(shù)含まれています。

14. flex

Flex はまだ開(kāi)発段階にあり、正式な Apache プロジェクトではありません。Flex4.8 は正式なものではありません。 Apache プロジェクトのいずれかのバージョン。 、このバージョンは Flex の新時(shí)代の始まりを示しており、Flex の將來(lái)は 1 つの企業(yè)ではなくコミュニティによって推進(jìn)されることになります。開(kāi)発者は、バグの修正や機(jī)能の追加など、コードを提供することで Flex の改善に貢獻(xiàn)できます。

上記は、Xiaoqian が共有する Web フロントエンド開(kāi)発で一般的に使用されるフレームワークの一部です。プログラマーは、ビジネス ニーズに基づいて、シンプルで直感的かつ強(qiáng)力なフロントエンド開(kāi)発フレームワークを選択し、作業(yè)を迅速かつ簡(jiǎn)単にし、開(kāi)発効率を向上させることができます。

15. SUI

「SUI はブートストラップに基づいて開(kāi)発されたフロントエンド コンポーネント ライブラリであり、一連の設(shè)計(jì)仕様でもあります。 SUI を使用すると、美しいページをデザインして実裝するのが非常に便利になります?！勾_かに、退屈な公式広告を直接引用した方が自分の脳細(xì)胞を節(jié)約できます (囧...) もちろん、広告にあるように、以前に Bootstrap を使用したことがある場(chǎng)合は、簡(jiǎn)単に SUI に切り替えることができます。タオバオがフロントエンドの敗者に與えるものである。 。

Github: https://github.com/sdc-alibaba/suit

公式ウェブサイト: http://suit.taabao.org/suit/docs/index.html

(學(xué)習(xí)ビデオ共有: Web フロントエンド )

以上がWeb フロントエンドにはどのようなフレームワークがありますか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。