ממשק המשתמש Yahoo! בלוג (YUIBlog)

פוקוס יישום: השכרת רכב Express

28 ספטמבר 2010 בשעה 06:01 על ידי סטפן Klopp | בשנת בטבע , יישומים Yui | 2 תגובות

השכרת רכב Express היא המכונית המובילה עצמאית להשכרת השוואה אתר באינטרנט. זה מאפשר למשתמשים לשכור מכוניות באינטרנט יותר מ 1000 ערים ושדות תעופה ברחבי העולם.

בסיס המשתמשים שלנו הוא ברובו לא טכני, כלומר, הם רוצים להשוות מחירי מכוניות להשכרה בקלות ככל האפשר. עם relaunch של אתר האינטרנט שלנו ביוני 2010 יישמנו מרכיבים רבים של Yui 2 כדי לעזור לספק ללקוחותינו חוויה אינטואיטיבית.

אילו רכיבים Yui אנחנו משתמשים?

הרכיבים שאנחנו כבר משתמש כוללים מנהל החיבורים , השלמה אוטומטית , Datasource , לוח שנה , אנימציה , JSON , ואת מיכל .

למה בחרנו Yui

לאחר עיון בספריות שונות JavaScript שאנחנו יכולים באופן פוטנציאלי להשתמש על השכרת רכב Express , מצאנו כי Yui היה המלא ביותר לצרכים שלנו. התכונות הנמכר ביותר עבורנו הייתה גישה מודולרית מאוד Yui לקח ליישם תבניות עיצוב שונות, כמו גם התיעוד חזקים הם סיפקו דוגמאות. מנקודת המבט של התפתחות זו הובילה לפיתוח מהיר של היישום שלנו, ללא צורך במאבק עם ספרייה.

כיצד אנו משתמשים Yui

אנו מנצלים את Yui במספר דרכים. רכיבים 4 שלנו ביותר בשימוש הם השלמה אוטומטית, לוח שנה, מכולות, ו - מנהל החיבורים. הנה כמה מהדרכים בהם אנו משתמשים בכל אחד מרכיבים אלה.

השלמה אוטומטית

רכיב אוטומטית נעשה שימוש נרחב באתר שלנו כדי לעזור למשתמשים למצוא עיר או שדה תעופה שבהם לשכור רכב. אנחנו באמת אהב כמה קל ליישם רכיב זה, וכמה מהר הוא מגיב. אנו המטמון בתוצאות החיפוש בצד השרת כדי לשפר את תוצאות החיפוש, אולם בעל במטמון בצד הלקוח גם עזר מאוד ב לזרז את התגובה של הרכיב. תכונה נוספת שאנחנו באמת לקח כמה קל היה התוצאות היו לסגנון. כאשר הצגת מיקומים המשתמש הזה היה חיוני כפי שהיינו צריכים לזהות את המקומות שבהם נמצאו בערים שנמצאו בשדות התעופה.

לוח שנה

רכיב לוח שנה משמש גם ברחבי האתר, כאשר השוכר הוא מילוי תמרים לבצע חיפוש. אנחנו משתמשים גירסה מותאמת אישית של ג'ון Peloquin לוח מרווח בחירה והצגה של אותו דיאלוג Yui . בעיקרו של דבר את מה שרצינו לעשות היה לתת השוכר תצוגה חודשיים בבחירת התאריכים שלהם, כמו גם ויזואלית להראות להם מה טווח תאריכים הם כיום שבחרת. שוב, זה היה פשוט מאוד ליישום באמצעות Yui 2 לוח שנה, וזה בעצם ירד יצירת דיאלוג Yui, הגדרת הגוף להכיל div במשך שנה, ואז מצרף לוח מרווח Yui ל div זה.

מיכלי

אנו מנצלים מכולות Yui ברחבי האינטרנט שלנו במספר דרכים שונות. בדוגמה שלעיל היינו באמצעות דיאלוג כדי לעזור לנו להציג את לוח מרווח כאשר המשתמש היה בחירת התאריך. על שיעור בדף תוצאות החיפוש שלנו אנו עושים שימוש כבד של מכולות לתת השוכר מידע נוסף על היבטים שונים של סוכנות השכרת הרכב ואת הרכב הם עלולים באופן פוטנציאלי לשכור. רוב המכולות בדף זה הם לוחות שיש לנו שימוש חוזר עבור כל אחת מהרשומות שונים. כך, למשל, להציג לוח רכב תכונות:

יש דברים קצת יותר כיף עם השוכר מדורג דירוגים סוכנות. כאשר הצגת דירוגים, אנחנו באמת רוצים למקד את תשומת הלב של המשתמש ציוני בסוכנות קיבל ולהציג את המידע הזה דרך נקי וקל להציג. על ידי ניצול שיח בקרת הצלחנו להגביל את viewport מרכז שיח בקלות כדי לעזור לנו להשיג מטרה זו. על ידי הגדרת כותרת תחתונה ריק וזה עשה סטיילינג פשוט רק על ידי הוספת סגנונות המתאימים ל-CSS שלנו. התוצאה הסופית הייתה מיכל דירוגים נקי המספק השוכר את המידע שהם רוצים.

Connection Manager

מנהל החיבורים משמש ברחבי האתר בכל פעם שאנחנו צריכים למשוך נתונים באמצעות בקשה XHR. בחלק מהדוגמאות לעיל אנו מנצלים רכיב זה עבור המבקש ערים תעופה עבור implementaitons השלמה אוטומטית ומושכת את המידע הדירוג עבור השוכר מדורג Dialog.

דרך אחת מעניינת אנו מנצלים מנהל חיבור עם גוש המרכז השכירות שלנו שיושב על רוב הדפים. כדי לעזור עם ביצועים שאנחנו עושים הרבה במטמון עמוד שלם על רבים של דפי התוכן שלנו. עם זאת, אנו עדיין רוצים להציג את הבלוק הדינמי מרכז השכרת בעמודים אלה. זה הציג לנו בעיה הצלחנו לפתור עם מנהל החיבורים. במקום שיצטרכו לשבור את הדף במטמון מלא שלנו רק היבטים מטמון של הדף שמצאנו היה קל יותר פשוט לכלול את גוש מרכז השכרת באמצעות בקשה אסינכרוני פשוטה. מצאנו כי זה איפשר לנו לשמור על ביצועים מהצורך דף במטמון באופן מלא, אך עדיין להציג תוכן דינאמי בתיבת במרכז השכירות שלנו.

סופי מחשבות

בסך הכל היינו מאוד מאושרים עם הבחירה שלנו להשתמש Yui. זה מספק לנו ספריה מודולרית, מתועדת היטב, קל לשימוש וליישם.

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!