למה אני עדיין מהמר על Web Components? (וגם אתם צריכים להתחיל לחשוב להשתמש בהם)

זה שנים שמתקיים דיון מעמיק ברחבי האינטרנט על שילוב של סטנדרט ה-Web Components לעומת ה-framworks. מה הבעיות הקיימות כיום, מה זה מיקרו Frontends והאם הוא יכול להציל את המצב?

 Manuel Breva Colmeiro/ Getty Images Israel

צלם/תמונה: Manuel Breva Colmeiro/ Getty Images Israel

זה שנים שמתקיים דיון מעמיק ברחבי האינטרנט על שילוב של סטנדרט ה-Web Components. מצד אחד, יש מפתחים שחושבים שיש הבטחה שעדיין לא מממשת את עצמה בסטנדרט; אחרים חושבים אחרת, והדיון נמשך עד עצם היום הזה (וכנראה ימשיך גם בעתיד הקרוב). ב-6 השנים האחרונות העברתי מספר גדול של הרצאות על HTML5 ו-Web Components, ואני מנסה לעזור למפתחי ווב ולחברות להטמיע את הסטנדרטים האלה. בכתבה זו ובכנס Geektime Code אשתף למה אני חושב שכדאי שגם אתם תתנו צ’אנס ל-Web Components (אם עדיין לא עשיתם זאת).

החתונה הקתולית עם ה-framework

אני מפתח ווב מאז 2002. בימים שבהם בנינו אתרי אינטרנט ואפליקציות בעיקר בעזרת טכנולוגיות צד שרת, וכש-ASP.NET הייתה נחשבת טכנולוגיה חדשנית (התחלתי את החיים המקצועיים עם ASP.NET). בעשור האחרון חל שינוי גדול מאוד בעולם הפיתוח הוובי וחל מעבר חד מפיתוח אתרים ואפליקציות בצד שרת לכיוון של פיתוח בצד לקוח. היום מרבית האתרים והאפליקציות מפותחים עם HTML, CSS ושפת JavaScript, שמזמן הפכה להיות עמוד השדרה של הפיתוח בצד הלקוח; וספריות ו-Frameworks כמו React ו-Angular הפכו להיות הכלי העיקרי שבו אנחנו מפתחים אתרים ואפליקציות ווביות.

אבל יוסטון, יש לנו בעיה. ב-4 השנים האחרונות אני יועץ עצמאי וסייעתי לפרויקטים רבים, הן בפיתוח והן בארכיטקטורה. אחת הבעיות הגדולות ביותר שהלקוחות שלי נתקלים בהן בשנים האחרונות היא מה שאני מכנה החתונה הקתולית עם ה-framework. למה אני מתכוון? לכך שבתחילת הפרויקט אנחנו תמיד בוחרים framework ואז בונים את כל הפרויקט סביבו. זה נשמע כמו דבר טוב, לא? אולי 3 הסיפורים הבאים, שלקוחים מהעולם האמיתי, יעזרו לכם להבין את הבעיה בזה.

1. אחד הלקוחות שלי, ארגון גדול, התחיל לבנות אפליקציה וובית חדשה לפני שנה. בשלב התכנון של האפליקציה אני והארכיטקט של הפרויקט דיברנו על בעיית ה-framework וצד הלקוח. כל תשתיות האפליקציות בחברה נבנו על בסיס AngularJS, הם השקיעו זמן ומאמץ בבניית components וdirectives שונים והנהלת החברה אילצה את הארכיטקט להשתמש בתשתית זו, למרות שגרסה 4 של Angular כבר הייתה לקראת שחרור.

כיום, למנהלי הפרויקט יש בעיה גדולה מאוד למצוא מפתחים שמוכנים להצטרף לפרויקט, בגלל התשתית המבוססת על AngularJS. הם שוקלים לעבור לגרסה הנוכחית של Angular, אבל זה אומר שהם יצטרכו לשכתב את התשתית הקיימת, כלומר להשקיע שוב כסף וזמן פיתוח רבים.

2. לקוח אחר, שוב ארגון גדול, ביקש ממני לעזור לו לקבל החלטה על איך לגשת לבעיה הבאה: הארגון רכש חברה שהמערכת שלה נבנתה עם Angular 4, ואילו המערכת של הארגון נבנתה באמצעות AngularJS. המנהלים הבכירים ביקשו משני צוותי הפיתוח למזג את שתי המערכות יחד ולעשות את זה בתוך רבעון. הפתרון שהוצע היה לבצע את המיזוג תוך שימוש ב-IFrame עם PostMessage API. לא מדובר בפתרון אידיאלי, אבל הוא עזר לצוותים להרוויח זמן ולהתחיל להעביר את המערכת שכתובה ב-Angular ל-Angular 4 באמצעות מודול ngUpgrade. כמו בדוגמה הראשונה, הצוותים היו צריכים להשקיע הרבה זמן ומאמץ כדי להתקדם קדימה.

3. ללקוח שלישי היו 2 אפליקציות פנימיות, שנכתבו האחת עם React והשנייה עם Polymer. הם פנו אליי כי רצו ליצור אפליקציה שלישית ולשתף חלק מהפונקציונליות של שתי האפליקציות הקיימות. למרבה הצער, לאחר שהסתכלתי על הקוד של שתי האפליקציות הבנתי שזה יהיה כמעט בלתי אפשרי לעשות שימוש בקוד הקיים שלהם מבלי להשקיע עוד זמן פיתוח. יתרה מכך, הם יצטרכו לשכתב את האפליקציות הקיימות כדי לתמוך בשינוי המבוקש.

אני הבאתי רק שלוש דוגמאות, אך מדובר במקרים שכיחים שמתרחשים בחברות בזמן שאתם קוראים את הכתבה הזו ויכולים לצוץ גם אצלכם. אל תבינו אותי לא נכון, ספריות או Frameworks כגון React ו-Angular הם דרך טובה ויעילה לפיתוח אתרים או אפליקציות ווביות, אבל הבחירה בהן כתשתית משולה לחתונה קתולית.

האם מיקרו Frontends יכול להציל את המצב?

בשנתיים האחרונות, המונח מיקרו Frontends תפס תאוצה בשל הבעיות שהצגתי קודם לכן.

Micro Frontends in Google Trends

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

אחת האפשרויות לבנות מיקרו Frontends היא על ידי שימוש ב-Web Platform ובמה שהיא יכולה להציע לנו. איך זה עובד? הרעיון הוא לבנות Web Components משותפים שכל צוותי הפיתוח של החברה יוכלו להשתמש בהם. ה-components צריכים להיות בלתי תלוים בספריות או ב-frameworks כלשהם, אבל יכולים להיות בשימוש של כל ספרייה או framework שארגון ירצה להשתמש בהם. ואיך אנחנו יכולים ליישם את זה באמצעות ה-Web Platform? אפשר להשתמש ב-Web Components APIs, וספציפית ב-custom elements.

Using Web Components for Building Shared Components

יצירת custom elements עונה על הדרישות הקודמות, אך הוא מאלץ אותנו לייצר סט שלם של רכיבים חדשים בעזרת ה-API של Web Components ,שיכול להקשות על התהליך. לדוגמה, נצטרך לכתוב מנגנונים כמו Data Binding או State Management בכוחות עצמנו ב-components בגלל שמנגנונים כאלה הם עדיין לא חלק מהסטנדרט, נכון?

קהילת המפתחים מצילה את המצב

בחודשים האחרונים אפשר לראות התחדשות בכל מה שקשור ל-Web Components. חברות כמו גוגל (Angular Elements ו-Polymer 2) ו-Ionic Framework (עם Stencil) מפתחים כלים שהופכים את Web Components לנגישים יותר למפתחים. יש גם מיזמים מתוך קהילת המפתחים, כגון SkateJS ו-SlimJS, שהופכים את הפיתוח של Web Components לקל ונגיש יותר למפתחים. כל הכלים החדשים כוללים מנגנונים כמו Data Binding, שעוזרים לגשר על הפערים שקיימים בסטנדרט של Web Components. יותר מכך, הקהילה משתמשת בכלים אלה כדי לייצר reusable Web Components שניתן להטמיע בכל framework.

הפרויקטים האלה וההשפעה שלהם על קהילת המפתחים גורמים לי להאמין שיש עוד תקווה לסטנדרט של Web Components ושאנחנו צפויים לעוד חדשנות באזור הזה שהולך ומתפתח. האם גם אתם חושבים שהסטנדרט של Web Components הוא חלק מהעתיד שלנו כמפתחי ווב?

לפני שאתם עונים, הנה כמה כמה לינקים שיסייעו ללמוד את הנושא לעומק:

– Introduction to Micro Frontends

– Micro Frontends

– The broken promise of Web Components and Rob Dodson answer Regarding the broken promise of Web Components

– Web Components organization

–  Polymer project

– Stencil — The magical, reusable web component compiler

– SkateJS project

– SlimJS project

הכותב הינו מייסד ומפתח ב-sparXys ואחד מדוברי כנס Geektime Code, שיתקיים ב-6 ביוני בגני התערוכה תל אביב. לפרטים נוספים ורכישת כרטיסים לחצו כאן

גיל פינק

יועץ בכיר והמנכ"ל של חברת sparXys. ביצע בעבר תפקידי פיתוח כמתכנת בכיר, כראש צוות, כמנהל פיתוח וכיועץ בכיר. בעל תואר Microsoft MVP ובעל הסמכת MCPD. אוהב לחקור וללמוד טכנולוגיות חדשות בעיקר בתחומי עיצוב ופיתוח מערכות ווביות.

הגב

6 תגובות על "למה אני עדיין מהמר על Web Components? (וגם אתם צריכים להתחיל לחשוב להשתמש בהם)"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
איציק
Guest

חבר לא יודע באיזה פלטפורמה אתה עובד אבל סביר להניח שהיא לא על כדור הארץ, או שסתם אין לך כח להמשיך הלאה,
הגמישות והמהירות של פיתוח בסביבות כאלה הוא מהיר ונח בהרבה מהנ”ל,
ובקשר לשינויים הדרסטיים בין אנולר לangularjs בזמנו זה היה טכנולוגיה מוד חדשה וטבעי שבתקופה הראשונה היא תעבור שינוים גדולים ולאחר מכן הם התמתנו כמו שניתן לראות בפלטפורמות של צד שרת

מאיר
Guest

אני מאמין שעם הזמן, השפה עצמה, ג’אווה סקריפט, תדע לקחת את הטוב מכל framework ולשלב בשפה עצמה. ככה ב es10, כבר יהיה data binding מול virtual dom ועוד יכולות נוספות, כחלק מ pure J’s.

אלעד
Guest

זה לא השפה. זה הapi של הdom. אין שום קשר לes.

שלומי
Guest

לגיל היקר, נסיונך בתחום ידוע לי מאוד, אך אחרי שהצגת את החסרונות של שימוש בפריימוורק מסוים היה סביר להציג בצורה יותר מפורטת, כולל דוגמא של שימוש במיקרו-פריימוורק ולא רק לתת 30 קישורים בנושא. לעניות דעתי כדאי לערוך את הכתבה ולהוסיף את הנ”ל. בנוסף – ציינת ממש בקטנה את היתרונות אך לא רשמת את קלות ההתממשקות של מפתח שמכיר פריימוורק מסוים עם מוצר שלא הכיר. יתרון גדול בפיתוח של חברה. בנוסף יצא לי לראות ששימוש בספריות אלה גורם למפתחים לעבוד בארכיטקטורה יותר נכונה ממה שניסו לכתוב בnative.

אבישי בר
Member

היי שלומי, גיל ידבר בהרצאה בכנס בדיוק על זה ויראה גם דוגמא בלייב. מוזמן להגיע: https://code.geektime.co.il

עמית
Guest

מהמעט שאני יודע סטינסייל נכתב עם טייפסקריפט. גם הכתיבה דומה לאנגולר. נראה מגניב ואחלה. אבל יש את פולימר? שיש לה טרנד גבוה מאוד. במה היא שונה מסטינסייל? ולמה נדמה שהיא פופלרית יותר?

wpDiscuz

תגיות לכתבה: