Angular 2 vs.React：そして血が流れます

（翻訳、 オリジナル記事 ）

Angular 2はベータ版に到達し、2016年にトップエンドフレームワークの栄光を打ち破るチャンスがあります。 対決時間。 2015年の最愛の人、Reactとの対比を見てみましょう。

免責事項：最初のAngularで作業しましたが、2015年にReactに切り替えました。 Complete React and Flux Courseを発行しました。 そう、私は偏見があります。 しかし、私は両側を攻撃します。

さあ、始めましょう。 そして、血があります。

あなたは丸くて柔らかいを比較します。

*ため息*はい、Angularはフレームワークであり、Reactはライブラリです。 誰かが違いがこれらのものを比類のないものにしていると言うでしょう。 どんなに！

AngularとReactの選択は、ビルドされたデスクトップPCを選択することと、個別のコンポーネントから独自のPCを組み立てることに似ています。

この投稿では、本質的にこれら2つのアプローチについて説明します。 ReactとAngularの構文とコンポーネントモデルを比較します。 これは、完成したCPUとraw CPU ¹を比較する方法です。 つまり ソフトとソフトを比較してください。

Angular 2の利点

Reactに対するAngular 2の利点を見てみましょう。

クイックスタート

Angularは、より多くの機能をすぐに使用できるフレームワークです。 Reactでは、アプリケーションをビルドするためにサードパーティライブラリのプールをプルする必要があります。 もちろん、ルーティング、単方向フローの編成、APIへのアクセス、テスト、依存関係マネージャーなどのライブラリが必要です。 ソリューションの数は非常に広範囲です。 そのため、Reactには多くのスターターパックがあります（ 2つ 投稿しました ² ）。

Angularは、多くの意思決定を行うことを恐れることなくすぐに使い始めるのに役立つ多くのすぐに使えるソリューションを提供します。 統合ソリューションは、開発者が開発プロセスに再入することなくプロジェクトを変更するのにも役立ちます。

Angular開発者がTypeScriptを習得していることを嬉しく思います。これにより、次の利点が得られます...

TypeScript =純度のパス

もちろん、TypeScriptには普遍的な崇拝はありませんが、Angular 2で使用することは大きな勝利です。 Web全体で、Reactの2つの使用法に遭遇します。これはES5とES6でほぼ同じように表され、 コンポーネントを宣言するための3つの異なるオプションにつながります 。 これは初心者を混乱させます。 （確かに、Angularは拡張機能の代わりにデコレータを使用することを提案しています。多くの人がこれを利点と考えています。

Angular 2がTypeScriptを必要としない場合、開発チームはデフォルトでドキュメントでTypeScriptを使用し続けます。 これは、オープンソースプロジェクトと関連するサンプルがコードをより均一にすることを意味します。 AngularはすでにTypeScriptコンパイラの使用方法を示す実例を提供しています。 （私は、TypeScriptの広範な普及がまだ利用可能ではないことを認めなければなりませんが、発売後すぐにそれが事実上の標準になると思います）。 このアプローチは、Reactで作業を開始するときに珍しいことではなく、誤解を避けるのに役立ちます。

流出削減

2015年はJavascriptの疲労の年でした。 反応は重要な要素でした。 Reactがバージョン1.0に到達しなかったという事実は、将来の重要な変更について教えてくれます。 Reactエコシステムは、特にFluxシェードとルーティングに関して、急激なペースで発展しています。 これは、React 1.0がリリースされると、今日書くすべてが陳腐化する可能性が高いことを意味し、ほとんどの場合、完全に書き直す必要があります。

この意味で、Angular 2は包括的なフレームワークを徹底的かつ系統的に再考したものです。 したがって、Angular 2では、リリース後にこのような顧客の流出や頭痛が発生することはありません。 また、全体的なフレームワークとして、Angularは1つのチームが提示する長期的なソリューションにより適しています。 Reactでは、急速に開発されている多くのオープンソースライブラリを1つの安定したアプリケーションにまとめる責任があります。 これは、面倒で不快で継続的なプロセスです。

ユビキタスサポート

以下に示すように、JSXは素晴らしい成果だと思います。 ただし、JSX対応のツールが必要です。 Reactは非常に人気が高まっているため、ツールはもはや問題ではありません。 しかし、IDEやリンターなどの新しいツールは、 ³日目の初日にこの形式をすぐにサポートすることはまずありません。 文字列または個別のHTMLファイルに格納されたAngularマークアップテンプレートは、個別のサポートツールを必要としません（ただし、Angular文字列テンプレートをその場で操作するためのスマートツールは既にあります）。 Angularアプローチには多くの落とし穴があり、Reactの利点のトピックに対する優れたアイライナーとして機能していると言いたいのですが...

Reactの利点

では、Reactが提供するものを見てみましょう。

Jsx

JSXは、JavaScriptでコンパイルされたHTMLに似た構文です。 マークアップとコードは同じファイルにあります。 このソリューションを使用すると、関数、コンポーネント、および変数へのリンクを挿入できます。 逆に、Angularラインテンプレートには明らかな欠点があります。多くのエディターには構文の強調表示がなく、コード内のエラーの自動コンパイルと強調表示は完全にサポートされていません。 これはひどいエラーメッセージにつながるはずですが、Angularチームは独自のHTMLパーサーを作成しました。 （ブラボー！）

Angular小文字のテンプレートが気に入らない場合は、テンプレートを別のファイルに入れることができますが、それから「昔」と呼ばれるものを手に入れることができます。 React内での生活を楽しむまで、これは大きな問題ではないようです。 構文チェック付きの単一ファイル内のコンポーネントは、これがJSXの優位性の最も重要な理由の1つです。

Angular 2とReactが閉じられていないタグを処理する方法を比較してください。
JSXの利点のより良い理解については、 JSX：The Other Side of the Coinを参照してください

バグに対応-高速かつ明確

ReactのJSXでタイプミスをすると、コンパイルしたくないでしょう。 これは素晴らしいことです。 エラーがどの行にあるかがすぐにわかります。 これが閉じられていないタグまたは宣言された変数への参照であることは明らかです。 実際、 JSXコンパイラーは、間違えた行番号を示します 。 これにより、開発速度が大幅に向上します。

逆に、Angular 2で変数の参照を間違えた場合、何も起こりません。 Angular 2は、コンパイルするのではなく、実行時に静かにクラッシュします。 そのようなエラーは遅いです。 アプリケーションを実行し、なぜデータが表示されないのか疑問に思います。 それは十分に楽しいものではありません。

React JavaScript中心⁴

ここにある。 これは、ReactとAngularの重要な違いです。 残念ながら、AngularはHTML指向のままです。 Angular 2は、最も基本的なアーキテクチャの問題を解決できませんでした。

Angular 2は引き続きJSをHTMLに入れます。 ReactはHTMLをJSに配置します

私はこの分裂を十分に強調しませんでした。 これは、開発経験に根本的に影響します。 Angular HTMLでは、指向設計は依然として弱点です。 JSX：The Other Side of the Coinで強調したように、JavaScriptはHTMLよりも強力です。 ロジックでHTMLを拡張するよりも、マークアップサポートのためにJavaScript機能を強化する方がはるかに論理的です。 HTMLとJavaScriptはまだ何らかの形で結び付けられているはずであり、JavaScript指向のReactアプローチは、HTML指向のアプローチでAngular、Ember、Knockoutよりも明確に優れています。

それが理由です...

JavaScript指向のReact =シンプルさ

Angular 2は、HTMLをより強力にするために、バージョン1のアプローチを継続しています。 したがって、ループや条件ステートメントなどの単純なものには、Angularの特別な構文を使用する必要があります。 たとえば、Angularは、一方向と双方向のデータバインディングに異なる構文を提供します。

{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding

React, ( , , ). :

{myVar}

Angular :

<ul>
  <li *ngFor="#hero of heroes">
    {{hero.name}}
  </li>
</ul>

. .

• «» .
• hero . ( var).
• ngFor HTML c Angular .

Angular, React «» JS: ( key ).

<ul>
  {heroes.map(hero =>
    <li key={hero.id}>{hero.name}</li>
  )}
</ul>

JS. React JSX JS .

Angular 2 Cheat Sheet. HTML. JavaScript. Angular.

Angular Angular

React JavaScript

React . JavaScript /:

Ember: {{# each}}
Angular 1: ng-repeat
Angular 2: ngFor
Knockout: data-bind=”foreach”
React: JUST USE JS. :)

, React, JS . React. JavaScript , .

Angular 2 :

(click)=”onSelect(hero)"

React JavaScript, :

onClick={this.onSelect.bind(this, hero)}

, , React ( Angular 2), .

, ? JS?

JSX , , . Hot Reloading with Time Travel .

/, :

Ember: 580k
Angular 2: 565k (759k with RxJS)
React + Redux: 204k
Angular 1: 145k

Tour of Heroes Angular React ( React React Slingshot)
Angular 2: 764k minified
React + Redux: 216k minified

Angular 2 React + Redux ⁵. ( Angular )

, .

, , , , . , , .
,
— Tom Dale

. Angular Ember .

, , . , React . 200 000 npm .

React UNIX

React . , Angular Ember. React, , , . . JavaScript , React .

Unix . :

, ,

React , , . . ( Angular )

Angular 2 1. , / , 3–10 . Angular 2 React. , , “JavaScript ”.

Angular 2 . Angular HTML- JavaScript- React. React, HTML ngWhatever. JavaScript. .

Reddit Hacker News.

: “Building Applications with React and Flux”, “Clean Code: Writing Code for Humans” Pluralsight. VinSolutions . Microsoft MVP, Telerik Developer Expert, outlierdeveloper.com

---

1 — , raw CPU
2 —
3 — IDE ( MS )
4 —
5 — comparable simplicity

.. ( ) React, . , . . TypeScript ES6. :)

, !