מה אפשר ללמוד על אבסטרקציות מההבדל בין ריאקט ל jQuery?

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

const counter = document.getElementById("counter");
const button = document.getElementById("clickBtn");

// Initialize count
let count = 0;

// Add click event listener
button.addEventListener("click", () => {
  count++;
  counter.textContent = count;
});

וזה קוד מקביל ב JavaScript עם jQuery:

let count = 0;

$('#clickBtn').on('click', function() {
  count++;
  $('#counter').text(count);
});

מי שמכירים JavaScript ללא jQuery יבינו מהר מאוד איך לעבוד עם jQuery וכל פיצ'ר של jQuery שאנחנו לומדים "מתלבש" על מיומנות קיימת. במקום לכתוב getElementById כותבים $. קל וקצר.

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

function ClickCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div style={styles.container}>
      <h1>Click Counter (React)</h1>
      <div>{count}</div>
      <button onClick={handleClick}>Click Me!</button>
    </div>
  );
}

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

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

נשים לב - בשני המקרים חשוב להכיר את הדבר שהאבסטרקציה בנויה עליו. מתכנתי ריאקט שמכירים JavaScript כותבים קוד ריאקט טוב יותר. אבל יש טוויסט:

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

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

כשאני מתחיל ללמוד ספריה חדשה השאלה הראשונה שאני אוהב לשאול - האם זה דומה לריאקט או ל jQuery? איזה סוג אבסטרקציה בניתם פה?