Angular, React או Vue – במה כדאי להשתמש בפיתוח המוצר הבא שלכם?

פוסט זה הוא מדריך מקיף שיכול להחליט איזו פריימוורק תתאים לכם – אנגולר, ריאקט או ויו • רק לפני כמה שנים, מפתחים התלבטו בעיקר אם עליהם להשתמש אנגולר או ריאקט עבור הפרויקטים שלהם. אבל במהלך השנים האחרונות, שחקן שלישי החל לגדול ולהתחזק בזירת הפיתוח – Vue.js • אם אתם מפתחים שמתחילים פרויקט ומתלבטים באיזו פריימוורק של JavaScript להשתמש, מדריך זה יסייע לכם לקבל החלטה

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

1. ההסטוריה של מסגרות הפיתוח

אנגולר: הספריה פותחה על ידי גוגל ויצאה לראשונה בשנת 2010, מה שהופך אותה לעתיקה ביותר על המגרש. זוהי ספריית JavaScript מבוססת TypeScript. שינוי מהותי התרחש בשנת 2016 עם שחרורו של Angular 2 (והסרת ה-“JS” מהשם המקורי – AngularJS). Angular 2+ ידוע בשם Angular בלבד. למרות ש-AngularJS (גרסה 1) עדיין מקבל עדכונים, נתמקד בדיון ב-Angular מפני שהוא נפוץ יותר מאשר AngularJS.

ויו: Vue, הידועה גם בשם Vue.js, היא החברה הצעירה ביותר בקבוצה. היא פותחה על ידי עובד לשעבר של גוגל בשם איוון יו בשנת 2014. במהלך השנים האחרונות ויו ראתה שינוי מהותי בפופולריות, וזאת אף על פי שאין לה גיבוי של חברה גדולה. הגרסה העדכנית ביותר מוכרזת תמיד באתר Vue הרשמי. יש לציין כי ל-Vue יש גם ריפוזיטורי ל-GitHub משלה, והיא פועלת באמצעות TypeScript.

ריאקט: הספריה שפותחה על ידי פייסבוק ראתה אור לראשונה בשנת 2013. פייסבוק משתמשת רבות ב-React במוצרים שלה (פייסבוק, אינסטגרם, וואטסאפ). בדומה ל-Vue, מפתחי React מכריזים גם על הגרסה החדשה ביותר שלהם בבלוג הרשמי של אתר React.

	Angular	React	Vue
תאריך יציאה	2010	2013	2014
אתר רשמי	angular.io	reactjs.org	vuejs.org
גרסא נוכחית	13.x	17.x	3.x
בשימוש על ידי	גוגל, ויקס	פייסבוק, אובר	אלי באבא

פופולריות

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

ביקוש לעבודה לפי ספריות פיתוח

מקורות הנתונים הטובים ביותר המעידים על המגמות בשוק העבודה הם לוחות הדרושים השונים.

ניתוח עדכני לגבי הביקוש בשוק העבודה יכול להתקבל מחיפוש פשוט ב-Google Trends, שמפרט את מגמות החיפוש במהלך 12 החודשים האחרונים עבור משרות React, משרות Angular ו-Vue. הנתונים מוצגים בטבלה הבאה.

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

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

2. קהילה ופיתוח הספריה

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

ניתן להסיק יותר מידע בנושא על ידי מבט על סטטיסטיקות ה-GitHut של הספריות.

ספריה / מדד	Angular	React	Vue
# Watchers	3.1k	6.7k	6.3k
# Stars	78.4k	180k	218k
# Forks	20.6k	36.5k	35.7k
# Contributors	1,500+	1,500+	400+

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

הסבר אפשרי אחד הוא ש-Vue מונעת כולה על ידי קהילת הקוד הפתוח, בעוד של-Angular ו-React יש נתח משמעותי מעובדי גוגל ופייסבוק  אשר תורמים למאגרים.

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

מדד נוסף שתרצה לשקול הוא תג “Used By” של GitHub. זה מראה כמה מאגרים אחרים ב-GitHub תלויים במאגר הזה. ריפו של GitHub של Angular מציג 1.7 מיליון, React מציג כעת כמעט 5.7 מיליון משתמשים, בעוד ש-Vue מציג למעלה מ-167K עבור שני הריפוזיטורים שלו ביחד. הבדל גדול בין שלוש הספריות, אולם זה נובע בעיקר מכך ש-Vue היא הספריה החדשה יותר ואינה מספרת את התמונה המלאה על הביקוש הכולל.

3. עדכוני גרסאות ומיגרציות

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

Angular מתכננת עדכונים גדולים כל שישה חודשים. יש גם פרק זמן של שישה חודשים נוספים לפני שהממשק API העיקרי יוצא משימוש, מה שנותן לך זמן של שני מחזורי שחרור (שנה אחת) לביצוע שינויים נחוצים, אם יש כאלה.

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

4. פיתוח עם אנגולר, ריאקט וויו

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

גודל וזמני טעינה

הגדלים של הספריות לא ישפיעו כל כך מכיוון שאחסון במטמון ומיניפיקציה הם די סטנדרטיים בימינו. למרות שיכול להיות הבדל משמעותי בין הגדלים של הספריות (למשל Angular הוא הגדול ביותר), הן עדיין קטנות בהשוואה לגודל דף האינטרנט הממוצע (כ-2MB לפי הנתונים העדכניים ביותר). בנוסף, אם תשתמשו ב-CDN פופולרי לטעינת ספריות אלו, סביר מאוד שהספרייה כבר תיטען למשתמש בשרתים המקומיים שלו.

קומפוננטות

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

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

ריאקט: הספריה באופן מעניין, משלבת את ה-UI ואת ההתנהגות של קומפוננטות.

ויו: כאשר בוחנים את Vue vs React, ב-Vue, ה-UI וההתנהגות הן גם חלק מהרכיבים, מה שהופך את הפיתוח ליותר אינטואטיבי. כמו כן, Vue ניתנת להתאמה אישית רבה, מה שמאפשר לכם לשלב את ממשק המשתמש וההתנהגות של רכיבים מתוך סקריפט. יותר מכך, ניתן להשתמש ב-pre-processors ב-Vue ולא ב-CSS, שזו פונקציונליות מצוינת. Vue פועל מצוין כאשר מדובר באינטגרציה עם ספריות אחרות, כמו Bootstrap.

עקומת למידה

אז כמה קשה יהיה ללמוד כל אחת מהספריות הללו?

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

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

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