האם jQuery יותר פשוטה מ React ?

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

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

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

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

1. מונה לחיצות הבנוי כ jQuery Plugin

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

2. אותו הפקד בריאקט

למתכנתים שלא מכירים JavaScript או ריאקט כנראה יהיה הרבה יותר קל להבין את גירסת ה jQuery, אבל אם אתם כן מכירים ריאקט שימו לב מה יש לנו כאן:

  1. מבנה אחיד לפקד שכולל מקום אחד להגדרת המידע הפרטי (נקרא state).
  2. פונקציה אחת שמגדירה את תבנית ה HTML למבנה הפקד (נקראת render).
  3. חיבור ישיר בין ה state לבין פונקציית render, בזכות אותו מבנה קבוע.

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