פולימר הוא שער אחד אל העתיד המדהים של רכיבי האינטרנט. אנחנו רוצים להקל על הצריכה והבנייה של רכיבים מותאמים אישית. בשנה האחרונה, הצוות עובד במרץ על סדרה של פוליפולים עבור המפרטים המתפתחים. בנוסף, יצרנו ספריית אחסון נוחה כדי להקל על בניית רכיבי אינטרנט. לבסוף, יצרנו סדרה של רכיבי ממשק משתמש ורכיבי עזר לשימוש חוזר באפליקציות שלכם. בכנס Chrome Dev Summit בשנת 2013, התעמקתי בחלקים השונים של הפולימר ובפילוסופיה שמאחורי המנטרה "הכל הוא אלמנט".
מצגות: 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: מאפיינים ושיטות
- הפעלת אירועים כשקורים דברים מעניינים
פלטפורמת Web Components מספקת כלים שיעזרו לכם לחזור לימים הגדולים של פיתוח אתרים. מקום שבו אנחנו יכולים ליצור רכיבים חדשים שמזכירים את <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="">
זו בדיוק הגישה שאנחנו נוקטים בשיטה של פולימר. במקום ליצור אפליקציות אינטרנט מונוליתיות שמבוססות על JavaScript, כדאי ליצור רכיבים לשימוש חוזר. עם הזמן, רכיבים קטנים יותר מיישמים יחד רכיבים קטנים. אופס, והאפליקציה כולה יכולה להיות רכיב:
<my-app></my-app>
בניית רכיבי אינטרנט באמצעות הרוטב המיוחד של פולימר
מצגות: http://html5-demos.appspot.com/static/cds2013/index.html#37
פולימר מכיל כמה יתרונות לבניית אפליקציות המבוססות על רכיבי אינטרנט:
- רישום רכיב הצהרתי:
<polymer-element> - ירושה מוצהרת:
<polymer-element extends="..."> - קישור נתונים דו-כיווני הצהרתי:
<input id="input" value=""> - רכיבי handler מוצהרים של אירועים:
<button on-click="" - נכסים שפורסמו:
xFoo.bar = 5<-><x-foo bar="5"> - תצפיות בנכס:
barChanged: function() {...} - כברירת מחדל, אירועי PointerEvents / תנועות מצביעות
מוסר הסיפור הוא שכתיבה של יסודות פולימרים כרוכה בהצהרה. עדיף לכתוב פחות קוד ;)
Web Components: העתיד של פיתוח האתרים
מצגות: http://html5-demos.appspot.com/static/cds2013/index.html#26
הייתי מחכה אם לא אספר על הסטנדרטים של רכיבי האינטרנט. אחרי הכול, חברת Polymer מבוססת על ממשקי ה-API הבסיסיים המתפתחים האלה.
אנחנו עומדים להתחיל תקופה מלהיבה מאוד בפיתוח האינטרנט. בשונה מתכונות חדשות אחרות שמתווספות לפלטפורמת האינטרנט, ממשקי ה-API שמהם מורכבת רכיבי האינטרנט לא נוצצים או נראים למשתמשים. הן נועדו אך ורק לפרודוקטיביות של המפתחים. כל אחד מארבעת ממשקי ה-API הראשיים שימושי בפני עצמו, אבל יחד, קורים דברים קסומים!
- Shadow DOM – אנקפסולציה של סגנון ו-DOM
- רכיבים מותאמים אישית - הגדרת רכיבי HTML חדשים. ספקו להם API עם מאפיינים ושיטות.
- ייבוא HTML הוא מודל ההפצה לחבילה של CSS, JS ו-HTML.
- תבניות – תבניות DOM מתאימות להגדרת קטעים אינרטיים של תגי עיצוב לחותמת מאוחר יותר
אם תרצו לקבל מידע נוסף על היסודות של ממשקי ה-API, היכנסו אל webcomponents.org.