ב-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) של הצגת תוכן
אם פתחתם פעם את הכרטיסייה'ציר זמן' ולחצתם על לחצן ההקלטה, סביר להניח שראיתם כמה אירועי צביעה בתרשים ההיררכי. בדרך כלל זו תהיה קופסה שחורה, ולא תהיה לכם אפשרות לדעת למה הדפדפן עשה את מה שעשה או מה הוא עשה.
פרופיל ה-paint מספק מידע נוסף על מה שהדפדפן עושה במהלך ה-paint.
מעקב אחר ביטול תוקף
עכשיו, בכל פעם שאפשר, כלי הפיתוח מציג סיבה לכך שהתרחשה פעולת צביעה או פריסה. המידע הזה שימושי לכל מי שמתעניין בציר הזמן ובהתנהגויות הדפדפן, ומאפשר לכם לבצע אופטימיזציה של הקוד כדי למנוע בעיות בביצועים.
תצוגת תרשים להבות (flame chart)
זו דרך שונה מאוד להציג את המידע שזמין בחלונית הזמן. כך קל יותר לראות איך המשימות חופפות ואילו התנהגויות בדפדפן התרחשו כתוצאה ממשימות אחרות.
Frame Viewer
בתצוגת תרשים הלהבה, אפשר לבחור פריים ספציפי ובמסגרתו לראות אילו רכיבים בדף הועלו לשכבה מורכבת, ולמה הם הועלו.
למידה. פיתוח. מעבר חוזר
אלה רק חלק מהמאמצים של צוות Chrome לעזור למפתחים להתעדכן בפיתוח אינטרנט. מומלץ לעיין ביסודות האינטרנט, בערכת התחלה ל-Web ובתכונות החדשות בכלי הפיתוח של Chrome.