Yahoo! User Interface Blog (YUIBlog)

Pagpapatupad Focus: Car Rental Express

Car Rental Express ay ang nangungunang independiyenteng kotse rental paghahambing website sa Internet. Ito ay nagbibigay-daan gumagamit upa cars online sa higit sa 1000 na mga lungsod at mga paliparan sa buong mundo.

Ang aming mga user base ay higit sa lahat di-teknikal, na nangangahulugan na nais nilang ihambing ang mga presyo at upa cars bilang madaling hangga't maaari. Gamit ang relaunch ng aming website sa Hunyo ng 2010 kami ay ipinatupad ng maraming mga bahagi ng Yui 2 upang tulungan ang aming mga customer na may isang magaling na karanasan.

Yui na sangkap ay namin ginagamit?

Ang mga bahagi na namin ay gumagamit ng isama Connection Manager , AutoComplete , datasource , Calendar , Animation , JSON , at lalagyan .

Bakit namin pinili Yui

Kapag ang pagsusuri sa iba't ibang aklatan JavaScript na maaaring potensyal na namin gamitin sa Car Rental Express , natagpuan namin na ang Yui ay ang pinaka kumpleto para sa aming mga pangangailangan. Ang pinakamalaking nagbebenta ng mga tampok para sa amin ay ang tunay modular diskarte ang Yui kinuha upang ipatupad ang iba't-ibang mga pattern disenyo, pati na rin ang mga magagaling na mga babasahin at mga halimbawa nila ibinigay. Mula sa isang pag-unlad na pananaw na ito na humantong sa mabilis na pag-unlad ng aming application nang hindi sa pakikibaka sa isang library.

Paano namin ginagamit Yui

Kami magamit ang mga Yui sa isang bilang ng mga paraan. Ang aming 4 pinaka ginagamit na sangkap ay AutoComplete, Calendar, lalagyan, at Connection Manager. Narito ang ilan sa mga paraan na ginagamit namin sa bawat isa sa mga component.

AutoComplete

Ang AutoComplete bahagi ay ginagamit ng malawakan sa aming site upang matulungan ang mga gumagamit na mahanap ang isang lungsod o sa paliparan na magrenta ng kotse. Kami ay talagang nagustuhan kung paano madali ito ay upang ipatupad ito component, at kung paano mabilis na ito ay tumutugon. Kami cache resulta ng paghahanap server-side para mapabuti ang mga resulta sa paghahanap, gayunpaman, ang pagkakaroon ng mga client-side caching din nakatulong tremendously sa bilis ng takbo ninyo ang mga tugon ng bahagi. Isa pang tampok na kami ay talagang kinuha sa noon ay kung paano madali ang mga resulta ay sa estilo. Kapag ipinapakita ang lokasyon para sa gumagamit na ito ay mahalaga bilang namin na kailangan upang makilala kung aling mga lokasyon kung saan matatagpuan sa mga lungsod at kung saan ay matatagpuan sa paliparan.

Kalendaryo

Ang component Calendar ay ginagamit din sa buong site kapag ang isang renter ay pagpuno sa mga petsa na magsagawa ng isang paghahanap. Kami ay gumagamit ng isang customized na bersyon ng John Peloquin's Palugit Pinili Calendar at pagpapakita ng mga ito sa isang Yui Dialog . Mahalagang kung ano ang aming nais na gawin ay magbigay ng renter isang dalawang-buwan tingnan kapag ang pagpili ng kanilang mga petsa, pati na rin visually ipakita sa kanila kung ano ang hanay ng petsa sila kasalukuyang pinili. Muli, ito ay lubhang tapat na ipatupad ang paggamit Yui 2 Calendar, at ito talaga bumaba sa paglikha ng isang Yui Dialog, ang pagtatakda ng katawan na naglalaman ng isang div para sa Calendar, pagkatapos paglakip ng Yui Palugit sa Calendar na div.

Lalagyan

Kami magamit Yui lalagyan buong aming website sa isang bilang ng mga iba't ibang paraan. Sa halimbawa sa itaas namin ay gumagamit ng isang dialog sa makakatulong sa amin display ang Pagitan Calendar kapag ang isang user ay ang pagpili ng petsa. Sa aming mga rate ng pahina ng mga resulta ng paghahanap gawin namin ang mabigat na paggamit ng mga lalagyan upang bigyan ang mga renter sa karagdagang impormasyon sa iba't ibang aspeto ng mga ahensiya ng kotse rental at ang mga sasakyan upang sila potensyal na upa. Karamihan sa mga lalagyan sa pahinang ito ay Panels na tayo muling gamitin para sa bawat iba't-ibang listahan. Halimbawa, ang sasakyan display tampok Panel:

Bagay na got ang isang maliit na mas masaya sa mga Renter Rated ratings ahensiya. Kapag ang pagpapakita ng ratings, kami ay talagang nais na pokus ng pansin ng gumagamit sa mga iskor ng isang ahensiya na natanggap at upang ipakita ang impormasyon na ito sa isang malinis, madaling-tingnan ang mga paraan. Sa pamamagitan ng paggamit ng mga Dialog Control nagawa naming pilitin ang viewport at ang sentro ng dialogo madali para matulungan kami na makamit ang layuning ito. Sa pamamagitan ng pagtatakda ng isang blangko ang header at footer na ito na ginawa ng styling simpleng sa pamamagitan lamang ang pagdaragdag ng mga angkop na estilo sa aming CSS. Ang huling resulta ay isang malinis na lalagyan ratings na nagbibigay ng mga renter gamit ang impormasyon na gusto nila.

Connection Manager

Connection Manager ay ginagamit sa buong site kapag kailangan namin upang pull ng data sa pamamagitan ng isang kahilingan XHR. Sa ilang ng ang mga halimbawa sa itaas namin magamit ito component para sa paghiling mga lungsod at mga paliparan para sa mga AutoComplete implementaitons at batak ang rating ng impormasyon para sa mga Renter Rated Dialog.

Isang nakawiwiling paraan namin magamit Connection Manager ay sa aming rental center block na sits sa pinaka mga pahina. Upang makatulong sa pagganap gawin namin ang isang pulutong ng mga buong-pahina caching sa marami sa aming mga pahina ng nilalaman. Gayunman, kami pa rin nais na ipakita ang mga dynamic na rental center block sa mga pahina na ito. Ito iniharap sa amin ng isang problema namin ay able sa malutas sa Connection Manager. Kaysa sa pagkakaroon sa break up ang aming lubos na naka-cache na pahina at ang cache lamang aspeto ng pahina natagpuan namin ito ay mas madali na lang isama ang rental block center sa pamamagitan ng isang simpleng asynchronous kahilingan. Nalaman namin na ito nagpahintulot sa amin upang mapanatili ang pagganap mula sa pagkakaroon ng isang ganap na naka-cache na pahina, pa pa rin display dynamic na nilalaman sa aming mga rental center box.

Final Thoughts

Pangkalahatang namin ay lubhang masaya sa aming mga pagpipilian na gumamit Yui. Ito ay nagbibigay sa amin ng isang modular library na ay mabuti dokumentado, madaling gamitin at ipatupad.

Maghanap ng mga pag-uusap: Bloglines | technorati

Share at extend: Bookmark sa Spurl | digg it! | reddit!