2016-09-15 3 views
1

大規模なWebアプリケーションでは、フロントエンド機能とバックエンド機能の両方をサポートする膨大なライブラリが使用されがちです。私は、安定性とメンテナンス性を高めるために、依存関係の数を減らしたいと考えています。私のようなライブラリを含んでいるウェブアプリの依存を減らすには良い道を探しています:依存関係を最小限に抑えてフロントエンドコードをリファクタリングする

私は可能な限り、それらの依存関係の多くを組み合わせた技術、言語、またはフレームワークを探しています。

は、ここで私はこれまでに調査したものです:小さな依存関係をリファクタリングし、長い道のりを行くことができ、未使用の部品を取り外す

Reactは、jQueryスパゲッティコードに規律を課し、いくつかの依存関係の必要性を減らします。

Elmは、型の安全性を徹底的に守る方向に向かいます。

ClojureScriptもまた、機能プログラミングパラダイムによって規律を課すことになる。

リファクタリングを除いて、これらの潜在的なソリューションはすべて、Ruby on Railsのバックエンドと統合するために、独自の複雑さをいくつか導入します。リアクションは、現在の依存関係の中で最も多く使われているようです。

リファクタリングから始めて、徐々に機能的な言語やライブラリの1つを導入するのが最も安全な方法です。私はこの目標をどのように念頭に置いてリファクタリングしますか?最初にJSをリファクタリングする(つまりjQueryを削除する)ことは有用でしょうか?私はリファクタリングする大規模なプロジェクトを継承するとき

答えて

1

ライブラリ/依存関係

は通常、最初に行うべきことは、例えばコア依存性を決定していますあなたのカスタムコードのほとんどが主なライブラリですか?私はすでにあなたのリストから の下線jQueryは基本的に同じことをしようとしています。どれが最も最適化され、最速であるかは徐々に平準化されています。 2番目のアンダースコアがまだ最も速いと仮定しましょう。トラバースのためのjQueryに依存しています。ミクロスピードを得るために余分なライブラリを用意しますか?私の意見では、各ページの余計なペイロードは価値がありません。

次にブートストラップが主なCSSドライバである可能性がありますが、使用する可能性があるいくつかのJavaScript機能があります。カルーセル、日付ピッカー、ドロップダウン、他のウィジェットを切り替える...それらが使用されているかどうか(おそらくはい)、そうでない場合は、Bootstrap jsライブラリを削除してください。ブートストラップはまだjQueryに依存していることに注意してください。

選択/選択はオプションのプラグインです。それらの目標はBootstrap/jQueryでカバーされる可能性が高いです。それらをリファクタリングしてみてください。

スリックグリッドもグリッドシステムです。ブートストラップグリッドよりも何が利点ですか?彼らがブートストラップをリファクタリングしたように聞こえる。それが使用されている場合は、ブートストラップグリッドにリファクタリングして、チームの一般的な知識を増やしてください。

ハンドルバーテンプレート用。論理演算子を使用すると便利です。そうでなければ、小さな置換関数を簡単に見つけることができます。

function renderTemplate(obj, template) { 
    var tempKey, reg, key; 

    for (key in obj) { 
     if (obj.hasOwnProperty(key)) { 
      tempKey = String("{{" + key + "}}"); 
      reg = new RegExp(tempKey, "g"); 
      template = template.replace(reg, obj[key]); 
     } 
    } 

    return template; 
} 

CKEditorバージョン/ラファエル心の内の1つの具体的な目標=> WYSIWYG /ベクターとのライブラリです。怠惰なロードを理想的に保つのに最適です。必要なときにのみページにそれらを含める。サーバーの言語は<script><head>タグに含ま扱うなら

// after the additional library was loaded ... 
cacheObj1.on('focus', this.initCKE); 
cacheObj2.on('click', this.initVector); 

、あなたは心の中で特定のページで必要とされる、簡単なスクリプト参照を、維持するために選択することができます。 20のDOM準備完了イベントをインラインで終わらせないで、プロジェクトに必要なものすべてを初期化する準備イベントを1つだけにしてください。遅延ロードに

  1. jQueryのプラス様々なプラグイン
  2. ブートストラップ
  3. ハンドル
    • CKEditorバージョン リファクタリング
    • LIBコアへ
    • 選ば/ Selectセレクト リファクタリングD3 /ラファエル リファクタリングから遅延ロードへ

アプリケーション/カスタムJS

libのコアへ

  • アンダー リファクタリングのlibコアへ SlickGrid リファクタリング今トリッキーな部分が始まります。あなたのJavaScriptのスキルはどれくらい良いですか、以前のプログラマーはどれくらいうまくいきましたか? jQueryセレクタが大量に見つかった場合は、モジュール方式でプログラムされていない可能性が高いです。あらゆるコードの平和を何かにリファクタリングするという難しい作業が始まります。

    ここでのアイデアは、あなたのライブラリと会話するインスタンスまたはローダーファイルを持つことです。おそらくカスタム関数ファイル(あなたが望むならアンダースコア関数を保持することができます)をコード全体で使用するでしょう。プロトタイプや "クラス"とシングルトンはそれを完成させます。A nice postリファクタリングについては、これを設定する方法に関するリンクを追加することができます。それでは、grunt/gulpの設定はあまりにも派手ではありません。 JS(npm、bower)とCSS(コンパス、less)のオートメーションは、その場でカバーすることができます。

    結論

    jQueryが主な依存性の可能性が高いです。あなたがそれを取り出すならば、あなたは最初から始めるでしょう。あなたが話すすべてのプラグインは、ページの読み込み時に余分な脂肪です。それほど優れているわけではありませんが、クッキースクリプト、jsonサポート、polyfillsなどの他の機能を再利用するだけの費用を払うこともあります。 1つまたは2つのコアライブラリを使用し、依存関係とアプリケーションコードを明確に分離してください。

    bundle and minify ^^

    ハッピーリファクタリングすることを忘れないでください!

  • +0

    これは大いに役立ちます!遅延読み込みとは何を意味しますか?私はそれを必要とするページにロードすることを前提としていますが、Railsのアセットパイプラインは難しいものです。あなたはCDNを使うことを意味しますか? これらの依存関係のそれぞれは、SlickGridのような理由で選択されました。なぜなら、列をマージできるからです。コアlibを使用すると、いくつかの機能を再実装することになります。場合によっては努力する価値があるかどうかは不明です。 –

    +0

    番号が付いているので、ライブラリの読み込み順序について考える必要があります。 1と2の間で、 '$'オブジェクトに接続するときに、いくつかのjQueryプラグインを追加することができます。 「Modernizr」は、私が例を挙げて0にするものです。それをバンドルして小型化し、余分なものはすべて、特定の機会にのみ使用されます。スクリプトタグを頭に置くか、ajaxライブラリの読み込みやその他の手法によって動的にインクルードされます。 –

    関連する問題