מפגש הפסגה של מפתחי Chrome – הצהרת פולימר, רכיבים מוקפדים ונעשה בהם שימוש חוזר

‫Polymer הוא שער אחד לעתיד המדהים של רכיבי אינטרנט. אנחנו רוצים שיהיה קל להשתמש ברכיבים מותאמים אישית וליצור אותם. בשנה האחרונה, הצוות עבד קשה על קבוצה של polyfills למפרטים המתפתחים. בנוסף, יצרנו ספריית sugaring נוחה כדי להקל על יצירת רכיבי אינטרנט. בנוסף, אנחנו מפתחים קבוצה של רכיבים לממשק המשתמש ורכיבי שירות לשימוש חוזר באפליקציות שלכם. ב-Chrome Dev Summit בשנת 2013, התעמקתי בחלקים השונים של Polymer ובפילוסופיה שמאחורי המנטרה שלנו, "הכול הוא רכיב".

שקפים: http://html5-demos.appspot.com/static/cds2013/index.html

"הכול הוא רכיב" (מ-<select> ועד לרכיבים בהתאמה אישית)

שקפים: http://html5-demos.appspot.com/static/cds2013/index.html#6

בניית דפי אינטרנט בשנות ה-90 הייתה מוגבלת, אבל עוצמתית. היו לנו רק כמה אלמנטים. והחלק הכי טוב? הכול היה דקלרטיבי. היה קל מאוד ליצור דף, להוסיף פקדי טפסים וליצור "אפליקציה" בלי לכתוב המון קוד JavaScript.

ניקח לדוגמה את היסוד הפשוט <select>. יש הרבה פונקציונליות מובנית ברכיב, פשוט על ידי הצהרה עליו:

  • אפשר להתאים אישית באמצעות מאפייני HTML
  • מציג רכיבי צאצא (למשל <option>) עם ממשק משתמש שמוגדר כברירת מחדל, אבל אפשר להגדיר אותו באמצעות מאפיינים.
  • שימושי בהקשרים אחרים כמו <form>
  • יש לו DOM API: מאפיינים ושיטות
  • מפעיל אירועים כשדברים מעניינים קורים

רכיבי אינטרנט מספקים את הכלים לחזור לתקופת הזוהר הזו של פיתוח אתרים. מקום שבו נוכל ליצור אלמנטים חדשים, שמזכירים את <select>, אבל מיועדים לתרחישי השימוש של 2014. לדוגמה, אם AJAX היה מומצא היום, הוא כנראה היה תג HTML (דוגמה):

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
                params='{"alt":"json"}'></polymer-ajax>

או רכיבים רספונסיביים שמקושרים למאפיין queryMatches:

<polymer-media-query query="max-width:640px" queryMatches="">

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

<my-app></my-app>

בניית רכיבי אינטרנט עם הטאץ' המיוחד של Polymer

שקפים: http://html5-demos.appspot.com/static/cds2013/index.html#37

‫Polymer מכיל מספר תכונות נוחות לבניית אפליקציות שמבוססות על רכיבי אינטרנט:

  • רישום רכיבים דקלרטיביים: <polymer-element>
  • ירושה הצהרתית: <polymer-element extends="...">
  • קישור נתונים דו-כיווני הצהרתי: <input id="input" value="">
  • גורמים מטפלים באירועים דקלרטיביים: <button on-click=""
  • נכסים שפורסמו: xFoo.bar = 5 <-> <x-foo bar="5">
  • תצפית על הנכס: barChanged: function() {...}
  • ‫PointerEvents / PointerGestures כברירת מחדל

מוסר ההשכל הוא שכתיבת רכיבי Polymer היא הצהרתית. ככל שצריך לכתוב פחות קוד, כך יותר טוב ;)

רכיבי אינטרנט: העתיד של פיתוח אתרים

שקפים: http://html5-demos.appspot.com/static/cds2013/index.html#26

אני חייב להזכיר את התקנים שמאחורי רכיבי אינטרנט. אחרי הכול, Polymer מבוסס על ממשקי ה-API הבסיסיים האלה שמתפתחים כל הזמן.

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

  1. Shadow DOM – אנקפסולציה של סגנון ו-DOM
  2. רכיבים מותאמים אישית – הגדרת רכיבי HTML חדשים. נותנים להם API עם מאפיינים ושיטות.
  3. ייבוא HTML הוא מודל ההפצה של חבילת CSS,‏ JS ו-HTML.
  4. תבניות – תבניות DOM תקינות להגדרת קטעי תגי עיצוב אינרטיים שיוטבעו מאוחר יותר

כדי לקבל מידע נוסף על היסודות של ממשקי ה-API, אפשר להיכנס לאתר webcomponents.org.