モバイルブラウザのキャッシュ制限：アンドロイド、IOS、およびウェブOS

8時45分2010年6月28日ライアングローブで午前|で開発 、 パフォーマンス | 19コメント

アップデート（7月12日、2010）：この資料に記載されている結果は、HTMLページの正確なですが、新しいテストでは、CSSとJSリソースのための非常に異なるキャッシュの制限を明らかにした。 更新された結果はで説明されてモバイルブラウザのキャッシュ制限、再考 。

2008年初頭に、ウェインシアバターとTenni TheurerがでYUIのブログ記事を書いたiPhoneキャッシュ可能彼らはiPhone OS 1.xのMobile Safariのキャッシュのさまざまな特性と限界の研究の成果を共有する とりわけ、彼らは475キロバイトと500キロバイトの間の最大合計キャッシュサイズがあったことが25キロバイトを超えて個々のコンポーネントがキャッシュされなかったことがわかった、と。

ずっとそれ以来変更されています。 我々は、2つの新しいメジャーリリースを見てきましたし、優秀なブラウザとの互換iPhone OS（現在はIOS）、およびいくつかの他のモバイルデバイスの多くのマイナーリリースでは、iPhoneに挑戦するために登場している。 Stoyanステファノフはいること、2009年後半に、発見iPhoneのキャッシュの制限が変更された （悲しいことに、悪くも）。 しかし今や、それはどこに立っているのですか？ そして、何それらの非IOSのブラウザはどうでしょうか？

背景

ブラウザでは、我々はこれらのテストの目的のために関係しているキャッシュの2つのタイプがあります。

  • コンポーネントのキャッシュ 、またはオブジェクトキャッシュは、個々のファイルが格納されます。 HTML、CSS、JavaScript、および画像はすべてのコンポーネントのキャッシュに入ります。 それはこれらのコンポーネントのいずれかが必要になるたび、ブラウザは最初のネットワーク要求を行う前にキャッシュをチェックします。
  • また、バック/フォワードキャッシュと呼ばれるページのキャッシュは 、ページ全体とそのすべてのコンポーネントだけでなく、彼らの現在の状態を格納します。 可能であれば[戻る]または[進む]ボタンを使用する場合、ブラウザはページのキャッシュからページをロードします。

HTML5のアプリケーションキャッシュは、広く携帯電話のブラウザでサポートされているキャッシュの別のタイプです。 ブラウザのメーカーはすでにアプリケーションのキャッシュの限界を文書の良い仕事をするので、私はそれを私のテストでは含まれていない。 後でアプリケーションのキャッシュの詳細。

デバイスは、テスト

私は、次のモバイルブラウザ/プラットフォームの組み合わせをテストしました。

  • アンドロイド2.1（ネクサスワン）
  • のiOS 3.1.3上でMobile Safariの（1 - genをiPhone）
  • のiOS 3.2のモバイルSafari（アプリ）
  • のiOS 4.0（iPhone 3GS）でモバイルSafari
  • のiOS 4.0のモバイルSafari（iPhone 4）
  • ウェブOS 1.4.1（Palm Preをプラス）

注：IOS 4.0モバイルSafariを除いて、私は各カテゴリ内の1つの装置だけをテストした。 個々のデバイスやOSを超えてインストールされているソフトウェアに基づいて、相違点の間に相違点がある場合には、私のテストでは、それらの変動を検知することができません。 彼らは私がアクセス権を持っていたものだので、私は彼らが他のデバイスよりも重要であると考えるので、これらの特定のデバイスは、しないテストされました。

方法

キャッシュのテストは面倒ですが、比較的簡単です。

私は小さなシナトラアプリ（書いたGitHub上でそれをフォーク！擬似ランダムの英数字と空白は、要求されたバイト数で構成されるレスポンスを生成します）。 応答は、どちらかgzipで圧縮または非圧縮提供することができます。 以下の遠未来の有効期限のレスポンスヘッダは、すべての応答がキャッシュ可能とみなされていることを保証するために送信されます。 

のCache - Control：max - ageの= 315360000
有効期限：金曜日、2020年5月1日午前3時47分24秒GMTを

私のローカルネットワークを介して、私はその後、手動でコンポーネントのキャッシュをテストするために、各デバイス上で次の手順を実行しました。

  1. キャッシュのテストのインデックスページをロードする。
  2. 5キロバイトから20メガバイトに至るまで、特定のサイズのコンポーネントへのリンクをタップし、それがロードし終わるのを待ちます。
  3. [戻る]ボタンをタップします。
  4. もう一度同じリンクをタップします。 サーバーコンソールがコンポーネントは、手順2でキャッシュされたかどうか決定するためにリクエストのログエントリを、印刷するかどうかのランダムな文字が同じであるかどうかを観察、と。
  5. キャッシュされる最大コンポーネントのサイズを決定するために、必要に応じてコンポーネントのサイズを繰り返して調整します。

ページのキャッシュをテストするには、私が代わりに手順4でもう一度リンクをタップすると、私はそれがページのキャッシュではなく、コンポーネントのキャッシュを使用する原因と、ブラウザの進むボタンをタップすることを除いて基本的に同じ手順を実行しました。

のサポートETagとLast-Modifiedサーバが適切な送信するために微調整することによって決定したETagやLast-Modified応答ヘッダーを（別々のテストで）と遠未来の有効期限ヘッダを省略する。 私はその後、ブラウザが予期送信したことを確認するためにサーバによって受信されたリクエストヘッダ検査If-None-MatchまたはIf-Modified-Since手順4のヘッダーを。

結果

私は、gzipでテストの両方を有効と無効になりますが、私はgzipが任意のデバイス上のキャッシュ機能には影響がなかったことがわかった。 圧縮されていないコンポーネントのサイズは関係なく、そのコンポーネントをgzipで圧縮処理されているかどうか、すべての場合に重要なことです。 このように、ここに記載されているすべてのコンポーネントのサイズが圧縮されていないサイズです。

以下の表は、私の全体的な所見を示しています。

表：モバイルブラウザのキャッシュ特性
ブラウザ/ OS /デバイス 単一のコンポーネントの制限 総コンポーネントの制限 ページキャッシュのサイズ制限 Last - Modifiedをサポートしています。 ETagをサポートしています。 パワーサイクルは、存続
アンドロイド2.1（ネクサスワン） 〜2MB（〜2048000 B） 〜2MB（〜2048000 B） ∞2 はい はい はい
モバイルSafari、iOSの3.1.3（1 - genをiPhone） 0B 1 0B 1 ∞2 なし なし なし
モバイルサファリに、iOS 3.2（アプリ） 25.6キロバイト（26214 B） 〜281.6キロバイト（〜288354 B） 25.6キロバイト（26214 B） はい はい なし
モバイルサファリに、iOS 4.0（iPhone 3GS） 51.199キロバイト（52428 B） 〜1.05メガバイト（〜1100988 B） ∞2 はい はい なし
モバイルサファリに、iOS 4.0（iPhone 4） 102.399キロバイト（104857 B） 〜1.9メガバイト（〜1992283 B） ∞2 はい はい なし
ウェブOS 1.4.1（Palm Preをプラス）3 〜1MB（〜1,048,576） ？ 〜1MB（〜1,048,576） なし なし はい

注意事項：

のiOS 3.1.3上で1モバイルSafariはページのキャッシュを除いて、サイズに関係なく、 すべてのコンポーネントをキャッシュするため表示されません。 これは意図的か、バグかどうかは不明です。

アンドロイド2.1、iOSの3.1.3、およびiOS 4.0（ただし、iOSの3.2）の2ページのキャッシュは、それが個々のページサイズに来るときのみ使用可能なRAMによって制限されているように見えます。 私は一度にページのキャッシュに正確にどのように多くのページを別々の共存ができるかを判断しようとしなかった。

3ウェブOSのテストの結果が矛盾していましたし、電話は電源を再投入になるまで様々なポイントでキャッシュが完全に動作を停止するようだ。 私はこれらの結果は決定的な、あるいは信頼できるとは考えていませんが、それらは比較のためにここにリストされている。

アンドロイド

Androidのブラウザでは、試験したすべてのデバイスの最適なキャッシュの動作を示した。 それは個々のコンポーネントのサイズに制限はありませんように見えるが、全体のキャッシュサイズは、約2MBに制限されているようだこれは、個々のコンポーネントを効果的にだけでなく、2MBに制限されていることを意味します。

ページキャッシュは、喜んで利用可能なRAMが枯渇し、ブラウザがクラッシュされるまで、私はそれで投げたすべてのバイトをキャッシュする、個々のページのサイズに制限はありませんように見えた。

私は愉快にAndroidのコンポーネントのキャッシュがブラウザの再起動や電源のサイクルの両方を生き抜いたことを知って驚いた、iOS機器の偉業のどれも一致することができませんでした。

可能警告：のレビューAndroidのWebKitのソースツリーには、私はそのキャッシュの制限は、RAMの容量および/ ​​またはそれが走っているいる特定のデバイス上で使用可能なフラッシュメモリに基づいて適応させる可能性があることを信じるように導く。 trueの場合、これらの数字はネクサスOneにも適用可能である。 キャッシュサイズは、未使用のメモリではなくメモリの合計に基づいて適応する場合、実際には、、これらの数字は私のネクサスOneにも適用可能である。

私が間違えが、iPhone 3GSとiPhone 4の上のiOS 4.0のテスト結果の違いは、この理論を支持することができます。 （AndroidとモバイルSafariはWebKitベースのブラウザの両方なので、彼らは共通でこの動作をすることがあります。）あなたがWebKitのソースに精通しているとこの上でより多くの光を当てることができるなら、私に連絡してください。

iOSの

結果は、iOSの最新の3つのバージョン間で激しく変化。 驚くほどに、iOS 3.1.3のMobile Safariは明らかに無制限のページのキャッシュサイズを有するにもかかわらず、 任意のサイズのコンポーネントをキャッシュしていない 。 それがiOS 3.1.3ユーザはおそらく彼らは無線LANを使用していない場合は特に、次善のブラウジング体験を得ていることを意味しますので、これは厄介です。 それが唯一の戻る/進むナビゲーションのために戦場に出るので、無制限のページのキャッシュサイズは、ここで少し良い行います。 この動作は他の人が以前のIOSリリースで観察ものから大幅な変更であり、私はそれに対して何か良い理由を想像することはできませんので、私はこれはバグかもしれないと思う。

のiOS 3.2のMobile Safariには、（アプリ上でのみ使用できる）このバグは発生しません。 その25.6キロバイトコンポーネントの上限と〜281.6キロバイト合計キャッシュの制限は無いよりはましですが、それらはまだ試験した他のデバイスに比べて微々たるように見える。 一意のiOSデバイスの間で、iPadはそのコンポーネントのサイズ制限と同じ、25.6キロバイトのページキャッシュにページのサイズを制限するために表示されます。

のiOS 4.0のMobile Safariには制限が使用可能なRAM（;テスト両方のデバイスは、フラッシュメモリ32GBのを持っていたiPhone 3GS iPhoneの4が512MBている間に256メガバイトを持っている）に基づいて適合させることを意味iPhone 3GS上とiPhone 4の上に別の制限を、展示。 iPhone 3GSで、iOSの4.0 51.199キロバイトコンポーネントのサイズ制限と〜1.05メガバイト合計コンポーネントのキャッシュサイズを持っています。

iPhone 4で、コンポーネントのサイズ制限は102.399キロバイトで、ほぼ正確にiPhone 3GSで2回限界であった。 総部品キャッシュのサイズは約1.9メガバイトだった。 のiOS 3.2およびiOSの4.0が別々に開発が共通の祖先から分岐されているため、おそらく、iOSの4.0のページキャッシュのサイズばかりのiOS 3.1.3と同様に、テストの両方のデバイスで使用可能なRAMによって制限されているように見えます。

彼らは単に、実際にブラウザを殺すことなく、アプリケーションを切り替える際に、キャッシュを維持したものの、IOSデバイスのいずれも、強制的にブラウザの再起動やデバイスの電源サイクルを通して永続キャッシュの内容を保存しません。

ウェブOS

ウェブOS上で私のテスト結果は、私は彼らに少し自信を持っているので、矛盾していました。 私は完全を期すために純粋に収集する管理なけなしのデータ用意しました。 塩の多額の粒とそれを取るしてください。

として近くに私が判断することができたとして、WebOSはページのキャッシュ内に一致するページサイズの上限によって、約1MBの個々のコンポーネントのサイズ制限がある場合があります 。 私は同軸することができませんでしたIf-None-MatchまたはIf-Modified-Sinceそれはサポートしていないことを意味するウェブOS、からのリクエストヘッダーをETagし、 Last-Modified 。

一部のテストでは、それは、ウェブOSの最大コンポーネントのサイズが1MBより大きいように見えたが、これは矛盾していました。 私の知る限り、WebOSは最大合計キャッシュサイズに達すると、されたときに特定のポイントは、おそらくキャッシュがちょうど完全に携帯電話は電源を再投入するまで完全に動作を停止した後、厄介なバグを持っているように見えます。 いくつかのケースでも電源の再投入は、キャッシュの破損を修正していないので、私は最終的に問題とウェブOSのキャッシュの正確な限界の正確な原因を確立しようとしてあきらめた。

推奨事項

これらの結果に基づいて、私がテストしたデバイス用のWebアプリケーションを開発する人にとって、次の推奨事項を提供します。

  • 遠未来のキャッシュの有効期限ヘッダを使用します。これは、条件付きGETリクエストを送信すると、サポートしていないウェブOS、でキャッシュ可能性を向上させることからブラウザを防止するETagやLast-Modified 。
  • のiOS 4.0はiPadに到着するまで、少なくとも、非圧縮、25.6キロバイト以下に個々のコンポーネントのサイズを制限してみてください。 そしてできるだけ早くのiOS 4.0にアップグレードするためにあなたのiPhoneユーザに強いる。
  • あなたのウェブサイトは、25.6キロバイトより大きいコンポーネントを必要とする場合、IOS 3.1.3ユーザを（可能性が高い）をサポート、またはすべてのコンポーネントの合計サイズが281.6キロバイトより大きい場合は、HTML5のアプリケーションキャッシュを使用することを検討し 、必要がある場合はlocalStorageを 、またはデータベースストレージコン ​​ポーネントを格納する。 アレックス状況についての最近のYUIのブログの後、 オフラインアプリケーションにYUI 3の使用については 、このアプローチを検討するYUI 3の開発者にとって興味深いかもしれません。
  • 独自のテストを行うには。これらの結果はテストブラウザまたはデバイスのいずれかの任意の将来のバージョンに適用されることを前提としないでください。 出発点としてこれらの結果を使用しますが、あなたがモバイルキャッシュの制限についての仮定に基づいて、主要な決定を下す前に自分で確認してください。 雷のペースでモバイルブラウザの世界の変化は、したがって、この研究は非常に短い貯蔵寿命を持つことになります。

私はだGitHub上で私のテストコードが利用可能になって 、私はあなたが、それを使用それをforkし、あなたが学ぶことを共有することをお勧めします。

ドキュメントの募集について

ブラウザメーカーは、ブラウザのキャッシュの制限を文書化し、公開をご検討ください。 これらの制限は一般的に非問題になるように高いデスクトップの世界では、ドキュメントは必要ありませんでした。 モバイルの世界では、ブラウザのキャッシュの制限は、Web開発者が魅力的な機能とパフォーマンスの高いWebサイトを作成するために持つ必要がある重要な情報です。

localStorageを、アプリケーションキャッシュなどの新機能の限界は、通常、十分に立証されています。 同様に、コンポーネントのキャッシュにドキュメントのこのレベルを拡張してください。

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

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

2010年6月25日のための野生の

10:10 2010年6月25日はエリックMiragliaによって午前|で野生の | コメントオフ

いつものように、私たちはコメントやで知らせてほしい@ yuilibrary我々は重要な何かを逃した場合。

  • YUI 3ベースの合金のUIは、正式にLiferayの会議で発表から： プレスリリース ："この取り組みの一環として、Liferayをもの当面の空室状況発表Liferayの合金のUIを 。 YahooのYUIのプロジェクトと共同で開発、合金のUIは、迅速にユーザーフレンドリーなポートレット、ウィジェット、およびWebアプリケーションを作成するためのリッチなユーザーインターフェイスコンポーネントのセットを提供します。 合金のUIは、ビジネス要件と機能性に重点を置く開発者を解放し、CSS、HTML、およびJavaScriptの複雑さを扱う。 合金のUIには、通常、プロジェクトのリソースを消費するいくつかの一般的なクロスブラウザの互換性の問題を解決するのに役立ちます。 新しいライブラリは、ポータルを必要とせず、任意のWebアプリケーションのコンポーネントを開発するために使用することができます。 Liferayポータルは、現代的なポータルベースのエンタープライズソリューションのシンプルさと機能を拡大し、合金のUI周りのフロントエンドのフレームワークを標準化します。'合金のUIはリッチなUIの開発を簡素化するWeb開発者のための新しい機能を表し、"ブライアンチャン、Liferayのように述べポータルの作成 ​​者兼チーフソフトウェアアーキテクト。 "我々はヤフーのチームでこれに取り組んで、それが彼らのソリューションを開発者を支援するために大きな資産になると感じていると幸せです。'すべての合金のUIコンポーネントは、現在のYUIのコミュニティに自由に利用できるYUI 3ギャラリー 。
  • AutoFusionのCarPrices.comはYUI 3.1.1を使用して開始 ： YUI 3ギャラリー寄稿ジョシュLizarragaは新たにAutofusion社と協力してきたCarPrices.comプロジェクト YUI 3.1.1のユーティリティとウィジェットのホストを使用して構築された、。 ジョシュは、将来のYUIBlogの投稿でこのプロジェクトに多くを持つことになります。
  • Download SquadをのErezさんズッカーマンはYUIシアターにクロックフォードを見るためのJS開発者にアドバイス ：Erezさんの書き込み：" Douglas Crockfordはは天才です。 真剣に-男は素晴らしいです。 彼は現在、Yahoo!のチーフのJavaScriptアーキテクトを務めて、彼が発明したJSON （広く使用されているデータ交換形式）を、彼は、ECMAScript委員会（JavaScriptの標準を設定する男性）の一部だとプログラミングの一般的な歴史の非常に広範な理解を持っています言語とコンピュータサイエンス。 最近では、クロックフォードは与えたfive交渉 Yahoo!の一環としてJavaScript約をYUIシアター 。 これらはすべて無料で利用でき、それらは長さの5時間（以上、合計で6〜7時間のように、私が思うに）以上です。 何がこれらの交渉についてのようにクールなのはクロックフォードは本当にあなたの主題の俯瞰図を与えることであり、最初の時間はちょうど歴史であり、そしてそれは本当に魅力的です。 それが始まる、あらゆる場所にそれJackquadの織機 、我々は削除し、私たちのキーボードのBackspaceキーの両方を持っている理由によって、現代のプログラミング言語とJavaScriptのすべての方法。"Erezさんのお気に入りのJavaScriptリソースの詳細については、 彼のポストをチェックアウトする 、またはJavaScriptのページ上にクロックフォードへ行き （多くは第二のカラム充填とダグラスの最新のビデオのためのYUIシアター ）。
  • YUIのMattスナイダー＆フレンズ2ベースMint.comおめでとう2010年ウェビーの受賞者 ：おめでとうございますマットスナイダー 。と金融サービス部門における彼らの当然の2010年ウェビー賞のためのMint.comで他の優秀なフロントエンドエンジニアは、 ミントYUI初め以来2基づいている 、とマットは、引き続きYUIのプロジェクトに大きく貢献 。 あなたが見ることができますYouTubeの上のマットの5単語の受諾演説を 。
  • YUI 3 AjaxianのディオンAlmaer中CaridyパティーニョMayeaのプリロードのギャラリーモジュール ：ディオンは、 Ajaxianが資産をプリフェッチしてキャッシュするためCaridyパティーニョMayeaのプリロードモジュールの見直しに良いポストを持っていること、YUI 3ギャラリーのエントリを、彼はYUIBlogで約最近書いた 。
  • Movable Typeは（@ foxxtrotによる）でYUIのグリッドを使用して ：YUI寄稿ジェフクレイグは、YUI 2グリッドにMovable Typeのブログを変換し、彼の経験について書いた："だから、これまで私のブログを読んでいる人として、あなたが週末にすることになるだろう私はJavaScriptのためのYUIのグリッドとYUI3を使用するために私のブログのテンプレートをアップグレードする。 MTのテンプレート（または、私はMTOS 4の最初のバージョンをインストールしたときの標準であったテンプレート）から離れて切り替えることにより、私は気に近い半分にHTML pageweightを削減することができました。 古いテンプレートは、実​​際にはdivの重く、そして余分なマークアップのトンを持っていた。 主に、決定は私のブログの視覚的な感覚をやり直すために欲望に駆り立てられ、そして私はそれをする間、私もYUIのグリッドの下に書き換えることが感じられた。"
  • ネイトSchuttaは、IBMのDevelperWorksためにYUIとDojoを比較 ：IBM developerWorksのネイトSchuttaの書き込みには新しいポストでYUI 2.xとDojoを比較します。 我々は、これらの日YUI 3.xのコードラインに、より焦点を当てている間に、Nateの記事では、JavaScriptライブラリについては、それらの思考のためのいくつかの有用なガイドラインを持っており、それらのビジネスやプロジェクトの意思決定を行って。 最初に - なぜYUIや道場？

    あなたの処分で非常に多くの優れた選択肢と、なぜあなたはYUIやDojoを考慮するだろうか？ 単語で：完全。 追加のライブラリやプラグインを含む他のソリューションとは異なり、DojoとYUIは、今日のフロントエンドエンジニアが望むすべてのことを（およびそれ以上）がある。 それは、祝福と呪いの両方にあるときは、Ajaxのニーズにワンストップショップのための市場にいる場合、これらは2つの強力な候補です。 JavaScriptヘルパーとユーティリティの富、提供一流のウィジェットと、両方のコントロール、これまで標準的なブラウザの限られたパレットを超えてに加えて。

    一般的なライブラリの選択基準についてのNateのアドバイスは有用です。
    • あなたはそれが何をしたいですか？ あなたのページ上のほぼすべてのUI要素の完全な代替を探していますか、またはあなただけのJavaScriptプログラミングの痛みのビットを取り出して何かを探しですか？
    • 読み取るためのコードは簡単ですか？ 過去数年間にわたってドキュメントの大幅な改善にもかかわらず、オッズは、いくつかの点で、コードを徹底的に調べなければなりませんです。 図書館にコミットする前に、ソースに膝までいくつかの時間を費やす。 それは理解しやすく、あるいはオリジナルの作者はそれで問題があるのですか？
    • 文書はいかに優れている？ クリーンで読みやすいコードでは、より少なくより星の文書を補うことができますが、何もあなたはかなりのチュートリアルや例のように開始するのに役立ちますない。 ウィキやWebサイト周りをウロウロする、と彼らが提供しているものを参照してください。 例明確でわかりやすいですか？ Googleで検索を使用すると、それらの材料の適切な部分に持っていますか？
    • ライブラリを囲むようなコミュニティは何ですか？ メーリングリストをチェックしてください。 大量のトラフィックはありますか？ 新しい人々は敬意や嘲笑で処理ですか？ コー​​ドを最近更新し、または数年前にした最後のリリースされていますか？
    • あなたが助けを得ることができますか？ これはコミュニティの前のビットに関連しているが、開発コミュニティを見て回ると何を使っている人を確認するために常に価値がある。 図書館が再開に頻繁に表示されている感を得るためにジョブボードをチェックしてください。

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

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

YUI：営業時間金曜日6月25日

2010年6月23日15:07時ルークスミス|中開発 | コメントオフ

の最新作YUI：営業時間はこの6月25日（金曜日）になります。

先週、 エドゥアルドラングレンは偉大なのいくつかに私を導入AlloyUIの最近ギャラリーに追加されたモジュール。 議論は、インスタンス化、設定、開発の意思決定、およびそれらのいくつかの歴史覆われてTreeViewのモジュールを。 しかし、これはほんの始まりだった。 我々はまた彼らの探求IO 、 ノード 、およびフォーム検証のモジュールを、利用可能なビジュアルスタイルの一部にいくつかの時間を費やしました。 エドゥアルドは、さらに私たちは、新しいのスニークプレビュー与えたLiferayを、（株）すべてのこのハードワークを搭載したポータルを、。 本当に一流の仕事。

ともあれ、これは発表会や会話が本当の立て役者だった場合言うのは難しい。 偉大なコードはさておきコンテンツを関連する、多くのあった良いフィードバックとコミュニティのコラボレーション、ギャラリーの性質、そしてどのように我々はそれとYUIをより良いものにすることができますに関するディスカッションは。 コー​​ルで誰もがそう大きな感謝を！

今週、我々は、生の、開発者の世界だけでなく、デザイナーの世界の両方のビットを手を出すつもりだ。 Caridyパティーニョは彼の話を私達に戻っているイベントのバインダーここで紹介されたモジュールだけ今朝 。 我々は、コードレビューを行い、YUIがさらにロードされる前に行う必要がある構成手順を説明します。 そうです、純粋な、純粋なDOMスクリプティング。 あなたはヘルメットを着用する場合があります。

その後、我々はジェフコニフ、責任をYahooと同じように微妙な肌の設計プロセスへと移っていきます現在の様々なスライダーのルックアンドフィール。 彼は視覚的な資産を構築するの彼のプロセスを通して我々を歩くと、同じPSDを取り、簡単にサイトのパレットに収まる色をテーマにした資産を作成する方法を紹介します。 ここにいるPhotoshopファイルは、あなたが一緒に再生したい場合。 私はまた、スライダーのCSSとDOM構造を構築するために行った決定のいくつかについてお話します。

我々は今週いつもの曜日と時間に戻ってね：金曜日午前10時から12時PDTに。 そこに電話会議のための新たな参加者のコードは次のとおりですが、そうでなければ、接続の詳細は、いつもと同じです。

  1. 1-888-371-8922（米国以外の参加者は、ローカル番号のために私にメール）にダイヤルイン
  2. 出席者コード47188953を入力してください＃
  3. 画面共有セッションに参加する （これはそれを初めて使用する場合、これはAdobe Connectのプラグインをインストールするようにプロンプトが表示されます）

私も作成しましたフォーラムのスレッドを我々は早期に議論を開始できるように、この営業時間のために！

また、いつものように、次のようにして今後のスケジュールやトピックを最新に保つことができます@ yuilibraryを TwitterでまたはサブスクライブするYUIのイベントカレンダー 。

そこにお会いしたい！

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

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

YUI 3ギャラリーで：CaridyパティーニョMayeaのイベントバインダーモジュールは、事前バインディング、イベントとイベント駆動型モジュールの読み込みのサポートを提供します。

中| 9時25分で6月23、2010 Caridyパティーニョで午前の開発 、 YUI 3ギャラリー | 1件のコメント

この記事では私の紹介し、イベントのバインダーモジュール 、最近YUI 3ギャラリーにリリースし、。

YUI 3は、最新の3.1.1リリースの大幅な導入との新しい、革新的なプロジェクトの巨大な注入で、開発者コミュニティで優れたトラクションを得ているYUI 3ギャラリー 。 多くの開発者は、YUI 3のオンデマンドの性質の周りに彼らの頭部を得、それらの設計に活用し、それらの機能をし始めている。 このアプローチは、大きな利点がありますが、それはまた、いくつかの課題を提示することができます。

これらの課題の一つは、初期のユーザーとの対話をキャッチすることです。 ブラウザがページをレンダリングを開始したとしても、我々は、ユーザーがページ要素との対話を開始できるようにしたい。 JavaScriptの初期化プロセス（イベントリスナーの添付ファイルを含む）が完了する前に、多くの場合、それらの相互作用が起こる可能性があります。

多くの場合にのみ、イベントリスナーを設定して、すべてのユーザーとの対話に必要な部分をロードするためのロジックを追加して、初期化コードを合理化することができます。 -最近、Facebookのエンジニアは、ロードプロセスを改善するために似たようなアプローチについて語ったレイBangoからインタビューを参照してください JSConf時を。 このテクニックは、YUI 3に働くかもしれない方法の例は、次のとおりです。 

  <スクリプトのsrc ="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js＆
 
	 3.1.1/build/oop/oop-min.js＆3.1.1/build/event-custom/event-custom-base-min.js＆
	 3.1.1/build/event/event-base-min.js＆3.1.1/build/dom/dom-base-min.js＆
	 3.1.1/build/dom/selector-native-min.js＆3.1.1/build/dom/selector-css2-min.js＆
	 3.1.1/build/node/node-base-min.js"> </ SCRIPT>
 
 YUI（）。使用（"イベントベース"、機能（Y）{
    ユーザーがロード資産を起動するには、input要素に重点を置いてまで、/ /待つ
     Y.on（"クリック"、機能（E）{
 
       Y.use（"アニム"、"IO"は、関数（）{
           / /リモートのコンテンツをロードし、ここにアニメーションを使用して、それを表示する
       }）;
 
       e.halt（）; / /停止伝播
     }、"＃デモ"）;
 }）;

リスナーのみならず、いくつかのローディングロジックを持つユーザーとの対話を扱う必要がないため、これはコード内の複雑さを紹介します。 このアプローチのもう一つの欠点は、まだ初期のアクションをキャッチするには、少なくともリスナーおよびロードのロジックを定義するために、最上位（この場合はYUIの種子、イベントのユーティリティ、およびいくつかの依存関係）でいくつかのJavaScriptコードをロードする必要があるということです。 それでは、2つの個別のユースケースとしてこれを考えてみましょう。

これらのニーズに対処するために私がのために新しいモジュールを作成しましたYUI 3 。 私の主な焦点は、アプリケーションのロジックに影響を与えずに動作するコンポーネントを作成してきました。 この新しいモジュールは"と呼ばれるギャラリー-イベント-バインダー "とYUI Loaderを介して利用できるようになりました。

初期のユーザーとの対話のキャプチャ

この機能の主な目的は、イベントリスナーの初期化が完了するまで、ユーザーとの対話がキューイングされていることを保証することです。

見てみましょうイベントのバインダーの例を ： 

  YUI（{
     / /最後のギャラリーは、このモジュールをビルドします
    ギャラリー："ギャラリー - 2010年6月7日- 17 - 52'
 }）。使用（"ギャラリー - イベント - バインダー'、'イベント'の場合、関数（Y）{
 
     Y.on（'クリック'、機能（E）{
 
         / /ここに自分のものを行う
         e.halt（）; / /必要に応じてイベントの伝播を停止...
 
     }、'＃デモ'）;
 
     / /フラッシュ初期のユーザーとの対話
     Y.EventBinder.flush（'クリック'）;
 
 }）;

この例では、YUI Loaderはロードしようとするgallery-event-binderやeventオンデマンドでモジュールを、そしてかつて彼らは両方の依存関係と一緒に準備が整ったら、コールバック関数（三番目の引数）内のコードが実行されます。 実行中に、リスナーが持つ要素に対して設定されているid=demo 。 トリックはここにその一度されY.EventBinder.flush('click')と呼ばれる、システムはこの初期化コードが実行される前に起こったかもしれないのクリックイベントの一部をフラッシュします。

コンフィギュレーション

この手法は、いくつかの余分な設定を必要とする、特にの定義YUI_configグローバル変数としては、YUIの実行を調整する。 心配しないで、それは非常に簡単です。 詳細の例を見てみましょう： 

 
 YUI_config = {
     / /標準YUI_config設定
    結合：真、
    フィルタ："分"、
 
     / /イベントのバインダーの設定はここから始まります
     eventbinder：{
         / /イベントハンドラを再送出するイベントを格納する。
         FN：関数（電子）{
             VARバインダー= YUI_config.eventbinder、
                フィルタ= / yui3 -イベント - バインダー/、
                コンテナ=（e.target | | e.srcElement）、
                情報= {
                    対象：容器、
                    タイプ：e.type
                 };
 
            クラスを持つ要素のための/ /ルックyui3 -イベント - バインダー
            一方、（コンテナ＆＆！filter.test（container.className））{
                コンテナ= container.parentNode;
             }
 
            場合（コンテナ）{
                 （binder.q = binder.q | | []）プッシュ（情報）;
 
                 / /このイベントのデフォルトのブラウザのアクションを防ぐ
                場合（e.preventDefault）{
                     e.preventDefault（）;
                 }
                リターン（e.returnValue = FALSE）;
             }
         }、
         / /インターフェイスの特定のイベントをリッスンする
         listenFor：関数（型）{
             VAR D =文書;
             / /ライブラリをロードする前に、我々はブラウザの不整合に対処する必要があります
            場合（d.addEventListener）{
                 d.addEventListener（タイプ、this.fn、偽）;
             }他{
                 d.attachEvent（'on'に+型、this.fn）;
             }
 
            これを返す;
         }
     }
 };
 / /監視プロセスにイベントを追加
 YUI_config.eventbinder.listenFor（'クリック'）;

このコードは、ページの最上部に含まれている必要があります。 あなたが一度それがわずか数刺されになる縮小するこの設定オブジェクトを。 私は生産のためのキャッシュ可能（外部）ファイルを使用して、ページのheadセクションに含めることをお勧めします。 あなたが詳細については読むことができますYUI_configし、このオブジェクトを介して微調整できるさまざまな構成の公式のAPIドキュメントを 。

あなたが一番あなたに合うようにこの設定を変更し、約同様に気にするイベントを定義することができます。 上記の例では、我々は監視リスト（最後の行）に"クリック"追加しました。 あなたは、連鎖を使用して、監視リストに複数のイベントを追加することができます。 

  YUI_config.eventbinder.listenFor（'クリック'）listenFor（'KeyUpイベント'）listenFor（"マウスオーバー"）。。。

これはどのように機能の動作しますか？

設定（すなわち、いったんYUI_config ）ロジックが実行される、への呼び出しと一緒にYUI_config.eventbinder.listenFor 、特定のイベントタイプのリスナーが定義されます。 バブルまではリスナーとして監視されることをイベントのみが定義されるdocument要素。 ユーザーとの対話はこのレベルでキャッチされると、それはターゲットの要素またはその祖先には、クラス名がある場合は特にチェックし、分析されますyui3-event-binder 。 その場合、イベントはキューに追加され、そのイベントのデフォルト動作が防止されます。 このテクニックは、ページの特定の領域における相互作用の特定のタイプを監視する簡単な方法を提供します。

このコードが実行されると、指定した型のイベントのリスナーが追加されているdocumentなので、それらのイベントが発生し、バブルアップ（これだけのモニターイベントそのバブル）したとき、彼らは停止し、それらの情報は処理キューに格納されます。 。 後で、自分でuse()コールバックして初期化が終了すると、単に呼び出しY.EventBinder.flush彼らがイベントをシミュレートモジュールのちょうど当時の礼儀を起こったかのようにすべて保存されているクリックイベントを再送出する。

一部のユーザーとの対話のオンデマンドの性質を容易に

この機能の主な目標は、開発者がユーザーとの対話に基づいてロードするロジックを定義できるようにすることです。

ここにあるのです別のイベントのバインダーの例では ： 

 
 YUI（{
  モジュール：{
     "私の - カスタムモジュール"：{
      フルパス："。/私 - カスタムmodule.js"
     }
   }
 }）。使用（"ギャラリー - イベント - バインダー"、"ノード"、機能（Y）{
 
   / /'＃デモ"のリスナーを設定し、依存の'my -カスタムモジュール" 
   / /その特定のイベントを処理する。
   Y.EventBinder.on（'クリック'、'私の - カスタムモジュール'、​​'＃デモ'）;
 
   / /リスト内のすべてのアンカーのためにデリゲートのリスナーを設定し、依存している  
   / /上で"私、カスタムモジュール"と"私、別のモジュール"を処理するために具体的なイベント
   Y.EventBinder.delegate（'クリック'、['私 - 別のモジュール']、'＃mylistを'、'リーA'）;
 
 }）;

ここでは、使用Y.EventBinder.onとY.EventBinder.delegateいくつかのリスナーを定義する。 これら二つのメソッドをラップY.onとY.delegateユーザーとの対話を通してローディングロジックを駆動する。 これにより、ユーザーが特定の機能を使用しようとするまで、私たちは、ページ上の特定の機能の読み込みを遅らせることができます。

このケースでは、ユーザが要素をクリックしたときに、我々は、その特定のクリックに関連するすべての機能を実装する1つまたは複数のカスタムYUIのモジュールをロードする。 これらのモジュールが利用可能になった後（そして新しいリスナーが設定されている）、バインダーは、アクションの状態を維持するためのロードプロセス中に保留にしたイベントをフラッシュします。

この機能は、任意の初期設定を必要としません。 Both of Event Binder's features can be used at the same time to cover early and on-demand user-interactions. In this case, you need to define the configuration, then set the on-demand listeners, and finally flush the early events.

Here's an end-to-end event binder example : 

 
// configuration
YUI_config = { /* your custom event-binder configuration here */ };
YUI_config.eventbinder.listenFor('click')
 
// initialization
 YUI（{
  モジュール：{
    'my-custom-module': {
      fullpath: './my-custom-module.js'
     }
   }
}).use('gallery-event-binder', function(Y) {
  
  Y.EventBinder.delegate('click', ['my-custom-module'], '#doc', '.yui3-event-binder a');
  Y.EventBinder.flush('click');
 
 }）;

A more advanced configuration

You can modify the fn function in your configuration to be more selective about which events to queue and you can store more information about the events. Additionally adds a yui3-waiting class to the click target which we style in CSS to display a loading spinner: 

 
YUI_config = {
    // standard YUI_config configuration
    combine: true,
    filter: 'min',
 
    // event binder configuration starts here
    eventbinder: {
        // set of options that should be preserved for every event (all optional)
        eventProperties: [
            "ctrlKey", "altKey",
            "shiftKey", "metaKey",
            "keyCode", "charCode",
            "screenX", "screenY",
            "clientX", "clientY",
            "button",
            "relatedTarget"
        ],
 
        // listener callback function
        fn: function(e) {
            var binder = YUI_config.eventbinder,
                props = binder.eventProperties,
                filter = /yui3-event-binder/,
                target = (e.target || e.srcElement),
                container = target,
                info = {
                    target: target,
                    type : e.type
                 }、
                i;
 
            if (target.nodeType === 3) {
                // target is a text node, so use its parent element
                target = target.parentNode;
             }
 
            // look for an element with the class yui3-event-binder
            while (container && !filter.test(container.className)) {
                container = container.parentNode;
             }
 
            if (container) {
                target.className += ' yui3-waiting';
 
                // back up the event properties to simulate the event later on
                for (i = props.length - 1; i >= 0; --i) {
                    info[props[i]] = e[props[i]];
                 }
 
                (binder.q = binder.q || []).push(info);
 
                // prevent the default browser action for this event
                if (e.preventDefault) {
                    e.preventDefault();
                 }
                return (e.returnValue = false);
             }
         }、
 
        listenFor: function(type) {
            var d = document;
 
            if (d.addEventListener) {
                d.addEventListener(type, this.fn, false);
            } else {
                d.attachEvent('on' + type, this.fn);
             }
 
            return this;
         }
     }
 };
// add events to the monitoring process
YUI_config.eventbinder.listenFor('click');

Check out this event binder example to see this advanced configuration in action.

Conclusion:

For high performance web applications, it's important for pages to load and become responsive quickly. To accomplish this, we have to rely on on-demand loading techniques. Once you start using them, it's equally important to control user interactions that can happen before the corresponding code for an action become available.

Event Binder (gallery-event-binder) provides friendly APIs to deal with both use-cases without you having to change your application logic. It can be applied to any YUI 3 application without introducing extra complexity to your code.

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

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

Using the YUI 3 Calendar Date Selector from Alloy

June 18, 2010 at 10:46 am by Eric Miraglia | In Development , YUI 3 Gallery | 6 Comments

The Alloy components (contributed by Nate Cavanaugh and Eduardo Lundgren from Liferay) in the YUI 3 Gallery are simple to use. This example illustrates the use of the Alloy calendar to progressively enhance a set of select elements for date selection.

Let's start with the markup — the HTML that will be on the page and functioning regardless of whether JavaScript is enabled. Alloy's Calendar module does not require this markup; you can feed it an empty element and it will create the select elements for you in the event that your use case would not benefit from progressive enhancement. 

 <div id="calendar">
	<select class="yui3-datepicker-month" name="month" id="monthselect">
		<option value="0">
			月
		</option>
		<option value="1">
			月
		</option>

 ...

	</select>

        <select class="yui3-datepicker-day" name="day" id="dayselect">
		<option value="1">
			 1
		</option>
		<option value="2">
			 2
		</option>

 ...

	</select>

        <select class="yui3-datepicker-year" name="year" id="yearselect">
		<option value="2009">
			 2009
		</option>

 ...

	</select>
 </ DIV>

With this markup in place (or with just an empty root element if we aren't progressively enhancing existing form fields), we bring in the Alloy Calendar module with datepicker selection support from the YUI 3 Gallery . This requires us to have YUI 3 on the page and then to follow the configuration step outlined on the module's Gallery page . 

 <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
 <SCRIPT>
 YUI（{
	// All of this configuration information can be cut-and-pasted from the Gallery entry for
	// this module: http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
    gallery: 'gallery-2010.06.07-17-52',
    モジュール：{
        'gallery-aui-skin-base': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
							gallery-aui-skin-base-min.css',
            type: 'css'
         }、
        'gallery-aui-skin-classic': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/
							gallery-aui-skin-classic/css/
							gallery-aui-skin-classic-min.css',
            type: 'css',
            requires: ['gallery-aui-skin-base']
         }
     }
}).use('gallery-aui-calendar-datepicker-select', function(Y) {
    var datePickerSelect = new Y.DatePickerSelect({
		displayBoundingBox: '#calendar',
		dateFormat: '%m/%d/%y',
		yearRange: [ 2009, 2012 ],
		dayField: Y.one("#dayselect"),
		dayFieldName: "day",
		monthField: Y.one("#monthselect"),
		monthFieldName: "month",
		yearField: Y.one("#yearselect"),
		yearFieldName: "year"
	}).render();
 }）;

 </スクリプト>

Here's a live version of this simple example .

それはそれと同じくらい簡単です。 The configuration properties for datePickerSelect are lucidly defined in the Alloy documentation . In this example, the properties are used to set the root element, format the date, set the date range, and then wire up our existing select elements to the widget instance so that it knows which form fields to use for progressive enhancement. In practice, only the root element ( displayBondingBox ) is a required property.

Check out the YUI 3 Gallery roster for a full list of the Alloy UI contributions .

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

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

Implementation Focus: YUI 3 Powering Autofusion's ResearchPro

June 18, 2010 at 9:00 am by Josh Lizarraga | In Development | Comments Off

About the author: Josh Lizarraga Josh Lizarraga is a YUI Contributor and frontend developer located in San Diego, California. He uses YUI to build rich frontend interfaces and Ajax applications for Autofusion, Inc. , a San Diego firm that offers web solutions to the automotive industry in the United States and Canada. When he's not on the clock, Josh enjoys contributing to the YUI project with test cases and Gallery modules.

ResearchPro Home Screen

About the Project

In addition to serving industry professionals, Autofusion provides end-user information resources via our CarPrices.com sister-site. “ResearchPro” is the name we've bestowed on our brand new car research application, which allows the user to quickly and easily find everything there is to know about a potential new car purchase.

Researching a new car before you buy is typically a daunting yet necessary experience, and the current options available to consumers are not very user-friendly. ResearchPro attempts to remedy these issues with a simple, guided approach to car research. We also take the experience one step further, allowing customers to receive a free quote on their dream car from local dealers.

Why YUI?

We started using YUI 2 for all of our frontend development about two years ago, and haven't looked back. YUI's focus on application development makes it a no-brainer for Autofusion, as we provide many embeddable web apps and widgets to our customers.

Over the years we have used just about every YUI 2 component there is in both our client web properties and our internal tools. YUI's proven track record and incredible documentation really set it apart from the other libraries we've worked with. The refinements to the library offered by YUI 3 made it an easy choice for this project.

How YUI is Utilized in the Project

ResearchPro makes use of several YUI 3 components, namely IO , JSON , Node , Event , Animation , and even the beta Slider widget. We're also using the selector-css3 and event-mouseenter modules, as well as a custom module that handles the JSON communication with the backend.

ResearchPro YUI 3 Slider Usage

Challenges and Benefits of Using YUI 3

Migrating from YUI 2 to YUI 3 was both the largest challenge and the largest benefit during ResearchPro's development. Working with Node instances instead of DOM nodes directly can take some adjusting to at first, but we quickly found that this excellent abstraction greatly reduces the amount and complexity of the code for a given task. Likewise, the chainability of YUI 3 methods offers some great syntactic sugar that is hard to live without.

The primary challenge of the YUI 3 migration was and continues to be beta bugs. The first YUI 3 beta was released a few months before we started development, and we took that opportunity to start this project with the new codeline. We wanted to be familiar with YUI 3 once it replaces YUI 2 in our workflow down the road. During development, we discovered and reported several bugs, some of which are still being worked out today.

What's Next for Autofusion?

We are always developing new products with YUI and revising our existing offerings to incorporate YUI on the frontend. Our online inventory solution is powered by YUI 2, and we're currently planning a refined version of the product that will use YUI 3 in its place.

Our inventory interface makes heavy use of the Container module family, so hopefully by the time we start development YUI 3 will have implementations of Panel and Dialog. We've been very pleased with the rapid growth of features, and expect YUI to be our frontend toolkit of choice for years to come.

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

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

YUI: Open Hours, Wed June 16th

June 15, 2010 at 12:26 am by Luke Smith | In Development | 2 Comments

It's time again for YUI: Open Hours ! A change of schedule this week, though. The call will be on Wednesday .

I want to start by sending a huge thanks to Iliyan Peychev, Andrew Bialecki , Matt Snider , and Jacob Fogg for featuring their Gallery widgets in the last Open Hours. From Matt's game UI inspired Radial Menu to Iliyan's full featured Accordion , it was a great exploration of the types of UI tools you can find (or create) in the Gallery today as well as a study in different ways to use YUI 3 to solve UI challenges. You can find links to the modules in the May 21st Open Hours post , and a sampling of some of the interesting points from the discussion in the comments .

This week, hot on the heels of their huge YUI 3 Gallery contribution , Nate Cavanaugh and Eduardo Lundgren of Liferay, Inc. will be joining us to introduce us to some of the new AlloyUI modules. This is a pretty big deal. We've been working with these guys for months to get their 65 modules into the Gallery. That's right, 65 modules! All created by just Nate and Eduardo. Talk about productive.

Obviously we'll barely have time to scratch the surface of all the AlloyUI modules, but we will do a quick overview of some of the most interesting or popular ones and cover some “Getting started” code. There's such a variety of modules, there will be something for everyone.

  • For YUI 3 newcomers or folks that have been waiting for the YUI 2 widgets to be migrated, there are now a lot more options to check out.
  • For people wanting to take those first steps creating something in YUI 3, there are now more things to write plugins for, patch, or extend.
  • For seasoned component developers, there's now a lot more implementation code to reference for evolving conventions and components to collaborate on.
  • For more complex app developers, you can get a sense of one team's strategy for code submodularization and approach for building and packaging modules in a larger or more complex application.

Nate and Eduardo are open to whatever questions you have, so the conversation can go however deep, and in whichever direction you want. If you have any questions about a particular module or about anything else, ask away.

We're changing up a little this week and moving Open Hours to Wednesday . The time will be the same as before, though (10am – 12pm PDT), and the connection details are also the same:

  1. Dial in to 1-888-371-8922 (non-US participants, email me for a local number)
  2. Enter the attendee code 4718 8953#
  3. 画面共有セッションに参加する （これはそれを初めて使用する場合、これはAdobe Connectのプラグインをインストールするようにプロンプトが表示されます）

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

そこにお会いしたい！

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

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

次のページ»
Yahoo!が主催

著作権© 2006-2012 Yahoo!社がすべての版権を保有。 プライバシーポリシー - サービス利用規約

を搭載ワードプレスでヤフー ウェブホスティング 。