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

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

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

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

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

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

בשבועות האחרונים עבדתי על המרת קוד צד הלקוח של אתר ToCode למבנה של Single Page Application באמצעות הטכנולוגיות React ו Redux. קוד צד השרת היה ונשאר Ruby on Rails. התוצאה היא שיפור ניכר בזמני הטעינה וזמני התגובה של כל האתר וקוד משמעותית יותר נקי וקל לתחזוקה. פוסט זה מסכם את כל הלקחים, הבחירות והטעויות שעשיתי במהלך השכתוב וכמובן טיפים עבור מי ששוקל לבצע שדרוג כזה.

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

ספריית Redux של דן אברמוב היא הדבר החם היום בעולם של React. כותב הספריה גויס לאחרונה לעבוד בפייסבוק ויש סיכוי לא רע שנתחיל בקרוב לראות את הגב של פייסבוק גם לספריה זו (בנוסף למימוש Flux שלהם). הנה הצעה שלי למסלול לימוד רדוקס שיעזור להבין על מה כולם מדברים.

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

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