Yahoo! Blog User Interface (YUIBlog)

Implementação Focus: Aluguel de Automóveis Express

Aluguer de carro Express é a empresa independente líder de automóveis site de comparação de aluguel na Internet. Ele permite que os utilizadores alugar carros on-line em mais de 1000 cidades e aeroportos de todo o mundo.

Nossa base de usuários é em grande parte não técnica, o que significa que eles querem comparar preços e aluguel de carros tão facilmente quanto possível. Com o relançamento do nosso site, em junho de 2010, nós implementamos muitos componentes do YUI 2 para ajudar a fornecer aos nossos clientes uma experiência intuitiva.

Quais componentes YUI estamos usando?

Os componentes que estamos usando incluem Connection Manager , AutoComplete , DataSource , Calendário , Animação , JSON , e Container .

Por que escolhemos YUI

Quando se analisa a diferentes bibliotecas JavaScript que poderia usar em carro de aluguer Express , descobrimos que o YUI foi o mais completo para nossas necessidades. As características de maior venda para nós era a própria abordagem modular o YUI tomou para implementar diferentes padrões de design, bem como a documentação robusta e exemplos que eles prestados. Do ponto de vista do desenvolvimento isso levou a um rápido desenvolvimento da nossa aplicação sem ter que lutar com uma biblioteca.

Como usamos YUI

Nós utilizamos o YUI em um número de maneiras. Nosso máximo 4 componentes utilizados são AutoCompletar, Calendário, Container e gerenciador de conexões. Aqui estão algumas das maneiras de usar cada um desses componentes.

AutoComplete

O componente AutoComplete é amplamente utilizado em nosso site para ajudar usuários a localizar uma cidade ou aeroporto em que alugar um carro. Nós realmente gostei de como era fácil de implementar esse componente, ea rapidez com que responde. Nós cache de resultados de pesquisa do lado do servidor para ajudar a melhorar os resultados da pesquisa, no entanto, ter o cache do lado do cliente também ajudou tremendamente a acelerar a resposta do componente. Outra característica que realmente tomou a forma como foi fácil, os resultados foram de estilo. Ao visualizar os locais para o usuário isso foi crucial, pois precisávamos identificar os locais onde se encontram nas cidades e que foram encontrados nos aeroportos.

Calendário

O componente de calendário é também utilizada em todo o site, quando um cliente é preencher as datas para realizar uma pesquisa. Estamos usando uma versão personalizada do John Peloquin do Intervalo de Seleção Calendário e exibi-lo em um diálogo YUI . Essencialmente o que queríamos fazer era dar ao locatário uma visão de dois meses, quando a escolha das datas, bem como visualmente mostrar-lhes o intervalo de datas que eles têm atualmente selecionado. Novamente, isso era extremamente simples de implementar usando YUI 2 Calendário e, basicamente, desceu para a criação de um diálogo YUI, definindo o corpo para conter uma div para o calendário, em seguida, anexar um YUI intervalo do calendário para o div.

Containers

Nós utilizamos YUI Containers todo nosso site em uma série de maneiras diferentes. No exemplo acima, estamos usando uma caixa de diálogo que nos ajude a mostrar o calendário do intervalo, quando um usuário foi selecionar uma data. Em nossa taxa de página de resultados de pesquisa que fazem uso pesado de Contêineres para dar informações ao locatário mais sobre os diferentes aspectos da agência de aluguer de automóveis e veículos que poderiam potencialmente aluguel. A maioria dos contêineres nesta página são painéis que re-uso para cada anúncio diferente. Por exemplo, o veículo conta com display no painel:

As coisas ficaram um pouco mais divertido com a agência de classificação Cliente avaliado. Ao exibir as avaliações, nós realmente queríamos focar a atenção do usuário para os escores de uma agência recebeu e exibir essa informação em um ambiente limpo e fácil de forma-view. Ao utilizar o controle de diálogo fomos capazes de restringir a janela e centro do diálogo com facilidade para nos ajudar a atingir essa meta. Ao definir um cabeçalho e rodapé em branco ele fez um estilo simples, apenas adicionando os estilos adequados ao nosso CSS. O resultado final foi um recipiente limpo classificação que fornece o cliente com as informações que eles querem.

Connection Manager

Connection Manager é usado em todo o site sempre que precisamos para puxar os dados através de um pedido XHR. Em alguns dos exemplos acima, utilizamos este componente para o pedido de cidades e aeroportos para o implementaitons AutoCompletar e puxando as informações de classificação para o Rated Cliente diálogo.

Uma forma interessante nós utilizamos Connection Manager é com o nosso bloco de centro de aluguer que se sente na maioria das páginas. Para ajudar com o desempenho que fazemos um monte de caching de página inteira em muitas das nossas páginas de conteúdo. No entanto, ainda queria exibir o bloco de centro dinâmico de aluguer nestas páginas. Isso nos presenteou com um problema que fosse capaz de resolver com o Connection Manager. Ao invés de ter que quebrar a nossa página totalmente em cache e cache somente os aspectos da página descobrimos que era mais fácil de incluir apenas o bloco de centro de aluguer através de um simples pedido assíncrona. Nós descobrimos que isso nos permitiu manter o desempenho de ter uma página totalmente em cache, e ainda exibir o conteúdo dinâmico na nossa caixa de centro de aluguer.

Considerações Finais

No geral, foram extremamente felizes com nossa escolha para usar YUI. Ele nos fornece uma biblioteca modular que está bem documentado, fácil de usar e implementar.

Pesquisar conversas: Bloglines | technorati

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!