רכיבי אינטרנט נשנה את כל מה שאתם חושבים שאתם יודעים על בניית אתרים. לראשונה, יהיו לאינטרנט ממשקי API ברמה נמוכה שמאפשרים לנו לא רק ליצור תגי HTML משלנו, אלא גם לכלול לוגיקה ו-CSS. אין יותר מרק או קוד סטנדרטי (בוילרפלייט) ברחבי העולם. זה עולם חדש ואמיץ שבו הכול הוא אלמנט.
בהרצאתי מ-DotJS, אני מסבירה מה מציעים רכיבי האינטרנט ואיך לבנות אותם באמצעות כלים מודרניים. היום אראה לכם את Yeoman, זרימת עבודה של כלים שנועדו לייעל יצירת אפליקציות אינטרנט באמצעות Polymer, ספרייה של פולימרים וסוכר לפיתוח אפליקציות באמצעות רכיבי אינטרנט בדפדפנים מודרניים.
איך יוצרים רכיבים מותאמים אישית ומתקינים רכיבים שנוצרו על ידי אחרים
בדיון זה תלמדו:
- על ארבעת המפרטים השונים שמרכיבים את רכיבי האינטרנט: רכיבים מותאמים אישית, תבניות, Shadow DOM וייבוא HTML.
- איך להגדיר רכיבים מותאמים אישית ולהתקין אלמנטים שיצרו משתמשים אחרים באמצעות Bower
- מבזבזים פחות זמן בכתיבת JavaScript ויותר זמן ביצירת דפים
- משתמשים בכלים מודרניים (Yeoman) כדי לגגום אפליקציות באמצעות פולימר עם מחולל-פולימר
- כיצד משתנה סופר של פולימר ביצירת רכיבי אינטרנט.
לדוגמה, כדי להתקין את polyfills של רכיב האינטרנט של Polymer ואת הספרייה עצמה, תוכלו להריץ את השורה הבאה:
bower install --save Polymer/platform Polymer/polymer
הפעולה הזו גורמת להוספה של תיקיית bower_components ולהוספה של החבילות שצוינו למעלה. --save מוסיף אותם לקובץ boer.json של האפליקציה.
בשלב מאוחר יותר, אם תרצו להתקין את רכיב האקורדיון של פולימר, תוכלו להריץ את הפקודה:
bower install --save Polymer/polymer-ui-accordion
ולאחר מכן לייבא אותו לאפליקציה:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
כדי לחסוך זמן, אפשר לגבש אפליקציית פולימר חדשה שכוללת את כל יחסי התלות הדרושים. בעזרת הקוד הזה, תוכלו להשתמש בקוד סטנדרטי (בוילרפלייט) ובכלים לאופטימיזציה של האפליקציה בעזרת השורה הנוספת הבאה:
yo polymer
הדרכה מפורטת כבונוס
בנוסף, הקלטתי הדרכה מפורטת של בונוס באורך 30 דקות על אפליקציית Polymer Jukebox שהראיתי בה בשיחה.
בסרטון הבונוס:
- מה המשמעות של המנטרה 'הכול הוא אלמנט'
- איך להשתמש ב-Bower כדי להתקין פולימלאים ואלמנטים של פלטפורמת Polymer
- מפגינים את אפליקציית Jukebox באמצעות המחולל ומחוללי המשנה של Teoman
- הבנת הפלטפורמה כוללת אלמנטים מסולפים באמצעות סטנדרטי (בוילרפלייט)
- איך העברה פונקציונלית של אפליקציה Angular אל Polymer.
בנוסף, אנחנו משתמשים במחוללי משנה של Yaoman לצורך פיגומים של רכיבי הפולימר החדשים שלנו. לדוגמה, כדי ליצור את התשתית השלכה עבור רכיב foo שאנחנו מפעילים:
yo polymer:element foo
שתשאל אותנו אם אנחנו רוצים שהאלמנט ייובא באופן אוטומטי, האם נדרש בנאי ובכמה העדפות נוספות.
המקורות העדכניים ביותר לאפליקציה, שמופיעים בשתי השיחות, מופיעים עכשיו ב-GitHub. סידרתי מחדש את הקובץ כדי שיהיה יותר מאורגן וקל יותר לקריאה.
תצוגה מקדימה של האפליקציה:
קריאה נוספת
לסיכום, ספריית JavaScript שנקראת Polymer מאפשרת עכשיו להשתמש ברכיבי אינטרנט בדפדפני אינטרנט מודרניים, בזמן שאנחנו מחכים להטמעה במקור. שימוש בכלים מודרניים יכול לשפר את תהליך העבודה שלכם בשימוש בהם, וכדאי לנסות את ייומן ואת באוור כשאתם מפתחים תגים משלכם.
הנה כמה מאמרים נוספים בנושא שמעניינים אותך: