במהלך השנה הקודמת, צוות Polymer הקדיש הרבה זמן ללמד מפתחים איך ליצור רכיבים משלהם. התוצאה היא סביבה עסקית שמתרחבת במהירות, בזכות רכיבי הליבה והנייר של Polymer ורכיבי הלבנים שנוצרו על ידי הצוות של Mozilla.
ככל שמפתחים מתרגלים ליצור רכיבים משלהם ומתחילים לחשוב על פיתוח אפליקציות, עולות כמה שאלות:
- איך מבינים את הממשק המשתמש של האפליקציה?
- איך מבצעים מעבר בין מצבים שונים?
- אילו שיטות יכולות לשפר את הביצועים?
- ואיך צריך לספק חוויה אופליין?
בכנס Chrome Dev Summit ניסיתי לענות על השאלות האלה על ידי פיתוח אפליקציה קטנה של אנשי קשר וניתוח התהליך שעברתי כדי ליצור אותה. זה מה שהגעתי אליו:
מבנה
אחד העקרונות המרכזיים של רכיבי אינטרנט הוא פירוק אפליקציה לחלקים מודולריים שאפשר לשלב ולהשתמש בהם שוב. רכיבי core-* ו-paper-* של Polymer מאפשרים לכם להתחיל בקלות עם רכיבים קטנים, כמו paper-toolbar ו-paper-icon-button.
בנוסף, בעזרת היכולת ליצור קומפוזיציות, אפשר לשלב אותם עם כל מספר רכיבים כדי ליצור תבנית לאפליקציה.
אחרי שתיצרו שלד כללי, תוכלו להחיל את סגנונות ה-CSS שלכם כדי להפוך אותו לחוויה ייחודית למותג שלכם. היתרון של שימוש ברכיבים הוא שאפשר ליצור חוויות שונות מאוד תוך ניצול אותם רכיבים בסיסיים ליצירת אפליקציות. אחרי שתסיימו ליצור את התשתית, תוכלו להמשיך ולחשוב על התוכן.
רכיב אחד שמתאים במיוחד לטיפול בהרבה תוכן הוא core-list.
אפשר לחבר את core-list למקור נתונים (בעיקר מערך של אובייקטים), וכל פריט במערך יניב מופע של תבנית. בתוך התבנית, אפשר להשתמש במערכת קישור הנתונים של Polymer כדי לחבר את התוכן במהירות.
מעברים.
אחרי שעיצבתם והטמעתם את החלקים השונים באפליקציה, השלב הבא הוא להבין איך מנווטים ביניהם בפועל.
core-animated-pages הוא עדיין רכיב ניסיוני, אבל הוא מספק מערכת אנימציה שניתן לחבר, שאפשר להשתמש בה כדי לעבור בין מצבים שונים באפליקציה.
אבל אנימציה היא רק חצי מהפאזל. כדי לנהל כראוי את כתובות ה-URL של האפליקציה, צריך לשלב את האנימציות האלה עם נתב.
בעולם של Web Components, ניתוב מגיע בשני סגנונות: ציוויי וחיויבי. אפשר לשלב את core-animated-pages עם כל אחת מהגישות, בהתאם לצרכים של הפרויקט.
נתב אימפרטיבי (כמו Director של Flatiron) יכול להאזין למסלול תואם, ואז להורות ל-core-animated-pages לעדכן את הפריט שנבחר.
האפשרות הזו יכולה להיות שימושית אם אתם צריכים לבצע עבודה כלשהי אחרי שתתבצע התאמה של מסלול, ולפני שהקטע הבא יועבר.
לעומת זאת, נתב מצהיר (כמו app-router) יכול לשלב למעשה את הניתוב ואת core-animated-pages לרכיב יחיד, כך שהניהול של שניהם יעיל יותר.
אם אתם רוצים יותר שליטה ברמת הפירוט, תוכלו לבדוק ספרייה כמו more-routing, שאפשר לשלב עם core-animated-pages באמצעות קישור נתונים, וכך ליהנות מהיתרונות של שני העולמות.
ביצועים
ככל שהאפליקציה מקבלת צורה, חשוב לעקוב אחרי צווארי בקבוק בביצועים, במיוחד כל מה שקשור לרשת, כי זה בדרך כלל החלק האיטי ביותר באפליקציית אינטרנט לנייד.
שיפור קל בביצועים יתקבל כתוצאה מטעינת פוליליפים של רכיבי אינטרנט באופן מותנה.
אין סיבה לשלם את כל העלויות האלה אם כבר יש תמיכה מלאה בפלטפורמה. בכל גרסה של המאגר החדש webcomponents.js, גם הפוליפילים הועברו לקבצים עצמאיים. האפשרות הזו שימושית אם רוצים לטעון קבוצת משנה של ה-polyfills באופן מותנה.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
בנוסף, יש יתרונות משמעותיים ברשת אם מריצים את כל ייבוא ה-HTML דרך כלי כמו Vulcanize.
הפונקציה Vulcanize תקשר את היבוא שלכם לחבילה אחת, וכך תפחית באופן משמעותי את מספר הבקשות ל-HTTP שהאפליקציה שולחת.
אופליין
אבל פיתוח אפליקציה עם ביצועים טובים לא פותר את הדילמה של משתמש עם קישוריות חלשה או ללא קישוריות בכלל. במילים אחרות, אם האפליקציה לא פועלת במצב אופליין, היא לא באמת אפליקציה לנייד. היום אפשר להשתמש במטמון האפליקציות שנזלזל בו כל כך כדי לשמור את המשאבים במצב אופליין, אבל בעתיד, קובצי השירות (Service Workers) אמורים לשפר משמעותית את חוויית הפיתוח במצב אופליין.
ג'ייק ארקדיל פרסם לאחרונה ספר בישול מדהים של דפוסים של שירותי עבודה, אבל אציג לכם את המדריך למתחילים כדי לעזור לכם להתחיל:
קל מאוד להתקין עובד שירות. יוצרים קובץ worker.js ורושמים אותו כשהאפליקציה מתחילה לפעול.
חשוב למקם את worker.js ברמה הבסיסית (root) של האפליקציה, כדי לאפשר לו ליירט בקשות מכל נתיב באפליקציה.
בטיפול בהתקנה של העובד, אני שומר במטמון המון משאבים (כולל הנתונים שמפעילים את האפליקציה).
כך האפליקציה שלי יכולה לספק למשתמשים לפחות חוויית שימוש חלופית אם הם ניגשים אליה במצב אופליין.
המשך הדרך!
רכיבי ה-Web הם תוספת חשובה לפלטפורמת האינטרנט, והם עדיין בשלב מוקדם. ככל שהם יגיעו לדפדפנים נוספים, יהיה עלינו, קהילת המפתחים, להבין מהן השיטות המומלצות לתכנון האפליקציות שלנו. הפתרונות שלמעלה מספקים נקודת התחלה, אבל יש עוד הרבה מה ללמוד. עכשיו אפשר להמשיך לפתח אפליקציות טובות יותר!