במהלך השנה שעברה, צוות Polymer הקדיש זמן רב ללמד מפתחים כיצד ליצור רכיבים משלהם. זה הוביל לסביבה עסקית שמתפתחת במהירות, ומבוססת ברובה על רכיבי הליבה והנייר של פולימר ועל אלמנטים של לבנים שנוצרו על ידי הצוות של Mozilla.
ככל שהמפתחים מתחילים להכיר את היצירה של רכיבים משלהם ומתחילים לחשוב על בניית יישומים, עולה מספר שאלות:
- איך כדאי לבנות את ממשק המשתמש של האפליקציה?
- איך מתבצע המעבר בין המדינות השונות?
- מהן כמה אסטרטגיות לשיפור הביצועים?
- ואיך כדאי לספק חוויה אופליין?
בכנס המפתחים של Chrome, ניסיתי לענות על השאלות האלה על ידי פיתוח אפליקציה קטנה ליצירת קשר וניתוח התהליך שעברתי כדי לפתח אותה. הנה מה שמצאתי:
מבנה
דייר מרכזי ברכיבי אינטרנט הוא פירוק יישומים לחלקים מודולריים שניתן לשלב ולעשות בהם שימוש חוזר. עם אלמנטי ליבה* ונייר* של פולימר קל להתחיל עם חלקים קטנים, כמו סרגל כלים לנייר ולחצן סמל נייר.
ובעזרת עוצמת הקומפוזיציה, שלבו אותם עם מספר כלשהו של אלמנטים כדי ליצור סדרה של יישומים.
לאחר יצירת מאגר תגים כללי, תוכלו להחיל סגנונות CSS משלכם כדי להפוך אותם לחוויה ייחודית למותג שלכם. היתרון של יצירת אפליקציות הוא שהוא מאפשר ליצור חוויות שונות מאוד תוך שימוש בפרימיטיבים של פיתוח אפליקציות. לאחר שמוקמו על בסיס פיגוע, תוכלו להמשיך לחשוב על תוכן.
רכיב אחד שמתאים במיוחד להתמודדות עם הרבה תוכן הוא core-list.
אפשר לחבר את core-list למקור נתונים (בעיקרון מערך של אובייקטים), ולכל פריט במערך הוא יציין מופע של תבנית. בתבנית הזאת אפשר למנף את העוצמה של מערכת קישור הנתונים של Polymer כדי לחבר במהירות את התוכן שלכם.
מעברים.
לאחר העיצוב וההטמעה של החלקים השונים באפליקציה, המשימה הבאה היא להבין איך לנווט ביניהם בפועל.
core-animated-pages הוא עדיין רכיב ניסיוני, אבל הוא מספק מערכת אנימציה ניתנת להעברה שניתן להשתמש בה כדי לעבור בין מצבים שונים באפליקציה.
אבל אנימציה היא רק חצי מהחידה, אפליקציה צריכה לשלב את האנימציות האלה עם נתב כדי לנהל כראוי את כתובות ה-URL שלה.
בעולם הניתוב של רכיבי האינטרנט יש שני טעמים: ציווי והצהרתי. השילוב של core-animated-pages עם כל אחת מהשיטות יכול להיות רלוונטי, בהתאם לצורכי הפרויקט שלכם.
נתב חיוני (כמו המנהל של Flatiron') יכול להאזין למסלול תואם, ואז להורות ל-core-animated-pages לעדכן את הפריט שנבחר.
האפשרות הזו יכולה להיות שימושית אם אתם צריכים לבצע עבודה כלשהי אחרי התאמת מסלול ולפני שהקטע הבא מועבר אליו.
מצד שני, נתב מוצהר (כמו נתב אפליקציות) יכול למעשה לשלב את הניתוב עם core-animated-pages ברכיב אחד, כך שהניהול של שני הרכיבים האלו מייעל יותר.
אם אתה רוצה שליטה פרטנית יותר, אתה יכול לחפש ספרייה כמו ניתוב נוסף, שאפשר לשלב עם core-animated-pages באמצעות קישור נתונים ואז לתת לך את הטוב ביותר משני העולמות.
ביצועים
בזמן שהאפליקציה שלך מתעדכנת, עליך להשגיח בקביעות על צווארי בקבוק בביצועים, במיוחד כל דבר שקשור לרשת, שכן בדרך כלל זהו החלק האיטי ביותר באפליקציית אינטרנט לנייד.
זכייה קלה בביצועים נובעת מטעינה מותנית של ה-Polyfills של רכיבי האינטרנט.
אין סיבה לצבור את כל העלות הזו אם הפלטפורמה כבר כוללת תמיכה מלאה! בכל גרסה של מאגר webcomponents.js החדש, ה-polyfills חולקו לקבצים עצמאיים. האפשרות הזו שימושית אם רוצים לטעון באופן מותנה קבוצת משנה של ה-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 Worker אמור להפוך את חוויית הפיתוח אופליין לנעימה יותר בקרוב.
ג'ייק ארצ'יבלד פרסם לאחרונה ספר בישול של דפוסים של קובצי שירות (service worker), אבל אתן לך התחלה מהירה בתור התחלה:
ההתקנה של Service Worker היא קלה ופשוטה. צרו קובץ worker.js ורשמו אותו עם הפעלת האפליקציה שלכם.
חשוב לאתר את worker.js ברמה הבסיסית (root) של האפליקציה, כדי לאפשר לו ליירט בקשות מכל נתיב באפליקציה.
ב-handler של העובד להתקנה, אני שומר סירה של משאבים (כולל הנתונים שמפעילים את האפליקציה).
זה מאפשר לאפליקציה שלי לספק למשתמש חוויה חלופית לפחות אם הוא ניגש אליה במצב אופליין.
קדימה!
רכיבי אינטרנט הם תוספת גדולה לפלטפורמת האינטרנט, והם עדיין נמצאים בתחילת דרכם. ככל שנוסיף עוד דפדפנים לדפדפנים, אנחנו, קהילת המפתחים, אחראים לקבוע מהן השיטות המומלצות לבניית האפליקציות שלנו. הפתרונות שלמעלה מספקים לנו נקודת התחלה, אבל יש עוד הרבה מה ללמוד. מתקדמים לבנייה של אפליקציות טובות יותר!