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

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

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

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

תוספת של פיצ'ר לאתר שברה לי חלק מהקישורים הפנימיים, והסימן המזהה של הנזק היה סימן שאלה שהופיע פעמיים ב URL. לא לקח הרבה זמן להבין שהאשמה בהתמודדות מוזרה של אלמנט Link של ריאקט-ראוטר עם נתיבים עם פרמטרים. כדי שאתם לא תיפלו באותו הבור, תוכלו למצוא כאן המחשה של הבעיה ואת המעקף שאני כתבתי.

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

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

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

רוב הדוגמאות לניתוב צד-לקוח באמצעות react-router מציגות הגדרת טבלת ניתוב שנראית כמו JSX. היתרון שזה מרגיש יותר ריאקטי אבל האמת שמדובר במסיכה בלבד: ריאקט ראוטר עצמה מתרגמת את כתיב ה JSX לטבלת ניתוב הבנויה כהיררכיה של אוביקטי JavaScript, בדיוק כמו הראוטר של אנגולר או ספריות ניתוב אחרות.

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

הספריה react-router היא ספריית ניתוב צד-לקוח המובילה (וכמעט היחידה) בריאקט. יש אף שיחשיבו אותה חלק אינטגרלי מיישום ריאקט בדומה לתפקיד של angular-router באנגולר. כמו הרבה ספריות אחרות באקו-סיסטם של ריאקט, גם react-router נראית במבט ראשון מאוד מבטיחה, עם הזמן מתחילים להתגלות החסרונות שלה ובסוף לומדים לעקוף אותם או לחיות עם מה שיש.

ES6 היא נפלאה כי היא פותרת הרבה מהבעיות העתיקות של JavaScript. זוהי המהפכה הכי גדולה של JavaScript מאז גירסא 3 (שנת 1999), מה שאומר שיש המון תחביר חדש ללמוד.

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

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

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