טיפים קצרים וחדשות למתכנתים
לאחרונה עבדתי עם לקוח על ויזואליזציה של מבנה נתונים מסוג עץ (למשל עץ של קבצים ותיקיות). ממשק זה ממחיש את היתרונות של ריאקט ושל חלוקה לפקדים, מאחר וכל הצמתים בעץ הינם פקדים מאותו הסוג. נתחיל עם קצת קוד כדי שיהיה על מה לדבר.
כשאנחנו חושבים על עיצוב קוד (Code Design) מיד עולה לראש עולם המונחים מונחה העצמים: ירושה, כימוס, פולימורפיזם וכמובן מחלקות ותבניות עיצוב, אבל האמת היא שאפשר לכתוב קוד מודולרי ונקי גם ללא שימוש במחלקות. במיוחד נכון הדבר בשפות תכנות המתיחסות ברצינות לפונקציות ולהרכבה שלהן כפי שנראה בדוגמא הבאה.
קיימות שתי בעיות שתמיד חוזרות בבדיקות יחידה שאני כותב. הראשונה נוגעת לשאלה מה לבדוק,והשניה נוגעת לקשר בין הבדיקות ו״ניקוי״ המערכת בין בדיקה לבדיקה כך שלא תהיה השפעה לסדר הבדיקות על התוצאה. ואז מגיעה רדוקס ומציעה ארכיטקטורת קוד שכמעט ומדלגת על שתי בעיות אלו. בואו נראה איך זה קורה.
Backbone עבורי היתה אהבה ממבט ראשון. אחרי שנים עם jQuery וקוד שתמיד מצא דרכים לא צפויות להסתבך, מישהו סיפר לי על ספריה מופלאה שתאפשר לכתוב יישומים גדולים בצורה מסודרת, בלי להפריע יותר מדי. זה עבד טוב ומהר מאוד רוב הקוד שכתבתי השתמש בספריה זו. לימים הרגשתי שהמודלים של Backbone הם נפלאים, אבל כשזה מגיע ל Views יש מקום לשיפור. אבל רק כשהתחלתי לכתוב ריאקט הבנתי את כל הדברים שהפריעו לי ב Backbone. דוגמא? ברור. הנה View פשוט ב Backbone וגירסת ריאקט שלו. נתחיל עם הקוד ואז נדבר על ההבדלים.
ספריית JavaScript חדשה בשם רדוקס (redux) מציעה דרך חדשה לחשוב על פיתוח ממשק המשתמש. במקום להתחיל מהצגת ממשק על המסך וחיבור פעולות לממשק, רדוקס תעזור לכם להתחיל מהגדרת הפונקציונליות ולהגיע לבניית הממשק כשרוב הקוד כבר כתוב. בואו נראה איך זה קורה והאם זה שווה את המאמץ.
בדוגמא שלפנינו נבנה פקד ContentSlider גנרי. כך כל מי שירצה לבנות סליידר תמונות יכול להשתמש בפקד שלנו ולרשום בתור ילדים את התמונות או הטקסטים ביניהם הוא רוצה להחליף ופקד הסליידר כבר ידאג לכל העבודה.
רוצים לכתוב קוד מונחה בדיקות ליישום ריאקט אך מרוב אפשרויות, כלים וטכנולוגיות הלכתם לאיבוד? הנה הזדמנות לעשות קצת סדר, וגם לקבל Starter Code המשלב את כל הכלים.
שילוב פקדי ריאקט ביישום Java דורש מעט עבודת הכנה, אבל עם בחירה בכלים הנכונים אנו יכולים לבנות רצף עבודה נוח למתכנת שגם ייתן ביצועים מעולים לגולשים. במדריך זה אציג את כל הצעדים לשילוב פקד ריאקט ביישום Java צעד אחר צעד. גישה אחת לעבודה עם ריאקט תהיה לבנות את כל תוכן העמוד בצד הלקוח באמצעות קוד JavaScript. בגישה זו נראה כיצד להמיר אוטומטית את קבצי ה JSX לקבצי JavaScript תקניים ולשלב אותם בקוד היישום. הגישה השניה לשילוב ריאקט משלבת קוד צד-שרת המבצע את הפענוח הראשוני של הפקד. כך גולש שמגיע לאתר מקבל כבר עמוד HTML עם כל התוכן וקוד ריאקט מתחיל לעבוד בצד הלקוח מהנקודה שהפסיק בצד השרת כדי לחבר את קוד הטיפול באירועים. גישה זו מועדפת לאתרי תוכן שכן בצורה כזו האתר נשאר נגיש למנועי חיפוש ולטכנולוגיות מסייעות. נמשיך לסקירת שתי הגישות והצגת הקוד בכל אחת משתיהן.
ריאקט (React) הינה ספריית צד-לקוח לבניית ממשקי Web מורכבים. הספריה מקבלת הרבה תשומת לב בחודשים האחרונים מאחר והיא מציעה גישה חדשנית לפיתוח יישומי צד-לקוח מורכבים ונמצאת כבר כיום בשימוש אתרים גדולים ביניהם פייסבוק, Instagram ו Khan Academy. בפוסט זה אציג את הספריה ונפתח באמצעותה משחק פשוט כדי להבין איך נראה קוד ריאקט ובמה היא דומה או שונה לספריות צד-לקוח אחרות.
ריאקט הינה ספריית פקדים המציעה תחביר פשוט, ביצועים מעולים ואפשרות לרנדר את הפקד בצד השרת ובצד הלקוח. שילוב פקדי ריאקט ביישום ריילס מאפשר לנו לכתוב עמודים אינטרקטיביים עם הרבה פחות קוד JS. בפוסט זה נראה כיצד להמיר ERB View קיים לפקד ריאקט.