Yahoo!のユーザーインターフェイスブログ（YUIBlog）

Quorusにおけるローダーの使用

中| 9時49時2011年3月24日はピーターエブラハムセンで午前の開発 、 YUIの実装 | 1コメント

今日、私が話をしたいと思いますYUI Loaderのとどのように我々は時Quorus、（株） 、オンデマンドでの新機能と、サードパーティのウェブサイトを提供するために使用します。

コー​​ドは、我々はブラウザの環境を制御できないだけを持っていないの誰からもうらやまれない立場、しかし我々はドキュメント自体の使用方法には厳しい制限にいる意味、他の人のページに権力の機能を記述します。 当社の顧客は自分のページにQuorusブートストラップスクリプトを入れて、私達の機能に必要な他のすべては、動的かつオンデマンドでロードされます。 私達の要素、スタイル、およびスクリプトは、我々は責任がないなら何かの動作を変更しないことを確認するために我々は、英雄的な長さに行く。

YUI 3は単に形を取っていたときに我々は、2年前に現在のコードベースを始めた。 それは数ヶ月のベータ版をヒットしないというコードベースにコミットする時に危険な決断でした。 振り返ってみると私は、我々はそれなしで持っているものを達成しているだろうか想像することはできません。 私は、ローダーの電力、近づいコンポーネント持つ任意の他のフレームワーク見たことがない属性 、およびCustomEventを 。

我々の顧客に提供するQuorus ブートストラップスクリプトは、ほとんど何もしません。 その仕事は、ページのロードの残りの部分をブロックすることなく私たちのプラットフォームのコアをロードするだけであり、そして我々がそうやったまで、キューへのAPIを呼び出します。 このコアのスクリプトファイル、 ステージ2と呼ばれる、インラインyui 、 loader 、およびoopだけでなく、API呼び出し、ユーザーのクリック、およびオペレーティング環境内の他の条件に対応する追加のライブラリをロードするのに十分な知性。 他のほとんどのリソースは、カスタムQuorusと株式YUIのモジュールを提供するカスタムコンボのサーバによって処理されます。

Bootstrap APIをキューには、それがロードすると我々はグローバルオブジェクト、QUORUS上のアレイに移動する準備ができたら、時間、ホストサイトのコードで作られた呼び出します。

 QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; 

かつて我々は、API呼び出しを処理する準備が整ったら、 stage2それらをタイムアウトに一つずつ実行されます。 これは、ユーザの応答性体験になるブラウザに定期的にバックアップ制御を得ることが保証されます。 動作は、Y. AsyncQueueよく似ていますが、シンプルでYUIをロードする必要はありません。

 // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); 

bootstrapファイルはほとんど不変、この時点で、です：我々が与えた任意の新しいバージョン、それらを、アジャイルスタートアップ企業のための極端に長い時間を展開するか月以上必要な場合があります我々は顧客に引き渡すことの何か、。 stage2ファイルには、一方、、独自のサーバーからの負荷を小さく、そして短いキャッシュの寿命を持っています。 これにより、エンドユーザーは数分以上の古いバージョンを持っていないことが保証されます。 ほぼ私たちが必要とする他のすべてのリソースが恒久的にキャッシュ可能なJavaScriptライブラリとCSSファイルに格納されています。

我々のコードの新しいバージョンをリリースするとき、 stage2自動的に彼らが唯一の最新のコードを使用していることを確認、ブラウザが新しい場所からダウンロードを開始するよう指示。 このセットアップでは、私たちは必要以上に頻繁に資産を提供することなく迅速に変更を展開することができます。 だけでなく、これは私たちの帯域幅のコストを低く抑える、しかしそれは、優れたユーザーエクスペリエンスを提供しません：ページの読み込み中にキャッシュされたリソースは非常に迅速にロードする。

我々はのメリットで、今日の我々のコードベースを始めていた場合、 YUIのギャラリー 、私たちは私たちの生活を容易にするために使用する可能性があるコンポーネントの数があります。 そのうちの一つは、エリックFerraiuoloのであるベースコンポーネントマネージャオンデマンドのコンポーネント（通常はウィジェット）まで配線を補助する、。 別の可能性がありますストレージLiteは私たちはページが読み込まれる間でのアプリケーションの状態を保持するために、。

彼らの偉大な仕事のため、そして地域社会への貢献のためのYUIのチームに感謝します。 あなたがサンドボックスにまたは非同期的に読み込まれたコンポーネントを調整することに対する我々のアプローチについて読んでしたい場合、私はコメントでお知らせください！

著者について：ピーターエブラハムセンがRubyとJavaScriptを書き込むには、サーバインフラストラクチャ、および研究シアトル、ワシントン州、米国でのユーザー中心の設計を管理します。 彼はで見つけることができるIRC Rainheadとして。

会話して下さい： Bloglinesの | テクノラティ

共有し、拡張する： del.icio.usでブックマーク | Diggそれ！ | のreddit！