AngularJSからReactに切り替えた理由

公開: 2022-03-11

2011年に、私のコードがjQueryセレクターとコールバックで乱雑になり始めたとき、AngularJSは、より良い管理、迅速な開発、および箱から出してすぐに使えるより多くの機能を支援する命の恩人として登場しました。 AngularJSの双方向のバインディングと「信頼できる唯一の情報源としてのモデル」の哲学は、私を驚かせ、アプリケーション全体のデータの冗長性を減らしました。

ただし、時間の経過とともに、AngularJSには独自の問題点があることがわかりました。 結局、これらは私に十分な欲求不満を引き起こし、私は代替の解決策を探し始めました。

AngularJS1.xの問題点

  • 実行のためのDOM

    Angularは、実行フローをDOMに大きく依存しています。 アプリケーションのデフォルトのブートストラップでは、DOMをスキャンし、ディレクティブの優先順位を使用してコンパイルするため、実行順序のデバッグとテストが困難になります。

  • 独自の依存性注入

    JavaScriptには、独自のパッケージマネージャーと依存関係リゾルバーはありません。 しかし最近、AMD、UMD、CommonJSなどの実装がこの問題を非常にうまく解決しています。 残念ながら、AngularJSはこれらのいずれにも役立ちません。 むしろ、それ自体の依存性注入（DI）を導入します。 ただし、RequireJSを使用した非公式のAngularJSDI実装があります。

  • 双方向バインディングは両刃の剣です

    双方向バインディングを使用することは魅力的ですが、コンポーネントの複雑さが増すにつれて、パフォーマンスが低下する可能性があります。

    双方向バインディングはパフォーマンスにどのように影響しますか？ JavaScript ES5には、変数やオブジェクトの変更を通知する実装がないため、Angularは「ダーティチェック」と呼ばれるものを使用してデータの変更を追跡し、UIと同期します。 ダーティチェックは、Angularのスコープ（$ digestサイクル）内で実行された操作の後に実行されます。これにより、バインディングの数が増えるにつれてパフォーマンスが低下します。

    双方向バインディングのもう1つの問題は、ページ上のさまざまなコンポーネントがデータを変更できるため、データ入力の複数のソースが発生することです。 うまく処理しないと、あいまいな状況につながる可能性があります。 しかし、公平を期すために、これは純粋に実装の問題です。

  • Angularには独自の世界があります

    Angularのすべての操作は、ダイジェストサイクルを経る必要があります。そうしないと、コンポーネントがデータモデルと同期されません。 したがって、サードパーティの既存のJavaScriptライブラリを使用している場合、データの変更が含まれる場合はAngularの$ apply関数でラップする必要があり、ユーティリティライブラリの場合はサービスに変換する必要があります。 これは、Angularで利用可能なすべてのJavaScriptモジュールを再発明するようなものです。

  • 概念が多すぎて学習曲線が急な

    Angularを学ぶには、モジュール、コントローラー、ディレクティブ、スコープ、テンプレート、リンク関数、フィルター、依存性注入など、たくさんの概念を学ぶ必要があります。

Reactに会う

FacebookとInstagramの新しいオープンソースJSライブラリであるReactは、JavaScriptアプリを作成するための別の方法です。 2013年5月にJSConfEUで紹介されたとき、聴衆は「一方向のデータフロー」や「仮想DOM」などの設計原則のいくつかにショックを受けました。

Reactの公式ウェブサイトには「Reactはユーザーインターフェースを構築するためのJavaScriptライブラリです」と書かれていますが、そうです、インターフェースだけで他には何もありません。 AngularJSのようなフレームワークではありません。 ただし、Angularディレクティブとほぼ比較できる自己完結型のコンポーネントを作成できます。 クイック概要

Reactは、Web開発のベストプラクティスを再考します。 Reachは一方向のデータフローを促進し、コンポーネントはデータによって駆動されるステートマシンであるという哲学を信じています。 DOMを操作して直接操作するような他のフレームワークのほとんどは、DOMを嫌い、開発者をDOMから保護するように機能します。 Reactは、UIコンポーネントを定義するために必要な基本的なAPIのみを提供し、他には何も提供しません。 リーチはUNIX哲学に従います：小さいことは美しいです。 一つのことをして、それを最善を尽くしてください。

これは、Pete Hunt（Instagramチームから）による2つの間の非常に素晴らしい比較です

それはただの図書館です。 Reactを使用したフレームワークが必要ですか？

簡単な答え：あなたの選択。

Reactを使用すると、ユーザーインターフェースを構築できますが、依存関係の管理、AJAX呼び出しの作成、データフィルターの適用が必要です。 フレームワークが必要な場合、なぜAngularJSを捨てるのですか？

フレームワークは、パッケージのセットとルールのセットです。 一部のパッケージが必要ない場合、または別のパッケージと交換したい場合はどうなりますか。 どうすればいいのですか？ パッケージマネージャーが必要です。 AngularJSでパッケージを管理するにはどうすればよいですか？ それはあなたの選択ですが、Angularには独自の世界があります。 すべての外部パッケージをAngularの世界にラップしてから、それを使用する必要があります。 しかし、Reactは単なるJavaScriptであり、JavaScriptで記述されたパッケージはReactでラップする必要はありません。

したがって、npmなどのパッケージリポジトリから独自のパッケージを選択し、必要に応じて整理することをお勧めします。 良いニュースは、Reactがすぐに使えるパッケージがたくさんあるnpmの使用を奨励していることです。 Reactの使用を開始するには、これらのフルスタックスターターキットのいずれかを使用することをお勧めします

Reactの利点

では、なぜ私は本当にReactに切り替えたのですか？

Reactは速いです！

Reactは他のフレームワークとは異なるアプローチを取ります。 DOMを直接操作することはできません。 むしろ、JavaScriptロジックと実際のDOMの間に仮想DOMのレイヤーを導入します。 これは、速度を大幅に向上させるのに役立ちます。 連続するレンダリングで、Reactは仮想DOMで差分を実行し、更新が必要な実際のDOMのその部分のみを更新します。

Virtual DOMは、Internet Explorer 8でも機能する統合されたクロスブラウザーAPIを提供するため、クロスブラウザーの問題の解決にも役立ちます。（Phew！）

すべてがコンポーネントです（UIウィジェット）

自己完結型のUIコンポーネントを作成すると、アプリケーションがモジュール化され、それぞれの懸念事項が分離されます。 すべてのコンポーネントを個別に開発およびテストし、他のコンポーネントを使用して保守性を向上させることができます。

勝利のための一方向のデータフロー！

Fluxは、JavaScriptアプリケーションで一方向のデータレイヤーを作成するためのアーキテクチャです。 これは、ReactビューライブラリとともにFacebookで設計されました。 開発が簡単になり、バグの追跡と修正が簡単になります。 フラックスは、実装というよりも概念です。 他のフレームワークにも実装できます。 Alex Rattrayは、ReactのBackboneCollectionとModelを使用したFluxの非常に優れた実装を持っています。

JavaScriptと他には何もありません

最新のWebアプリは、従来のWebとは異なる方法で機能します。 ビューレイヤーは、サーバーにアクセスせずにユーザーの操作で更新する必要があります。 したがって、ViewとControllerは相互に大きく依存する必要があります。 他の多くのフレームワークは、ViewレイヤーにHandlebarsやMustacheなどのテンプレートエンジンを使用していますが、Reactは、2つの部分が相互に依存しているため、サードパーティのテンプレートエンジンを使用せずに、またJavaScript。

同形JavaScript

シングルページJavaScriptWebアプリの最大の欠点は、検索エンジンでクロールするときに制限があることです。 Reactにはこれに対する解決策があります。 Reactは、サーバーにアプリを送信する前にサーバー上でアプリを事前にレンダリングできます。また、サーバーから事前にレンダリングされた静的コンテンツから、同じ状態をライブアプリケーションに復元できます。 検索エンジンクローラーはJavaScriptの実行ではなくサーバー応答に大きく依存しているため、このようなアプリを事前にレンダリングすると、検索エンジン最適化に役立ちます。

ReactはRequireJS、Browserify、Webpackでうまく機能します

大規模なアプリケーションを構築する場合は、ローダーとバンドラーが非常に必要です。 残念ながら、現在のバージョンのJavaScriptは、モジュールバンドラーまたはローダーを提供していませんが、次のバージョンのEcmaScript 6（System.import）で提案されています。 幸い、RequireJSやWebpackのようないくつかの選択肢がありますが、これらはかなりまともです。

ReactはBrowserifyで構築されていますが、画像アセットを挿入してLESSまたはCoffeeScriptをコンパイルする場合は、おそらくWebpackの方が適しています。

少し苦痛を感じてReactに切り替えました。

  • AngularJSはフレームワークであるため、$ httpサービスのAJAXラッパー、promiseサービスとしての$ q、制御ステートメントとしてのng-show、ng-hide、ng-class、ng-ifなどの多くの機能が付属しています。テンプレート用。

  • Reactはフレームワークではなく、UIを構築するためのライブラリであるため、他のすべての部分について自分で考える必要があります。 私はあなたの開発を容易にするためにReactで使用できるオープンソースプロジェクトに取り組んでいます、そしてコミュニティも同様の再利用可能なコンポーネントに積極的に貢献しています。

    React-components.comは、そのようなオープンソースコンポーネントを見つけることができる非公式のディレクトリWebサイトです。

  • Reactの哲学は、双方向バインディングの使用を推奨していません。これは、フォーム要素や編集可能なデータグリッドを扱うときに多くの苦痛をもたらします。 ただし、Fluxデータフローとストアについて理解し始めると、物事はより明確に、より単純に、より簡単になります。

Reactは新しいので、コミュニティが成長するまでには少し時間がかかります。

Angularは最近非常に人気があり、AngularUIやRestangularなどの比較的膨大な数の拡張機能を利用できます。 Reactのオープンソースコミュニティは新しいものですが、ReactBootstrapのような拡張機能で急速に成長しています。 より多くのコンポーネントが利用可能になるのは時間の問題であり、Reactは迅速なWebアプリ開発に簡単に使用できます。

結論

以前にAngularJSを使用したことがある場合は、最初はReactを嫌うかもしれません。これは主に、一方向のデータフローであり、他の多くのことを自分で処理する必要がある「フレームワーク」がないためです。 しかし、FluxのデザインパターンとReactの哲学に慣れるとすぐに、それが美しさであることに気付くでしょう。

FacebookとInstagramはどちらもReactを使用しています。 Githubの新しいAtomエディターはReactを使用して構築されています。 今後のYahooメールはReactで再構築されています。 他にどのような例が必要ですか？ 今日Reactを試してみてください。