השוואה בין AngularJS VS React בשנת 2018

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

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

ההבדלים העיקריים בין AngularJS (Framework) ל React (הספריה) הם רכיב, כריכת נתונים, ביצועים, רזולוציית תלות, הנחיות ותבניות. בואו נסתכל על כל אחד מההיבטים הללו בפרטי.

AngularJS

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

הגיב

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

רכיב

AngularJS

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

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

הגיב

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

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

מיזוג נתונים

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

AngularJS

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

הגיב

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

ביצועים

AngularJS

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

כאשר אנו קושרים ערכים ב- HTML באמצעות המודל שלנו, AngularJS יוצר צופה עבור כל כריכה כדי לעקוב אחר שינויים ב- DOM. ברגע שהתצוגה מתעדכנת, AngularJS משווה את הערך החדש לערך ההתחלתי ומריץ את לולאת העיכול $. לולאת העיכול של $ בודקת לא רק ערכים שהשתנו בפועל, אלא גם את כל הערכים האחרים שעוקבים אחר הצופים. זו הסיבה שהביצועים יפחתו הרבה אם ליישום שלך יש יותר מדי צופים.

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

הגיב

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

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

פתרון תלות

AngularJS

הזרקת תלות היא תבנית לעיצוב תוכנה בה ניתנים לרכיבים לתלות שלהם במקום קידודם הקשיח בתוך הרכיב. זה מקל על רכיב מאיתור התלות והופך את התלות להגדרה. זה עוזר בהפיכת רכיבים לשימוש חוזר, בר-תחזוקה ובדיקה.
 AngularJS מוצא באופן אוטומטי אובייקטים מתאימים המוזרקים כפרמטרים $ routeParams, $ filter, store ו- $ scope. ישנן שתי פונקציות המאפשרות הזרקת תלות במסגרת AngularJS: $ inject ו- $ לספק.

הגיב

ההבדל בין React ל- AngularJS בכל הקשור להזרקת תלות הוא ש- React לא מציע שום מושג של מיכל מובנה להזרקת תלות. אבל זה לא אומר שאנחנו צריכים לחשוב על שיטה להזרקת תלות בפרויקט React שלנו. אתה יכול להשתמש בכמה מכשירים כדי להזרים תלות באופן אוטומטי ביישום React. מכשירים כאלה כוללים Browserify, RequireJS, ECMAScript 6 מודולים בהם אנו יכולים להשתמש באמצעות Babel, ReactJS-di וכן הלאה. האתגר היחיד הוא לבחור כלי לשימוש.

הנחיות ותבניות

AngularJS

הנחיות ב- AngularJS הן דרך לארגן את הקוד שלנו סביב ה- DOM. אם עובדים עם AngularJS, אנו ניגשים ל- DOM רק באמצעות הוראות. ל- AngularJS הנחיות סטנדרטיות רבות, כמו ng-bind או ng-app, אך לעיתים אנו קובעים הוראות משלנו ב- AngularJS להכניס נתונים לתבניות. בתבנית חייב להיות אלמנט שההנחיה שלנו כתובה כתכונה. זה פשוט כמו זה. אולם הוראות AngularJS, אם מוגדרות במלואן, הן מתוחכמות. האובייקט עם ההגדרות, שאנו מחזירים בהנחיה, מכיל כעשרה נכסים. ניתן להבין מאפיינים כמו templateUrl או תבנית.

הגיב

React אינו מציע חלוקה לתבניות והוראות או לוגיקת תבניות. יש לכתוב את היגיון התבנית בתבנית עצמה. כדי לראות איך זה נראה, פתח דוגמה מ- GitHub. תבחין באפליקציית הרכיבים של React.TodoItem נוצרת בשיטת React.createClass סטנדרטית. אנו מעבירים אובייקט עם מאפיינים לפונקציה זו. תכונות כגון componentDidUpdate, shouldComponentUpdate, handleKeyDown או handleSubmit מייצגות את ההיגיון - מה יקרה עם התבנית שלנו. בסוף הרכיב אנו מגדירים בדרך כלל את מאפיין ה- render, שהוא תבנית שניתנה לדפדפן. הכל ממוקם במקום אחד, ותחביר JSX בתבנית קל להבנה, גם אם אינך יודע לכתוב ב- JSX. ברור מה עומד לקרות עם התבנית שלנו, כיצד יש למסור אותה ואיזה מידע יוצג עבורה על ידי נכסים.

סיכום:

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

במקור פורסם ב- Angular Minds.