הבלוג של ינון פרק

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

עם השידרוג ל Webpack 4 גם כל ההגדרות של הכלי הפכו הרבה יותר פשוטות והיום בהרבה פרויקטים כבר לא צריך להתחיל עם משהו גדול כמו create-react-app ואפשר יחסית בקלות לבנות לעצמכם קובץ הגדרות Webpack שיגדל יחד עם הפרויקט שלכם.

בואו נראה איך לגשת לזה מאפס ולהגיע לפרויקט ריאקט שעובד.

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

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

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

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

אחד הפיצ'רים החדשים בריאקט 16 היה מנגנון טיפול בשגיאות חדש. בואו נראה למה היה צריך את השינוי ומה הרווחנו ממנו.

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

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

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

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

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

שתי צורות של תקשורת בריאקט מאוד ברורות מהתיעוד: הראשונה היא העברת מידע מהורה לילד באמצעות Properties, והשניה היא שליחת פקודות מילד להורה באמצעות העברת Callback בתור Property. פוסט זה יעסוק בבעיה שלישית שפחות מדברים עליה: איך לשלוח פקודה מהורה לילד.

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