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

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

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

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

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

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

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

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

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

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

ה Trade Off של Redux הוא די ברור: ״שלמו״ בפיתוח מסורבל של ה Actions וה Reducers וקבלו בתמורה פיתוח מהיר ויעיל של קוד React. בשביל להנות מהיתרונות בצד של React מומלץ להקפיד לפחות על שלושת הכללים הבאים.

ל React יש את React.Children שאמור לעזור לנו לעבוד עם פקדים שמכילים פקדים אחרים. אז למה הוא לא סופר כמו שהיינו מצפים?

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

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

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