Yahoo! User Interface Blog (YUIBlog)

Mobile Browser-Cache-Limits: Android, iOS, webOS und

28. Juni 2010 um 8:45 Uhr von Ryan Grove | In Entwicklung , Leistung | 19 Kommentare

Update (12. Juli 2010): Während die Ergebnisse in diesem Artikel beschriebenen präzise für HTML-Seiten sind, haben neue Tests sehr unterschiedliche Cache-Grenzwerte für CSS und JS Ressourcen aufgedeckt. Die aktualisierten Ergebnisse sind in der Mobile Browser-Cache-Limits, Revisited .

Im Frühjahr 2008 schrieb Wayne Shea und Tenni Theurer eine YUI Blog-Post auf iPhone Cachefähigkeit , in denen sie die Ergebnisse der Forschung geteilt in verschiedene Merkmale und Grenzen von Mobile Safari-Cache in iPhone OS 1.x Unter anderem fanden sie, dass einzelne Komponenten größer als 25KB nicht zwischengespeichert wurden, und dass es eine maximale Cache-Größe von insgesamt zwischen 475KB und 500KB.

Seitdem hat sich viel verändert. Wir haben gesehen, zwei neue Major-Releases und viele kleinere Versionen des iPhone OS (jetzt iOS), und mehrere andere mobile Geräte mit sehr fähigen Browser erschienen, um das iPhone herauszufordern. Stoyan Stefanov gefunden, Ende 2009, dass der iPhone-Cache Grenzen verändert hatte (leider zum Schlechten). Aber wo kommen die Dinge jetzt stehen? Und was ist mit den Nicht-IOS-Browser?

Hintergrund

Browser haben zwei Arten von Caches, die wir mit für die Zwecke dieser Tests sind besorgt:

• Die Komponente Cache oder Cache-Objekt, speichert einzelne Dateien. HTML, CSS, JavaScript und alle Bilder in das Bauteil Cache zu gehen. Immer, wenn es eine dieser Komponenten muss der Browser überprüft zunächst den Cache, bevor sie eine Netzwerk-Anfrage.
• Die Seiten-Cache, der auch als Vor / Zurück-Cache genannt, speichert eine ganze Seite und alle seine Komponenten, sowie deren aktuellen Status. Wenn Sie das vor oder zurück-Taste verwenden, wird der Browser die Seite aus dem Seiten-Cache, wenn möglich zu laden.

Das HTML5-Anwendungs-Cache ist eine andere Art von Cache, die weitgehend von mobilen Browsern unterstützt wird. Browser-Hersteller bereits einen guten Job machen zu dokumentieren die Grenzen des Anwendungs-Cache, so dass ich es nicht in meinen Tests. Mehr über den Antrag später Cache.

Geräte getestet

Getestet habe ich die folgenden mobilen Browser / Plattform-Kombinationen:

• Android 2.1 (Nexus One)
• Mobile Safari auf iOS 3.1.3 (iPhone 1. Generation)
• Mobile Safari auf iOS 3.2 (iPad)
• Mobile Safari auf iOS 4.0 (iPhone 3G)
• Mobile Safari auf iOS 4.0 (iPhone 4)
• webOS 1.4.1 (Palm Pre Plus)

Hinweis: Mit Ausnahme der Mobile Safari auf iOS 4.0 testete ich nur ein Gerät in jeder Kategorie. Wenn es Unterschiede zwischen den einzelnen Geräten oder Unterschiede in installierter Software über das Betriebssystem basiert sind, würde meinen Tests nicht erkennen, diese Variationen. Diese speziellen Geräte wurden getestet, weil sie die, die ich für den Zugriff hatte bist, nicht, weil ich ihnen wichtiger zu sein als andere Geräte zu berücksichtigen.

Methodik

Cache-Test ist mühsam, aber relativ einfach.

Ich schrieb einen winzigen Sinatra app ( Gabel, die sie auf GitHub! ), die eine Antwort, bestehend aus einem angeforderte Anzahl von Pseudo-alphanumerische Zeichen und Leerzeichen erzeugt. Die Antworten können entweder serviert oder unkomprimierten gzipped werden. Die folgenden fernen Zukunft Ablauf-Response-Header gesendet werden, um sicherzustellen, dass alle Antworten berücksichtigt werden zwischengespeichert werden:

 Cache-Control: max-age = 315360000
 Gültig bis: Fr, 1. Mai 2020 03.47.24 GMT

In meinem lokalen Netzwerk, habe ich dann manuell die folgenden Schritte auf jedem Gerät, um die Komponente Cache-Test durchgeführt:

1. Laden Sie den Cache-Test-Index-Seite.
2. Tippen Sie auf einen Link zu einer Komponente von einer bestimmten Größe, angefangen von 5KB zu 20MB, und warten Sie, Beladung bis zum Ende.
3. Tippen Sie auf die Schaltfläche Zurück.
4. Tippen Sie auf den gleichen Link wieder. Beobachten Sie, ob die zufälligen Zeichen identisch sind, und ob der Server-Konsole druckt einen Log-Eintrag für einen Antrag, um festzustellen, ob die Komponente zwischengespeichert werden in Schritt 2 war.
5. Wiederholen und passen Komponente Größen wie nötig, um die maximale Bauteilgröße, die zwischengespeichert wird bestimmen.

Um die Seite Cache zu testen, führte ich im Wesentlichen die gleichen Schritte, außer dass anstelle der Erschließung erneut auf den Link in Schritt 4, klopfte ich den Browser-Vorwärts-Taste, wodurch es zu den Seiten-Cache anstatt die Komponente Cache verwenden.

Unterstützung für ETag und Last-Modified wurde durch Optimierungen der Server, um die entsprechende Nachricht bestimmt ETag oder Last-Modified -Response-Header (in separaten Tests) und um die Zukunft weit-Ablauf-Header zu verzichten. Ich habe dann inspizierten die Request-Header vom Server empfangen, um sicherzustellen, dass der Browser die erwartete geschickt If-None-Match oder If-Modified-Since -Header auf Schritt 4.

Ergebnisse

Getestet habe ich mit gzip beide aktiviert und deaktiviert, aber ich fand, dass gzip keine Auswirkungen auf Cachefähigkeit auf jedem Gerät hatte. Die unkomprimierte Komponente die Größe kommt es in allen Fällen, unabhängig davon, ob diese Komponente bedient wird gzip. Als solche sind alle hier genannten Größen Komponente unkomprimierte Größe.

Die nachstehende Tabelle zeigt meine generellen Feststellungen.

Tabelle: Mobile Browser-Cache Eigenschaften

Browser / OS / Geräte-	Einkomponenten-Limit	Total Component-Limit	Seiten-Cache Size Limit	Unterstützt Last-Modified	Unterstützt ETag	Übersteht Power Cycle
Android 2.1 (Nexus One)	~ 2MB (~ 2.048.000 b)	~ 2MB (~ 2.048.000 b)	∞ 2	Ja	Ja	Ja
Mobile Safari, iOS 3.1.3 (iPhone 1. Generation)	0b ein	0b ein	∞ 2	Kein	Kein	Kein
Mobile Safari, iOS 3.2 (iPad)	25.6KB (26214 b)	~ 281.6KB (~ 288.354 b)	25.6KB (26214 b)	Ja	Ja	Kein
Mobile Safari, iOS 4.0 (iPhone 3G)	51.199KB (52428 b)	~ 1.05MB (~ 1.100.988 b)	∞ 2	Ja	Ja	Kein
Mobile Safari, iOS 4.0 (iPhone 4)	102.399KB (104.857 b)	~ 1,9 MB (~ 1.992.283 b)	∞ 2	Ja	Ja	Kein
webOS 1.4.1 (Palm Pre Plus) 3	~ 1MB (~ 1.048.576)	?	~ 1MB (~ 1.048.576)	Kein	Kein	Ja

Androide

Der Android-Browser zeigte die beste Cache-Verhalten aller Geräte getestet. Während es keine Grenze für die Größe der einzelnen Komponenten auferlegt wird, scheint die Cache-Größe auf etwa 2 MB beschränkt werden, was bedeutet, dass die einzelnen Komponenten wirksam zu 2 MB, beschränkt.

Die Seiten-Cache schien keine Grenze für die Größe der einzelnen Seiten zu verhängen, glücklich jedes Byte Caching ich es warf, bis der verfügbare RAM erschöpft war und der Browser abgestürzt ist.

Ich war angenehm überrascht, dass Android die Komponente Cache beide Browser neu gestartet und Macht Zyklen überstanden, war ein Kunststück, keiner der iOS-Geräte in der Lage, um zusammenzupassen.

Mögliche Einschränkung: Eine Überprüfung der Android WebKit-Source-Tree führt mich zu glauben, dass ihre Grenzen Cache kann bezogen auf die Menge an RAM und / oder Flash-Speicher auf dem jeweiligen Gerät, auf dem es läuft anzupassen. Wenn das stimmt, kann diese Zahlen nur anwendbar auf dem Nexus One. In der Tat, wenn der Cache-Größe auf ungenutzten Speicher anstatt Gesamtspeicher anpaßt, kann diese Zahlen nur dann anwendbar, meine Nexus One.

Ich könnte falsch sein, aber die Unterschiede in den Testergebnissen iOS 4.0 auf dem iPhone 3GS und iPhone 4 unterstützen diese Theorie. (Android und Mobile Safari sind sowohl WebKit-basierten Browsern, so dass sie dieses Verhalten gemeinsam haben.) Wenn Sie sich mit dem WebKit-Quelle sind und kann mehr Licht in diese Schuppen, nehmen Sie bitte mit mir in Verbindung.

iOS

Die Ergebnisse variierten wild über die drei neuesten Versionen von iOS. Erstaunlicherweise hat Mobile Safari auf iOS 3.1.3 nicht zwischenspeichern Komponenten jeder Größe, obwohl sie eine scheinbar unbegrenzte Seite Cache-Größe. Dies ist beunruhigend, da heißt es iOS 3.1.3 Benutzer werden wahrscheinlich immer eine suboptimale Browsing-Erlebnis, besonders wenn sie benutzen kein wifi. Die unbegrenzte Seite Cache-Größe tut wenig gut hier, denn es kommt nur ins Spiel, für Vor / Zurück-Navigationen. Dieses Verhalten ist eine signifikante Veränderung aus, was andere beobachtet in früheren IOS-Releases und ich kann mir keinen guten Grund dafür, weshalb ich vermute, dies könnte ein Fehler sein.

Mobile Safari auf iOS 3.2 (die nur auf dem iPad) zeigt nicht diesen Fehler. Seine 25.6KB Komponente Limit und ~ 281.6KB Gesamt-Cache Limit sind besser als nichts, aber sie scheinen immer noch dürftig im Vergleich zu den anderen Geräten getestet. Einzigartig unter den iOS-Geräten erscheint das iPad, um die Größe der Seiten in der Seiten-Cache zu begrenzen, um 25.6KB, das gleiche wie seine Bestandteile Größenbeschränkung.

Mobile Safari auf iOS 4.0 ausgestellt unterschiedliche Grenzen auf dem iPhone 3GS und auf dem iPhone 4, was bedeutet, dass die Grenzen der verfügbaren RAM (das iPhone 3GS verfügt über 256 MB, während das iPhone 4 hat 512 MB; beide Geräte getestet hatte 32 GB Flash-Speicher) anzupassen gründet, setzt . Auf dem iPhone 3GS, iOS 4.0 hat eine Größenbeschränkung 51.199KB Komponente und eine ~ 1.05MB insgesamt Komponente Cache-Größe.

Auf dem iPhone 4 war die Komponente Größenbeschränkung fast genau zwei Mal die Grenze auf dem iPhone 3GS, bei 102.399KB. Die gesamte Komponente Cache-Größe lag bei ca. 1,9 MB. Vielleicht, weil iOS 3.2 und iOS 4.0 separat entwickelt wurden, sondern verzweigt von einem gemeinsamen Vorfahren, erscheint das iOS 4.0 Seite Cache-Größe nur durch den verfügbaren Arbeitsspeicher auf beiden Geräten getestet, genauso wie iOS 3.1.3 begrenzt werden.

Keine der iOS-Geräte erhalten die Inhalte des Cache über erzwungene Browser neu gestartet oder das Gerät Macht Zyklen, obwohl sie den Cache habe nur bewahren, wenn Switching-Anwendungen, ohne tatsächlich zu töten Sie den Browser.

webOS

Meine Testergebnisse waren so auf webOS inkonsequent, dass ich wenig Vertrauen zu ihnen haben. Ich habe aufgenommen, was ich nur wenige Daten zu sammeln, rein aus Gründen der Vollständigkeit verwaltet. Bitte nehmen Sie es mit einer saftigen Körnchen Salz.

Soweit ich feststellen können, war, könnte webOS haben eine individuelle Komponente Größenbeschränkung von ca. 1MB, mit einer passenden Seite Größenbeschränkung in der Seiten-Cache. Ich konnte Koax- If-None-Match oder If-Modified-Since -Anfrage-Header von webOS, so dass es nicht unterstützt impliziert ETag und Last-Modified .

Bei einigen Tests stellte sich heraus, dass die maximale Komponente webOS Größe von mehr als 1MB war, aber das war inkonsistent. Soweit ich das beurteilen kann, erscheint webOS auf einen fiesen Bug, bei dem haben, nachdem eine bestimmte Punkt-möglicherweise, wenn die maximale Cache-Größe insgesamt erreicht-die Cache wird gerade komplett aufhört zu arbeiten zusammen, bis sich das Telefon-und wieder eingeschaltet. In einigen Fällen sogar Macht Radfahren nicht fix den Cache zu Bruch, so dass ich schließlich aufgegeben hat, um die genaue Ursache des Problems und die genauen Grenzen des webOS-Cache einzurichten.

Empfehlungen

Basierend auf diesen Ergebnissen, biete ich folgende Empfehlungen an jedermann die Entwicklung von Webanwendungen für die getesteten Geräte:

• Verwenden Sie far-future-Cache Ablauf-Header. Dies wird der Browser mit, um eine bedingte GET-Anfrage zu senden und wird in Cachefähigkeit webOS, der nicht die Verbesserung verhindern ETag oder Last-Modified .
• Zumindest solange, bis iOS 4.0 kommt auf dem iPad, versuchen, einzelne Komponente Größen zu 25.6KB oder weniger zu begrenzen, unkomprimiert. Und fordern Sie Ihre iPhone-Nutzer auf iOS 4.0 so schnell wie möglich aktualisieren.
• Wenn Ihre Website iOS 3.1.3 Nutzer (was wahrscheinlich ist) unterstützen müssen, wenn sie größer sind als Komponenten 25.6KB erfordert, oder wenn die Gesamtgröße all Ihrer Komponenten ist größer als 281.6KB, sollten Sie die HTML5-Anwendungs-Cache, localStorage , oder die Speicherung in Datenbanken zu speichern Sie Ihre Komponenten. Alex Kessinger neueste YUI Blog-Post, Einführung in die Nutzung YUI 3 im Offline-Anwendungen , könnten von Interesse für YUI 3 Entwickler der Prüfung dieses Ansatzes sein.
• Machen Sie Ihre eigene Tests. Sie nicht davon aus, dass diese Ergebnisse für alle künftigen Version von jedem der getesteten Browsern oder Geräten anwenden. 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.

Ich habe mein Test-Code verfügbar auf GitHub gemacht und ich ermutige Sie, es zu benutzen, sie berappen, und teilen, was du lernst.

Aufruf zur Dokumentation

Browserhersteller, beachten Sie bitte die Dokumentation und Veröffentlichung von den Cache Ihres Browsers Grenzen. In der Desktop-Welt, wo diese Grenzen sind typischerweise so hoch, dass kein Thema ist, wurde Dokumentation nicht erforderlich. In der mobilen Welt, sind Browser-Cache Grenzen lebenswichtige Informationen, dass Web-Entwickler müssen, um performante Websites mit überzeugenden Eigenschaften zu schaffen.

Die Grenzen der neuen Features wie localStorage und Anwendungs-Cache werden in der Regel gut dokumentiert. Ergänzen Sie bitte diese Ebene der Dokumentation zu dem Bauteil-Cache als auch.

Finden Gespräche: Bloglines | technorati

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

In the Wild für 25. Juni 2010

25. Juni 2010 um 10:10 Uhr von Eric Miraglia | In In the Wild | Kommentare deaktiviert

Wie immer, lass es uns wissen in den Kommentaren oder @ yuilibrary , wenn wir etwas Wichtiges verpasst.

• YUI 3-Basis-Legierung UI offiziell bekannt gegeben, bei Liferay-Konferenz : Von der Pressemitteilung : "Als Teil dieser Bemühungen, auch Liferay gibt die sofortige Verfügbarkeit von Liferay Alloy UI . Entwickelt in Zusammenarbeit mit Yahoos YUI Projekt bietet Alloy UI eine Reihe von Rich User Interface-Komponenten zur schnellen Erstellung von benutzerfreundlichen Portlets, Widgets und Web-Anwendungen. Alloy UI befasst sich mit der Komplexität von CSS, HTML und Javascript, befreien Entwicklern, sich auf Business-Anforderungen und Funktionalität konzentrieren. Alloy UI hilft auch, lösen einige gemeinsame Cross-Browser-Kompatibilität, die verbrauchen in der Regel Projekt-Ressourcen. Die neue Bibliothek benötigt kein Portal und kann verwendet werden, um Komponenten für jede Web-Anwendung zu entwickeln. Liferay Portal wird seine Front-End-Rahmen um Alloy UI zu vereinheitlichen, den Ausbau der Einfachheit und Leistungsfähigkeit moderner Portal-basierte Enterprise-Lösungen. 'Alloy UI stellt eine neue Funktion für Web-Entwickler, die Entwicklung von Rich UIs vereinfachen ", sagte Brian Chan, Liferay Portal-Erfinder und Chief Software Architect. "Wir freuen uns auf diese mit dem Yahoo Team gearbeitet haben und empfinden es wird ein großer Gewinn für die Entwickler mit ihren Lösungen zu helfen. '' Alle Alloy UI-Komponenten sind nun frei verfügbar zum YUI Gemeinde in der YUI 3 Gallery .
• AutoFusion die CarPrices.com startet mit YUI 3.1.1 : YUI 3 Galerie Beitragszahler Josh Lizarraga hat mit Autofusion Inc. wurde die Arbeit am neuen Projekt CarPrices.com , gebaut mit einer Vielzahl von YUI 3.1.1 Utilities und Widgets. Josh wird mehr über dieses Projekt in einer zukünftigen YUIBlog Post haben.
  
• Download-Squad Erez Zukerman berät JS Devs zu Crockford auf YUI Theater zuschauen : Schreibt Erez: " Douglas Crockford ist ein Genie. Im Ernst - der Kerl ist genial. Er ist derzeit als Yahoo! 's Chef JavaScript Architekt, erfand er JSON (eine weit verbreitete Data Interchange Format), er ist Teil des ECMAScript-Komitee (die Jungs Einstellung der JavaScript-Standard) und hat ein sehr breites Verständnis der allgemeinen Geschichte der Programmiersprachen Sprachen und Informatik. Vor kurzem gab Crockford fünf Gespräche über JavaScript als Teil des Yahoo! 's YUI Theater . Diese sind alle kostenlos verfügbar, und sie sind über fünf Stunden lang (mehr wie 6-7 Stunden insgesamt, denke ich). Was ist so cool an diesen Gesprächen ist, dass Crockford wirklich gibt Ihnen eine Vogelperspektive des Subjekts; die erste Stunde ist gerade Geschichte, und es ist wirklich faszinierend. Es ist ganz über dem Platz, beginnend mit dem Jackquad Webstuhl , durch, warum wir haben sowohl eine Delete und ein Backspace-Taste auf unseren Tastaturen, bis hin zu modernen Programmiersprachen und JavaScript. "Seit mehr der Favorit JavaScript Erez die Ressourcen, bitte zuerst seinen Posten , oder den Kopf über die Crockford auf JavaScript-Seite für die neuesten Videos Douglas '(mit vielen weiteren Befüllung der zweiten Spalte der YUI Theater ).
  
• Herzlichen Glückwunsch an Matt Snider & Friends bei YUI 2-basierte Mint.com, Gewinner eines 2010 Webby : Herzlichen Glückwunsch an Matt Snider . und den anderen herausragenden Frontend-Ingenieure bei Mint.com für ihre wohlverdiente 2010 Webby Award in der Kategorie Financial Services Mint YUI wurde seit Anfang 2-Basis , und Matt ist nach wie vor ein großer Faktor für den YUI Projekt . Sie können sehen, Matts Fünf-Wort Dankesrede über auf YouTube .
  
• Ajaxian die Dion Almaer Bewertungen Caridy Patiño Mayea den Preload Gallery Modul für YUI 3 : Dion hat einen schönen Beitrag auf Ajaxian Überprüfung Caridy Patiño Mayea die Preload-Modul für Prefetching und Caching-Vermögenswerte , ein YUI 3 Galerie Eintrag, den er schrieb etwa jüngst auf YUIBlog .
  
• Mit YUI Grids mit Movable Type (by @ foxxtrot) : YUI-Nutzer Jeff Craig schrieb über seine Erfahrungen Umwandlung einer Movable Type Blog zu YUI Grids 2: "So, wie jeder, der jemals gelesen hat meinem Blog vor, du wirst sehen, dass über das Wochenende Ich habe ein Upgrade auf meinem Blog Template YUI Grids und YUI3 für die JavaScript verwenden. Durch den Wechsel weg von den MT-Vorlagen (oder Templates, die die Norm waren, als ich die ersten Versionen von MTOS 4 installiert), konnte ich den HTML pageweight durch verdammt nahe die Hälfte zu reduzieren. Die alten Vorlagen waren wirklich div-schwer und hatten eine Menge Extra-Markup. Meist wurde die Entscheidung durch den Wunsch, die visuelle Gefühl meines Blogs Redo getrieben, und ich fühlte, daß ich auch unter YUI Grids neu schreiben, während ich es tun. "
• Nate Schutta Vergleicht YUI und Dojo für IBM DevelperWorks : Nate Schutta Schreiben für IBM developerWorks vergleicht YUI 2.x und Dojo in einem neuen Beitrag. Während wir noch auf dem YUI 3.x Entwicklungspfad in diesen Tagen konzentriert sind, hat Nate seinem Artikel einige nützliche Richtlinien für diejenigen, die das Denken über JavaScript-Bibliotheken und eine Entscheidung für ihr Unternehmen oder Projekt. Erstens - warum YUI oder Dojo?

  Bei so vielen exzellenten Auswahl zur Verfügung, warum sollten Sie prüfen, YUI oder Dojo? Mit einem Wort: Vollständigkeit. Im Gegensatz zu anderen Lösungen, die zusätzliche Bibliotheken oder Plug-Ins verbunden sind, müssen Dojo und YUI alles (und mehr), dass die heutige Front-End-Ingenieur nur wünschen kann. Das ist zwar ein Segen und ein Fluch, wenn man auf dem Markt für einen One-Stop-Shop für Ihre Bedürfnisse Ajax sind, das sind zwei starke Konkurrenten. Neben einer Fülle von JavaScript Helfer und Dienstprogramme, bieten beide erstklassige Widgets und Kontrollen-weit über den begrenzten Palette der Standard-Browser.

  Nates Tipps allgemeine Bibliothek Auswahlkriterien ist nützlich:

  • Was wollen Sie davon? Sie suchen nach einem vollständigen Ersatz von fast allen UI-Elemente auf Ihrer Seite sind, oder Sie gerade auf der Suche nach etwas, um ein wenig den Schmerz aus JavaScript-Programmierung?
  • Wie einfach ist der Code zu lesen? Trotz massiver Verbesserungen in der Dokumentation über die letzten Jahre, stehen die Chancen haben Sie, um in den Code an einem gewissen Punkt zu graben. Bevor man sich zu einer Bibliothek, verbringen einige Zeit knietief in der Quelle. Ist es leicht zu verstehen, oder hat sogar der ursprüngliche Autor haben Probleme damit?
  • Wie gut ist die Dokumentation? Sauber und lesbaren Code können Sie sich für weniger als stellare Dokumente, aber nichts hilft Ihnen, ganz wie Tutorials und Beispiele loszulegen. Stöbern Sie in das Wiki oder die Website, und sehen, was sie zu bieten haben. Sind die Beispiele übersichtlich und leicht zu folgen? Gibt es eine schnelle Google-Suche bringt Sie auf die richtige Teil ihres Materials?
  • Was ist in der Gemeinde wie die die Bibliothek umgibt? Schauen Sie sich die Mailing-Listen. Gibt es viel Verkehr? Sind neue Menschen mit Respekt behandelt oder Spott? Ist der Code erst kürzlich, aktualisiert oder war die letzte Veröffentlichung vor einigen Jahren?
  • Können Sie Hilfe? Obwohl dies zu den vorherigen Bits über Gemeinde bezogen ist, ist es immer wertvoll, um rund um die Entwickler-Community anschauen und sehen, wer mit was. Schauen Sie sich die Jobbörsen, einen Sinn für die Bibliotheken auftauchen werden häufig auf Lebensläufe zu bekommen.

Finden Gespräche: Bloglines | technorati

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

YUI: Öffnungszeiten Freitag 25. Juni

23. Juni 2010 um 15.07 Uhr von Luke Smith | In Entwicklung | Keine Kommentare

Der neueste Teil von YUI: Öffnen Sie Stunden wird dieser Freitag, 25 Juni sein.

Letzte Woche, Eduardo Lundgren stellte uns einige der großen AlloyUI Module vor kurzem in die Galerie aufgenommen. Die Diskussion bedeckt Instanziierung, Konfiguration, Entwicklung Entscheidungen zu treffen und etwas Geschichte ihrer TreeView- Modul. Aber das war erst der Anfang. Wir untersuchten auch die IO- , Knoten- und Formular-Validierung Module und verbrachte einige Zeit auf einige der visuellen Stile zur Verfügung. Eduardo hat uns sogar einen kleinen Vorgeschmack auf die neue Liferay, Inc. Portal, durch all dieser harten Arbeit angetrieben. Wirklich erstklassige Arbeit.

Alles, was gesagt, ist es schwer zu sagen, wenn der oder Show-und-erzählen das Gespräch war der eigentliche Headliner. Große Code verwandten Inhalten beiseite, es war eine Menge gutes Feedback und Diskussion über die Zusammenarbeit in Teams, die Art der Galerie, und wie können wir es besser und YUI. Also ein großes Dankeschön an alle auf den Anruf!

Diese Woche werden wir ein bisschen sowohl im RAW Developer Welt sowie dem Designer Welt versuchen. Caridy Patiño ist wieder bei uns zu reden über seine Event-Binder -Modul, das hier vorgestellt wurde gerade an diesem Morgen . Das machen wir einen Code-Review und diskutieren Sie die Konfiguration Schritt, der getan werden, bevor auch YUI geladen wird werden muss. Das ist richtig: reine, unverfälschte DOM-Scripting. Vielleicht möchten Sie einen Helm zu tragen.

Dann werden wir weiter zum ebenso nuancierte Haut Design-Prozess mit Jeff Conniff, die Yahoo verantwortlich für die aktuelle Vielfalt der Slider Look-and-Feels. Er wird uns durch seinen Prozess des Aufbaus der visuellen Vermögenswerte gehen und zeigen, wie Sie die gleichen PSDs nehmen und einfach erstellen Farb-Themen-Vermögenswerte, die in Ihrer Website Palette passen. Hier sind die Photoshop-Dateien , wenn Sie mitspielen möchten. Ich werde auch über einige der Entscheidungen bei der Konstruktion des CSS-und DOM-Struktur der Slider gemacht zu sprechen.

Wir sind wieder zu den üblichen Tag und die Zeit in dieser Woche: Freitag 10.00 bis 12.00 Uhr PDT. Es gibt einen neuen Teilnehmer-Code für die Telefonkonferenz, aber ansonsten sind die Details die gleiche Verbindung wie gewohnt.

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)

Ich habe auch eine erstellt Forum-Thread zu diesem Öffnungszeiten, so dass wir die Diskussion frühzeitig beginnen kann!

Auch, wie immer, können Sie immer auf dem Zeitplan der anstehenden Themen und durch folgenden Termin @ yuilibrary auf Twitter oder abonnieren Sie den YUI Veranstaltungskalender .

Wir hoffen, Sie dort zu sehen!

Finden Gespräche: Bloglines | technorati

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

In der YUI 3 Gallery: Caridy Patiño Mayea die Event-Binder Modul bietet Unterstützung für frühes Ereignis Binding und Ereignis-gesteuerte Laden von Modulen

23. Juni 2010 um 9:25 pm von Caridy Patino | In Entwicklung , YUI 3 Galerie | 1 Kommentar

Dieser Artikel stellt meine Event-Binder-Modul , die vor kurzem in der YUI 3 Gallery veröffentlicht.

YUI 3 wird immer eine gute Traktion in der Entwickler-Community, mit deutlichen Annahme der neusten Version 3.1.1 und eine riesige Infusion von neuen, innovativen Projekten in der YUI 3 Gallery . Viele Entwickler werden immer ihre Köpfe rund um die On-Demand-Charakter der YUI 3 und Ausgangspunkt zu nutzen, diese Fähigkeiten in ihren Entwürfen. Dieser Ansatz hat große Vorteile, es kann aber auch einige Herausforderungen mit sich bringen.

Eine dieser Herausforderungen ist die Benutzer-Interaktionen früh fangen. Selbst als die Browser startet die Seite dargestellt wird, möchten wir dem Anwender in der Lage, starten die Interaktion mit Seitenelemente. In vielen Fällen könnte diese Interaktionen geschehen, bevor die JavaScript-Initialisierung (einschließlich der Anbringung von Ereignis-Listener) abgeschlossen hat.

In vielen Fällen können Sie Ihren Initialisierungscode, indem Sie nur Ihre Event-Listener und dann die Zugabe, die Logik für das Laden der Stücke, die Sie brauchen für jede Interaktion mit dem Benutzer zu optimieren. Vor kurzem sprach Ingenieure bei Facebook zu einem ähnlichen Ansatz, um den Ladevorgang zu verbessern - siehe auch das Interview von Rey Bango am JSConf. Hier ist ein Beispiel dafür, wie diese Technik könnte in YUI 3 zu arbeiten:

  <Script 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 (). Verwenden ("Event-base ', function (y) {
     / / Warten, bis der Anwender konzentriert sich auf ein input-Element zum Laden Vermögenswerte starten
     Y.on ("click", function (e) {
 
       Y.use ('anim', 'io', function () {
           / / Laden einer Remote-Inhalte und zeigt es mit einer Animation hier
       });
 
       e.halt (); / / stoppen die Ausbreitung
     }, "# Demo");
 }); 

Dies bringt eine gewisse Komplexität in Ihrem Code, weil Zuhörer nicht nur mit der Interaktion des Benutzers, sondern auch mit einer gewissen Belastung Logik beschäftigen. Ein weiterer Nachteil dieses Ansatzes ist, dass Sie immer noch etwas JavaScript-Code am Anfang (in diesem Fall YUI Samen, die Event-Dienstprogramm, und einige Abhängigkeiten) zu laden, um wenigstens den Hörer und das Laden Logik definieren, um frühzeitig Maßnahmen zu fangen. Also, laßt uns überlegen, diese als zwei separate Use-Cases:

• Capturing frühen Benutzerinteraktionen
• Erleichterung der On-Demand-Natur einiger Benutzer-Interaktionen

Um diesen Anforderungen gerecht Ich habe ein neues Modul erstellt für YUI 3 . Mein Schwerpunkt war es, eine Komponente, die ohne Auswirkungen auf Ihre Anwendungslogik Werke zu schaffen. Dieses neue Modul wird als " Galerie-event-Bindemittel "und ist jetzt durch den YUI Loader zur Verfügung.

Capturing frühen Benutzerinteraktionen

Das Hauptziel dieser Funktion ist zu gewährleisten, dass Benutzer-Interaktionen Warteschlangen sind bis Ereignis-Listener initialisiert werden.

Lassen Sie uns sehen, eine Veranstaltung Bindemittel Beispiel :

  YUI ({
     / / Letzte Galerie dieses Modul zu bauen
     Galerie: "Galerie-2010.06.07-17-52 '
 }). Verwenden ('Galerie-event-Bindemittel', 'Ereignis', function (y) {
 
     Y.on ('click', function (e) {
 
         / / Mach deine Sachen hier
         e.halt (); / / stoppt die Ausbreitung Ereignis, wenn Sie wollen ...
 
     }, '# Demo');
 
     / / Spülen frühen Benutzerinteraktionen
     Y.EventBinder.flush ("Klick");
 
 }); 

In diesem Beispiel YUI Loader wird versuchen, die Last gallery-event-binder und event -Module on-Demand, und sobald sie sind beide bereit zusammen mit ihren Abhängigkeiten, wird der Code innerhalb der Callback-Funktion (drittes Argument) ausgeführt werden. Während der Ausführung wird ein Listener für ein Element mit eingestellt id=demo . Der Trick hier ist, dass, sobald Y.EventBinder.flush('click') aufgerufen wird, wird das System spülen einige der Ereignisse, die passiert Klick, bevor diese Initialisierung Code wird sie ausgeführt haben könnte.

Die Konfiguration

Diese Technik erfordert einige zusätzliche Konfiguration, insbesondere die Definition der YUI_config als globale Variable, um die Ausführung YUI zu zwicken. Mach dir keine Sorgen, es ist sehr einfach. Mal sehen, ein Beispiel im Detail:

 
 YUI_config = {
     / / Standard-Konfiguration YUI_config
     kombinieren: true,
     Filter: "min",
 
     / / Event-Bindemittel-Konfiguration beginnt hier
     eventbinder: {
         / / Event-Handler zu speichern Ereignisse, die Sie zurückgesandt wird.
         FN: function (e) {
             var Bindemittel = YUI_config.eventbinder,
                 filter = / YUI3-event-Binder /,
                 Container = (e.target | | e.srcElement),
                 info = {
                     Ziel: Behälter,
                     Typ: e.type
                 };
 
             / / Aussehen für ein Element mit der Klasse YUI3-event-Bindemittel
             while (Container &&! filter.test (container.className)) {
                 Container = container.parentNode;
             }
 
             if (Container) {
                 (Binder.q = binder.q | | []) drücken (info).;
 
                 / / Verhindern, dass der Standard-Browser Aktion für diese Veranstaltung
                 wenn (e.preventDefault) {
                     e.preventDefault ();
                 }
                 return (e.returnValue = false);
             }
         },
         / / Schnittstelle für bestimmte Ereignisse zu hören
         listenFor: function (type) {
             var d = document;
             / / Bevor die Bibliothek geladen wird, müssen wir uns mit Widersprüchen umzugehen Browser
             wenn (d.addEventListener) {
                 d.addEventListener (Typ, this.fn, false);
             } Else {
                 d.attachEvent ('on' + Art, this.fn);
             }
 
             return this;
         }
     }
 };
 / / Fügen Sie Ereignisse an den Monitoring-Prozess
 YUI_config.eventbinder.listenFor ("Klick");

Dieser Code sollte ganz am Anfang der Seite enthalten sein. Es wird nur ein paar Bissen, nachdem Sie minify diesem Configuration-Objekt. Ich empfehle, einen cacheable (extern)-Datei für die Produktion und die Aufnahme in den Head-Abschnitt in Ihre Seiten. Sie können mehr über YUI_config und die verschiedenen Konfigurationen, die Sie über dieses Objekts in der zwicken können offizielle API-Dokumentation .

Sie können diese Konfiguration zu Ihnen am besten entspricht, und definieren Sie Ereignisse, die Ihnen wichtig sind, sowie. Im obigen Beispiel haben wir "Klick" auf das Monitoring-Liste (letzte Zeile). Sie können mehrere Ereignisse auf die Überwachung Liste mit Verkettung hinzufügen:

  YUI_config.eventbinder.listenFor ("Klick") listenFor ('keyup') listenFor ('mouseover')..; 

Wie funktioniert diese Funktion?

Sobald die Konfiguration (dh YUI_config ) Logik ausgeführt wird, zusammen mit dem Aufruf an YUI_config.eventbinder.listenFor wird ein Listener für einen bestimmten Ereignistyp definiert werden. Nur Ereignisse, die sprudeln wie dem Zuhörer überwacht werden wird für das definiert werden, document -Element. Wenn eine Interaktion mit dem Benutzer auf dieser Ebene gefangen wird, wird es analysiert, speziell die Überprüfung, ob das Ziel-Element oder einer seiner Vorfahren hat classname yui3-event-binder . Wenn ja, wird das Ereignis in eine Warteschlange eingefügt werden und das Standardverhalten für dieses Ereignis verhindert werden. Diese Technik bietet eine einfache Möglichkeit, bestimmte Arten von Interaktion in bestimmten Bereichen der Seite zu überwachen.

Wenn dieser Code ausgeführt wird, Listener für Ereignisse der angegebenen Art oder Arten auf die hinzugefügt document , also, wenn diese Ereignisse auftreten und Blasen steigen (was nur überwacht Ereignisse, die Blase), wird sie gestoppt und ihre gespeicherten Informationen in einer Verarbeitungs-Warteschlange . Später, in Ihrer use() Callback, wenn Ihr die Initialisierung abgeschlossen ist, rufen Sie einfach Y.EventBinder.flush , um alle gespeicherten Click-Ereignisse der Rückbeförderung, als ob sie gerade dann-mit freundlicher Genehmigung von der Event-Modul simulieren passiert.

Erleichterung der On-Demand-Natur einiger Benutzer-Interaktionen

Das Hauptziel dieser Funktion ist es, Entwicklern helfen, Be-Logik auf Basis von Benutzer-Interaktionen zu definieren.

Hier ist ein anderes Ereignis Bindemittel Beispiel :

 
 YUI ({
   Module: {
     «My-Custom-Modul ': {
       fullpath: '. / my-custom-module.js'
     }
   }
 }). Verwenden ('Galerie-event-Bindemittel', 'Knoten', function (y) {
 
   / / Setze einen Listener für '# demo a' und setzen auf «my-Custom-Modul ' 
   / / Auf diese besondere Ereignis zu behandeln.
   Y.EventBinder.on ('click', 'mein-custom-Modul', '# demo ein');
 
   / / Setzen eines Delegaten für alle Hörer der Anker in einer Liste und verlassen  
   / / Auf 'my-custom-Modul "und" mein-another-Modul' zu handhaben diese besonderen Ereignisse
   Y.EventBinder.delegate ('click', ['mein-another-Modul'], '# mylist', 'li a');
 
 });

Hier verwenden wir Y.EventBinder.on und Y.EventBinder.delegate einige Zuhörer zu definieren. Diese beiden Methoden Wrap Y.on und Y.delegate zu Ladelogik durch eine Interaktion mit dem Benutzer zu fahren. Dies ermöglicht es uns verschieben Belastung der spezifischen Funktionalitäten auf einer Seite, bis der Benutzer versucht, eine bestimmte Funktion zu nutzen.

In diesem Fall, wenn ein Benutzer auf eines der Elemente, Klicks, laden wir eine oder mehrere benutzerdefinierte Module YUI, die alle Funktionen mit diesem speziellen Klick assoziiert zu implementieren. Sobald diese Module zur Verfügung stehen (und neue Hörer sind gesetzt), wird das Bindemittel spülen Sie das Ereignis, das auf Eis während des Ladevorgangs auf den Stand der Aktion zu erhalten war.

Diese Funktion erfordert keine anfängliche Konfiguration. 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 ({
  modules: {
    '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.

Fazit:

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.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | 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">
			 Januar
		</option>
		<option value="1">
			 Februar
		</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',
    modules: {
        '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();
 });

 </ Script> 

Here's a live version of this simple example .

Es ist so einfach. 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 .

Finden Gespräche: Bloglines | technorati

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

Umsetzung in den Vordergrund: YUI 3 Einschalten des Autofusion ResearchPro

18. Juni 2010 um 9:00 Uhr von Josh Lizarraga | In Entwicklung | Keine Kommentare

Über die Autorin: Josh Lizarraga YUI ist ein Contributor-und Frontend-Entwickler in San Diego, Kalifornien. 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. Wenn er nicht gerade auf der Uhr, genießt Josh Beitrag zur YUI Projekt mit Testfällen und Galerie -Module.

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.

Die Erforschung eines neuen Autos vor dem Kauf ist in der Regel eine schwierige aber notwendige Erfahrung, und die aktuellen Möglichkeiten, die Verbraucher sind nicht sehr benutzerfreundlich. ResearchPro versucht, diese Fragen mit einem einfachen, geführten Ansatz für Forschung Auto zu beheben. Wir nehmen auch die Erfahrung noch einen Schritt weiter und ermöglicht den Kunden ein kostenloses Angebot auf ihren Traumwagen aus lokalen Händlern zu erhalten.

Warum YUI?

Wir begannen mit YUI 2 für alle unsere Frontend-Entwicklung vor etwa zwei Jahren, und habe es nicht bereut. YUI Fokus auf Entwicklung von Anwendungen ist es ein Kinderspiel für Autofusion, da wir viele Eingebettete Web-Apps und Widgets bieten für unsere Kunden.

Im Laufe der Jahre haben wir fast jeden YUI 2-Komponenten gibt es sowohl in unserem Web-Client-Eigenschaften und unsere internen Tools verwendet. YUI's proven track record and incredible documentation really set it apart from the other libraries we've worked with. Die Verfeinerungen der Bibliothek angeboten von YUI 3 machte es eine einfache Wahl für dieses Projekt.

Wie YUI wird im Projekt zum Einsatz

ResearchPro nutzt verschiedene YUI 3 Komponenten, nämlich IO , JSON , Knoten , Event- , Zeichentrick , und auch die 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.

Challenges and Benefits of Using YUI 3

Migrieren von YUI 2 bis 3 YUI war sowohl die größte Herausforderung und der größte Vorteil bei der Entwicklung ResearchPro. Arbeiten mit Node-Instanzen anstelle von DOM-Knoten direkt einige Anpassungen zu nehmen auf den ersten, aber wir schnell festgestellt, dass diese hervorragende Abstraktion reduziert die Menge und die Komplexität des Codes für eine bestimmte Aufgabe. Ebenso bietet das Verkettbarkeit von YUI 3 Methoden einige große syntaktischer Zucker, die schwer zu ohne zu leben.

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.

Was kommt als Nächstes für Autofusion?

Wir sind immer auf der Entwicklung neuer Produkte mit YUI und Überarbeitung unserer bestehenden Angebote zu YUI auf dem Frontend zu integrieren. 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.

Unser Inventar-Interface macht intensiven Gebrauch von der Container-Modul-Familie, so dass hoffentlich von der Zeit, dass wir beginnen Entwicklung YUI 3 wird Implementierungen der Systemsteuerung und Dialog haben. 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.

Finden Gespräche: Bloglines | technorati

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

YUI: Öffnungszeiten, Mi 16. Juni

15. Juni 2010 um 12:26 Uhr von Luke Smith | In Entwicklung | 2 Kommentare

Es ist wieder Zeit für YUI: Öffnungszeiten ! Eine Änderung des Zeitplans in dieser Woche, though. Die Telefonkonferenz wird am Mittwoch sein.

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. Von Matts Spiel UI inspiriert Radial Menü , um voll funktionsfähige Iliyan das Akkordeon , es war eine große Auseinandersetzung mit den Typen der UI-Tools finden Sie (oder erstellen) können in der Galerie heute ebenso wie eine Studie in unterschiedlicher Weise auf YUI 3 verwenden, um UI-Lösung Herausforderungen. Hier finden Sie Links zu den Modulen in der 21. Mai Öffnungszeiten Post und einer Abtastrate von einigen der interessantesten Punkte aus der Diskussion in den Kommentaren .

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. Dies ist eine ziemlich große Sache. Wir haben mit diesen Jungs arbeiten seit Monaten auf ihre 65-Modulen in die Galerie zu bekommen. That's right, 65 modules! Alles nur um Nate und Eduardo erstellt. Talk about productive.

Offensichtlich werden wir kaum Zeit, um die Oberfläche aller Module AlloyUI kratzen, aber wir werden einen schnellen Überblick über einige der interessantesten und beliebtesten sind zu tun und decken einige "Erste Schritte"-Code. Es gibt eine solche Vielzahl von Modulen, wird es für jeden etwas dabei sein.

• Für YUI 3 Neulinge oder Leute, die für den YUI 2-Widgets, die migriert werden gewartet haben, gibt es jetzt viel mehr Möglichkeiten heraus zu überprüfen.
• Für die Menschen wollen, diese ersten Schritte etwas zu schaffen in YUI 3 zu nehmen, gibt es jetzt mehr Dinge, Plugins für, Patch schreiben, oder zu verlängern.
• Für erfahrene Entwickler Komponente, es gibt jetzt viel mehr Code, um die Umsetzung für die sich entwickelnden Konventionen und Komponenten zur Mitarbeit zu verweisen.
• Für komplexere App-Entwickler, können Sie ein Gefühl für ein Team-Strategie für Code submodularization und Ansatz für den Bau und Verpackung Module in einem größeren oder komplexeren Anwendung.

Nate und Eduardo sind offen für was auch immer Sie Fragen haben, so kann das Gespräch gehen, aber tief, und in welche Richtung Sie wollen. 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 . Die Zeit wird das gleiche wie vorher sein, obwohl (10.00 bis 12.00 Uhr PDT), und die Verbindungsdaten sind ebenfalls die gleichen:

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 4718 8953 #
3. Join the Screen-Sharing-Sitzung (dies wird Sie auffordern, die Adobe Connect-Plugin zu installieren, wenn dies Ihre erste Mal benutzen)

Und wie immer, können Sie immer auf dem Zeitplan der anstehenden Themen und durch folgenden Termin @ yuilibrary auf Twitter oder abonnieren Sie den YUI Veranstaltungskalender .

Wir hoffen, Sie dort zu sehen!

Finden Gespräche: Bloglines | technorati

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