React JSをAngular JSアプリケーションに挿入するか、パフォーマンスのために戦う

愛する愛好家の皆さん、こんにちは！ 最新のウェブインターフェースの構築に関連する特別なタスクを容易にするプラグインやライブラリが何百もあると言っても、アメリカを発見することはできません。 Angularはその1つであり、そのパフォーマンスについて多くのことが書かれており、ほとんどの場合、すべてを良くするためにすべきではない推奨事項が与えられています。



サポーターの主な論点は、不正なアプリケーションの動作は遅いが、正しいアプリケーションには2000〜3000を超える要素を含めるべきではないということです。 さらに含まれている場合は、何かが間違っています。 たとえばhttp://iantonov.me/page/angularjs-osnovyを参照してください。



引数は一般的に非常に堅牢ですが、「間違った」Webアプリケーションを作成する必要がある状況は常に存在します。そのような要件のためです。 この記事では、このような問題とその解決方法について説明することにしました。 私たちの意見では、この記事はプロのWeb開発者にとってより有用だと思います。 そのため、私たちのタスクは、1つのスポーツクラブの予約システム用のカレンダーを作成することでした。 カレンダーには7つの12時間ブロックが表示され、各日は15分間隔に分割されています。 ブロックには2〜10個のDOM要素を含めることができます。 トラブルの前兆はないようです。上限は〜3000です。









さて、私たちは書き始めます：

<div ng-repeat=”day in days”> …. <div ng-repeat=”hour in day.hours”> <div ng-repeat=”block in hour.blocks”> … <div ng-repeat=”block in hour.blocks”> … <div ng-repeat=”session in block.sessions”> … </div> </div> </div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

できた！ しかし！ これらすべてのデータバインディングには約2〜3秒かかりました。 ところで、質問が発生する場合があります。 プロファイラーを使用してこれを実行しようとしても、直接答えが得られるわけではありません。プロファイラーで、データバインディングシートに正確に関連するもの、ルーティングなどを追加するものを理解することは困難です。



したがって、非常に簡単に行いました。

 $timeout(function() { $scope.days = days; var now = new Date(); $timeout(function() { console.log(new Date - now); $scope.apply() }, 0); }, 100);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のタイムアウトは、他のすべてのスクリプトが機能するために必要です。これにより、測定の精度に違反しないように、実際には100（ms）の数値が実験的に選択されます。 2番目は安全に0を実行できます。 ブラウザは最初の休息を受け取るとすぐに、内部ハンドラ$ timeout-aをすぐに実行します。これは、実際にはデータバインディングが完了したことを意味します。



ユーザーインターフェイスの応答性の観点から、2〜3秒は非常に大きな値です。この問題を解決するにはどうすればよいでしょうか。



もちろん、最初のことはtech.small-improvements.com/2013/09/10/angularjs-performance-with-large-listsと、もちろん、 AngularJSの最適化：1200msから35msを読み直すことです 。 前回の記事では、結果は特に印象的です。 しかし、結果は仮想化（つまり、小さな表示部分のみをレンダリングすること）とキャッシュによって実現されます。 仮想化は優れたソリューションですが、仮想化されたコンテンツが非常に簡単な場合のみです。 そうしないと、ページをスクロールするときに非常に不快なブレーキが表示され、仮想化の効果全体が平準化されます。



仮想化といえば、表形式のデータを表示するための素晴らしいngGrid要素があり、何百万もの要素を表示できます（チェック:)）。 ただし、ここでのソリューションはもちろん仮想化です（そうでないと、ngGridのすべての行が同じ高さになるのです）。



そのため、多くのオプションを試した結果、最終的にReactJSに到達しました。 開発者によると、これはデータバインディングのための最速のフレームワークです（そして今、私はこれがそうであることに同意する傾向があります）。 たとえば、 Vueの Webサイトは別の主張をしていますが、私自身のテストではReactの優位性が示されました。



だから反応する。



このフレームワークに特化したHabréの記事はすでにかなり多くあります。 まず第一に、私はお勧めします：

• http://habrahabr.ru/post/215607/
• http://habrahabr.ru/post/217295/

素晴らしい記事だけでなく

• http://maketea.co.uk/2014/03/05/building-robust-web-apps-with-react-part-1.html
• http://maketea.co.uk/2014/04/07/building-robust-web-apps-with-react-part-2.html
• http://maketea.co.uk/2014/05/22/building-robust-web-apps-with-react-part-3.html
• http://maketea.co.uk/2014/06/30/building-robust-web-apps-with-react-part-4.html

Habréにはロシア語への翻訳があります。



ReactJSの秘密は、仮想DOMで動作することです。これにより、ビューのレンダリングに必要なアクションの数を最小限に抑えることができます。 こちらの素敵な記事。



ReactJSでビューを表示するためのコードは次のとおりです。

 var Hello = React.createClass({ render: function() { return React.DOM.div({}, 'Hello ' + this.props.name); } }); React.renderComponent(Hello({name: 'World'}), document.body);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、最初の部分でコンポーネントを定義し、「React.renderComponent（Hello（{name： 'World'}）、document.body）」という行で描画します。

React.DOM APIは非常に便利ですが、AngualrおよびKnockoutテンプレートの後、Javascriptを使用してDOMを生成するのは少し古く、多くの作業のように思えます。 これを解決するために、Facebookは「ブラウザー内JSXトランスフォーム」を提供しています。



ブラウザでの会議

 <script type="text/jsx">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

トランスフォーマーはそのようなコードを回します

 var HelloMessage = React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで：

 var Hello = React.createClass({ render: function() { return React.DOM.div({}, 'Hello ' + this.props.name); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

構文に注意してください：return [Markup]; 引用符なし（ReactJS.Netの経験から余分な角かっこや改行は問題ありませんが）。 繰り返し要素を表示するには、いくつかの配列に対して次のようにする必要があります

 var HelloMessage = React.createClass({ render: function() { … var nodes = array.map(function(element) { return <div>…</div>; }); return <div>{nodes}</div>; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、おそらく次のようになります。

 var SubMessage = React.createClass({ render: function() { return <div>…</div>; } }); var HelloMessage = React.createClass({ render: function() { … var nodes = array.map(function(element) { return <SubMessage >…</ SubMessage >; }); return <div>{nodes}</div>; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

なんで？ 答えは、コンポーネントには独自の状態があるということです。これについては、以下で説明します。



ちなみに、JSX変換の作業はサーバーでも取得できます。これには、 https：//github.com/facebook/react/wiki/Complementary-Tools#jsx-integrationsの豊富な統合セットがあります。それはReactJS.Netでした。



そして、双方向バインディング-MV- *フレームワークの基礎となるものは何ですか？ 実際、 http: //maketea.co.uk/2014/03/05/building-robust-web-apps-with-react-part-1.htmlで適切に指摘されているように、ReactJSはいくつかの手段ではありません、そのような問題を解決するために。 ReactJSは、コンポーネントのプロパティと状態を区別します。 プロパティ-これは、React.renderComponent（Hello（{[PROPERTIES}}）、...）を呼び出してコンポーネントに渡し、this.propsを介してコンポーネント内で既に取得しています。 ほとんどの場合、プロパティはオブジェクトのツリーであり、それによってマークアップが生成されます。 イデオロギー的に、プロパティはかなり静的な動作を想定しています。 プロパティが更新されたときにマークアップを変更するには、React.renderComponentをもう一度呼び出す必要があります（このrenderComponentは、MV- *フレームワークの同様の構造よりも高速に動作することが多いですが、差分アルゴリズムは非常に優れています）。



状態は変化する可能性のあるものです。 状態は、いくつかの方法で決定されます。

• getInitialState-コンポーネントの初期状態を定義します（プロパティに基づいて返されます）。
• setState-状態を設定します。

setStateが呼び出されると、呼び出されたコンポーネントに対してのみ再描画が行われます。



反対方向にデータを転送する方法は？ これを行うには、初期値であるvalueLinkオブジェクトと、それを変更するためのハンドラーが必要です。 このハンドラーは状況に応じて動作する必要があります。 Facebookでは、小道具に新しい値を直接書き込むことはお勧めしません。そのため、新しい値を記述して、マークアップがデータで適切に更新されるようにする必要があります。 つまり、最も完全な形式では、ReactJSの双方向バインディングの類似性は次のようになります。



角のどこにいた

 <input ng-model=value />.
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ReactJSには次のものがあります。

 var HelloMessage = React.createClass({ getInitialState() { return { value: this.props.value }; }, render: function() { var valueLink = { value: this.state.value, requestChange: function(newValue) { this.setState({value: newValue}); }.bind() //  ,   .bind() }; return <input value={valueLink}/>; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

冗長？ もちろん!!! これは、生産性の5倍の増加の代価です。



したがって、タスクに戻ると、何がありますか：

1. 作品の動作が遅いAngularJS上のアプリケーション。
2. 生産性を向上させたい（実際には5倍になります）。
3. 最小限の労力でこれを達成したいと考えています。
4. 理想的には、コントローラーとモデルの両方を変更せずに、アプリケーションのビュー部分のみを変更したいです。

このアイデアはhttp://habrahabr.ru/post/215607/で説明されています。



実際、私たちのもの：

 <div ng-repeat=”day in days”> …. </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今になります：

  <div calendar=”days” />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、これはReactではなく、Angularであり、calendarはDaysの変更を追跡し、renderComponentを呼び出すディレクティブです。



良いニュースは、JSXでViewコードを書き換えることはほとんど機械的なプロセスであるということです。 Ng-classはclassName = {className}に変わります。ここで、classNameは計算されたクラス名です（ちなみに、クラスではなくclassNameであることに注意してください。これを忘れると、Reactがコンソールで役立ちます）。 スタイルのNg-show = {style}。 上記のNgモデル。 非常に機械的なため、これを自動的に行うngReactイニシアチブさえあります。



ただし、 ここに記載されているように 、パフォーマンスがマイナスになる可能性があります。 回避するために、実証済みの「手動」の方法を使用しました。



要約すると：

以前は2〜3秒かかっていたものが、300〜500ミリ秒かかりました。 これにより、ユーザーエクスペリエンスが非常に楽しくなりました。 時間によると、修正には約3日かかり、最初の実装は約15日でした。 ビューのみを変更することができましたが、おそらくこれがこのタスクの特異性です。



結論として、Angularで記述されたアプリケーションでのReact-injectionsの使用（許可を得てそれを呼び出します）を使用すると、生産性を約5倍に高めることができます。 そして最も重要なこと-行われた変更は手動および機械的ですが、それらはローカルに適用されます。



私たちの観点からは、同様の状況で、Reactはアプリケーションの「遅い」場所を高速化する魔法の杖になります。