הקסם מאחורי RxJS
לעתים קרובות יש צורך להמציא את הגלגל מחדש על מנת להבין כיצד פועלת ספרייה מתחת לפני השטח וללמוד טוב יותר משהו מורכב.
זוהי אפשרות טובה מאוד, בניגוד למה שנהוג לחשוב, במקרה של מפתח שרוצה לשפר את הידע שלו.
מקס גאלו, ב-Codemotion Rome 2019, ביצע סשן קוד חי, שבו הוא הראה לנו כיצד אנו יכולים לבצע הנדסה לאחור של ספריית RxJS, המאפשרות לך לכתוב תוכניות תגובתיות בגישה פונקציונלית.
מקס גאלו הוא מהנדס שעובד ב-DAZN, והוא מפתח Full Stack מנוסה, מפתח iOS ומעצב UI/UX.
מחכה למישהו?
גלה את הפוטנציאל שלך בעולם ההייטק!
מחכה למישהו?
גלה את הפוטנציאל שלך בעולם ההייטק!
RxJS היא ספרייה עם API ברור לעבודה עם קוד אסינכרוני וגם עם קוד סינכרוני ושימוש בקונספט של Observable.
Observer pattern היא תבנית עיצוב תוכנה שבה אובייקט, קורא לנושא, שומר רשימה של התלויים בו, הנקראים dependents, ומודיע להם אוטומטית על כל שינוי ב state (בדרך כלל על ידי קריאה לאחת מהפונקציות שלהם). (ויקיפדיה)
מה המטרה של הנושא הזה? הרבה אנשים מפחדים מספריית Observable ו-RxJS, אז הכוונה של מקס הייתה להראות לנו איך אנחנו יכולים לבנות משהו כמו RxJS, כמובן, לא את כל הספרייה הסטנדרטית, רק איזו שורה של קוד הדגמה עובד, והוא עשה עם עורך VI. מגניב! כעת נוכל ליצור אופרטורים מותאמים אישית.
אופרטור הוא פונקציה פשוטה, הוא המנוע מאחורי הנתונים הניתנים לצפייה, ומספקים API אלגנטי, ברור ונפוץ למשימות מורכבות הן בעולם הסינכרוני והא-סינכרוני.
אם השתמשת בעבר ב-RxJS וברצונך להבין טוב יותר כמה היבטים פנימיים של הספרייה ואת הקסם מאחורי Observables, כמו גם את האופרטורים, אז המאמר הזה הוא בשבילך.
ראשית, מקס התחיל עם הראה לנו קוד RxJS, כיצד ליצור Observable מתוך מערך עם כמה אופרטורים בתוך ה פייפ, שהוצג עם המהדורה האחרונה של RxJS 6 (למעשה זה כבר התווסף ב-RxJS 5.5), במקום שרשור אופרטורים. ואז, צעד אחד קדימה, הוא כתב מחדש כמה אופרטורים הפונקציות הנפוצים ביותר: map ו form הם תואמים לחלוטין ל-RxJS. אז אנחנו יכולים עכשיו לכתוב את האופרטורים המותאמים אישית שלנו! וואו!
RxJS
בואו נחקור את זה. מטרת הספרייה היא להציע מגוון רחב של אופרטורים לשנות, לתמרן וליצור זרם של נתונים ממקור כגון אירוע בממשק המשתמש, מתגובת XHR או ממיון נתונים (מערך, אוסף או כל מה שאתה רוצה להזרים ולצפות).
זרם הוא אוסף של ערכים עתידיים והוא נקרא Subject או Observable; הוא יכול לפלוט שלושה סוגים שונים של אירועים עם ערך (אובייקט, מערך, ערך פרימיטיבי), שגיאה או אירוע הושלם כאשר מחזור הערכים המלא מסתיים.
Observable הוא אובייקט עם מתודת subscribe עליו. שיטת זו לוקחת את הצופה כארגומנט ומשמשת להפעלת ה- Observable. בספריית RxJS, מתודת ה subscribe מחזירה הפניה לביטול מנוי, מה שמאפשר לנו להאזין לזהות לערכים הנפלטים על ידי Observable.
Observables יכול להיות אסינכרוני או סינכרוני, בהתאם למימוש הבסיסי. דוגמה לצפייה אסינכרונית היא כזו שעוטפת קריאת XHR או פונקציית טיימר, בעוד שזרם של ערכים מגיע ממערך יכול להיות סינכרוני.
עם זאת, אנו לוכדים את האירועים הנפלטים רק באופן אסינכרוני, עם Observer, על ידי הגדרת שלושה פרמטרים:
פונקציה עבור הערך הנפלט הצליחה;
פונקציה כאשר נפלטת שגיאה;
פונקציה כאשר 'הושלם' נפלטת.
Observer הוא אוסף של פונקציות callback, המגיבות לערך המגיע דרך Observable.
אפשר לסכם את הקשר מתוך Observable, Observer, Subscribe ו- Subscription עם הגדרת מ-TypeScript:
Observable.subscribe(צופה:צופה): מנוי;
עד כה, קראנו מה זה Observable וכיצד להירשם אליהם. עם RxJS נוכל לתכנת בצורה פונקציונלית עם ערכים אסינכרוניים, אנו יכולים להשתמש ב map, ב filter של Array או בכל שיטות ואופרטורים אחרים כדי לשנות את ה-Observable המקורי , שיטות נוספות ב קורס Full Stack.
אופרטורים אלה ניתנים לשרשור וחיבור וכדי לעבוד איתם יש לנו מתודה על האובייקט שניתן לראות בשם pipe. שיטת צינור זו לוקחת אופרטורים בודדים או מרובים כקלט ומחזירה קובץ Observable חדש.
הנה דוגמה לשימוש באופרטור filter ו map ב-RxJS:
const observable = from([1, 2, 3, 4, 5])
.pipe(
map ( x => x + 1),
filter( x => x % 2 === 0),
map( x => x – 1)
);
observable.subscribe(
val => console.log('odd:', val),
error => console.error(error),
() => console.log('complete')
);
התחביר נראה מוכר מאוד לעולם הפונקציונלי שבו יש לנו:
מנוי מפורש עם Observable.subscribe;
קבוצה של אופרטורים;
אופרטורים ניתנים לצפייה ו-Pipeline הם ספציפיים לספרייה כיום, אך יכולים להפוך לספציפיים לשפה בעתיד;
להמציא מחדש את RxJS , שימוש ב אופרטורים נוספים ב קורס Full Stack
