フロントエンド学習まとめ（二十三）-世界のフロントエンドフレームワーク3: Angular ReactとVueの比較

2022-02-18 01:24:04

フロントエンドの技術は、ここ数年で急速に進化しており、大きく4つの分野に分けられます。

1. 開発言語技術 主にES6&7、coffeescript、typescriptなどです。
2. 開発フレームワーク Angular、React、Vue.js、Angular2など。
3. 開発ツールの充実とフロントエンドエンジニアリング Grunt、Gulp、Webpack、npm、eslint、mocha などの技術。
4. フロントエンドの開発範囲を拡大する サーバーサイドのnodejs, express, koa, meteor, GraphQL、モバイルとクロスプラットフォームのPhoneGap, ionic, ReactNative, Weex、コンピューターグラフィックと3次元モデリングのWebGL (three.js, etc) 、ビジュアル化とデータ分析のd3.jsなど、フロントエンド開発の範囲は広がっている。svg、canvas、Bluetooth、バッテリー、ローカルストレージ、サービスワーカー、Houdiniなど、ブラウザが開放し続ける新機能やインターフェース、WASMなどの基盤最適化技術など、より多くの新機能を含む。

開発フレームワークでは、現在Angular(1&2)、React、Vueが主流であり、今後もそうであると思われますので、ここでは後の技術選択のために、この3つを比較してみましょう。

I データフロー

データバインディング

Angularは双方向バインディングを使用します。つまり、インターフェースでのアクションはリアルタイムでデータに反映され、データへの変更はリアルタイムでインターフェースに表示されます。

実装の原則。

$scope これを実現するために、変数にダーティーバリューチェックが使われています。ember.jsがセッター、ゲッターの観測機構をベースにしているように

$scope.$watch 関数で、変数の変化を監視する。この関数には3つの引数があり、"何を監視するか"、"変化したらどうするか"、そして変数かオブジェクトかを監視するかどうかです。

ng-modelを使用する場合、双方向のデータバインディングを使用することができます。
使用方法 $scope.$watch (ビューからモデルへ)と $scope.$apply (モデルからビューへ)、そして $scope.$digest

の呼び出しは $scope.$watch には引数がひとつだけ渡され、スコープ内で何が変更されたかにかかわらずこの関数が呼び出されます。ng-modelでは、この関数はモデルとビューが同期しているかどうかをチェックし、同期していない場合は新しい値でモデルデータを更新するために使用されます。

双方向バインディングのための3つの重要なメソッド。

$scope.$apply()

$scope.$digest()

$scope.$watch()

angularjsの双方向バインディングでは、以下のようなものがあります。 ダーティチェック、ダイジェストループと呼ばれる2つの非常に重要な概念 と ダーティチェックとは、バインドされたスコープ内のオブジェクトの状態をチェックするために使用されます 例えば、jsでオブジェクトが作成されこのオブジェクトはスコープにバインドされているので、ダイジェストループの中にあり、ループはそれらを反復することによって変更されたかどうかを見つけ、もし変更されていたら、それは適切なハンドラを呼び出して、双方向バインディングを実装します。

ビュー は双方向バインディングもサポートしており はデフォルトで片方向のバインディングになります。 と 親コンポーネントから子コンポーネントへ一方的にデータが渡されます。 . を使用する大規模なアプリケーションでは データの流れをわかりやすくするための単方向バインディング .

ダーティ検出の長所と短所

ember.jsなどの技術のgetter/setter観測機構と比較（優位）。
ゲッター/セッターは、DOMにそれぞれの変更は、それがDOMツリーの構造を変更する必要があります、パフォーマンスの影響が大きいと、Angularは、単一の更新に一括操作を遅らせる、パフォーマンスが比較的良好です。

Vueとの比較（劣勢）。

Vue.jsはパフォーマンスが良く、最適化がとても簡単です。 ダーティチェックを使用しない Angularは、その スコープが変わるたびにすべてのウォッチャーが再計算されるため、ウォッチャーが増えると遅くなります。 . また あるウォッチャーが別の更新をトリガーした場合、ダーティサイクルを複数回実行しなければならないことがある . Angularのユーザーは、しばしば難解なテクニックを使って ダーティチェックループ という問題があります。多くのウォッチャーを持つスコープを最適化する簡単な方法がないこともあります。 Vue.js はこの問題を全く持っていません。依存関係ベースのウォッチシステムを使用しており、更新を非同期でキューに入れ、すべてのデータの変更は、それらの間に明示的な依存関係がない限り、独立してトリガーされます . 唯一行うべき最適化は、v-forでtrack-byを使用することです。

React-unidirectional データフロー

AngularやVueのMVVMフローは、テンプレートのような構文でインターフェースの状態とデータの結合関係を記述し、内部変換によってこの構造を構築し、インターフェースが変わると、設定したルールに従って対応するデータが更新され、設定したルールに沿って、データからインターフェースの状態が更新されます。

Reactは関数型プログラミングと一方的なデータフローを促進する : 元のインターフェイス（またはデータ）が与えられたら、変更を適用して別の状態（インターフェイスまたはデータの更新）を導き出すことができます。

ReactもVueも、Reduxと一緒に使って状態データを管理することができます。

II ビューレンダリング

アンギュラ1

AngularJSは、HTMLテンプレートがブラウザによってDOMに解析され、DOM構造がAngularJSコンパイラの入力になるという原則で動作します。AngularJSはDOMテンプレートをトラバースして適切なNGディレクティブを生成しますが、これらはすべてビュー（すなわちHTMLのNGモデル）のデータバインディングを設定する役割を担っています。したがって、NGフレームワークはDOMが読み込まれた後に動作を開始します。

リアクト

ReactのレンダリングはVirtual DOM上に構築されている -メモリ上の DOM ツリーの状態を記述するデータ構造です。 状態が変化すると、React は仮想 DOM を再レンダリングし、計算を比較し、実際の DOM にパッチを適用します。 .

仮想DOM というビューを機能的に記述する方法を提供します。データ観測の仕組みを使わず、更新のたびにアプリケーション全体を再レンダリングするため、定義によりビューとデータの同期を確保することができる . また、JavaScriptの同型アプリケーションの可能性を広げます。

で 超大容量データに対する初の画面描画速度 について Reactにはいくつかの利点があります というのも Vueのレンダリング機構は、起動時に行うべき仕事が多い と Reactはサーバーサイドレンダリングに対応 .

Reactの 仮想DOMも最適化する必要がある 複雑なアプリケーションでは複雑なアプリケーションでは、1.手動で shouldComponentUpdate は、不要な vdom の再レンダリングを回避するためのものです。 そんな簡単なものではありません。これに対して Vue のため、それほど単純ではありません。 依存関係追跡 であり、デフォルトでは最適化された状態である。 は、データの移動と同じ数の更新を引き起こし、それ以上でも以下でもない。 .

ReactもAngular 2も、サーバーサイドレンダリングとネイティブレンダリングを備えています。

Vue.js Virtual DOM を使用する代わりに は、実際の DOM をテンプレートとして使用し、データは実際のノードにバインドされます。 Vue.jsのアプリ環境は、DOMを提供する必要があります。Vue.jsは時にReactよりも優れたパフォーマンスを発揮することがあり**、手動での最適化はほとんど必要ありません。

III パフォーマンスと最適化

パフォーマンスに関しては、主要なフレームワークのすべてが、ほとんどの一般的なシナリオのパフォーマンス要件を容易に処理できるはずです。その違いは、最適化可能性と最適化が開発体験に与える影響です。全体的な傾向としてはフロントエンドのパフォーマンス最適化システム全体の中で、フレームワークそのものはフェードアウトし、ビルド方法、キャッシュ、画像読み込み、ネットワークリンク、HTTP/2などでより最適化が行われるようになるであろう。 .

IV モジュラリティとコンポーネント化

アンギュラ1 -> アンギュラ2

Angular1では、モジュール間の依存関係を解決するために、依存性注入を使用しています。 モジュールはほとんど常にインジェクションコンテナに依存している といった関連機能があります。 非同期ロードではない に基づいて、最初のロードに必要なすべての依存関係をリストアップするものです。

は、Require.jsのようなものと一緒に使って非同期ロードを実装することができます。 レイジーローディング（オンデマンドローディング）はocLazyLoadのアプローチで解決します が、理想はネイティブフレームワークの方がわかりやすい。

Angular2では、ES6のmoduleを使用してモジュールを定義し、動的ロードの必要性も考慮されています。

バリュー

Vueにおけるディレクティブとコンポーネントの明確な分離 . ディレクティブは DOM 操作をカプセル化するだけ と、その コンポーネントは、独自のビューとデータロジック**を持つ、自己完結した独立したユニットを表します。Angular1では、この2つの間にかなりの混乱があります。

リアクト

Reactアプリは、Reactコンポーネントの上に構築されます。
コンポーネントには、プロップとステートという2つの核となるコンセプトがあります。
コンポーネントは、この2つのプロパティの値によって、そのコンポーネントのレンダリングメソッド内部で生成されるHTML構造体である。

従来のMVCは、テンプレートをscriptタグやテンプレートファイルなど別の場所に置き、JSで何らかの形でテンプレートを参照するものでした。その線上で、私たちは何度もあちこちに散らばるテンプレートのスニペットに圧倒されてきたか考えてみてください。テンプレートエンジンと格闘し、テンプレートの保存場所と格闘し、テンプレートを参照する方法と格闘する。

Reactは、コンポーネントが王様であり、コンポーネントはテンプレートと密接に結びついており、コンポーネントテンプレートとコンポーネントロジックを分離することは問題を複雑にすると考えています。 JSX構文は、HTMLテンプレートをJSコードに直接埋め込むためのもので、テンプレートとコンポーネントは関連しているが、JSはこのHTMLを含める構文に対応していないので JSXをコンパイルし、ツールを使ってJSコードに書き出す（クロスプラットフォーム開発の基本、異なるインタープリターで解釈して異なるプラットフォームで動作させるため、RNやReactでデスクトップクライアントを開発することができる） .

V シンタックスとコードスタイル

React、Vue、Angular2はすべてES6をサポートし、Angular2はJavaScriptのスタイルであるTypeScriptを正式に採用しています。

ReactはJavaScript中心、Angular 2はHTML中心のまま。Angular 2はHTMLに"JS"を埋め込み、reatctはJSに"HTML"を埋め込みます。Angular 2は、Angular 1がHTMLをより強力にしようとした方法を踏襲しています。

Reactの推奨アプローチはJSX + インラインスタイルで、HTMLもCSSもJavaScriptに統合されます。VueのデフォルトAPIはシンプルで使いやすいことを目的としていますが、推奨アプローチは次のとおりです。 webpack + vue-loaderによる単一ファイルコンポーネント形式（テンプレート、スクリプト、スタイルがコンポーネントとして1つのvueファイルに記述されています。）