בואו נבנה כמה אפליקציות עם פולימר!

בשנה שעברה, צוות 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. אפשר ליצור קובץ worker.js ולרשום אותו לאחר הפעלת האפליקציה.

חשוב לאתר את worker.js ברמת השורש של האפליקציה, כדי לאפשר לו ליירט בקשות מכל נתיב באפליקציה.

ב-handler של ההתקנות של העובד, אני שומר במטמון עומס סירה של משאבים (כולל הנתונים שמפעילים את האפליקציה).

כך האפליקציה שלי יכולה לספק למשתמש חוויה חלופית לפחות אם הוא ניגש אליה במצב אופליין.

קדימה!

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