Yahoo! User Interface Blog (YUIBlog)

Loader Aufruf an Quorus

24. März 2011 um 09.49 Uhr von Peter Abrahamsen | In Entwicklung , YUI-Implementierungen | 2 Kommentare

Heute würde Ich mag, darüber zu sprechen YUI Loader und wie wir bei Quorus, Inc. , nutzen, um Web-Seiten Dritter mit neuen Features auf Abruf bereitzustellen.

Der Code schreiben wir Kräfte verfügt über andere Völker "Seiten, dh wir sind in der wenig beneidenswerten Lage, die nicht nur keine Kontrolle über die Browser-Umgebung, aber schwere Einschränkungen in wie wir sie verwenden das eigentliche Dokument. Unsere Kunden Legen Sie eine Quorus Bootstrap-Skript auf ihren Seiten, alles andere für unsere Funktionalität benötigt wird, dynamisch und bei Bedarf geladen. Wir gehen zu heroischen Anstrengungen, um sicherzustellen, dass unsere Elemente, Stile und Skripte nicht verändern das Verhalten von etwas sind wir nicht verantwortlich sind.

Wir begannen unsere gegenwärtigen Code-Basis vor zwei Jahren, als YUI 3 nur unter wurde zu gestalten. Es war eine riskante Entscheidung zu der Zeit zu einer Codebasis, die nicht treffen würde beta für mehrere Monate zu verpflichten. Im Nachhinein kann ich mir nicht vorstellen, wie würden wir erreicht haben, was wir ohne ihn haben. Ich habe keine anderen Rahmen, Komponenten Annäherung an die Macht der Loader, gesehen hat, Attribute und CustomEvent .

Die Quorus Bootstrap Skript, das wir unseren Kunden bieten, ist fast nichts. Seine Aufgabe ist es, nur um den Kern unserer Plattform ohne Blockierung der Rest der Seite zu laden, laden, und die Warteschlange alle API-Aufrufe, bis wir so getan haben. Dieser Kern Skriptdatei namens stage2, inlines yui , loader und oop , sowie intelligent genug, um zusätzliche Bibliotheken zu laden, um API-Aufrufe, klickt, und andere Bedingungen in der Betriebsumgebung zu reagieren. Die meisten anderen Ressourcen sind durch ein benutzerdefiniertes Combo-Server, benutzerdefinierte Quorus und Lager YUI-Module dient serviert.

Bootstrap : Warteschlangen-API-Aufrufe in den Host-Site-Code zwischen, wenn es lädt und wenn wir bereit sind, in einem Array auf unser globales Objekt, QUORUS unterwegs gemacht

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

Sobald wir bereit sind, API-Aufrufe verarbeiten sind, stage2 läuft sie eins nach dem anderen in Timeouts. Dies stellt sicher, wir liefern Kontrolle regelmäßig an den Browser zurück, die die User Experience mehr reagieren lässt. Das Verhalten ist ein viel wie Y. AsyncQueue, aber einfacher und erfordert keine YUI geladen werden:

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

Die bootstrap Datei, die von dieser Stelle, meist unveränderlich: es ist etwas, das wir die Hand von einem Kunden, der benötigt einen Monat oder länger auf jede neue Version gaben wir ihnen eine unglaublich lange Zeit für ein agiles Startup-Unternehmen einsetzen können. Die stage2 -Datei, mittlerweile ist klein, Lasten aus unseren eigenen Servern, und hat eine kurze Cache-Lebensdauer. Dadurch wird sichergestellt, dass keine Endbenutzer eine alte Version für mehr als ein paar Minuten haben. Fast alle anderen Ressourcen, die wir brauchen, sind in dauerhaft cacheable JavaScript-Bibliotheken und CSS-Dateien.

Wenn wir eine neue Version unserer Veröffentlichung des Quellcodes, stage2 automatisch lenkt Browser den Download zu starten von einem neuen Standort, sicherzustellen, dass sie nur die neuesten Code verwenden. Dieses Setup erlaubt es uns, Veränderungen schnell zu implementieren, ohne serviert Vermögenswerte öfter als nötig. Dadurch wird nicht nur halten unsere Bandbreite niedrig, aber es bietet eine bessere User Experience: Die Ressourcen im Cache sehr schnell zu laden, während die Seite geladen wird.

Wenn wir anfingen unsere Codebasis heute, mit dem Vorteil des YUI Galerie gibt es eine Reihe von Komponenten, die wir nutzen, um uns das Leben erleichtern könnte. Einer von ihnen ist Eric Ferraiuolo der Basis Component Manager , die mit Verkabelung Komponenten (typischerweise Widgets) auf Anfrage unterstützt. Ein weiterer könnte sein Storage-Lite , um uns zu helfen behalten Zustand der Anwendung auf Seite geladen wird.

Vielen Dank an die YUI-Team für ihre großartige Arbeit, und die Gemeinschaft für ihre Beiträge. Wenn Sie möchten über unsere Ansätze zur Sandbox oder auf die Koordinierung der asynchron geladenen Komponenten zu lesen, bitte lass mich in den Kommentaren wissen!

Über den Autor: Peter Abrahamsen schreibt Ruby und JavaScript, verwaltet Server-Infrastruktur, und Studien User-Centered Design in Seattle, Washington, USA. Er kann auf gefunden werden IRC als Rainhead.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!