ב-Chrome Dev Summit 2014 נדונו מגוון נושאים וממשקי API חדשים לגמרי, אבל לא הכל היה חדש ומבריק.
אם אתם מפתחי אתרים חדשים או אפילו מפתחים מנוסים שעומדים להתחיל לבדוק ממשקי API חדשים, סביר להניח שתבצעו את שלושת השלבים הבאים: למידה, פיתוח וחזרה על התהליך.
Matt Gaunt מדבר על המאמצים המתמשכים של צוות פלטפורמת הפיתוח של Chrome כדי לטפל בבעיות האלה.
למידה
Web Fundamentals הוא אוסף של מסמכים שמבוססים על תרחישים לדוגמה, ומכסים מגוון נושאים. המטרה העיקרית היא לעזור למפתחים לעבור ממצב של ידע מועט או ללא ידע כלל, להטמעת שיטות מומלצות בהקדם האפשרי.
אחד מהיעדים העיקריים של Web Fundamentals הוא להבטיח שאם אתם מתחילים בנושא מסוים, ההנחיות יעזרו לכם לצמצם את 'שיתוק הבחירה' ככל האפשר. Addy Osmani עושה זאת בצורה מושלמת ב-Pastry Box.
אם נתקלתם בבעיות באתר או בתוכן שלו, או אם אתם רוצים שנסקור נושא מסוים ב-Web Fundamentals, תוכלו לשלוח לנו משוב ב-GitHub.
פיתוח פתרונות
כדי לעזור לכם להתחיל פרויקט אינטרנט חדש, יצרנו את ערכת ההתחלה לאתרים. יש בו את כל מה שצריך:
- תהליך build מוצק
- קוד HTML לדוגמה
- מדריך סגנון
תהליך ה-build
אם אתם חדשים בתהליכי build, הדרך הקלה ביותר להבין אותם היא לחשוב עליהם כתוכנית שמקבלת קבוצה של קבצים, מבצעת בהם משימות מסוימות ומפיקה גרסאות חדשות במיקום אחר. המשימות מבצעות אופטימיזציה של הקבצים כדי לשפר את זמני הטעינה, בודקות אם יש שגיאות אפשריות או מטפלות במשימות שאפשר לבצע אותן באופן אוטומטי.
ב-Web Starter Kit יש את התהליכים הבאים:
אנחנו מקטינים ומקשרים את קובצי ה-CSS וה-JavaScript כדי שהדפדפן יוכל לאחזר את הקובץ במהירות. בנוסף, הקוד של JavaScript עובר בדיקה באמצעות JSHint כדי לבדוק אם יש שיטות מומלצות ל-JavaScript וטעויות נפוצות בקוד. התמונות מצומצמות באמצעות imagemin, ובעזרת הכלי הזה אפשר לצמצם את גודל הקובץ במידות משמעותיות. יש לנו גם תהליך ליצירת קובצי ה-CSS של מדריכי הסגנון.
קוד לדוגמה ל-HTML למכשירים מרובים
הקבוצה הראשונה של קוד ה-HTML שכותבים לדף חדש היא די סטנדרטית, וסביר להניח שתוכלו למצוא דרך לקבל במהירות קובץ HTML סטנדרטי שפועל היטב במספר מכשירים ובגדלים שונים של מסכים.
ב-Web Starter Kit רצינו להוסיף תמיכה בתכונות שמטשטשות את הגבולות בין הפלטפורמה לבין האתר, לכן הוספנו תמיכה בהוספה למסך הבית ובמסכי פתיחה ל-Android, ל-Windows Phone, ל-iOS ול-Opera Coast.
מדריך סגנון
החלק האחרון ב-Web Starter Kit הוא מדריך הסגנון שלו.
כך לכל פרויקט חדש יש קבוצה נהדרת של רכיבים וסגנונות ברירת מחדל, שמעודדים פיתוח מבוסס-סגנון. אתם יכולים לשנות סגנונות קיימים של רכיבים ולהוסיף סגנונות משלכם.
בגרסה הבאה של WSK, שצפויה לצאת בתחילת השנה הבאה, אנחנו משקיעים מאמצים רבים כדי לפשט את האופן שבו המדריך לעיצוב משתלב, ועוברים למראה ולתחושה של עיצוב חומר. מאטהציגגרסה מוקדמת של מה שזה עשוי להיראות בכנס Chrome Dev Summit, ודוגמה מופיעה בהמשך.
מעבר חוזר
אחרי שתתחילו ליישם את הידע החדש שלכם, תוכלו להשתמש ב-DevTools כדי לנפות באגים, לשפר את העבודה ולתחזק אותה.
נוספו כמה פיצ'רים חדשים ומגניבים ל-DevTools, ומאט מסביר עליהם.
מצב המכשיר
'מצב מכשיר' הוא קטע חדש בכלי הפיתוח שמאפשר לכם לראות במהירות איך האתר פועל במכשירים ניידים שונים, תוך צפייה בשאילתות המדיה ב-CSS.
אחת מהתכונות הנהדרות של מצב המכשיר היא היכולת לצמצם את מהירויות הרשת, וכך לדמות את החוויה של משתמש בחיבור GPRS, EDGE, 3G, DSL או Wi-Fi.
הכלי לניתוח ביצועים (profiler) של הצגת תוכן
אם פתחתם פעם את הכרטיסייה'ציר זמן' ולחצתם על לחצן ההקלטה, סביר להניח שראית אירועי צביעה מסוימים בתרשים ההיררכי. בדרך כלל זו תהיה קופסה שחורה, ולא תהיה לכם אפשרות לדעת למה הדפדפן עשה את מה שעשה או מה הוא עשה.
פרופיל הצביעה מספק מידע נוסף על מה שהדפדפן עושה במהלך הצביעה.
מעקב אחר ביטול תוקף
עכשיו, בכל פעם שאפשר, כלי הפיתוח מציג סיבה לכך שהתרחשה פעולת צביעה או פריסה. המידע הזה שימושי לכל מי שמתעניין בציר הזמן ובהתנהגויות הדפדפן, ומאפשר לכם לבצע אופטימיזציה של הקוד כדי למנוע בעיות בביצועים.
תצוגת תרשים להבות (flame chart)
זוהי דרך שונה מאוד להציג את המידע שזמין בחלונית הזמן. כך קל יותר לראות איך המשימות חופפות ואילו התנהגויות בדפדפן התרחשו כתוצאה ממשימות אחרות.
Frame Viewer
בתצוגת תרשים הלהבה, אפשר לבחור פריים ספציפי ובמסגרתו לראות אילו רכיבים בדף הועלו לשכבה מורכבת, ולמה הם הועלו.
למידה. פיתוח. מעבר חוזר
אלה רק חלק מהמאמצים של צוות Chrome לעזור למפתחים להתעדכן בפיתוח אינטרנט. מומלץ לעיין ביסודות האינטרנט, בערכת התחלה ל-Web ובתכונות החדשות בכלי הפיתוח של Chrome.