狂犬：Angular 2 vs React

特定の単純なアプリケーションの例について、 AngularとReactの2つのフレームワークの対立に会います。 Evgeny Gusev （ @bunopus ）はAngularを表し、 Ilya Taratukhin （ @ilfa ） は Reactを表します。 正直な結論を出すために、彼らは最初にテクノロジーを切り替え、基本的なプロジェクトを展開しようとしました。 Reactを開始すると多くの問題が発生しましたが、Angularでは、フロントエンドで特に作業をしなかった人にとって理想的なアプリケーションであるため、物事はずっと簡単になりました。 しかし、もちろん、これはほんの始まりに過ぎず、その後、 実際の紛争が続き、そのすべての段階がカットされています







スピーカーについて：



Evgeny Gusevは開発者として10年以上の経験があり、過去数年間Wrikeで働いています。 最初に彼はC ++ / C＃で開発し、その後フロントエンドのすべての動きとお金を決めてそこに移動しました。 Wrikeは現在JavaScriptを使用していませんが、 Dartを使用しています。



Ilya Taratukhinは約7年間商業開発に携わっており、すべてが最前線にいます。 彼は2GISで働いており、ネイティブJSで書いており、すでに死にかけているKnockoutのようです。 Wrikeでの仕事と並行して、Ilyaは彼のプロジェクトを開発しており、Reactに積極的に没頭しています。 Ilyaは1年以上、 Dart + Angular 2バンドルを使用しています。 経験は本当に面白いです



つまり、EugeneはAngular、IlyaはReactで多くの経験を持っています。 すべてを正直にするために、彼らはテクノロジーを切り替え、これらのフレームワークでかなり単純なプロジェクトを作成しようとしました。





Disclamer：さらに、RIT ++ 2017でのYevgeny GusevとIlya Taratukhinのレポートのトランスクリプト、Angularがバージョン4.2.0およびReact-15.5.0であったレポートの作成時に問題のすべてが真実です。 ただし、この比較は、Angular 6.0.0-rc.3がすでにリリースされているという事実にもかかわらず、重要な変更が発生していない最も重要な側面を対象としています。

パート1.紹介

プロジェクトの本質は次のとおりです。都市の名前が入力される入力フィールドがあります。天気サーバーのhttp-requestsによって、選択した都市の天気がわかります。サンクトペテルブルクでは再び曇りで、ビールを飲む必要があります。 複雑なことは何もありません。

反応する

ユージーン： 理想的なスターターパックを選択することで、当然、Reactと知り合いになりました。Reactについては何もわかりません。



顧客が私のところに来て、天気ウィジェットを作成するように頼んだとしましょう。 この問題を解決するために、私はプロジェクトを行うのに役立つものを探し始めました、そして、私が皆に推薦する素晴らしいサイトを見つけました。 私はそこに行ってこの写真を見ます：108個のスターターパック（現在189個あります）、そのうち20個は最小としてマークされています。







フレームワークの選択に問題がありました。そして、108の問題がありました。 しかし、私はそれをして、 Facebook Starterpackを選択しました 。







Reactをあらゆる方法で中傷し、すべてが悪いと言わなければなりませんが、実際にはすべてがうまくいき、非常にうまく機能します。 「 HTTPリクエストをReactに送信する方法 」をグーグルで調べることから始めて、stackoverflowへのリンクを取得しました。そこで、fetch、axiosなどを使用できると言われました。



想像してみて、1つの問題があり、108の問題が追加され、さらに3つの問題が追加されました。

Ilya： EugeneはJavaScriptから2年ほど離れていることを説明し、JSでHTTPリクエストがどのように行われるのか、 フェッチできるものを忘れてしまった すべてのブラウザにあるはずです。 ただし、その場合は、ポリフィルを固定すると問題ありません。

ユージン：もちろん、axiosを選びました。 単純な「Hello world！」アプリケーションに次に必要なのは、単純なアプリケーションを作成することです。







レンダリング関数があり、それは単純な入力を持っています。つまり、すべてが単純です-あなたは何かを駆動し、onChangeはsetStateを行います。







バインドを使用する必要がありました ！ さて、これはおそらくReactの問題ではありません-これは私の問題です。 もう1つの単純な「Hello world！」アプリケーションにはテストが必要です。

テストについて簡単に-すべてが悪い

私は最初にそれらを起動することに成功しませんでした、私はあきらめて、イリヤがより賢いと判断しましたが、私は彼に尋ねることさえしませんでした。

マージンノート

Eugene： Reactでの豊富な経験の後、次を明確にしたいと思います。スタイルガイドに従ってコンポーネント名とクラス名を組み合わせる方法は？ イリヤ、Reactでコンポーネントを何と呼びますか？



イリヤ：コンポーネントは特定のクラスなので、大文字でキャメルケースと呼びます。



Eugene：マークアップには小さな文字とハイフンを使用する必要があるため、私の中のすべてが逆さまになります。 JSXマークアップクラスが大文字になっている場合（キャメルケース）、気分が悪くなります。



第二に、 依存性注入が必要です。 ReactにReact DIはありますか？



Ilya： React自体にはありませんが、DIを完全に実装するか、何らかの種類の簡易バージョンにしたDIを実装するさまざまなツールがあります。



ユージーン：おそらく100人いるの？ しかし、それでも：

• 記事を読む：4（ドックを除く）。
  
  
• 接続されているモジュール：3。
  
  
• そして、まだReduxがありません！
  
  

Redux、Flux、およびその他の「ak」をそこにねじ込んだ場合にどうなるかを見積もります。



合計 ：5つのうち4つ。







なぜ5ではなく4なのか？ はい、Starterpackでは、原則としてすべてが明確になっていますが、このStarterpackから遅かれ早かれ通常の大規模なアプリケーションを作成する必要があると思います。 4つの記事ではなく、おそらく104の記事を読んで、理想的なスターターパックを作成する必要があると思います。







イリヤ：私の経験に移りましょう。 あなたがAngularを扱うとき、何がすべきかを指示するGoogleのような巨人がいるので、すべてがより簡単です、そして私は非常にすぐにAngular CLI QuickStartに出会いました。



その結果、コンソールで4つのコマンドを実行しました。







私はフロントエンド開発者です-Node.jsとNPMを持っています-そのような問題はありません。 その結果、 10分で 、ホットリロードとボルトテストを備えた実用的なアプリケーションが得られました 。 すべてがクールで、多くのものが追加されました-私は今持っているものをすぐに理解することすらできませんでした。



次のタスクは同じです。HTTPリクエストを作成し、その前に結果を表示するコンポーネントを作成する必要があります。 Angular Scaffoldingを使用すると、このコマンドを1行で実行でき、このコマンドと呼ばれる4つのファイルが得られます。

• テンプレートファイル。
  
  
• スタイルファイル。
  
  
• コンポーネントファイル。
  
  
• ボーナスとして届いたテストは、スケルトンであり、コンポーネントが動作していて初期化されていることを確認する最初のテストです。
  
  

Eugene： FacebookのReact in the Starterpackにもテストがありますが、なんらかの理由で機能しませんでした。

Ilya次のステップは、HTTPリクエストを作成することです。 どういうわけか、Angularのドキュメントを突破し、例を見つけてほぼ完全にコピーし、getWeather関数を呼び出しました。







そして、何も取得できませんでした。console.log、ネットワークタブを確認しました。

Eugene： Angularについてほとんど書いていない、または書いていない人にとって、RxJSでのObservableは非常に面倒です。 購読するまでは機能しません。

イリヤ：何かがおかしいと思いましたが、このテンプレートをどこかに挿入する準備がまだできていませんでした。 Angularが提供するHTTPライブラリを介したHTTPリクエストが一般的に機能することを確認したかっただけです。 それで私はドキュメンテーションをもっと調べて、 Promiseでそれをする方法を見つけました。







だから、私はそれをやった、それを呼び出した-それはすべて働いた。 一般的に、私は満足しました 。



次の問題。 2017年にハンドラーを切ってTypeScriptで記述しますが、コンテキストをバインドする必要があります。Dartの喜びに慣れているので、少しショックを受けました。







これが私の問題が終わった場所です。 動作するアプリケーションを入手しましたが、まだいくつか質問があります。

未解決の質問

• アセンブリを制御する方法は？
  
  

天気予報アプリケーションの作成は非常に簡単で、ほとんどすぐに使用できます。 しかし、本格的なプロジェクトを開始するときは、アセンブリを管理する必要があります。 これで、アセンブリ全体がcli-starter-kit内に隠されました。



Eugene： Angular CLI内には、不要なスターター依存関係をすべて削除し、スターターアプリケーションから必要なものをすべて作成できるng排出コマンドがあります。

• less / sass / postcssを接続するには？
  
  

イリヤ：次のアイテム。 あなたが見たように、スターターキットは私のためにCSSファイルを生成しましたが、私はすでにより少ない、sass、スタイラス、postcssを使いたいです。 私はユージーンに頼った：「どうして？ しかし、彼はファイルの名前を変更するだけで、実際にアセンブリは自動的に少ないファイルを選択しました。 もう一度、私は恐怖に襲われました。Angularがそれ自体でどれだけ引っ張るのでしょうか。

合計：

私の結論は、 Angularはフロントエンドで特に作業をしていなかった人 、たとえば.netから来た人にとって完璧なアプリケーションであるということです 。 彼は、DI、あらゆる種類の複雑な抽象化に精通しており、Angular 4ではコンポーネントを相互に継承できます。



ただし、フレームワークツールを学習する準備をする必要があります。多くを読む必要があります。 これは本当に膨大な量のドキュメントです。 EugeneがReactと連携するためにインターネットを真剣に検索しなければならないことを恐れている場合、すべてを1か所に収集します。読み、理解するだけです。

パート2.紛争

合計-2つのフレームワークに会いました。 私たちの議論は何ですか？

$$$スーパープロジェクト$$$

shawarmaサイト（またはshawarma）を作成しました。 いくつかのタブがある小さなランディングページがあります。 それらの1つはコメントです。状態がどのように機能するか、どのように保存されるかなどを理解できます。 最後のタブは、マップ（外部JSライブラリとしてのマップ）との連絡先のブロックです。 少し後でマップに戻ります-これが問題です。



10,000ルーブルまたはshavermaの5つの無料部分を取得できるシンプルなアプリケーションを作成しました。



Data-Flow-フレームワークのフローがどのように動くかを見てみましょう。 角度から始めましょう

角度（左）

すべては状態から始まります。 私たちの場合、これは単なるコメントの通常の配列であり、そこからコメントを取得し、何らかの方法でそれらをレンダリングまたは追加します。



@を介してこの状態をコンポーネントに入れます-すべてのAngularの人々は犬と角かっこが大好きです。 マークアップの角括弧を使用して、このコメントウィジェットに状態（コメント）が書き込まれることを記述します。



そこからウィジェットから何かを追加したい場合、そしてもし私が傷つくことを恐れていないなら、オブジェクト変更をするだけです。 しかし、そうしない方がいいです。



@output



とかっこを記述する方が良いです。これらはイベントではなく、RxJSからのストリームです。したがって、ポップアップは表示されませんが、動作が少し異なります。

React（右）

Reactにも状態があります。 Reactは一般に、多くの異なるツールがあるFluxアーキテクチャの使用を推奨しています。 いわゆる小道具を介してコンポーネントに状態の断片を渡します。 この言葉をロシア語に翻訳する正しい方法が見つかりませんでした。

ユージーン：たぶん、物のような小道具を翻訳できます-「あなたはこれです。ピース」。

小道具では、データをスローします-コンポーネントでは、commentsプロパティからコメントを取得できます。 クリックや追加などの何らかのイベントを処理する場合、propsコンポーネントにも送信しますが、これは単なるコールバックになります。

角度

レンダリングする必要のあるコメントだけでなく、巨大で大きなコンポーネント、たくさんのコンポーネントがある場合、もちろん入出力を行うのはかなりばかげています。 しかし、これらが小さなコンポーネントである場合、たとえば、大きなコメントウィジェット内にはアバターなどがあり、入出力および角かっこを通じてもデータをやり取りできます。

反応する

まったく新しいものは何もありません。すべてがまったく同じです。子コンポーネントに小道具を渡し、CommentsWidget内でコメントを整理し、commentコンポーネント内で特定のコメントを渡します。 また、CommentFormを使用して、addイベントをリッスンし、何らかの方法で処理できます。



Eugene：もちろん、非常に大きなアプリケーションがある場合、そうするのはばかげています。 これらの入出力の巨大なツリーができます。 しかし、Angularには依存性注入があります！ React DIはありますか？







イリヤ：誰かが知らなかった場合、Angularで作業する前に私も知りませんでした-サービスとコンポーネント間の接続を非常に明白に設定できます。すべてを混乱させ、リファクタリングのたびに足を踏み入れることができます。

Eugene： Angularは愚かな人向けではありません。

私たちはサービスを利用します-これは本質的に、特定の注釈を持つ単なるクラスです。 可能な限り押し込みます-しかし、私はあなたにそれを伝えませんでした！ 一般的には、必要な場所でのみ押し込みます。この場合は、コメントウィジェットで行います。



そして、それが必要でない場合、同じ入出力を使用します。 つまり、一種のハイブリッドシステムです。 コメントウィジェットでは、サービスコールを使用してオブジェクトを取得します。すべてが通常どおりです。



Ilya： Reactには、たとえば一部のデータを上から下にスクロールできるようにする、いくつかの簡略化されたDIバリアントがあります。



Reduxを例として使用しますが、これは単に最も人気のあるライブラリだからです。 他のツールも同様に機能します。



店舗があります。 マジック接続機能を使用して、ストアを最上位コンポーネントに接続します。 最上位コンポーネントは、データがある特定の形式のストアがあることを認識しており、アクションを介した特定の通信形式により、何かが発生したことをストアに通知できます。







したがって、2種類のコンポーネントがあります。

1. 状態の存在を認識している一部のスマートコンポーネントは、その更新に関する情報を受け取り、更新が必要であることを状態に通知します。
   
   
2. 使用できるコンテキストに依存しないコンポーネントは、必要な場所で必要な小道具を入力に投入するだけです。
   
   

Eugene：そして、Angularでは、すべてのコンポーネントがスマートです。

コンポーネント定義

コードと、2つのフレームワークでコンポーネントを作成する方法を見てみましょう。

角度

Angularでは、コンポーネントは単純な通常のJSX、TypeScript、またはDartクラスですが、@を介した若干の注釈が付いたクラスです。 セレクターを介して記述できます。「角度、見て、マークアップにそのようなクラス、プロパティ、またはタグがある場合、これはコンポーネントであるため、コンポーネントとして扱います。」



イリヤ：紛争があることを思い出させてください。 したがって、私は可能な限り反対します。

反応する

そのため、Reactでは、いわゆる機能的なsetStateコンポーネントについて説明します。 入力としてpropsオブジェクトを取り、JSXテンプレートを返す関数があります。







Eugene： Angularのテンプレートは、シンプルでわかりやすいHTMLです。



イリヤ：非常に明確です！ 参照：ngFor、角括弧、コメント、括弧、onADD-プレーンHTML！



ユージーン：もちろん、あなたは何かを学ぶ必要があります-アスタリスク、括弧、犬。 しかし、彼らはAngularはジャビストによって書かれたため、そのようなものであり、多くのキーワードを持っていると言いますが、一般的にはプレーンHTMLです。

反応する

イリヤ：正直に言うと、Reactはそれほど普通のHTMLではないということです。 ここでJSXには、記述する内容に応じて、HTMLコードとJSコード、またはTypeScriptコードが混在しています。 はい、そのようなニュアンスがありますが、あなた自身の世話をするのに十分であり、コンポーネントの表示に関連するコードのみをコンポーネントファイルに記述します。 そして、すべての重いロジックは、レデューサー、ストア、コンポーネントから離れたヘルパーに引き出されなければなりません。そうすれば、すべてがきれいで透明になります。



JSで会社の開発者とレイアウトデザイナーを共有する場合、レイアウトデザイナーはこのようなコンポーネントの説明にすぐに慣れ、これに関する問題は発生しません。

角度

Eugene： AngularではDIはどのように機能しますか？ 基本的に、あなたは魔法を使って次のように言うだけです。



-見て、コンストラクタにこのようなサービスがあります（この場合はcommentsService）。



それだけです。Angularは、コンポーネントを作成したときに実装します。 次に、この場合のngOnInitのように、ライフサイクルフック中にインスタンスを使用します。 あなたは一日の終わりまでDIについて話すことができます-それはただの魔法です。

反応する

イリヤ： Reactの魔法をいくつか紹介します。 コンポーネントをストアに関連付けるには、コンポーネントと接続機能をReduxから取得し、接続するルールを渡します。 1つのルールはReduxツリーをサブツリーに分割し、小道具でコンポーネントに渡す方法について説明し、2番目のルールはアクションReduxをコールバックでラップしてコンポーネントの小道具に渡す方法について説明します、それだけです。

Eugene：もちろん、許してくれますが、Angularの場合は魔法の場合、このエクスポートのデフォルト接続はある種の黒魔術です。



Ilya：ご存知のように、JSは2年で少し変更され、現在ではデフォルトのエクスポートが正常になっています。

ユーザーインタラクション

Eugene：一般的に、これは最も興味深い部分です。ユーザーが何かを行うと、すべてがどのようにレンダリングされ、どこで分解されるかです。

角度

その中にcomments-widget、その中に小さなコメントフォームのアプリケーションがあります。 これらはすべてコンポーネントです。 ユーザーが下部コンポーネントのどこかで送信をクリックするとどうなりますか？



すべての角度の愛好家は、ゾーンが大好きです。 ゾーンは非常にトリッキーなもので、奇妙なことに、ダートから出てきました。 ゾーンは、ブラウザのすべての非同期機能（setTimeout、setInterval、およびクリックなどのすべてのユーザーインタラクション）にモンキーパッチを実装します。



何かが起こると、ゾーンは特定のコードをひきつけて引き出します-これがChangeDetectionです。 ChangeDetectionは、すべてのコンポーネントのルートから実行され、何かが変更されたことを判断し、すべてをレンダリングします。 たとえば、5つのコメントがあり、6番目のコメントが追加された場合、5つのコメントすべてがリダイレクトされます。 ですから、非常に高速です。

反応する

イリヤ：同じReactアプリケーションを作りましょう。 わかったように、プラスまたはマイナスのアーキテクチャを持つアプリケーションを作成することは問題ではありませんが、ポイントは詳細にあります。







フォームの送信イベントをキャッチし、上記のコンポーネントに通知し、ストアでアクションをスローし、アクションを処理します。 ストアは変更を発行します。 変更の発行はストアに関連付けられているすべてのコンポーネントに届き、コンポーネントはストアツリーへのリンクが変更されたかどうかについてトピックの小道具のチェックを開始します。







それらが変更された場合、コンポーネントは再レンダリング関数を呼び出し、仮想DOMを完全に再レンダリングします。その後、仮想DOMは以前の状態を現在の状態と新しい状態と比較し、DOMツリーを点ごとに変更します。

ユージン：待って。 仮想DOMがあり、原則として、メモリ内にDOMツリー全体のコピーが2つある可能性があります。



イリヤ：これは問題ですか？



Eugene：ラップトップにギガバイトのメモリがあるとしたら？



イリヤ： 2007年のラップトップ？ しかし、本質的には、実際のDOMには非常に不快な制限があります。 5〜1万個を超えるDOMノードを保持することはできず、不適切に動作し始め、速度が低下します。 したがって、多くの仮想DOMノードを作成することはできません。



Eugene：特にIEでは。

パート3.痛み

通常、議論の後に痛い。

角度

Angularの痛みは何ですか？ 私はあなたにこれを伝えませんでしたが、それは少し遅いですが、あなたがそれを調理する方法を知らない場合だけです。







たとえば、textareaがあります。 クラスをぶら下げたり、何かを強調したりするなど、mousmoveで何かをしたい。 次に、mousmoveにサブスクライブして実行します。 すべてがシンプルです。



ChangeDetectionが発生すると、コンポーネントを酸性の色で色付けしますが、このようなものが表示されます。







通常、ChangeDetectionは非常に高速であると言われています。 しかし、多くのDOMノードとコンポーネントがある場合、すべてが高速ではありません。



これは非常に簡単に修正できます。Angularがユーザーに触れないように、ゾーン外のmousmoveにサインアップしてください。 その後、何かが必要になったら、ゾーンに戻ることができます。

イリヤ：すべてが自動的にクールに動作するようにゾーンを作成しています。そして、これを回避しようとします！？



ユージーン：そうだ！ 私は、Angularは愚かなものではないと言った。

Angular-4でない場合、それはすべて真実です。 みんな試してみたが、すべてうまくいった。 一般に、Angularは今や非常に高速で美しく、優れた機能を発揮します。

反応する

イリヤ： Reactの痛みについて少し。 かつて、私がReactに没頭し始めたとき、私は今、国家を通じて機能するフレームワーク上でアプリケーションを書くことに決めました。 簡単そうですね。 そして、「DOMノードにクラシックを配置し、ある種のアニメーションを作成し、このクラシックを削除します！」と考えます。しかし、Reactではこのようなことは機能しません。







Reactでアプリケーションを作成するとき、最初の数か月は思考を再構築し、Reactでアプリケーションを作成することを学びます-状態を変更し、変更後のアプリケーションの変化を理解します。 いずれにせよ、Reactに完全に没頭しているすべての人がこれを学び、それを扱う方法を理解しています。



サンプルアプリケーションには、マップのあるブロックがありました。 サードパーティのカードを挿入する必要がある場合、2つのオプションがあります。



良い結果。 たとえば、2GISの一部の人は、ライブラリにReactラッパーを作成しました。 マップ-DOMツリーを構築する特定のサードパーティJSアプリケーションは、単純なコンポーネントになります。 あなたはそれを使用し、それだけです。







別のオプション 。 ただし、Reactで以前に誰も接続または接続しなかったJSライブラリを接続したいが、ReactコンポーネントでJSライブラリをラップする方法をオープンソースソリューションに投稿しなかったことがあります。 そして冒険が始まります。







Reactには多くのライフサイクルフックがあり、そのうちのいくつかは使用する必要があることがわかります。 最初にcomponentDidMountを使用する必要があり、ReactコンポーネントがレンダリングされてDOMに挿入されるまで待ちます。 次に、このサードパーティのJSライブラリを初期化し、DOMノードをライブラリに渡すと、そこに所有物がデプロイされます。



componentWillReceivePropsのライフサイクルフックを覚えておく必要があり、コンポーネント入力で小道具を更新するたびに、手で巨大なロジックを記述する必要があります。



私の例では、それは単純ですが、巨大なフットクロスがあると思われます。



ライフサイクルフックshouldComponentUpdateを覚えておく必要があります。 ここでは、falseを返し、「反応、レンダリングでgifを提供しました。空と見なし、まったく入りません」と言います。

もう一つ

Eugene：ツールについて少し話しましょう。

角度

もちろん、Angularはそれをすべて備えています。 何も必要ありません、ありがとうございます。

• Angular-CLIは素晴らしいことです。皆さんに使用することをお勧めします。
  
  
• 追加のツールが必要な場合は、Angularがあり 、Angularアプリケーションのデバッグに役立ちます。 コンポーネント、ルート、その他すべてを表示します。 私もそれをお勧めします。
  
  
• Ngrevは、悪名高いMinko Gachevによるもので、静的コード分析を使用して、Angular-applicationsを通信およびその他すべてに分析します。 外観もお勧めします。
  
  

反応する

イリヤ： Reactは、少なくとも優れたDevToolsで愛されています。







React DevToolsがあります。これは、アプリケーションをDOMツリーとしてではなく、Reactコンポーネントとして提示するのに役立ちます。 どのコンポーネントがどのコンポーネントに組み込まれているかを確認します。 たとえば、Reduxが作成するマジックラッパーコンポーネント、およびコンポーネントの入力に来たプロップを参照してください。 どこで何が間違っていたかを理解する。



多くの人がDevToolsを見たときにReactを使い始めたようです。 これらのツールを使用すると、時間内に移動して状態変更の履歴を確認し、アプリケーションの状態を数ステップ前に巻き戻すことができます。

ユージーン： 2007年に戻りますか？



イリヤ：タブが非常に長い間生きていたのなら、なぜですか？

また、便利な機能もあります。最も近い状態の差分、完全な状態、テスト用のmokiが生成されるテストタブです。 アプリケーションの現在の状態に基づいてmokaを取得し、状態に詰め込み、何かをチェックするテストを実行できます。 アプリケーションを目的の状態に変換する手順を実行する必要はありません。状態は単にアプリケーションを作成し、アプリケーションがこの状態にあるときにすべてが正常かどうかを確認します。

パート4.終わり

議論の後、痛みがあり、痛みの後、それは終わりです。 Angular対Reactのバトルの一部を要約します。

角度

• 構文 Angularは優れた明確な構文です。 これはHTMLであり、機能します。奇妙なJSXを覚える必要はありません。星、括弧などを覚えるだけです。 私はそれについて何も悪いことは見ていません。
  
  
• 言語。 JavaScriptで、TypeScriptで、Dartで、Flowで、Angularで何でも書くことができます。
  
  
• 単一のメンテナー。 GoogleにはAngularがあり、AngularにはGoogleがあります。すべてのマイナスとプラスがあります。 プラスから-Angularが更新された場合、Angularに含まれる他のすべてのパッケージは確実に動作しますが、一方で、GoogleはGoogleであることを誰もが知っています。
  
  
• 箱入りソリューション。 CLIインストールを行うと、HTTPリクエスト、テストなど、必要なものがすべて揃うことを確信できます。 そして、すべてが箱から出してすぐに機能します。 原則として、何かを置き換えることができますが、ほとんどの人はすべての長所と短所で既製を使用します。
  
  

反応する

• 構文 Reactでは、これはもちろんJSXです。 いいえ、JSXがなくても書くことができますが、私はこれをする人を見たことはありません。 あなたはすぐにJSXに慣れ、それがどれほど便利かを理解します。
  
  
• 言語。 Reactの場合、JSは依然として最も一般的な言語です。 現在、TypeScriptに向けたわずかな動きがあり、Dartを書くオタクもいますが、これは主流ではありません。
  
  
• コミュニティ ReactにはFacebookがあり、これはReactの新しいバージョンをリリースし、まったく同じReact Fiber製品を作成します。これは、同じインターフェイスを持ちますが、内部はまったく異なります。 しかし、Reactには非常に大きなコミュニティがあり、既製のコンポーネントからアプリケーションをアセンブルし、ラップされた使い慣れたライブラリを接続して使用できる可能性が非常に高くなります。
  
  
• コンストラクター 。 Reactは、Fluxアプローチの使用を推奨する単なるテンプレートエンジンです。その後、自分でピース全体からエコシステム全体を収集するか、単に好みの完成したスターターパックを取得して、多くの依存関係をドラッグします。
  
  

会議では、ユージンとイリヤがレポートの途中でAngular vs Reactに投票しましたが、残念ながらボットがゲームに参加しました。 したがって、この記事の調査で繰り返しましょう。

今年もRIT ++フェスティバルで退屈しないことをお約束します-フロントエンドに関するレポートのプールは非常に深刻です。 以下に例を示します。



Andrey Solodovnikov （N1.RU）は、 Vue.jsが大規模なWebアプリケーションの作成に適し ているかどうかを判断し、 Vue.jsでの開発が本当に便利である理由とパフォーマンスがどうであるかを説明することを約束します。



HuntflowのVitaliy Glybinは、このトレンディでモダンなフレームワークのすべてをゼロから書き直すのに6か月必要な理由をビジネスに簡単に説明できると主張していません。 でも

大規模で複雑なアプリケーションをBackboneからVue に移行した個人的な経験 を共有し 、ビジネスを損なうことなく （そしてその逆も）これを行うことができた理由について話します。



ユーリ・ユーリンは、Skyengが議論、実験、コードに費やした100時間以上を節約し、他人の間違いから学ぼうとしています。 レポート「 Angular 4/5でUIキットを作成する技術面 」は、 共通コードをライブラリに入れるプロセスに当てられます 。



Luxoft Mikhail Bashurovのレポートでは、 イベントループについて説明します。 イベントループとは何で、何を使用するのかを検討します。 J ava S criptの 非同期性を使用する方法について話しましょう。これは、同時に1つのスレッドを持ち、足元で自分自身を撃ちません。



合計で、約60のアプリケーションが Frontend Confに送信されましたが、選択されるのは半分未満です。 ニュースをフォローすると、正確なプログラムを待たずにチケットを予約できます。