Yahoo! User Interface Blog (YUIBlog)

Fragen Sie Satyam - und kommen für eine kostenlose Kopie der New YUI 2,8 Buch von Packt

29. Juli 2010 um 08.03 Uhr von Eric Miraglia | In Entwicklung | 28 Kommentare

Satyam (Daniel Barreiro) schrieb letzte Woche über seine Erfahrungen schriftlich YUI 2.8: Das Erlernen der Bibliothek , der neuen YUI 2 Volumen ab sofort von Packt.

Packt hat dankenswerterweise ein paar kostenlose elektronische Kopien angeboten YUIBlog Leser. Schlagen Sie eine Frage oder ein Tutorial Sie möchten von Satyam auf einer YUI siehe 2,8-verwandtes Thema als Kommentar zu diesem Beitrag würde, und wenn Satyam nimmt Ihren Themenvorschlag für eine der seine drei "Ask Satyam" Blog-Posts Packt wird eine elektronische Kopie des Satyam Buch für Sie zum Download bereit.

Satyam werde Entsendung Antworten auf seine drei liebsten Fragen hier im Blog in den nächsten Monat oder so.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI 3.2.0 Preview Release 1: Touch-Event Support, Gesten, Transitions-, CSS-Grids, ScrollView, Uploader, and More

26. Juli 2010 um 12.24 Uhr von Eric Miraglia | In Entwicklung | 15 Kommentare

Die YUI-Nutzer-Team freut sich, die erste Entwickler-Vorschau auf die kommende YUI 3.2.0 Release bekannt zu geben. Diese Vorschau bietet eine Gelegenheit für Entwickler und Implementierer zu helfen, testen Sie die Freigabe für mögliche Regressionen und Feedback zu den neuen Funktionen und Komponenten. Wenn Sie bereits ein YUI Umsetzung haben, wenden Sie üben YUI 3.2.0pr1 in Ihrer Entwicklungsumgebung und lassen Sie uns wissen, was Sie zu finden.

Es gibt drei Möglichkeiten, um mit der Preview-Version beginnen:

• Verwenden Sie aus dem CDN: YUI 3.2.0pr1 ist auf der EUR über den 3.2.0pr1 Versions-Tag - so können Sie preview-release-Dateien verweisen können wie http://yui.yahooapis.com/combo?3.2.0pr1/build/yui/yui-min.js . Wenn Sie zu dieser Seed-Datei für die Preview-Version wechseln, die alle späteren use() werden Aussagen weiterhin YUI 3.2.0pr1 laden.
• Laden Sie die Version: Download von YUI 3.2.0pr1 YUILibrary.com , einschließlich Quellcode und Beispiele für alle Komponenten - auch die neu in dieser Pressemitteilung.
• Erkunden Sie die Beispiele: Der Einfachheit halber haben wir geschrieben das Vorschaufenster (zusammen mit dem funktionierenden Beispiele Roster ) zu YUIBlog. Fühlen Sie sich frei, um die Freilassung dort zu erkunden als Vorspiel zum Einschalten Ihres EUR-Version Referenz (oder dem Herunterladen der Vorschau) und testen es in Ihrer eigenen Umgebung.

Nennenswerte Veränderungen kommen in YUI 3.2.0

Wie bei allen YUI Entwicklungsarbeit können Sie verfolgen, unsere aktuellen Pläne und Fortschritte auf unserem YUI 3 tasklist , einschließlich einer umfassenden Liste von YUI 3.2.0 (und einige kommende 3.3.0) ändert, können Sie auch in Schach über unsere Fortschritte mit Fragen in der Bug-Datenbank . Hier sind einige der neuen und aktualisierten Komponenten in der Developer Preview 3.2.0 vorgestellten Artikel:

• Intrinsic Unterstützung für Touch-Ereignisse wurde hinzugefügt ( mynode.on("touchstart", function(e) {}); ). - Wir haben auch ein Gesten-Modul mit zwei gebündelten Gesten hinzugefügt gesture-flick und gesture-move -, dass die Arbeit sowohl mit Touch-und Maus-gesteuerten Geräten. Schauen Sie sich die API-Dokumentation oder die mitgelieferte Beispielseite für Ideen, wie man beginnen mit Gesten.
• YUI Loader die intrinsische Fähigkeit unterstützt jetzt-basierte loading. Dies erlaubt uns, zu trennen, zum Beispiel IE-spezifischen Code in einzelne Teilgebiete und ermöglichen den Loader, um diesen Code nur für Browser, die es erfordern bündeln. Wir nutzen diese neue Funktion für die Schifffahrt IE-spezifischen Code in der DOM-Modul für nicht-IE-Browser, eine Leistung / Gewicht k-Boost, die alle Benutzer von modernen Browsern ohne Code-Änderung erforderlich profitieren zu vermeiden.
• YUI 3-Animation-Portfolio unterstützt nun Übergänge über die Transition Modul und bietet Browser-Normalisierung für dieses leistungsstarken, Hardware-beschleunigte (wo verfügbar) Verfahren für die Behandlung Übergänge; bitte zuerst die beispielsweise für die Beispiel-Code . Animation, in seiner einfachsten Form, hat eine schlanke Abhängigkeitsbaum für moderne Browser, eine signifikante Reduzierung der k-Gewicht für einfache Animation in besseren Browsern.
• YUI 3.2.0 mit sich bringt eine neue Beta-Version von YUI Grids CSS-Komponente, und Sie können beginnen Erforschung dieses neuen Ansatzes zu Grids in der Preview-Version. Die Beispiele sind der beste Platz zum zu beginnen .
• Wir haben mit Michael Johnston von der Yahoo! Mobile Engineering-Team, um eine neue (beta) ScrollView Widget auf YUI 3.2.0 zu bringen. ScrollView bietet eine Rollbereich Umsetzung vertraut Nutzer von nativen Apple iOS-Anwendungen, emuliert die Elastizität des Elements gescrollt, wenn Sie zum Anfang oder Ende Limit. Du wirst sehen, in den 3.2.0pr1 Beispiele für ScrollView , dass diese Komponente Gerät ist neutral, arbeiten gut mit der Maus als auch mit Touch-Ereignissen auf Ihrem Android oder iOS-Gerät.
  
• Der Uploader-Komponente von YUI 2 ist jetzt Teil des YUI-3-Familie als auch, debütiert als Beta in 3.2.0.
• Die Geschichte Modul, das mit YUI 3.0.0, die eine Portierung des YUI-2-Version war, debütierte wurde als veraltet markiert (es bleibt in YUI 3.2.0 verfügbar als history-deprecated ). Eine neue Beta-Geschichte Dienstprogramm Debüts in 3.2.0, basierend auf Ryan Grove Geschichte Lite-Modul aus dem YUI 3 Galerie. Eine Vorschau-Version beispielsweise von der neuen Komponente ist ein guter Ausgangspunkt Referenz.
• Die JSONP und YQL Abfrage-Module aus der YUI 3 Galerie geworden kanonischen Komponenten, debütiert als Beta in dieser Pressemitteilung.

Rückkopplung

Das Ziel einer Preview-Version ist, um es so einfach wie möglich für uns alle in der Gemeinde, um die Fortschritte des bevorstehenden Release zu bewerten und Feedback geben. Bitte nehmen Sie sich etwas Zeit, um zu testen 3.2.0pr1 und lassen Sie uns wissen, was Sie durch Einreichung Tickets finden in der YUI 3 Bug-Datenbank als "beobachtet in der Version" 3.2.0pr1 markiert. Wir werden unser Bestes tun, um eine Vorschau-Version auf die Fragen anzugehen YUI 3 Foren auch.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI Theater kommt zu Boxee, mit freundlicher Genehmigung von Chad Auld und die Brilaps-Team

22. Juli 2010 um 6:15 Uhr von Eric Miraglia | In YUI Theater | Kommentare deaktiviert

YUI-Mitgliedes und ehemaligen Yahoo Chad Auld uns per E-Mail mit uns über sein neuestes Projekt mit seinem Brilaps Gruppe erzählen - ein Projekt, das gebracht hat YUI Theater auf dem TV-Bildschirm via Boxee. Im Tschad den Worten:

Boxee ist ein Up-and-coming Cross-Plattform-Anwendung, die dazu beitragen, dass Web-Inhalte auf dem TV zum Ziel hat. Es basiert auf dem Open-Source-Basis von XBMC Projekt und ermöglicht es Benutzern, neue Plugins zu schreiben, um in zusätzliche Inhalte zu bringen. Wir starteten ein neues Projekt vor etwa drei Wochen zu unserem ersten Boxee Plugin zu bauen, und wir uns für das YUI Theater als Inhalt wollten wir aus dem Internet auf den Fernseher bringen. Es gibt so viele tolle Videos dort archiviert (Tendenz steigend), wir denken es ist eine tolle Quelle von Inhalten für Entwickler, um den Zugriff auf von ihrer Couch (vor allem da die meisten der Videos ein wenig länger sind, als könnte jemand Zeit, um bequem beobachten haben müssen von ihrem Laptop). Es dauerte etwa eine Woche, um das Plugin, eine weitere Woche, um es zu polieren und klären ein paar Fehler, und etwa eine Woche zu bauen, um die Anwendung von der Boxee QA-Team genehmigt bekommen und dann in den öffentlichen Repository. Ich soeben erfahren, dass sie die Öffentlichkeit Repository treffen an diesem Morgen und so wollte ich erreichen, und Sie wissen lassen.

Das sind fantastische Neuigkeiten für alle, die genossen hat YUI Theater Inhalt und möchten sich über die neuesten von Douglas Crockford, Brendan Eich und all den anderen großen YUI Theater Referenten aus dem Komfort von seiner / ihrer Couch. Schauen Sie sich das Video oben für eine Tour durch den UI, und dann gehen grab Boxee und loslegen.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Frontend-Engineering-Positionen Erhältlich mit den Yahoo! Flex Force Team

21. Juli 2010 um 11:00 Uhr von Gonzalo Cordero | Im Frontend Engineering Jobs bei Yahoo | Keine Kommentare

Die Yahoo! Flex Force ist derzeit bemüht, unser Team mit ein paar talentierte Ingenieure Frontend zu erweitern. Im Rahmen des Flex-Force-Teams, haben Sie die Möglichkeit, auf mehreren strategischen Projekten von hoher Bekanntheitsgrad und hohe Sichtbarkeit zu arbeiten. Diese Positionen beinhalten, als Botschafter der besten Praktiken und den Austausch von Wissen im gesamten Unternehmen. Wir arbeiten eng mit den verschiedenen Plattform-Teams, darunter die YUI-Team, um sicherzustellen, verwenden wir die neuesten Strategien, Techniken und Werkzeuge.

Als jüngstes Beispiel war die Flex-Force-Teams hinter der Umsetzung des neuen Yahoo! Updates Widget die in sich durchaus mit der integrierten YUI 3 .

Um an dieser Rolle erfolgreich ist, müssen Sie ein Selbst-Starter und lernt schnell mit einer positiven Denkweise, die können schnell Rampe nach oben und nehmen verschiedene Herausforderungen zu sein. Eine wahre Leidenschaft für Frontend-Technologien und Best Practices ist ebenfalls erforderlich.

Wenn die Arbeit mit mir und meinen Kollegen auf der Yahoo! Flex Force klingt interessant für Sie, den Kopf auf die Yahoo-Karrierenetzwerk und überprüfen Sie die folgenden Positionen:

• Frontend-Ingenieur Position # 1
• Frontend-Ingenieur Position # 2
• Frontend-Ingenieur Position # 3 - das ist eine weitere Senior-Rolle, mit mehr Erfahrung und zusätzliche Fähigkeiten erforderlich

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI: Öffnungszeiten Mi, 21. Juli

20. Juli 2010 um 15.07 Uhr von Luke Smith | In Entwicklung | 3 Kommentare

Für diejenigen unter Ihnen, die nicht dem nicht abonnieren YUI Kalender oder YUILibrary.com Forum , die nächste Rate in Höhe von YUI: Öffnen Sie Stunden wird morgen, 21. Juli sein.

Dieses Mal werden wir auf einer wiederkehrenden Thema für YUI-Community Anbieter, die gerade erst gestartet werden, den Aufbau ihrer eigenen Module zu konzentrieren sind: Wie man ein Widget und wie man ein Plugin in einer YUI 3-Wege bauen zu bauen.

Anthony Pipkin, alias apipkin von yui IRC-Channel # Ruhm, wird der Gast sein, um uns durch seine Erkenntnisse während des letzten Jahres und zeigt, wie das Kopieren und Einfügen aus dem YUI 3 Dokumentation Beispiele bewegen, um zuversichtlich, dass Sie die richtige Möglichkeiten, wie man ein Problem in einem "YUI 3 Art des Denkens" zu nähern.

Wir werden einen Blick auf zwei seiner einfacheren Galerie-Module, die nehmen Button-Widget und dem Knoten IO-Plugin . Er wird diskutieren, was sie sah, wie ursprünglich, im Vergleich zu heute, und warum sie verändert.

Dann werden wir rund eine Weile spielen, vielleicht etwas bauen, aus dem Nichts auf der Grundlage, was die Leute wollen auf den Anruf zu decken.

Matt Sweeney (Node, Selector, TabView, Gitter, etc.) und Satyen "Der Guru" Desai (Widget, Plugin, Base, Attribute, etc.) aus der YUI-Team wird auch auf den Anruf zu sein. Es wird also best practices im Haus sein.

Für YUI 3 Verbraucher, die nicht (noch?) Anbieter, sollte dieser Ruf noch für das Verständnis der Gedanke hinter, wie YUI 3 Widgets und Plugins aufgebaut sind und welche Art von Mustern von neuen YUI-Komponenten erwarten wertvoll. Und zweifellos wird es andere große Imbissbuden wie immer sein.

Wir werden Online von 10.00 bis 12.00 Uhr PDT. Die Verbindungsdaten sind die gleichen wie immer.

1. Wählen Sie sich in 1-888-371-8922 (Teilnehmer außerhalb der USA, mailen Sie mir für eine lokale Nummer)
2. Geben Sie den Teilnehmer-Code 47188953 #
3. Join the Screen-Sharing-Sitzung (dies wird Sie auffordern, die Adobe Connect-Plugin zu installieren, wenn dies Ihre erste Mal benutzen)

Hier ist das Forum-Thread zu diesem Öffnungszeiten. Ich werde nach einige der interessanten Imbissbuden nach dem Aufruf.

Folgen Sie @ yuilibrary auf Twitter für die neuesten.

Wir hoffen, Sie dort zu sehen!

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Autor Anmerkungen: Schreiben YUI 2.8: Das Erlernen der Bibliothek, die New YUI 2 Buch von Packt

20. Juli 2010 um 09.14 Uhr von Satyam | In Entwicklung | 1 Kommentar

Im Dezember 2009 Redakteure bei Packt Publishing fragte mich, ob Ich mag würde, um die zweite Auflage ihres Buches zu schreiben auf der YUI-Bibliothek . Der ursprüngliche Autor, Dan Wellman, wurde in anderen Geschäftsfeldern zur Zeit beschäftigt, und sie brauchten einen Autor, der im Großen und Ganzen vertraut war YUI 2 . Das erste was ich dachte war: Bist du nicht ein bisschen spät? Vieles von YUI 3 war bereits in GA und mehr wurde mit jeder neuen Version kommen. Aber das Packt Team wollte gehen, und ich vereinbart, die Herausforderung anzunehmen.

Am ^16. Juli kam der neue Band aus, YUI 2.8: Das Erlernen der Bibliothek , nicht als eine zweite Auflage, sondern ein neuer Titel. Am Ende war es nicht so eine schlechte Entscheidung. Während das Buch durch den Bearbeitungsprozess ging, gewann YUI 3 die Fähigkeit, YUI 2 Komponenten von der Last use() -Anweisung . Dies erweitert den Nutzen der umfangreichen Katalog YUI 2 während der Einnahme den Druck von Entwicklern, YUI 3 Versionen aller YUI 2 Komponenten zu produzieren.

• Leseprobe: Packt hat ein Probekapitel aus dem neuen Band veröffentlicht, abdeckt YUI 2,8 Rich Text Editor, auf ihrer Website, die Ihnen einen Eindruck davon, was das neue Buch enthält .

Das Ziel mit diesem neuen Band war es, alle Nicht-Beta-2 YUI-Komponenten zu decken. Dieses breit angelegte Vision hat mich gezwungen, einen tieferen Blick in die Komponenten I kaum in ihren Grundformen wie auch andere verwendet hatte ich überhaupt nicht genutzt zu nehmen. Doch im Gegensatz zur ersten Ausgabe, ein Projekt, das nicht lange begann, nachdem die Bibliothek öffentlich gemacht worden war, hatte ich ein paar Jahre kumulierte Erfahrung mit YUI - meine eigene Erfahrung mit, dass von den vielen Benutzern, die ihre Erfahrungen teilen und Beratung gepaart in den Foren und im Blog. Ich wurde auch von vielen Fehler von einem ausgezeichneten Team von Gutachtern verschont, von denen zwei, sind Caridy Patiño und Iliyan Peichev, auch gut YUI Mitwirkenden bekannt.

Um das Buch auf eine überschaubare Länge zu halten, eliminiert ich einige Bilder, lange Beispiele und Referenz-Material, das an gefunden werden konnte der YUI-Website . Während die erste Auflage hatte höchstens zwei Komponenten pro Kapitel, hat das neue bis zu vier und hat ein paar neue Kapitel. Trotzdem haben einige Komponenten nicht den Cut.

Die Evolution von YUI 2

Ich habe viel gelernt über die YUI-Bibliothek beim Schreiben dieses Buches, und die Änderungen, die ich an Dans Text gemacht waren lehrreich über die Bibliothek der Evolution seit seiner Veröffentlichung im Jahr 2006.

Die Programmier-Stil zum Beispiel-Code hat in diesen Jahren stark verändert. Statt einen Namensraum (oder mit YAHOO.example , was immer verfügbar ist als Platzhalter) haben wir jetzt neigen dazu, alles innerhalb einer anonymen Funktion erstellt, wenn das DOM verfügbar wird passen. (Dieser Stil ist näher an, was wir sehen in YUI 3.) Wir verwenden jetzt Namensräume, wenn wir unbedingt brauchen, um global zugängliche Variablen (einschließlich der Gegenstände) wie zum Beispiel, wenn wir eine benutzerdefinierte Bibliothek Komponente zu erstellen. Sandboxing erspart uns einige Tipparbeit, da wir funktionell-scoped Aliasnamen für die Objekte verwenden wir öfter von YUI (Dom, Ereignis, Lang sind häufige Verknüpfungen) oder Variablen des eigenen definieren können. Dieser Ansatz ermöglicht auch YUI Compressor machen einen viel besseren Job.

Nachdem ein Panoramablick auf die gesamte Bibliothek erlaubte mir zu bemerken, wie es im Laufe der Zeit entwickelt. Die Architektur der Komponenten verändert und es ist klar, wie alles begann, ist jetzt YUI 3 konvergiert.

Frühe Komponenten, wie TreeView, hatten nur wenige Abhängigkeiten. Da bestimmte Muster begonnen, offensichtlich geworden, begannen einige grundlegende Komponente der Infrastruktur zu entwickeln. Die Container-Familie hatte eine Config Objekt, das für Getter-und Setter-Methoden erlaubt, und so haben alle Komponenten, die von ihm erben. Es verwendet auch den Custom Event-Objekt, das eine der beiden Möglichkeiten, um mit benutzerdefinierten Ereignissen haben wir in YUI 2 zu arbeiten ist.

Mit der Veröffentlichung von TabView kam der YUI 2 Element-Dienstprogramm , das eine verbesserte Getter-und Setter zur Verfügung gestellt (über AttributeProvider) sowie bessere benutzerdefinierte Ereignisse (via EventProvider). Siebzehn weitere YUI 2 Komponenten erben von Element. Betrachtet man die Entwicklung der Bibliothek, ist es leicht zu sehen, wie die Ideen hinter Element, wie ein DOM-Element-Wrapper, kam zu YUI 3 der Knoten zu informieren. Element die Rolle als Grundlage für die anderen Komponenten wurde in YUI 3 der Grund-und Widget gebrochen, obwohl die neuen Komponenten alle viel mächtiger und vollständig sind, jedes in seiner eigenen Gegend sind. Zum Beispiel ist Knoten all und one Methoden geben Node-Instanzen während Elements getXxxx Methoden schlicht DOM-Element Referenzen zurückgeben, nicht vollständig abstrahiert das DOM.

Die beiden Modelle, Config und CustomEvents auf der einen Seite und AttributeProvider EventProvider und auf der anderen Seite sind nicht völlig unvereinbar. Im Menü-und Split-Knöpfe beide Modelle nebeneinander existieren, als Button erbt von Element und es beherbergt eine regelmäßige Menü, das von Container erbt.

Zweifellos profitierte YUI 3 aus all diesen Erfahrungen, aber auch von YUI 2 YUI3 profitiert. Cool stuff kam von YUI 3 bis YUI 2, wie zum Beispiel bereichern event-delegate und element-delegate und andere neue Veranstaltungen, die wir hören können ( focusin und focusout , mouseenter und mouseleave ). Dies wurde auch wegen der möglichen Belastung der Art, wie wir Komponenten , die während YUI 2 Lebensspanne verändert - vor allem mit der Einführung des YUI Loader 2 - und wurde formalisiert als intrinsische Unterstützung für Client-seitige Beladung in YUI 3.

Loading betroffen, wie die Komponenten entworfen habe und wie die letzte Komponente-Dateien aufgebaut sind. In YUI 2, um die Anzahl der ausstehenden Anforderungen Server zu minimieren, mussten die Teile so viel von dem, was sie benötigt zusammengepackt sind. So bekamen einige Komponenten lose verknüpfte Objekte in ihnen nur zu haben, sie praktisch, wenn und falls erforderlich, andere bekamen eine Reihe von Objekten mit einer ganzen Reihe von Funktionen in einer Datei gepackt, weil das Laden die einzelnen Teile zu teuer war. Dann kam Aggregate wie yahoo-dom-events.js oder reset-fonts-grids.css da sie fast immer zusammen oder verwendet utilities.js , die alle häufig verwendeten Komponenten sammelt in der YAHOO.util Zweig. Aber die wirkliche Veränderung kam mit Combo-Henkel Anfragen, die uns eine beliebige Anzahl von Script und CSS-Dateien jeweils in nur einer HTTP-Anfrage zu ziehen erlaubt. Das macht es weniger notwendig, um die Verpackung der Objekte in der Bibliothek zu optimieren Komponente in Dateien und jenen zu Aggregaten auf einem hypothetischen "durchschnittliche Nutzer" basiert.

In YUI 3 haben wir nicht mehr benötigen, um die "Container-Familie" auf einmal zu laden. Wir können die separaten laden widget- xxxx -Dateien auf der Oberseite des grundlegenden widget nach den Funktionen, die wir brauchen. Dieser Ansatz ist der Standard in YUI 3, aber es kam zu einem der Schritte in der Entwicklung von YUI 2. Daher neueren YUI 2 Komponenten wie event-delegate und element-delegate werden getrennt von ihrer Basis aus Komponenten verpackt und so ist das Ereignis mouseenter und mouseleave . Wir könnten weiter sehen spaltet in der Bibliothek Komponenten in zukünftigen Versionen und erlaubt Ihnen, genauer gesagt die Feature-Set und lassen Sie nicht benötigten Code aus der Seite wählen.

Dies ist eine Geschichte des Fortschritts, ein Prozess, ging aber unbedingt einige gescheiterte Versuche. Warum nicht TreeView von Element erben, oder warum hat nicht Container, und somit Menü, wechselte Element oder, mindestens, um AttributeProvider und EventProvider? Technisch gesehen ist die Antwort "Abwärtskompatibilität", sondern ganz allgemein ist es "Respekt". Es gibt Tausende von Websites (und Zehntausende von Entwicklern) mit dem die veröffentlichte öffentliche Schnittstelle der YUI 2 Komponenten. Vornahme dieser Änderungen würden viele Anwendungen zu brechen oder würde sie abzuschneiden der Upgrade-Pfad, sollten sie wollen von einem Code-Update oder einer neuen Funktion profitieren. Als so respektvoll von dem installierten Code-Basis ist eine Bibliothek Feature in sich. Respektvoll zu uns, die wir schaffen, dass Code, ist ein Feature von den Menschen in der YUI-Team, und ich bin sehr dankbar, es ist so.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Mobile Browser-Cache-Limits, Revisited

12. Juli 2010 um 8:45 Uhr von Ryan Grove | In Entwicklung , Leistung | 9 Kommentare

In Mobile Browser Cache Limits: Android, iOS, webOS und teilte ich die Ergebnisse meiner Versuche, Browser-Cache Grenzen für Android, iOS, webOS und Geräte zu bestimmen. Am Ende des Artikels, schrieb ich:

Mit diesen Ergebnissen als Ausgangspunkt, sondern überprüfen sie sich, bevor Sie wichtige Entscheidungen auf Annahmen über mobiles Cache Einschränkungen basieren machen. Die mobilen Browser Welt verändert sich in einem Blitz-Tempo, so dass diese Forschung wird eine sehr kurze Haltbarkeit.

Wie sich herausstellt, das war guter Rat: der Tag, nachdem der Artikel geschrieben wurde, Steve Souders kommentierte, er habe Tests mit einer anderen Methode, die mehr Vertreter einer realen Web-Workflow ausgeführt wurde, an und hatte unterschiedliche Ergebnisse.

Neue Methodik

Meine ursprüngliche Methodik beteiligt navigieren direkt zu einem zufällig generierten Seite mit einer bestimmten Größe, serviert mit einem text/html Content-Typ. Die Ergebnisse mit dieser Methode zuverlässig reproduzierbar waren (außer am webOS), sondern als Steve wies darauf hin, Benutzer nicht direkt zu CSS-und JavaScript-Dateien. Meine Annahme, dass die Grenzwerte für die direkte Navigation zu einer HTML-Ressource die gleichen wie die Grenzwerte für externe CSS-und JavaScript waren nicht korrekt war, so auch wenn die Ergebnisse meiner Versuche waren gültig, sie waren nicht überall anwendbar.

Im Laufe der vielen IM-Sitzungen, mehrere E-Mails und ein paar Telefonate, arbeitete Steve und ich eine neue Testmethodik. Ich implementiert eine Version davon auf meinem Cache-Test-Framework , dann Steve implementiert eine Version in der Lage Veröffentlichung der Ergebnisse zu Profilers .

In den neuen Tests, laden wir eine HTML-Seite, die zu einem zufällig generierten CSS-oder JavaScript-Komponente von einer bestimmten Größe bezieht. Dann mit einem zweiten HTML-Seite, die die gleiche Komponente und prüft, ob oder nicht es aus dem Cache geladen wurde lädt navigieren. Um festzustellen, ob eine Komponente aus dem Cache geladen wurde, speichern wir einen Zeitstempel in einem Cookie auf jede Anfrage, wenn der Zeitstempel zum zweiten Mal laden wir die Komponente aktualisiert wird, wissen wir, das Ersuchen traf den Server, der die Komponente nicht geladen wurde, bedeutet aus dem Cache.

Neue Ergebnisse

Wir fanden, dass alle von uns getesteten mobilen Browsern deutlich höhere Cache-Grenzwerte für externe Ressourcen, die von einer Seite, als sie für eine HTML-Seite selbst tat ​​geladen hatte. Dies sind hervorragende Neuigkeiten für mobile Web-Entwickler.

Die folgende Tabelle zeigt unsere Ergebnisse:

Tabelle: Mobile Browser externe Ressource Cache Eigenschaften

Browser / OS / Geräte-	Einkomponenten-Limit	Übersteht Power Cycle
Android 2.2 (Nexus One)	2MB	Ja
Mobile Safari, iOS 3.1.3 (iPhone 1. Generation)	4MB +	Kein
Mobile Safari, iOS 3.2 (iPad)	4MB +	Kein
Mobile Safari, iOS 4.0 (iPhone 3G)	4MB +	Kein
Mobile Safari, iOS 4.0 (iPhone 4)	4MB +	Kein
webOS 1.4.1 (Palm Pre Plus)	~ 0.99MB (1023 KB)	Ja

Beachten Sie, dass die größte Größe 4MB wir getestet haben, und alle IOS Geräten zwischengespeichert 4MB Komponenten war. Der eigentliche Cache-Limit für diese Geräte möglicherweise größer als 4 MB. Außerdem gab webOS auf dem Palm Pre Plus konsistente Ergebnisse in diesem Test, während es einige Probleme bei der letzten Kontrolle hatte.

Es ist möglich, dass die viel niedrigere Grenzen meiner vorherigen Test für HTML-Komponenten zeigte auf iOS kann die Verwendung eines RAM-Cache für diese Komponenten zeigen, während die wesentlich höhere Grenzwerte für CSS / JS-Komponenten in diesem Test die Verwendung eines Festplatten-Cache hindeuten können, aber dies ist nur eine Vermutung. Android, zumindest, scheint ein Festplatten-Cache in beiden Fällen zu verwenden, da der Cache überlebt Macht Zyklen.

Neue Empfehlungen

Auf der Grundlage dieser neuen Ergebnisse, mit den Ergebnissen aus meinen bisherigen Tests gekoppelt, biete ich die folgenden aktualisierten Reihe von Empfehlungen:

• Verwenden Sie far-future-Cache Ablauf-Header. Dies wird der Browser mit auf eine bedingte GET-Anfrage senden zu verhindern.
• Versuchen Sie, HTML-Seiten zu 25.6KB oder weniger zu begrenzen, wenn Sie sie im Cache gespeichert werden soll, da die vorangegangenen Tests zeigten, dass diese von iOS 3.2 auf Limit-verhängte die iPad-war die niedrigste HTML-Ressource-Limit der Geräte getestet.
• Halten Sie CSS und JS-Komponenten unter 1MB. Natürlich ist 1MB groß und Ihre Komponenten sollten viel kleiner sein als dieses, aber nicht die Mühe Aufspaltung eines Bauteils in einzelne Zugriffe aus Gründen der Cachefähigkeit es sei denn, seine Größe nähert 1MB.
• Erwägen Sie die HTML5-Anwendungs-Cache, wenn es wichtig ist, dass Ihre Komponenten im Cache bleiben für eine lange Zeit, oder nach dem Abschalten.
• Machen Sie Ihre eigene Tests. Ich betonte, wie wichtig dies in meinem vorhergehenden Artikel und ich werde es hier noch einmal betonen. Mit diesen Ergebnissen als Ausgangspunkt, sondern überprüfen sie sich, bevor Sie wichtige Entscheidungen auf ihnen basierenden machen.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!