Yahoo! User Interface Blog (YUIBlog)

Die Umsetzung Focus: Autovermietung Express

28. September 2010 um 06.01 Uhr von Stefan Klopp | In In the Wild , YUI-Implementierungen | 2 Kommentare

Autovermietung Express ist der führende unabhängige Autovermietung Vergleich Website im Internet. Es ermöglicht Anwendern Mietwagen online in mehr als 1000 Städten und Flughäfen auf der ganzen Welt.

Unser Kundenstamm ist weitgehend nicht-technische, das heißt, sie wollen die Preise und Mietwagen so einfach vergleichen wie möglich. Mit dem Relaunch unserer Website im Juni 2010 haben wir viele Komponenten von YUI 2 implementiert, um unseren Kunden eine intuitive Erfahrung.

Welche YUI-Komponenten verwenden wir?

Die Komponenten, die wir verwendet haben gehören Connection Manager , AutoVervollständigen , DataSource , Kalender , Animationen , JSON und Container .

Warum wählten wir YUI

Bei der Überprüfung der verschiedenen JavaScript-Bibliotheken, die wir möglicherweise auf könnte Autovermietung Express , fanden wir, dass die YUI die vollständigste für unsere Bedürfnisse war. Die meistverkaufte Features für uns war das modulare Ansatz der YUI nahm an verschiedenen Design-Patterns zu implementieren, sowie die robuste Dokumentation und Beispiele, die sie zur Verfügung gestellt. Aus entwicklungspolitischer Sicht diese zur schnellen Entwicklung unserer Anwendung, ohne sich mit einer Bibliothek Kampf geführt.

Wie verwenden wir YUI

Wir nutzen die YUI in eine Reihe von Möglichkeiten. Unser 4 am häufigsten verwendeten Komponenten sind AutoComplete, Kalender, Container und Connection Manager. Hier sind einige der Möglichkeiten, nutzen wir jede dieser Komponenten.

AutoVervollständigen

Die Auto-Vervollständigen-Komponente wird umfassend auf unserer Website verwendet werden, um Nutzer finden eine Stadt oder Flughafen, in denen ein Auto zu mieten. Wir mochten, wie einfach es ist, diese Komponente zu implementieren war, und wie schnell er antwortet. Wir cache search Ergebnisse Server-Seite zu verbessern Suchergebnisse, jedoch mit der Client-seitiges Caching auch enorm geholfen bei der Beschleunigung der Reaktion der Komponente. Ein weiteres Merkmal, dass wir wirklich haben, um war, wie einfach die Ergebnisse Stil wurden. Bei der Anzeige der Standorte für den Anwender war dies von entscheidender Bedeutung, wie wir zu erkennen, welche Orte, an denen in den Städten und die gefunden wurden, an Flughäfen gefunden notwendig.

Kalender

Die Kalender-Komponente ist auch auf der gesamten Website verwendet werden, wenn ein Mieter in Termine Füllung ist, um eine Suche durchzuführen. Wir verwenden eine angepasste Version von John Peloquin das Interval Selection Kalender und Anzeige in einem YUI Dialog . Im Grunde, was wir tun wollte, war geben dem Mieter eine Zwei-Monats-Sicht bei der Wahl ihrer Daten, sowie visuell ihnen zeigen, was Datumsbereich sie derzeit ausgewählt haben. Auch dies war sehr einfach zu implementieren mit YUI 2 Kalender, und es im Grunde kam die Schaffung eines YUI Dialog, Einstellung des Körpers auf eine div für den Kalender enthalten, dann Anbringen eines YUI Interval Kalender, dass div.

Container

Wir verwenden YUI Containers während unserer Website in einer Reihe von verschiedenen Möglichkeiten. Im obigen Beispiel waren wir mit einem Dialog, die uns helfen Anzeige des Intervall-Kalender, wenn ein Benutzer ein Datum auswählen. Auf unserer Rate Suchergebnisseite wir machen starken Gebrauch von Containern, um dem Mieter weitere Informationen über die verschiedenen Aspekte der Autovermieter und das Fahrzeug sie potentiell mieten könnten. Die meisten der Container auf dieser Seite sind Panels , dass wir für jede einzelne Liste wieder verwenden. Zum Beispiel verfügt das Fahrzeug-Display Panel:

Schließlich hat es sich ein wenig mehr Spaß mit dem Mieter Rated Ratingagenturen. Bei der Anzeige der Bewertungen, wollten wir wirklich die Aufmerksamkeit des Benutzers auf die Noten einer Agentur erhalten zu konzentrieren und diese Informationen in einem sauberen, leicht zu sehen darzustellen. Durch die Nutzung der Dialog Control konnten wir den Viewport und in der Mitte des Dialogs leicht einschränken, die uns helfen dieses Ziel zu erreichen. Durch die Einstellung einer leeren Kopf-und Fußzeile es geschafft Styling einfach, indem einfach die entsprechenden Stile zu unserem CSS. Das Endergebnis war eine saubere Bewertungen Container, der Mieter stellt mit den Informationen, die sie wollen.

Connection Manager

Connection Manager ist auf der gesamten Website verwendet werden, wenn wir Daten über eine XHR Anfrage ziehen müssen. In einigen der obigen Beispiele verwenden wir diese Komponente für die Beantragung Städten und Flughäfen für die Auto-Vervollständigen implementaitons und ziehen die Rating-Informationen für den Mieter Rated Dialog.

Eine interessante Art und Weise nutzen wir Connection Manager ist mit unserem Verleih-Center-Block, der auf den meisten Seiten befindet. Um Hilfe bei der Leistung, die wir tun eine Menge Full-Page-Caching auf viele unserer Content-Seiten. Allerdings wollten wir noch die dynamische Vermietung mittleren Block auf diesen Seiten angezeigt werden. Dies hat uns mit einem Problem konnten wir mit Connection Manager zu lösen. Anstatt zu brechen unsere voll Cache-Seite und Cache nur Aspekte der Seite fanden wir es einfacher, nur die Anmietung mittleren Block über eine einfache asynchrone Anfrage. Wir fanden, dass dies uns, die Leistung aus, die eine vollständig zwischengespeicherte Seite zu behalten, aber dennoch Anzeige dynamischer Inhalte in unserem Verleih-Center-Box erlaubt.

Final Thoughts

Insgesamt waren wir äußerst zufrieden mit unserer Wahl zu YUI verwenden. Es bietet uns eine modulare Bibliothek, die gut dokumentiert ist, einfach zu bedienen und zu implementieren.

Finden Gespräche: bloglines | technorati

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