Yahoo! User Interface Blog (YUIBlog)

jQuery und YUI 3: A Tale of Two JavaScript-Bibliotheken

Kürzlich hatte ich die Gelegenheit, meine erste JavaScript-Front-End-Anwendung zu erstellen. Was folgt ist eine kurze Geschichte der Entdeckung und Entwicklung, die etwa beim Versuch, Tools, die nicht für den Job bei der Hand geeignet sind, verwenden kommt. Es ist ein Bericht über das Lernen durch die Entwicklung die gleiche Front-End-Anwendung mit zwei sehr unterschiedlichen Bibliotheken, jQuery und YUI 3 erworben. Details zu dem Client und dem Projekt wurden absichtlich weggelassen.

Überblick

Das Projekt umfasste die Umgestaltung von mehreren unterschiedlichen Flash-Tools in einer einzigen interaktiven Anwendung auf offenen Standards für eine große Content-Publisher basiert. Von hoher Bedeutung, musste die Anwendung hoch mit einer kleinen anfänglichen Fußabdruck durch die große Zahl der Page Impressions täglich erhält der Kunde optimiert werden. Mehrere Phasen beteiligt waren, mit dem ersten in einer anfänglichen proof of concept.

Das Konzept beinhaltete die Entwicklung einer Ansicht von dem, was würde das ausgefüllte Antragsformular sein. Es bestand aus:

• Eine erste Seed-Datei (<1 KB) verantwortlich für das dynamische Laden von beliebigen Frameworks (zB jQuery oder YUI 3) und der erstmaligen Anwendung Datei.
• Die Entwicklung und Integration von jQuery-Plugins zur Unterstützung von Formular-Element Styling und Validierung und dynamischen Grafik-Visualisierungen.
• Die Erzeugung und der Bevölkerung von UI, basierend auf Benutzereingaben, Konfigurationsstandardeinstellungen und Speicherort der Anwendung innerhalb der Verlags-Website.
• Die Berechnung und Darstellung von Informationen bezogen auf die Eingabe des Benutzers.

Im Interesse einer vollständigen Offenlegung, hatte meine eigene Erfahrung bis zu diesem Punkt bei der Entwicklung von kleinen, eigenständigen Lösungen, die Art, von denen Sie in der Regel als Plugins könnte beschreiben gewesen. Dazu gehörten dynamische UI-Komponenten wie Bild Karussells, interaktive Karten und Twitter / Flickr-Widgets. Zum Zeitpunkt der ersten Dilettantismus mit JavaScript, jQuery populär war, einfach zu erlernen und mir erlaubt, schnell erlernbar sind für die Projekte, die ich zum Arbeiten benötigt wurde. Aber all das waren eigenständige Einheiten und hatte keine Notwendigkeit, mit anderen Code oder als Teil einer größeren Anwendung interagieren.

First Attempt

Am Abschluss der ersten Phase des Projekts, wurde es schmerzhaft offensichtlich, dass ich mit einer ganz anderen Tier zu tun als das, was ich gewohnt war. Gestützt hatte wenig Erfahrung in der Organisation Code, meinen Code schnell zu unorganisiert, ineffizient und repetitiv. Als ein Ergebnis war der erste Teil dessen, was eine viel größere Anwendung werden nur langsam geladen. In der Tat dauerte es 8 Sekunden, diesen einzigen Proof of Concept zu generieren. Eine große Änderung war notwendig, und während ich mit angesehen hatte, eine kleine Bibliothek wie Dean Edwards Base- oder John Resigs einfache JavaScript-Vererbung Muster an Klasse-basierte Vererbung zu jQuery hinzuzufügen, beschloss ich, einen Schritt weiter gehen.

Was ich wollte, war eine komplette, ausgereifte Rahmen, innerhalb dessen auf meine erste OO-Anwendung zu entwickeln. Etwas, das effektiv führen würde mir durch den Vorgang. Bei der Überprüfung der verfügbaren Bibliotheken habe ich beschlossen, YUI 3 aus den folgenden Gründen anzunehmen:

• Integrierte, Erbschafts-basierte Anwendung, Entwicklung und Support einschließlich Attribut-Klasse-Management.
• Langfristige Lösung:
  • Unterstützung für Standards und Zugänglichkeit.
  • Gefördert von einer großen bekannten Organisation, Yahoo!
  • Verbunden mit angesehenen Namen wie Douglas Crockford , Nicholas Zakas und Stoyan Stefanov .
• Performance-Optimierung:
  • Initial Seed-Datei von nur 7KB.
  • Lazy-geladenen Module auf Anfrage.
  • EUR Lieferung.
• Abwechslungsreiche und umfassende Dokumentation:
  • Yahoo! Developer Network
  • YUI 3 API-Dokumentation
  • YUI Theater
  • YUI-Bibliothek
  • YUI Blog
• Ältere, konsequente Entwicklung zwischen den Veröffentlichungen.
• Integrierte Werkzeuge in YUI Compressor , YUIDoc , YUI Builder und Konsole .
• Nicht nur, JavaScript, ein CSS-Framework auch.

Take Two

Integration von YUI 3 brachte mehrere direkte und indirekte Vorteile für das Projekt:

• Erbschafts-basierte Architektur und Klasse-Management durch die Attribut -Schnittstelle, und Base- und Widget- Klassen produziert leistungsfähige, wiederverwendbare und organisierter Code.
• Trennung von Präsentations-Modell ab und Daten mit Hilfe des Widget -Klasse, um alternative Ansichten (Inline-oder Overlay) auf den Ort der Anwendung innerhalb der Website der Basis zu machen.
• Sandbox und dynamischen Modul Integration durch YUI.use ().
• Cross-Browser-Konsole Debugging mit YUI-Konsole .
• Auf Save, Performance-Optimierung mit YUI Compressor in Eclipse.
• Einfache Einbindung und Integration von bereits vorhandenen jQuery-Plugins.
• Auf Save, mit automatisierten Code-Dokumentation YUIDoc .

Das Endergebnis war ein glücklicher Kunde und ein fertiges Produkt mit Sub-Second-Ladezeiten (wir erinnern uns dauerte es 8 Sekunden, um die anfängliche Proof of Concept zu laden).

Lessons Learned

Wählen Sie das richtige Werkzeug für den Job

Beim Lesen dieser Post Ich bin sicher, einige Leser werden dies als anti-jQuery anzuzeigen. Überhaupt nicht. jQuery ist ein fantastisches Projekt verantwortlich für viele Innovationen. Aber wie bei jedem Werkzeug, es hat seine Stärken und einen Verwendungszweck. Seine Stärke liegt bei der Normalisierung der Browser-Inkonsistenzen, eine Senkung der Eintrittsbarriere für den Anfänger und Verbesserung der Effizienz der erfahrene Programmierer. Das primäre Lernen, das aus dem Projekt kam, war, dass man nicht auf ein Werkzeug für jeden Job angewiesen. YUI baut auf jQuery kann auch bietet eine gut architected Anwendungs-Framework bieten. Aber es ist fair zu sagen, dass es zu einem Preis kommt, siehe den nächsten Punkt.

Steile Lernkurve

Man braucht Geduld, vor allem beim Schreiben Ihrer ersten Anwendung mit einer unbekannten Bibliothek wie ich. Doch der Erfolg ist immens. Durch das Erlernen einer anderen Bibliothek, wird nicht nur Ihre JavaScript-Fähigkeiten zu verbessern, werden Sie auch ein tieferes Verständnis dafür, wie Bibliotheken Arbeit und den Nutzen bei weitem. Ich versuche, etwas Neues über YUI Alltag erfahren und je mehr ich lerne, desto mehr bin ich in Ehrfurcht vor den Gedanken und die schiere Talent, das in den Aufbau YUI weg ist.

Laden Sie nur Inhalte, wenn Sie es brauchen

Während es sicherlich einfacher, nur programmatisch, um alles, was Sie brauchen im Voraus geladen werden kann, gewannen die Performance-Verbesserungen als direkte Folge von Lazy Loading Content nur dann, wenn Sie es brauchen ist riesig. Dies war einer der wichtigsten Faktoren für eine drastische Verbesserung der Leistung der Anwendung.

Interagieren Sie mit dem DOM so wenig wie möglich

Dieser Punkt bezieht sich nicht auf die spezifische Bibliothek angewendet wurde. Durch das Zwischenspeichern der erforderlichen DOM-Elemente und HTML-Templates unter Verwendung mehr, fiel UI-Rendering-Zeit beträchtlich. Die Knoten können zwischengespeichert werden mit Y.one (), während der Knoten-Listen können eingefangen mit Y.all () werden. Auch Y.Node.create () war sehr nützlich bei der effizienten Umwandlung großer Text-Strings von HTML-DOM-Elementen, um vor dem Einsetzen.

Erfahren Sie von Verwenden Sie beispielsweise eine EUR

Bei der Verwendung von YUI-Bibliothek ausgeliefert EUR haben wir beschlossen, alle Vermögenswerte des Projekts über EUR zu liefern. Das war wahrscheinlich der nächste größte Faktor für die Performance-Verbesserung.

Pub, sub Trubel

Für die erfahrene Programmierer da draußen, versuchen, nicht an diesem einen lachen. Nach dem Schreiben nicht viel mehr als Plugins in der Vergangenheit verwendet worden, ich hatte keine Ahnung, wie Anwendungen sollten intern zu kommunizieren. Selbst nach der Lektüre "Custom Events können Sie die interessantesten Momente oder Ereignisse in Ihrem eigenen Code zu veröffentlichen, damit andere Komponenten auf der Seite auf diese Ereignisse zu abonnieren kann und auf sie reagieren," Ich habe noch verpasst.

Wie sich herausstellt, Publish-and-subscribe YUI Die maßgeschneiderten Event-Modell funktioniert wunderbar für Inter-Klasse und Inter-Objekt-Kommunikation. Sie können sogar abonnieren, Pre-und Post, um Ereignisse und beinhalten dynamische Logik zu Blasenbildung auf der Grundlage bestimmter Bedingungen zu unterdrücken.

Integrieren Best Practice in Ihren Workflow

Mit Eclipse konnten wir JSLint und YUI Compressor in den Build-Prozess zu integrieren. Einfach ausgedrückt, wird jedes Mal, wenn Sie Strg / Befehl + S Ihr JavaScript-Code validiert und optimiert. Das heißt, Sie sind gegen optimiert, Produktion Grade-Code von der ersten Zeile des Codes testen. Es bedeutet auch, dass Sie nicht vergessen, in der hektischen letzten Rennen der Lieferfrist zu optimieren.

YUI Learning on the Job

Obwohl jeder hat eine andere Lernstil, dachte ich, ich teile, welche Ressourcen ich YUI mit einem bestimmten Ziel vor Augen lernen verwendet.

• Beobachten Sie die relevanten YUI Theater Episoden um einen allgemeinen Überblick über die Bibliothek zu bekommen oder lernen, ein bestimmtes Modul. Kann ich sehr empfehlen, beginnend mit:
  • Eric Miraglia Willkommen auf der YUI 3
  • Todd Kloots auf YUI 3 Zucker
  • Matt Sweeney YUI 3 Performance
  • Luke Smith Debuggen in YUI 3
  • Isaac Schlueter zur Behebung von Problemen mit YUI 3
  • Eric Ferraiuolo auf Web App-Entwicklung mit YUI 3
  • Luke Smith Events Evolved
• Informieren Sie sich über YUI auf der Yahoo! Developer Network . Ich versuche, ein bisschen lesen jede Woche und erfahren Sie mehr jedes Mal, wenn ich wieder lesen.
• Lesen Sie die API -Dokumentation. Wenn Sie es nicht finden können auf YUI Theater oder auf der Developer Network, in der API zu graben. Es lohnt sich, auch den Code direkt zu lesen.
• Lesen und schreiben Fragen zum Forum auf YUILibrary.com .
• Spielen und viel Spaß!

Abschluss

YUI 3 ist ein voll ausgestattetes, reifen und sich ständig weiterentwickelnden Bibliothek eignet sich für kleine bis große Projekte. Als Front-End Web-Anwendungen immer komplexer werden, wird der Bedarf an Bibliotheken wie YUI wachsen. Während für den Uneingeweihten es eine erschreckende Erfahrung auf den ersten sein können, wenn Sie dabei bleiben du wirst belohnt werden.

Finden Gespräche: Bloglines | technorati

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