実践的な Web フロントエンド JS および UI フレームワークの紹介

フロントエンド Js フレームワークの概要

概要:

インターネットの急速な発展の時代、テクノロジーの更新と反復の速度も加速しています。 Java、Js、Swiftが様々な分野で栄えているのを見ると羨ましく感じます。 .net core 1、mono、xamarin など、.net に関するニュースも刺激的ですが、そのほとんどはまだ盛り上がっている段階にあります。実際、テクノロジーに対する理解は常に、テクノロジーはビジネスと製品に貢献し、製品はさまざまな程度でテクノロジーの進化を促進するというものでした。

Web、ワイヤレス、IoT、VR、PCは、さまざまな方向から技術統合とマイクロイノベーションを推進しています。さまざまなビジネス シナリオにおけるプログラマーの役割は逆転します。 Node.js の登場により、言語の役割も変化しており、Js の役割はますます重要になっています。夕食後に学んだ知識も整理しました。 『Your Knowledge Needs Management』を読んで、乱雑で広範な知識の蓄えは、整理整頓された知識ほど有益ではないことを痛感しました。ですから、私たちは緊急事態に備えるために、時々戻ってきて知識を整理する必要があります。

1. フロントエンド フレームワーク ライブラリ:

1.Zepto.js

• アドレス: http://www.css88.com/doc/zeptojs/

• 説明: Zepto は軽量 最新の高度なブラウザ用のファーストクラスの JavaScript ライブラリであり、jquery と同様の API を備えています。 jquery を使用できる場合は、zepto も使用できます。私も Tencent の友人とのチャットを通じて Zepto について知りましたが、基本的な理解しかありませんでした。

2.SUI Mobile

• アドレス: http://m.suit.taabao.org

• 説明: SUI Mobile は、Framework7 に基づいて開発された UI ライブラリのセットです。非常に軽量で美しく、CDN ファイルを導入するだけで使用できます。iOS 6.0 以降および Android 4.0 以降と互換性があり、クロスプラットフォームの Web アプリの開発に非常に適しています。

• 用途: ワイヤレス側の Web アプリの開発に使用されていることもわかりました。

3.Node.Js

• アドレス: http://www.runoob.com/nodejs/nodejs-tutorial.html (中国語のウェブサイト)

• 説明: ノード。 js は Javascript の実行環境 (ランタイム) です。実際、これは Google V8 エンジンをカプセル化しています。 V8 エンジンは Javascript を非常に高速に実行し、非常に優れたパフォーマンスを発揮します。 Node.js は、いくつかの特殊な使用例を最適化し、ブラウザ以外の環境で V8 をより適切に実行できるようにする代替 API を提供します。

Node.js は Chrome JavaScript ランタイム上に構築されたプラットフォームで、応答速度が速く、拡張が容易な Web アプリケーションを簡単に構築するために使用されます。 Node.js はイベント駆動型のノンブロッキング I/O モデルを使用して軽量かつ効率的であるため、分散デバイス上でデータ集約型のリアルタイム アプリケーションを実行するのに最適です。

Node.jsは簡単に言えば、サーバーサイドで動作するJavaScriptです。

Node.js は Chrome JavaScript ランタイム上に構築されたプラットフォームです。

Node.js は、Google の V8 エンジンをベースにしたイベント駆動型の I/O サーバーサイド JavaScript 環境です。V8 エンジンは JavaScript を非常に高速に実行し、非常に優れたパフォーマンスを発揮します。

• 使用法:

1. RESTful API

これは、数万の接続を処理することができ、それ自体はリクエストするだけです。 API を作成し、返すデータを整理するだけです。基本的には、データベースからいくつかの値を検索し、それらを応答に組み立てるだけです。応答は少量のテキストであり、受信リクエストも少量のテキストであるため、トラフィックは高くならず、最も多忙な企業の API ニーズも 1 台のマシンで処理できます。

2. Web アプリケーションの UI 層を統合する

現在の MVC アーキテクチャでは、ある意味、Web 開発には 2 つの UI 層があり、1 つは最終的にブラウザーで表示されるもので、もう 1 つはサーバー側で責任を負います。ページの生成と結合。

このアーキテクチャが良いか悪いかについては議論しませんが、フロントエンドとバックエンドの依存関係をより適切に分離できる、サービス指向アーキテクチャという別のプラクティスもあります。すべての主要なビジネス ロジックが REST 呼び出しにカプセル化されている場合、上位層はこれらの REST インターフェイスを使用して特定のアプリケーションを構築する方法のみを考慮する必要があることを意味します。これらのバックエンド プログラマは、特定のデータがあるページから別のページにどのように渡されるかを気にしません。ユーザー データの更新が Ajax 経由で非同期的に取得されるか、ページの更新によって取得されるかは気にしません。

3. 大量の Ajax リクエストを含むアプリケーション

たとえば、パーソナライズされたアプリケーションでは、各ユーザーに異なるページが表示され、キャッシュが無効で、ページがロードされるときに Ajax リクエストを開始する必要があります。多数の同時リクエスト。つまり、NodeJS は、同時実行性が高く、I/O が集中し、ビジネス ロジックが少量であるシナリオでの使用に適しています。

4.angular.Js

• アドレス: http://www.runoob.com/angularjs/angularjs-tutorial.html (中国語のウェブサイト)

• 説明: AngularJS[1] は年に生まれました。 2009 2006 年にミスコ・ヘベリーらによって設立され、後に Google に買収されました。これは、多くの Google 製品で使用されている優れたフロントエンド JS フレームワークです。 AngularJS には多くの機能があり、その最も核となる機能は、MVVM、モジュール化、自動双方向データ バインディング、セマンティック タグ、依存関係注入などです。

• 使用法: これを説明することで、AngularJS、MVVM、モジュール化、自動双方向データバインディングなどの本当の目的を理解できるはずです。単純な dom 操作に加えて、Js プログラミングの力も反映できます。もちろん、用途は状況に応じて変える必要があります。

5.JQuery Mobile

• アドレス: http://www.w3school.com.cn/jquerymobile/ (中国語のウェブサイト)

• 説明: Query Mobile は jQuery ですモバイルおよびタブレットデバイスのバージョン。 jQuery Mobile は、jQuery コア ライブラリを主流のモバイル プラットフォームに導入するだけでなく、完全で統合された jQuery モバイル UI フレームワークもリリースします。世界の主流のモバイル プラットフォームをサポートします。 jQuery Mobile 開発チームは次のように述べています: 私たちはこのプロジェクトを開発することに非常に興奮しています。モバイル Web には、開発者が真のモバイル Web サイトを開発できるようにするクロスブラウザー フレームワークが必要です。

• 目的: jQuery Mobile は、モバイル Web アプリケーションを作成するためのフレームワークです。

jQuery Mobile は、すべての一般的なスマートフォンやタブレットで動作します。

jQuery Mobile は HTML5 と CSS3 を使用して、できるだけ少ないスクリプトでページをレイアウトします。

6.requirejs

• アドレス: http://www.requirejs.cn/

• 説明: RequireJS の目標は、コードのモジュール化を促進することであり、異なるスクリプト読み込みを使用します。従来の <script> タグのステップ。これを使用してコードを高速化し、最適化できますが、主な目的はコードをモジュール化することです。スクリプトを使用するときは、URL アドレスの代わりにモジュール ID を使用することをお勧めします。 </script>

RequireJS は、baseUrl を基準とした相対アドレスを持つすべてのコードを読み込みます。 ページのトップレベルの <script> タグには、スクリプト読み込みプロセスを開始するために require.js によって使用される特別な属性 data-main が含まれており、baseUrl は通常、この属性と一致するディレクトリに設定されます。 </script>

• 使用法: モジュラー動的ローディング。

7.Vue.js

• アドレス: http://cn.vuejs.org/

• 説明: Vue.js は、インタラクティブな Web インターフェイス ライブラリを構築するために使用されます。 MVVM データ バインディングと、シンプルで柔軟な API を備えた構成可能なコンポーネント システムを提供します。技術的に言えば、Vue.js は MVVM パターン上のビュー モデル レイヤーに焦点を当てており、双方向のデータ バインディングを通じてビューとモデルを接続します。実際の DOM 操作と出力フォーマットは、ディレクティブとフィルターに抽象化されます。他の MVVM フレームワークと比較して、Vue.js は簡単に始めることができます。

8.backbone.js

• アドレス: http://www.css88.com/doc/backbone/

• 説明: Backbone は、複雑な Javascript アプリケーションのモデルを提供します (モデル、コレクション、ビューの構造。このモデルは、キーと値のデータとカスタム イベントをバインドするために使用されます。コレクションには、列挙可能な関数の豊富な API が装備されており、ビューはイベント処理関数を宣言し、RESTful JSON インターフェイスを通じてアプリケーションに接続できます。

9. React

• アドレス:

  http://reactjs.cn/react/docs/why-react.html

• 説明:

  React は Facebook と Instagram 用のツールですユーザーインターフェイスを作成するためのJavaScriptライブラリ。多くの人は、React を MVC の V (ビュー) と考えています。私たちは、データが時間の経過とともに変化する大規模なアプリケーションを構築するという問題を解決するために React を作成しました。この目標を達成するために、React は次の 2 つの主なアイデアを採用しています。

10.Ionic

• アドレス:

  http://www.ionic.wang/js_doc-index.html

• 説明:

  Ionic は CSS フレームワークと Javascript UI の両方です図書館 。多くのコンポーネントはその魔法を機能させるために Javascript を必要としますが、多くのコンポーネントはコーディングを必要とせず、AngularIonic 拡張機能などのフレームワーク拡張機能を介して簡単に使用できます。

  Ionic はビュー コントロール パターンに従っており、その一般的な理解は Cocoa touch フレームワークに似ています。ビュー コントロール パターンでは、インターフェイスのさまざまな部分をサブビュー、または他のビューを含むサブビュー コントローラーに分割します。次に、ビュー コントローラーは内部ビューを「駆動」して、対話機能と UI 機能を提供します。この好例は、タブ バーをクリックして一連のビジュアル パネルを切り替える処理を行うタブ バー ビュー コントローラーです。

  Ionic で使用できるビュー コントローラーと Javascript ユーティリティについては、API ドキュメントを参照してください。

  Ionic は現在、最も有望な HTML5 モバイル アプリケーション開発フレームワークです。 SASS を使用してアプリケーションを構築します。SASS は、開発者が強力なアプリケーションを開発するのに役立つ多くの UI コンポーネントを提供します。 JavaScript MVVM フレームワークと AngularJS を使用してアプリケーションを強化します。データの双方向バインディングを提供し、Web およびモバイル開発者にとってその使用が一般的な選択肢になります。 http：//purecss.org/layouts/

description：

pureは、http：//purecss.org/layouts/descriph：あらゆる Web プロジェクトで使用できます。これを説明するために、次のテンプレートを作成しました。これらのテンプレートはすべて応答性があり、JavaScript を使用しません。

• 使用法:

  これは本当に美しいスタイルのフレームワークで、個人的な製品をすばやく構築できるようにするだけでなく、もちろん仕事のプロジェクトにも役立ちます。

• 2.bootstrap

• アドレス:

  http://www.bootcss.com/

説明:

Web 開発を高速化する、シンプルで直感的かつ強力なフロントエンド開発フレームワーク、単純。

• 3.EasyUI

• アドレス: http://www.jeasyui.net/ (中国語のウェブサイト)

説明:

easyui は jQuery ベースのユーザー インターフェイス コレクションですプラグインの。

easyui は、最新のインタラクティブな JavaScript アプリケーションを作成するために必要な機能を提供します。

• easyui を使用すると、多くのコードを記述する必要はなく、簡単な HTML タグをいくつか記述するだけでユーザー インターフェイスを定義できます。 Easyui は HTML5 Web ページを完全にサポートする完全なフレームワークです。

easyui は Web 開発の時間と規模を節約します。

• easyuiはとてもシンプルですが強力です。 4. Ant Design

アドレス:

http://ant.design/

説明:

UI デザイン言語、洗練され適用される対話型言語とビジュアルのセットエンタープライズレベルのバックエンド製品 システム

• 3. ビジュアルコンポーネント 1. Echarts

• アドレス: http://echarts.baidu.com/

説明:

EChartさ、あ純粋な Javascript チャート ライブラリであり、PC およびモバイル デバイスでスムーズに実行でき、最新のブラウザ (IE8/9/10/11、Chrome、Firefox、Safari など) と互換性があります。最下層は軽量の Canvas クラス ライブラリに依存します。 ZRender は、直感的、鮮明、インタラクティブ、高度にカスタマイズ可能なデータ視覚化チャートを提供します。

• 2.tableau (有料)

• アドレス:

  http://www.yuandingit.com/special/tableau/index.html

説明:

Tableau はデスクトップ システムです最もシンプルなビジネス インテリジェンス ツール ソフトウェアである Tableau は、ユーザーにカスタム コードの作成を強制せず、新しいコンソールも完全にカスタマイズ可能です。コンソールでは、情報を監視できるだけでなく、完全な分析機能も提供されます。 Tableau コンソールは柔軟性があり、非常に動的です。

c。4.フロントエンドビルディングツール

• Gulp は、構成よりもコードという戦略を通じて、単純なタスクを単純にし、複雑なタスクを管理しやすくします。
• 素早くビルド

  Node.jsストリームの力を利用して、プロジェクトを素早くビルドし、頻繁なIO操作を減らすことができます。

  高品質のプラグイン

Gulp の厳格なプラグイン ガイドラインにより、プラグインが簡潔かつ期待どおりに動作することが保証されます。

学習が簡単

最小限の API を使用すると、Gulp を簡単にマスターでき、一連のストリーミング パイプのように構築作業が管理されます。

5. ブログ構築

• 1. テクノロジーの組み合わせ

  HEXO + Github、独自のブログを構築します。

サイト:
• http://www.jianshu.com/p/465830080ea9

  HEXO の紹介: Hexo は、node.js で開発されたオープンソースの静的ブログ ジェネレーターです。作者は台湾の大学の Tommy351 です。学生

  準備: git + node.js + マークダウン編集 + gitcafe + ドメイン名

  概要: この記事は、一方では自分の知識の管理に使用されます。 、参照用のデータベースとしても使用できます。今後も更新していきます。

  Xiaoguang のサポートに感謝します。Pure の提供は非常に優れています。

  この記事は、http://www.cnblogs.com/mbailing/p/5627792.html#unknown に転載されています。転載する場合は出典を明記してください。ありがとうございます。

以上が実践的な Web フロントエンド JS および UI フレームワークの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。