הזמנה לוובינר: מדידת ושיפור ביצועים ביישומי React
פוסט זה כולל טיפ קצר לעבודה עם React. אם אתם רוצים ללמוד איתי ריאקט מההתחלה ובצורה מקצועית תשמחו לשמוע שבניתי קורס מלא הכולל עשרות שיעורי וידאו והמון תרגול בו לומדים ריאקט מההתחלה ועד לנושאים המתקדמים.
לפרטים נוספים והרשמה בקרו בדף קורס ריאקט כאן באתר.
יש שתי בעיות למתכנתים שצריכים לכתוב יישומי Web יעילים: הראשונה שאנחנו לא יודעים שיש ליישום שלנו בעיית ביצועים והשניה שעד שאנחנו מזהים בעיה זה עשוי להיות מאוחר מדי בשביל לתקן.
הסיבה שאין לנו מושג שהיישום שלנו פועל לאט היא שהמחשב שלנו הרבה יותר מהיר מזה של המשתמשים שלנו. מתכנתים מעדיפים Dell XPS או Macbook Pro ונשמח גם לקבל איזה סרפייס בוק תודה שהצעתם. המשתמשים לעומת זאת בדרך כלל ישמחו לשלם חצי מהמחיר שמחשבים אלה עולים כדי לקבל מחשב נייד שעושה בדיוק את אותה עבודה. אז ברור שכשאתם טוענים את האתר שלכם מהמחשב הסופר מתקדם שיש לכם בסביבת הפיתוח אתם לא מרגישים את האיטיות שהמשתמשים אולי מרגישים.
הבעיה השניה היא שמבנה היישום ובחירת ה Components עשויים להיות בעלי השפעה מכרעת על הביצועים שלו. אם תתעלמו מההיבט של ביצועים בעת בניית הארכיטקטורה אתם עשויים להגיע למצב שתיקון הבעיות יחייב שינויים מהותיים במערכת וזה לא נעים.
ביום חמישי בעשר בבוקר אני ממשיך את המסורת של וובינרים בחמישי והשבוע נשקיע שעה בללמוד על ביצועים ב React. התוכנית בגדול:
1. מדידה וזיהוי בעיות ביצועים עם Chrome Developer Tools
נתחיל בפיתוח יישום פשוט שמציג המון פקדים ברשימה על המסך ומאפשר למחוק פקדים מסוימים בלחיצת כפתור. בעזרת Chrome Developer Tools נראה מה ריאקט עושה כל פעם שאנחנו מבצעים פעולה בעמוד וכך נזהה איזה פקדים עובדים והאם נעשית עבודה מיותרת.
2. עבודה נכונה עם רשימות ומידע
דרך הניסויים נלמד על המאפיין key והחשיבות של שימוש נכון בו. אבל לא נעצור שם: נמשיך את הניסוי כדי להבין אם אפשר להשתמש ב Immutable Data לקבלת שיפור נוסף בביצועים.
נראה איך מדידה עוזרת לנו להבין מתי אופטימיזציה מסוימת שקראנו עליה באמת עובדת ומתי דברים שמתאימים למערכת אחת לא עובדים באותו אופן על מערכת אחרת ועצות מסוימות פשוט לא עובדות ב Use Case שלנו.
3. פיצול קוד ו Webpack
אחרי שנבין איך למדוד, לבדוק ולשפר ביצועי זמן ריצה נוכל לעבור לדבר על גודל הקבצים שלנו. נדבר על פיצול קוד באמצעות Webpack, איך Webpack מחליט על החלוקה לבאנדלים ונראה איך שינוי קטן במבנה התוכנית יוצר רצף טעינה שונה לגמרי שיכול להיות הרבה יותר מהיר במקרים מסוימים.
כמו תמיד בוובינרים האלה הקוד שנכתוב יחד יעלה לגיטהאב או דרופבוקס (מה שיהיה יותר נוח) ותוכלו להמשיך להיעזר בו גם במערכות שלכם. הקלטה תעלה לאתר עוד באותו יום ותהיה זמינה למנויים בלבד. הוובינר יתקיים דרך אפליקציית zoom.
פרטים נוספים והרשמה בדף האירוע: