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