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

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

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

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

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

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

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

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

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

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

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