ヤフーユーザーインターフェイスブログ（YUIBlog）

3.4.0のためのYUIとローダー変更

3.4.0で私たちはそれ以上のパフォーマンスのためにだけでなく、他の場所（サーバー上など）で使用することがより堅牢で容易にするために、周りLoaderのロジックの一部をシフトのプロセスを開始した。 我々は将来の改訂ではさらに変更をロールアウトされますが、私はいくつかの時間がかかると変更されたかを説明したかった、それが変更された理由、どのように開発者に影響を与える可能性があります。 ユースケースの大半は、開発者は、物事が少し速くなり、それらの要件のダウンロードが少し小さいことを除いて別の何も、気付かないでしょう。

シード·ファイル

私は対処する最初のものは、YUIのシードファイルです。 YUIの以前のバージョンでは、私たちのシードファイルには、非常に小さなであり、ローダーまたはそのメタデータのいずれかを含んでいませんでした。 我々は望んでいたとして、90％のユースケースでは、これはパフォーマンスの高いではありませんでしたことがわかりました。 通常のユーザーはシード·ファイルに順番にシードが最初のローダを取得する必要があることを意味し、そのモジュールが、要求含まれている場合、そのすべての依存関係を計算し、それらをすべて取得します。 我々は今、この余分なHTTPリクエストを行うために間違ったものであることを感じるので、新しい標準のシードファイルには、ローダーとそのメタデータが含まれています。 はい、これは最初の要求は少し大きくなりますが、そのメタデータのすべての要件が、既にページ上に今あるので、それははるかに高速モジュールの読み込みを行います。

あなたはそれを古い方法を使用する場合は、あなただけではなくゆいベースシード·ファイルを含めることができます。 それはYUIがスタンドアロンモードで実行するそれに加えてオンデマンドでローダーを取得する機能が含まれているようにするために必要なすべてが含まれています。 あなたも、きめの細かい依存関係を必要とするならば、我々は古いゆいベース種子はまったく同じものであるユイコアシードファイルを作成しました。

     /ビルド/ゆい/ゆいmin.js / / YUIシード+ローダー
     Loaderを使用して/ビルド/ゆいベース/ゆいベースmin.js / /旧YUIシードのサポートを取得する
    ローダーなし/ビルド/ゆいコア/ゆい-CORE-min.js / /古いゆいベースのサポートを取得する

それはこれらのURLは、以前のURLとは異なることに留意すべきである。 使用していた誰もyui/yui-base.jsファイルは、それらを再指定する必要がありますyui-core/yui-core.js 。 あなたはシードをロードし、ローダーを取得する以前の方法が必要であれば、使用しyui-base/yui-base.jsシードファイルを。

この変更は他の理由は、YUIは、できるだけ多くの場所として実行させるために私たちのロードマップです。 あなたのアプリケーションで利用可能なコンボサーバーを使用している場合は、単一のコンボ·サーバー·リクエストの古いシードファイルに加え、ローダーはすべてが順調と良いです。 しかし、サーバー上ではどうですか？ またはモバイルデバイス上のオフラインアプリでは？これらの場所はまだ彼らに必要な情報を取得する際にファイルアクセスを最小限に抑える必要があります。

ロールアップ

我々が変更された次のことは、システムからのロールアップを削除し、設定ローダでfalseにallowRollupをデフォルト。 これは何を意味するんでしょうか？まあ、うまくいけば、何もすべてであった。 私は変更の影響を説明する前に、私はその背後にある理由を説明しましょう​​。 主な理由は、ペイロード配信と一緒に、再び、パフォーマンスです。 この例を取ります。

     モジュール：イベント、イベント-Bが必要
     モジュールB：イベントC、イベント-Dを必要とする

あなたは両方を要求すると、前の3.4.0へのロールのロジックでは、 イベントのロールを取得する必要があると判断するために使用されます。 これは、実際にはなっていたことを意味する。

      event.a、event.b、event.c、event.d以下、event.e、event.f、event.g、Event.hに

あなたが実際に必要以上のページの詳​​細になってしまった。 ロールアップのサポートをオフにすることで、YUIは今あなたが実際に要求し、それ以上何もものだけを求められます。 ほとんどのケースでは、 これを通知されません 。 モジュール開発者は、過去に働いたものが現在動作しない場合があります状況に陥る可能性があります。 この理由は、彼らが実際にする前に事故で働いたことがあります。 ダイヤル ：私は現実世界の例を使用してみましょう。

3.3.0では、ダイヤルは、これを必要：

    必要があります：[
         'ウィジェット'、
         'DD-ドラッグ "、
         '代替'、
         'イベントMouseEnterイベント'、 
         "トランジション"、
         '国際'
     ]

大部分は、3.4.0で働いていたダイヤルは、しかしキーボードのサポートは動作しませんでした。 いくつかの簡単な調査を行った後、それはプログラムのロールアップのサポートが実際に全体のイベントプログラムのロールアップを（ ​​イベントの移動とイベントキーを含む）を要求されたことが判明した。 イベントのすべてを稼いでロールアップロジックを使用せず、3.4.0ダイヤルは、もはやそのすべての要件がありませんでした。 より具体的なダイヤルの要件を作成し、その実際のすべての依存関係を定義すると、適切にそれが期待どおりに動作します。

    必要があります：[
         'ウィジェット'、
         'DD-ドラッグ "、
         '代替'、
         'イベントMouseEnterイベント'、
         "イベント移動"、
         "イベントキー"、
         "トランジション"、
         '国際'
     ]

モジュール開発者のために、それはあなたのモジュールは、それが機能するために必要な正確に何を必要としていることを確認するのがベストプラクティスです。 上流のモジュールの要件があることを前提としないでください。 それはあなたが必要なものを求めることを確認するために、常に良いでしょう。

また、これはモジュールの要件がより明確に定義されていることを意味します。 たとえば、 datatype-date国際空港では、このような国際空港にアクセスすることになります以前のバージョンではサポートが組み込まれています：

     Y.Intl.getAvailableLangs（ 'データ型 - 日付'）;

しかし、このモジュールが実際に（言語を持っていないのでdatatype-date-formatモジュールがない）、これは失敗します。 それはより具体的に、実際に正しいモジュールの言語を要求する必要があります。

     Y.Intl.getAvailableLangs（ 'データ型 - 日付形式'）;

ファイルの爆発とサブモジュールの取り外しを構築する

この変更を行った後、我々が行った次の変更は、ビルドディレクトリを爆発され、コアシステムからサブモジュールを削除します。 サブモジュールのロジックは、私たちのメタデータ構造が変更され、削除されませんでした。 これは、現在のインストールのために下位互換性を提供します。

コアシステムにおけるサブモジュールは、我々が解決するために必要な問題のいくつかを引き起こした。 第一の理由はパフォーマンスであった。 依存関係を計算するために必要なたびにローダーが、それは各モジュールのサブモジュール/プラグイン構造を歩く必要がありました。 回のこの数千を行うと、ルーチンを計算ローダーの間に我々のパフォーマンスを傷つけた。 コアシステムにおけるサブモジュールのサポートを削除することにより、我々は、関数呼び出しや繰り返しの数万人を救った。

ローダーは、次の場合にように変更されましたuseモジュールのメタデータのプロパティが複数のモジュールを定義し、それが元のモジュールをロードしようとする代わりに、これらのモジュールを使用します。 だから、あなたは"要請があればdd "ローダー"を検査するでしょうdd "のメタデータを、このようになります使用するプロパティを参照してください。

     "DD-DDM-ベース、DD-DDMは、dd-DD​​M-ドロップ、DD-ドラッグ、DD-プロキシ、DD-制約は、ddドロップ、DD-スクロール、DD-ドロ​​ッププラグイン"

コアYUIのシードファイルでは、我々はまた、我々は、 仮想ロールアップまたはエイリアスを呼び出すものを含むされています。 これらのモジュールの定義は正確にローダーのメタデータと同じです。 このようにあなたは私たちの依存コンフィギュレータからエクスポートされたすべてのファイルが含まれていても、ページ上に存在するローダーを持たずにこれらのプログラムのロールアップを使用することができます。 将来のリリースでは、我々はさらに、このアプローチを洗練されます。

この変更を行った後、我々は、私たちのビルドファイルを爆発させる前に付加。 以前のリリースでは、サブモジュールは、モジュールファイルのパスを決定した。 たとえば、次のように

     "DD"：{
         "サブ"：{
             "DD-ドラッグ"： 
             / /モジュールのデータ
         }
     }

あなたは "dd"を構築された3.3.0で、ファイル構造は、このような感じになっています：

     /ビルド/ DD / DD-drag.js
     /ビルド/ DD / DD-ddm.js
     /ビルド/ DD / DD-drop.js

3.4.0で爆発したビルドシステムを使用すると、 "DD"のはこのように現在のファイルをビルドします。

     /ビルド/ DD-ドラッグ/ DD-drag.js
     /ビルド/ DD-DDM / DD-ddm.js
     /ビルド/ DDドロップ/ DD-drop.js

これは、私たちはファイルサイズを節約し、モジュールのURLパスを組み立てるために必要なロジックを減らすだけでなく、モジュールのメタデータのすべてから "パス"プロパティを削除することができました。

あなたが事前に設定コンボのURLを含めている場合は、再計算のURLをアップグレードする必要があります。

この変更の欠点は、あなたが "準備"のページへのモジュールのコンボのURLを含めている場合はあなただけのバージョン番号を変更して、アップグレードできないことです。 あなたは、 コンフィギュレータの依存関係を再検討し、新しいモジュール構造を持つ新しいURLを生成する必要があります。

今後の

私は、リファクタリングを洗練し、私たちのローダーと種子戦略のあらゆる側面を最大化するために継続されます。 これらの最初の手順は同様に私たちのクライアント側の戦略だけでなく、当社のサーバーは、コマンドラインおよびモバイルデバイスの戦略のみならず行う必要があり、将来の変更を支援するために必要であった。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！