Polymer הוא אחד מהכניסות לעתיד המדהים של רכיבי אינטרנט. אנחנו רוצים להקל על השימוש ברכיבים בהתאמה אישית ועל היצירה שלהם. במהלך השנה האחרונה, הצוות עבד קשה על קבוצה של polyfills למפרטים המתפתחים. בנוסף, יצרנו ספרייה נוחה של רכיבים מוכנים לשימוש כדי להקל על בניית רכיבי אינטרנט. לבסוף, אנחנו יוצרים קבוצה של רכיבי ממשק משתמש ורכיבי שירות לשימוש חוזר באפליקציות שלכם. בכנס 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> - יש לו API של DOM: מאפיינים ושיטות
- הפעלת אירועים כשדברים מעניינים קורים
רכיבי האינטרנט מספקים את הכלים שיעזרו לכם לחזור לתקופה הזו של שגשוג בפיתוח האינטרנט. מקום שבו נוכל ליצור רכיבים חדשים, שיהיו דומים ל-<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
לא אסיים בלי להזכיר את הסטנדרטים שמאחורי Web Components. אחרי הכל, Polymer מבוסס על ממשקי ה-API הבסיסיים האלה שממשיכים להתפתח.
אנחנו עומדים בפתח תקופה מרגשת מאוד בפיתוח האינטרנט. בניגוד לתכונות חדשות אחרות שנוספות לפלטפורמת האינטרנט, ממשקי ה-API שמרכיבים את רכיבי ה-Web הם לא מבריקים או גלויים למשתמשים. הם מיועדים אך ורק לשיפור הפרודוקטיביות של המפתחים. כל אחד מארבעת ממשקי ה-API הראשיים שימושי בפני עצמו, אבל ביחד הם יוצרים דברים קסומים!
- Shadow DOM – אנקפסולציה של סגנון ו-DOM
- רכיבים מותאמים אישית – הגדרת רכיבי HTML חדשים. נותנים להם ממשק API עם מאפיינים ושיטות.
- HTML Imports הוא מודל ההפצה של חבילת CSS, JS ו-HTML.
- תבניות – תבניות DOM מתאימות להגדרת קטעי רכיבי Markup לא פעילים שצריך למחוק אותם מאוחר יותר
מידע נוסף על העקרונות הבסיסיים של ממשקי ה-API זמין בכתובת webcomponents.org.