RSS

Angular 2.0 for Angular 1.x Developers

19 דצמ

image

בפוסט זה (אני מאמין שגם הבאים אחריו ) אני רוצה להציג לכם את אנגולר 2 מתחת למכסה המנוע. החומרים אלו גם משמשים אותי לקורס שאני עובד עליו בימים אלו :Course Angular 2.0 for Angular 1.x Developers.

השאלה שאני אנסה לענות אליה בפוסט זה היא, איך עובד מנגנון זיהוי השינויים החדש של אנגולר ובמה הוא שונה מה- digest של אנגולר 1?

 

שלב 1 – קימפול התבנית:

אנגולר 2 סורק את הדף, כלומר את ה- Components (רכיבים). כל רכיב מכיל מחלקה (class) ותבנית (Template).

אנגולר  2 בזמן קיפול התבנית (ChangeDetectionCompiler) מזהה בכל תבנית את הביטויים (Expressions)  כמו למשל {{}} או "name" = [title] ומייצר מחלקה ייעודית בזמן ריצה שיודעת לזהות את השינויים. ראו קוד. למחלקה קוראים ChangeDetector.   אחת המחלקות שהכי משפיעה על חילול הקוד היא ChangeDetectorDefinition, היא סוג של Entity שמחזיק את כל המידע שלפיו יחולל הקוד.

הבדלים מאנגולר 1:

אנגולר 1 יצייר Watchers על כל scope אך לא מחולל קוד. החילול קוד משפר את מהירות שליפת הנתונים כי במקום לקרוא את הערכים בצורה של object[“fieldName”] קוראים אותם object.fieldname. צריך לזכור שאת fieldname אנחנו קוראים מתוך התבנית כ-string וכן צריך לחולל קוד כדי לקרוא את המידע כ- object.fieldname. ע"פ בדיקות שנעשו זה שיפר עד פי 20 את הביצועים. ראו מסמך בנושא.

 

שלב 2 – תהליך זיהוי שינויים:

כל רכיב מקבל את ה- ChangeDetector (cd) שלו. ה-cd נרשם לאירועי ה-UI שהרכיב הצהיר עליהם בתבנית, למשל (click). ואז הוא מריץ את המתודה detectChanges. מתודה זו מפעילה את עצמה גם אצל הילדים של הרכיב. חשוב לציין שכל רכיב מודע לתהליך זה והוא יכול לשנות את תהליך בדיקת השינויים ברמה שלו.

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

           הבדלים מאנגולר 1:

באנגולר 1 כאשר מתחיל תהליך ה- digest אי אפשר לעצור אותו או לשפר את הזרימה שלו. בנוסף אם watcher אחד בלבד השתנה בעץ של ה- scopes צריך לרוץ על העץ שוב מחדש… יש מקרים שסורקים את העץ כמה פעמים באותו digest. אחרי 10 פעמים אנחנו מקבלים את הטעות " Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!". במילים פשוטות באנגולר 2 הסריקה מתבצעת פעם אחת בלבד, וזה מספיק כי יש לנו שליטה ברמת הרכיב ולא ברמת השדה (watcher) כמו באנגולר 1.

 

שלב 3 – זיהוי שינוי של ביטוי בתבנית:

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

onChanges:

הרכיב יכול גם לממש את הממשק onChanges ואז לקבל את כל השינויים שיש ברכיב ולעשות איתם מה שהוא רוצה, כמו באנגולר 1 $scope.$watch() רק במקום לקבל שינויים של שדה מסויים, מקבלים את כל השינויים שיש. ראו דוגמא. הסברים על הדוגמא:

1. השינוים שמקבלים זה רק מה שהשתנה בכניסה לרכיב ולא שדות פנימיים. כלומר, זה שקול לשדות שהגדרנו באנגולר 1 ב- Isolated סקופ עם הסימנים "@", "=" ו- "&".

2. כל שינוי שתעשו לשדה פנימי של הרכיב בתוך המתודה onChanges, שדה זה יעודכן ב-UI בצורה אוטומטית.

3. קיראה למתודה זו מתבצע לפני הקריאה לילדים.

DoCheck:

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

1. האם לבצע את בדיקת השינויים כן או לא? למשל ע"פ זמן.

2. איזה שדות לבדוק האם הם השתנו?

הבדלים מאנגולר 1:

באנגולר 1 ה-watchers  של התבנית נוצרים לבד וגם מעדכנים את התבנית בוצרה אוטומטית בכל קריאה ל- digest. הדרך היחידה שלנו לקבל את השינוי זה לרשום watcher חדש ע"י המתודה $watch של המחלקה $scope. כתוצאה מכך אין לנו ראיה ברמת הרכיב ולכן הרבה יותר קשה לבצע טריקים של שיפורי ביצועים. בנוסף אנחנו לא יכולים כמו באנגולר 2 לקבוע בעצמנו מתי יהיה שינוי UI אם נרצה.

 

 

סיכום:

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

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

 

מודעות פרסומת
 
2 תגובות

פורסם ע"י ב- דצמבר 19, 2015 ב- Angular 2.0

 

תגים:

2 תגובות ל-“Angular 2.0 for Angular 1.x Developers

  1. ניר גולדמן

    ינואר 17, 2016 at 4:38 pm

    מעולה,תודה.

     
  2. doron

    מרץ 2, 2016 at 4:51 am

    אייל שלום,
    אני קורא קבוע את הפוסטים שלך והם מעולים , תודה!

    רציתי להתייעץ איתך ואודה מראש להתייחסותך:

    עברתי קורס של html,css,javascript,angular1.

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

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

    תודה, דורון.

     

להשאיר תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: