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

בבניית מערכת צריך להתחיל מהממשק הגרפי או מבסיס הנתונים?

את הארכיטקטורה צריך לכתוב מלמעלה למטה (קודם האבסטרקציות ואחרי זה הקוד עצמו) או מלמטה למעלה (קודם הקוד וכשרואים חלקים משותפים מייצרים אבסטרקציה)?

את הבדיקות כותבים לפני או אחרי הקוד?

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

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

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

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

התוכנית המקורית שלי לפוסט סופשבוע היתה לפתור ולפרסם עוד יום של Advent Of Code, אבל מפה לשם את כל זמן הכתיבה בזבזתי על שאילתה מסובכת מדי לבסיס הנתונים שבסוף גם היא לא עבדה, ולכן במקום אני רוצה לשתף שלוש נקודות אליהן כדאי לשים לב כשהולכים מכות עם שאילתות (ובעצם עם פריימוורק באופן כללי)-

1. לפעמים זה שווה את המאמץ. יש שאילתות SQL שאחרי שמצליחים לכתוב אותן מבינים משהו חדש על SQL. כן יש דבר כזה Window Functions ואם צריך להשקיע עכשיו שעתיים בללמוד איך הן עובדות זה ממש שווה את ההשקעה.

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

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

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

אה זה מה Readme? תתעלם הוא לא מעודכן

ההערה הזאת ישנה את יכולה להתעלם, שינינו הרבה קוד מאז

תתעלם מהבדיקות שנכשלות צריך לסדר אותן

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

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

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

docker run -dit --name my-apache-app -p 8080:80 -v "$PWD":/usr/local/apache2/htdocs/ httpd:2.4

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

אני מודה כשראיתי את ההתנהגות הזאת לא האמנתי. הייתי בטוח שאני עושה משהו לא בסדר במקום אחר. אחרי כמה שעות הלכתי לגוגל ומצאתי שהסיפור מתועד למשל כאן: https://blog.jarrousse.org/2023/03/18/how-to-use-ufw-firewall-with-docker-containers/

וכאן: https://www.baeldung.com/linux/docker-container-published-port-ignoring-ufw-rules

וכאן: https://www.howtogeek.com/devops/how-to-use-docker-with-a-ufw-firewall/

הסיפור השני הוא על JanusGraph ויצירת אינדקס ייחודי בגרף. בעמוד התיעוד הראשי הם משתפים את הפקודה שיוצרת אינדקס ייחודי:

index = mgmt.buildIndex('byConsistentName', Vertex.class).addKey(name).unique().buildCompositeIndex()

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

index = mgmt.buildIndex('byConsistentName', Vertex.class).addKey(name).unique().buildCompositeIndex()
mgmt.setConsistency(index, ConsistencyModifier.LOCK)

וגם זה מתועד יפה כשיודעים איפה לחפש: https://docs.janusgraph.org/advanced-topics/eventual-consistency/

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

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

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

קוד הגרלת השמות של דוקר כולל את רשימת כל המדענים והחוקרים שהם יכולים להציע עם הסבר קצר על כל אחד ואתם יכולים גם למצוא אותו בקישור: https://github.com/moby/moby/blob/39f7b2b6d0156811d9683c6cb0743118ae516a11/pkg/namesgenerator/names-generator.go#L852-L863

ופונקציית ההגרלה עצמה אגב פשוטה להפליא וכוללת טיפול רק במקרה קצה אחד:

func GetRandomName(retry int) string {
begin:
    name := left[rand.Intn(len(left))] + "_" + right[rand.Intn(len(right))] //nolint:gosec // G404: Use of weak random number generator (math/rand instead of crypto/rand)
    if name == "boring_wozniak" /* Steve Wozniak is not boring */ {
        goto begin
    }

    if retry > 0 {
        name += strconv.Itoa(rand.Intn(10)) //nolint:gosec // G404: Use of weak random number generator (math/rand instead of crypto/rand)
    }
    return name
}

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

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

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

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

function App() {
  const [text, setText] = useState(0);
  return (
    <div>
      <button onClick={() => setText(t => (t + 1) % 2)}>Toggle</button>
      {text == 0 ? <Text1 /> : <Text2 />}
    </div>
  )
}

אבל מהר מאוד הופך למפלצת.

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

function Text({id}) {
  if (id === 0) {
    return <Text1 />
  } else {
    return <Text2 />
  }
} 


function App() {
  const [text, setText] = useState(0);
  return (
    <div>
      <button onClick={() => setText(t => (t + 1) % 2)}>Toggle</button>
      <Text id={text} />
    </div>
  )
}

בשלב הבא אם נצטרך מנגנון יותר גנרי (למשל כי נצטרך שוב לבחור בין כמה קומפוננטות) נוכל להפוך את Text לפונקציה כללית ונקבל:

function Text1({color}) {
  return <p style={{color}}>Text 1</p>
}

function Text2({color}) {
  return <p style={{color}}>Text 2</p>
}

const Toggle = (...components) => (props) => {
  const cls = components[props.id]
  return React.createElement(cls, props);
} 

const Text = Toggle(Text1, Text2);

function App() {
  const [text, setText] = useState(0);
  return (
    <div>
      <button onClick={() => setText(t => (t + 1) % 2)}>Toggle</button>
      <Text id={text} color="red" />
    </div>
  )
}

הפעלתי היום קוד טייפסקריפט שהתחבר לבסיס נתונים PGlite, יצר טבלה, הכניס נתונים ושלף אותם חזרה. החלק המלהיב הוא שלא היה לי בסיס נתונים מותקן. זה הקוד וצריך רק deno run בשביל להריץ:

import { PGlite } from "npm:@electric-sql/pglite"

async function main() {
  const db = new PGlite()
  await db.query("create table test(x integer, y integer);");
  await db.query("insert into test values(1, 1);");
  await db.query("insert into test values(2, 2);");
  const result = await db.query("select * from test");

  console.log(result);
}

main();

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

1. מהירות - כי אם בסיס הנתונים רץ באותו תהליך כמו השרת אז יותר זול להוציא קריאות לבסיס הנתונים.

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

3. בדיקות מהירות ומקביליות - כי עכשיו כל בדיקה יכולה ליצור לעצמה את בסיס הנתונים בזיכרון מתוך נתוני Seed קבועים.

4. פורטינג יותר מהיר לאפליקציות Offline First - כי אפשר לקחת את אותן שאילתות פוסטגרס שכבר יש לנו ופשוט להריץ הכל בדפדפן.

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

צריכים לכתוב שחקן מחשב לאיקס עיגול (או אולי לשחמט)?

ליצור תוכנית אימונים מותאמת אישית לחדר כושר, לפי רשימת אילוצים ורצונות של משתמש?

לזהות באיזה שפה הקובץ? או לתרגם את הטקסט לשפה אחרת?

לחפש מתכונים שמתאימים לרשימת מרכיבים שיש למשתמש במקרר כרגע?

לפענח קוד QR בתמונה?

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

אבל אפשר כבר לדמיין עתיד מסוג אחר.

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

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

עוד כשכתבו לראשונה את המנגנון דן אברמוב דן עליו באריכות בבלוג שלו: https://overreacted.io/a-complete-guide-to-useeffect/

וזה עזר, אבל רק במידה מסוימת כי בסוף עד שלא מנסים את הדברים על קוד אמיתי קשה לראות את הבעיות.

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

השבוע בעקבות כמה שאלות מתלמידים ישבתי לסדר את השיעורים האלה בקורס ולהקליט מחדש 3 סרטים על useEffect בגירסאות ארוכות ומפורטות (שעה של וידאו על useEffect אמרתם? יאללה קיבלתם). הפעם לקחתי כל דוגמה והראיתי את כל הטעויות שאפשר לעשות ואיך לזהות כל טעות.

אם יש לכם שעה פנויה ומנוי לאתר, ואתם כותבים ריאקט ביום יום, אני ממליץ להעיף מבט בסידרה המחודשת בקישור: https://www.tocode.co.il/bundles/react/toc שיעורים 25-27.

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