MasterScripter

Angular 2 נגד React – המלחמה מתחילה

הי לך שם! הפוסט הזה עודכן לאחרונה ב9 באפריל 2017. סתם לידיעה 🙂

בלי התייפיפויות, בלי גינונים, אחת ולתמיד ובעברית – Angular 2 נגד React.
כל היתרונות, החסרונות, ההשוואות, ובעיקר הדברים שכדאי לקחת בחשבון לפני שבוחרים באחת על גבי השנייה.
נא להשאיר את הדעות הקדומות בבית 🙂 יאללה, מתחילים! –

Angular נגד React?

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

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

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

בפוסט הזה אני אתייחס ליתרונות ולחסרונות של כל אחת, אשווה בין פיצ'רים דומים בשתיהן אשר ניתן להשוות ביניהם, ולבסוף – אגלה לכם את ההעדפה שלי 🙂

חשוב לציין שעיקר ההשוואה תיעשה בין Angular 2 לבין React, אולם ניתן גם למצוא קווי השוואה בין Angular 1 לבין React.

כמה מילים על טרנדים והסתגלות של מתכנתי WEB

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

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

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

וזה לא חייב להיות רק פריימוורק. לא מזמן נחשפתי לflexbox לדוגמא, שאפשר לטעון שזה בסך הכל סט הגדרות CSS. לקח לי שעה ללמוד את העקרון, ואני מעריך שחסכתי בזכות זה כבר לפחות 5 שעות פיתוח! שווה לא?

קצת רקע והיסטוריה

אוקיי, הנה קצת עובדות לפני שנתחיל בקרב – גם Angular וגם React הן מבוססות קוד פתוח. לשתיהן יש קהילות מפתוחות מאוד (147,000 שאלות על Angular בstackoverflow.com, לעומת 20,000 על Angular 2 ו- 60,000 על React).

Angular, מבית היוצר של גוגל, יצאה לראשונה בשנת 2009. מטרתה הייתה להפחית עלויות אחסון מידע לאפליקציות ששילמו פר מגהבייט שמורד מהשרת. את העלויות הם הורידו באמצעות גישה של עדכון תוכן שדורש עדכון בלבד, במקום הגישה שהייתה נפוצה – הורדת הדף בשלמותו, גם עם התוכן שנשאר סטטי.
Angular 2 יצאה באופן רשמי באמצע ספטמבר 2016. ב23 במרץ שיחררו החבר'ה בגוגל באופן רשמי את Angular 4, והיא כרגע הגרסא העדכנית הרשמית.
בין החברות שמשתמשות באנגולר, ניתן למצוא גם את Udemy, Sony, Nike ו- Tesla. (מתוך רשימת פרוייקטים עם אנגולר)

React, מבית היוצר של פייסבוק, יצאה לראשונה ב2013. היא פותחה על ידי הצוות של פייסבוק ואינסטגרם על מנת לשפר את מהירות עדכון התוכן הדינמי(הפיד) של התוצרים שלהם, אך זכתה להצלחה רבה ואהבה מהקהילה.
הגרסא העדכנית הרשמית של ריאקט היא 15.5.0, והיא יצאה ב7 באפריל 2017. פייסבוק מעדכנים שהם שוקדים במרץ על גרסא 16.0, אך לא ישחררו אותה לפני שתהיה יציבה מספיק.
בין החברות שמשתמשות בריאקט, ניתן למצוא גם את Airbnb, Fiverr, Wix ו- Udemy. (מתוך רשימת פרוייקטים עם ריאקט)

אחרי ההקדמה וההיסטוריה, לבמה המרכזית עולות שתי המתחרות..שיהיה בהצלחה לכל הצדדים!

יתרונות וחסרונות

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

React

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

Virtual DOM

אחד היתרונות הכי חזקים של React על פני Angular 2 הוא הDOM הוירטואלי. את הבעיה המוכרת שהDOM אינו מותאים לממשק משתמש דינמי (UI), פתרו בReact בצורה מעניינת. מה הוא בעצם הDOM הוירטואלי? זוהי גרסא קלה ואבסטרקטית של הDOM. אנחנו יכולים לשחק בה ולשנות אותה, ואז לשמור את הגרסא האבסטרקטית לDOM האמיתי.
בזמן השמירה, הDOM הוירטואלי מושווה לDOM האמיתי, נמצאים ההבדלים, ואז מתבצע השינוי(re-render).

מה זה נותן לנו? מהירות! העבודה על הDOM הוירטואלי מהירה בהרבה מעבודה ישירות על הDOM הרגיל, בגלל שאין צורך בכל החלקים כבדי המשקל של הDOM, ואין צורך לעדכן את כולו – אלא רק את החלקים בהם נוצר שינוי.

Virtual DOM הוא יתרון שלא משקף גם חסרון אצל Angular 2, אולם אי אפשר לכתוב על React מבלי לציין אותו.

זמן הלמידה

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

Angular 2

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

פריימוורק שלם

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

קצב חביצה (Churn) נמוך

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

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

נכנסים לעובי הקורה – Angular 2 מול React, נקודות ההשוואה

בלי הקדמות מיותרות, קבלו 6 נקודות להשוואה בין Angular 2 ל- React, ואת המנצחת בכל נקודה:

JSX, TypeScript, Babel ומה שביניהם

אי אפשר לדבר על ריאקט ולא להזכיר JSX. למי שלא יצא להתקל בJSX, זהו בעצם תחביר (Syntax) ייחודי ל- React. הJSX דומה ל-HTML (וגם קצת לXML אם להיות כנה), ומתקמפל לJavaScript. המשמעות העיקרית של השימוש בJSX היא שהMarkup והקוד שלכם נמצאים באותו קובץ, ושניהם יודעים להתקמפל.
מעבר לשימוש בJSX, ריאקט בחרו ללכת עם Babel בכתיבת הג'אווהסקריפט. Babel, בפשטות, הוא קומפיילר של ECMAScript 6 ל- ECMAScript 5.

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

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

המנצחת: Angular 2

Debugging, Compiling והתמודדות עם שגיאות

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

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

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

המנצחת: React

אופן המיקוד – HTML או JavaScript?

אז אחת הנקודות החשובות, אשר מדגישה במיוחד את ההבדל בין React ל- Angular, היא אופן המיקוד.
React היא ממוקדת JavaScript, בעוד Angular היא ממוקדת HTML.
במילים פשוטות – בReact שמים את הHTML בJavaScript, בAngular שמים את הJavaScript בHTML.

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

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

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

המנצחת: Angular 2

רנדור בצד שרת

אחת הבעיות שמקבלות יותר ויותר תשומת לב עם עליית הפופולריות של ג'אווהסקריפט, היא הרנדור בצד שרת. ממש לאחרונה הצליח נקסי לרנדר ג'אווסקריפט בצד שרת עם PHP, וחזר בחיים כדי לספר על זה!
בהמשך לנקודה הקודמת,ברור עכשיו שהן Angular והן React זקוקות לג'אווהסקריפט על מנת להציג את הMarkup.
כאן בדיוק מתחילות לצוץ בעיות – ובניהן השאלה המרכזית, מה לגבי SEO? נכון שגוגל טוענת שהרובוטים שלה יודעים לאכול גם ג'אווהסקריפט, אבל בדיקות שונות הוכיחו שקשה לסמוך על זה ב100% – אז מה עושים?
הפתרון הוא כמובן לרנדר את הג'אווהסקריפט בצד השרת.

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

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

המנצחת: React

התאמה לפיתוח Native

Angular 2 לא בדיוק מותאמת לפיתוח נייטיב, אם נאמר את האמת. היא כן מגיעה עם התאמה מלאה לIonic, שמאפשרת יצירת אפליקציות היברידיות. היא גם מגיעה עם התאמה לNativeScript, שתומכת באנגולר באופן מלא.
עם NativeScript כבר אפשר לדבר יותר על התאמתה של אנגולר לפיתוח נייטיב, אבל עדיין אי אפשר להשוות את הביצועים לפתרון של ריאקט.

React נוצרה על מנת לשפר את העדכון של תוכן דינמי עבור אפליקציות בעלות תוכן רב(פייסבוק..). לא חשבתם שהם יזניחו את הנייטיב, נכון? אז צדקתם!
לReact יש פריימוורק ייחודי להמרת הקוד לנייטיב – React Native.

הביצועים של React Native מצויינים, והתוצאות מדברות בעד עצמן – אפליקציות שמבוססות על הReact Native רצות מהר. מאוד מהר. יותר מהר מכאלו שנבנו בAngular עם Ionic, או עם NativeScript.

המנצחת: React

Routing

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

יחד עם זאת, קיימת ספריה בשם React-Router, ולכן אתייחס להשוואה כאשר משתמשים בספריה הזו.

בReact, נשתמש באלמנטי Route ו- Router על מנת להגדיר את הראוטינג.
כל ראוט משלב את הURL של הדף הנוכחי שמוצג, יחד עם הרכיב המתאים שאנחנו מעוניינים להציג.

באנגולר לעומת זאת, נגדיר את הראוטינג באמצעות הRouterModule שלנו.

בנוסף, ניתנה לנו בAngular 2 היכולת להחליט איפה יופיע הרכיב שנכריז עליו בראוטינג, באמצעות התגיות החדשות <router-outlet>.

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

המנצחת: Angular 2

רשיון השימוש

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

Angular מגיעה עם רשיון שימוש MIT, קוד פתוח חופשי לחלוטין.

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

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

קשה להתווכח עם רשיון MIT, ולכן..

המנצחת: Angular 2

קצת טבלאות לפני שמסיימים

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

תכונת השוואה Angular 2 React
גודל(בפרודקשן) 144kb 117kb
התאמת Web Component גבוהה בינונית
MVC מותאם רק View
התאמה לPackaging בינונית גבוהה
יכולת שימוש חוזר בקוד גבוהה גבוהה

גם זה לא הספיק לכם? אני ממליץ לקרא את הכתבה של עמית קאופמן, בכיר בWix,  על שובר השוויון בין React ל- Angular.

רגע,למה אי אפשר להשתמש בAngular ו- React ביחד?

אמרנו שReact היא ספריה.
אמרנו שAngular היא פריימוורק שלם.
השאלה המתבקשת היא – למה אי אפשר להשתמש בהן חד?

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

ומה לגבי עבודה?

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

אם מסתכלים על השוק העולמי, ריאקט מובילה בפער גדול:

השוואת עבודה בין ריאקט לאנגולר
ההשוואה מתוך האתר indeed.com

יחד עם זאת, מחיפוש זריז בAllJobs לבדיקת השוק המקומי, מצאתי שיש 206 משרות עבור החיפוש "Angular" לעומת 64 בלבד עבור החיפוש "React".
לגמרי נקודה למחשבה, לא?

והמנצחת הגדולה היא..

ספירת הצבעות השופטים השאירה אותנו עם תוצאה די מאכזבת – תיקו 3:3. חשבנו שנשים סוף לדיון ה"מה עדיף" ובסוף נשארו עם תיקו אפרורי! מה כיף בזה?

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

ומה אני חושב? ראשית נעשה גילוי נאות קצרצר – התחלתי להשתמש באנגולר ב2014.
שנית, חשוב לציין שוב שמרבית עבודת הפיתוח שלי מתעסקת באתרי אינטרנט, ובפחות באפליקציות ווב.
אם תשאלו אותי – אני ממליץ על Angular 2. היא טובה יותר עבור פיתוח של אתרי אינטרנט (התחום שלי..). היא תחסוך לכם את ההתעסקות באיזה עוד ספריות להשתמש ביחד עם React. היא תעזור לכם לעבוד עם הטייפסקריפט. יש בה את כל מה שאתם צריכים, ההגיון שלה נכון, והצוות המפתח שלה מצויין. הקהילה שלה פורה מאוד, ונראה שבאמת הקשיבו לבעיות שצצו עם Angular 1 כדי להפוך את Angular 2 למוצר האולטימטיבי.

ההמלצה שלי – Angular 2. לא מסכימים? ספרו לי למה בתגובות 🙂

אם הגעת עד לפה, הגיע הזמן להירשם לניוזלטר!

Summary
Article Name
Angular 2 נגד React - המלחמה מתחילה
Description
כל היתרונות, החסרונות, ההשוואות, ובעיקר הדברים שכדאי לקחת בחשבון לפני שבוחרים בין Angular 2 לבין React.
Author
Publisher Name
MasterScripter
Publisher Logo
תגיות: ,
אודות 
יזם בוטסטראפ, מתכנת ומנהל מוצר. שותף מייסד בקבוצת סיזן שמספקת שירותי פיתוח וליווי טכנולוגי לחברות וארגונים, וב-edge אתגרים בחינוך שמפתחת מוצרים דיגיטליים לבתי ספר. המייסד של PBC - מועדון ספרים מקצועי.

14 תגובות

  1. הראל לוי

    2 ביולי 2016 - 21:44
    תגובה

    יש בכתבה מעט טעויות:
    1. בדפדפנים בלי JS גם אנגולר לא יעבוד
    2. IONIC לא ממיר לנייטיב, הוא HTML לגמרי, ז"א הייבריד. לעומת זאת יש ספריה בשם native-script שכתובה באנגולר 2 ובאמת ממירה לנייטיב

    • שלומי זק

      3 ביולי 2016 - 9:10
      תגובה

      הראל – הערות חשובות. אנסה לחדד יותר:
      1. כמובן שאנגולר לא יעבוד בדפדפנים ללא JS שכן זהו פרימוורק של JS. בריאקט הHTML נמצא בתוך קבצי JS וJSX, ולכן לא יוצג בדפדפנים ללא JS, לעומת האנגולר, שפזור גם על קבצי HTML וPHP, ולכן אומנם כל מה שמבוסס JS לא יעבוד, אבל HTML יכול להיות מוצג.
      2. עד כמה שאני מכיר, NativeScript היא פרימוורק בפני עצמה ולא ספריה, שאכן עובדת עם אנגולר 2, אולם ההמלצה כיום לפיתוח אפליקציות מבוססות אנגולר היא עדיין שימוש בIONIC. אשמח אם תחדש לי בנושא 🙂

  2. ינאי

    24 באוגוסט 2016 - 8:15
    תגובה

    גודל הקובץ באנגולר לפי הדיווחים האחרונים הולך לעמוד על משהו בסביבות ה 71KB

    • שלומי זק

      18 בספטמבר 2016 - 18:17
      תגובה

      מדברים כבר לא מעט זמן על צמצום הגודל שלו..אני בעד !

    • חיים

      28 במאי 2018 - 10:43
      תגובה

      ציטוט: "לעומת האנגולר, שפזור גם על קבצי HTML וPHP, ולכן אומנם כל מה שמבוסס JS לא יעבוד, אבל HTML יכול להיות מוצג". – א"א לפתח ב-Angular ללא JS, כך שגם אם ה-HTML יוצג הוא יוצג חלקי וקטוע וללא פונקציונליות (ולפעמים גם לא יוצג בכלל) כך שממש קשה להבין מה הערך במשפט המצוטט.

  3. גיא

    10 במאי 2017 - 15:08
    תגובה

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

    • שלומי זק

      10 במאי 2017 - 16:09
      תגובה

      בבקשה ענקית!
      אני שמח מאוד שנהנת לקרוא, ואם הצלחתי אפילו קצת לעזור – אני עוד יותר שמח.
      אתה יותר ממוזמן להתייעץ איתי בנוגע לבחירה באיזה פריימוורק להשתמש, וננסה להגיע ביחד למסקנות 🙂

  4. יעל

    18 בינואר 2018 - 10:08
    תגובה

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

  5. הילה

    23 בינואר 2018 - 11:08
    תגובה

    תודה רבה הכתבה ממש עזרה לי!
    בתור מגייסת של מפתחי ווב אני מודה שלא הבנתי את הנקודה הזו עד הסוף ובהחלט הבהרת בפניי את ההבדלים.
    שאלה לי- צה עם VUE.JS? זה פריימוורק שלם או ספריה?

  6. בינה כהן

    14 במרץ 2018 - 20:13
    תגובה

    יש לי שאלה הבנתי שהאתרים בreact מהירים יותר
    אם כן למה לא עדיף react?

  7. יונה

    12 ביולי 2018 - 11:55
    תגובה

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

    אני רגיל לאנגולר 1 ומאוד מאוד התלהבתי ממנה , אבל כאשר הגיע אנגולר 2 בולבלתי לגמרי

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

  8. אלעד

    10 במרץ 2019 - 12:38
    תגובה

    היי שלומי,
    ראשית אציין שהמאמר ממש מקצועי ומספק מלא תובנות.
    אני סטודנט כיום ל -Full Stack Development, בין היתר התחלנו ללמוד Angular 7.
    מצאתי את עצמי הולך לאיבוד ואני שוקל להתחיל ללמוד React לבד.

    אני די שולט ב – JavaScript וחבל לי סתם לבזבז זמן במשהו שאני לא מצליח להבין כ"כ.
    מה דעתך?

  9. שחף

    19 בינואר 2020 - 15:49
    תגובה

    "רוב האנשים שהתעסקו בהשוואה בין השתיים, ייחסו את הנקודה הנ"ל כיתרון לReact – אני חולק עליהם.
    בעולם אתרי האינטרנט, ההפרדה בין HTML לJavaScript היא הכרחית. המגמה צריכה להיות חיזוק הHTML, ולא התמקדות בJavaScript."

    מאוד מתחבר לפיסקה הזאת! לא מזמן כתבתי פוסט בעצמי על למה אני לא אוהב ריאקט וזה החיסרון המרכזי שציינתי בפוסט שלי:
    https://www.redboard.co.il/topic/39
    חוסר ההפרדה בין אבני הבניין שמרכיבות ביחד קומפוננטה (html, css, js) והעובדה שהכל משולב לתוך מקום אחד מביא לכך שקל יותר לכתוב קוד לא טוב שקשה יותר להבין ולתחזק.

  10. מודי טל

    11 באפריל 2020 - 17:31
    תגובה

    היי,

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

    אני לא יודע מתי כתבת את המאמר (2016?) אבל בנושא הזה אני איש בשורות,
    יש פיתוח של כלים המסייעים מאוד להתגבר על שגיאות בזמן קומפילציה ולפני זמן הריצה
    אני משתמש בIDE שנקרא Visual Studio Code והוא ממש עוזר בזיהוי וטיפול בשגיאות
    בנוסף יש לו יתרונות נוספים : אינטלסיס (דבר שמשלים לך קוד עוד במהלך הכתיבה)
    תמיכה בTYPE SCRIPT מה שאומר שאתה יודע בדיוק מה המבנה של כל פונקיציה

    בקיצור יש התקדמות בנושא. יש עוד IDE שנקרא WEBSTORM שגם הוא עוזר ביותר
    להתגבר על שגיאות אבל אני הלכתי על VSC

    אשמח לשמוע חוות דעת של מתנכתנים נוספים.
    מודי

השאר/י תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *