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