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

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

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

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

describe("my test", () => {
    it("just works", () => {
        expect(1).toEqual(1);
    });
});

כי הבדיקה הראשונה נתנה לך את npm run test ואת "איפה שמים את תיקיית הבדיקות?" ואת קובץ האיתחול של jest ואת כל השגיאות שיופיעו כשתפעילי את המערכת במצב בדיקה. אני יודע שזה לא נראה הרבה כשמסתכלים על התוצאה, אבל שנינו יודעים שזה לקח המון עבודה להגיע לשם.

הבדיקה הראשונה במערכת היא המדרגה הראשונה. עכשיו אפשר לעשות Copy/Paste ולהמשיך לכתוב את הבדיקה השניה, השלישית וה-500. ובכל צעד להמשיך לגלות טכניקות בדיקה חדשות.

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

1. אם אנחנו במצב צפיה הערך של isEditing יהיה false ונציג אלמנט p עם הערך.

2. אם אנחנו במצב עריכה הערך של isEditing יהיה true ונציג את הערך בתוך input.

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

function EditableText(props) {
    const { value, setValue } = props;
    const [ isEditing, setIsEditing ] = useState(false);
    const inputRef = useRef(null);

    function startEdit() {
        setIsEditing(true);
    }

    function doneEdit() {
        setValue(inputRef.current.value);
        setIsEditing(false);
    }

    if (isEditing) {
        return (
            <>
                <input type="text" ref={inputRef} defaultValue={value} />
                <button onClick={doneEdit}>Save</button>
            </>
        );
    } else {
        return (
            <>
                <p>{value}</p>
                <button onClick={startEdit}>Edit</button>
            </>
        );
    }
}

ההרפתקנים שביניכם יכולים למצוא את הקוד עובד בקודסנדבוקס בקישור https://codesandbox.io/s/objective-cloud-x4zm7?file=/src/App.js.

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

  const [isEditing, setIsEditing] = useState(!value);

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

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

כמתכנתי Full Stack, חודש עבודה על באג נשמע לנו נצח. התרבות וכלי העבודה מעודדים את קצב הפיתוח הכי מהיר שאפשר ולפעמים יותר מהיר. הפיתרון הנפוץ לבעיות הוא חיפוש הודעת השגיאה ב Stack Overflow. הפיתרון הנפוץ לבניית רכיב ממשק חדש הוא חיפוש אחר החבילה החופשית שכבר מספקת את הרכיב הזה, ואפילו כשכבר כן יושבים לכתוב לבד קוד כלי הפיתוח שלנו הופכים את החוויה למיידית: שנו CSS ותראו את התוצאה מיד בדפדפן; עדכנו קוד JS ותראו את התוצאה ב HMR אפילו בלי לטעון מחדש את העמוד.

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

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

2. חיפוש מהיר של תשובה והעתקה מ Stack Overflow עלול להביא אותנו להדבקת קוד שאינו הכי יעיל למקרה שלנו, רק בגלל שזה הדבר הראשון שעבד.

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

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

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

כשרק התחיל כל ה ES6 ולמדתי על לולאת for..of החדשה כתבתי הרבה פעמים קוד שנראה כך:

const data = [10, 20, 30];

for (const x of data) {
    console.log(x);
}

שימו לב לשימוש ב const בעת הגדרת משתנה הלולאה.

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

אז אם גם אתם מעדיפים תמיד const על פני let תשמחו לגלות עוד מקום בו const עובד.

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

כי הקוד כבר כתוב.

כי אין תשתית והקוד לא מתאים לבדיקות.

כי יש משימות יותר דחופות.

כי מי בכלל יודע איך להריץ בדיקות או להקים CI.

כי אני לא יודע מאיפה להתחיל.

השבוע אני וגאבור נדבר על בדיקות בסידרת Code Maven שלו במטרה לעזור לכם להתגבר בדיוק על המכשולים האלה. אנחנו ניקח פרויקט קוד פתוח בשם kutt שזה פרויקט React/TypeScript/Node.JS שמקצר כתובות רשת (נו כמו tinyurl), ואין בו אף בדיקת Front End. בוובינר אני אראה לגאבור ולכם מאיפה להתחיל לכתוב בדיקות Front End, איך לכתוב את הבדיקה הראשונה ואיך להתחיל לבדוק דברים יותר מעניינים.

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

זה הקישור לפרויקט אחרי שהתקנתי עליו את כל הספריות איתן נעבוד: https://github.com/ynonp/kutt

וזה דף הרישום למי שרוצה להצטרף אלינו ביום חמישי ב 14:00 בצהריים: https://www.meetup.com/Code-Mavens/events/276792452/

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

ועכשיו הגיוני לשאול: לאן ממשיכים? מה הצעד הבא?

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

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

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

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

4. מתכנתים מעולים יודעים ליצור קשרים עם מתכנתים מעולים אחרים ולפתוח לעצמם הזדמנויות.

המסלול מ"טוב" ל"מעולה" הוא תהליך ארוך שבעיקר דורש התמודדות עם בעיות, רפלקסיה ופידבק על הפיתרונות ולימוד מפיתרונות של אחרים שנמשך בלולאה אינסופית. הנקודה בה דברים מתחילים להיראות קלים בעבודה היא לא הסוף - אלא נקודת ההתחלה.

נתונה הפונקציה ב TypeScript:

export const generateId = async (domain_id = null) => {
  const address = generate(
    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
    env.LINK_LENGTH
  );
  const link = await query.link.find({ address, domain_id });
  if (!link) return address;
  return generateId(domain_id);
};

1. מה הפונקציה עושה?

2. האם יש בעיה בקוד?

3. האם הבעיה צפויה לגרום לנזק בעולם האמיתי?

4. מה הייתם עושים אחרת?

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

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

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

הרבה אנשים יסתכלו על המימוש הרקורסיבי לפונקציית פיבונאצ'י בבהלה:

def fib(n):
    if n <= 1:
        return 1

    return fib(n-1) + fib(n-2)

"אין בזה שום הגיון" הם יגידו. הרי המימוש האיטרטיבי משמעותית יותר יעיל:

def fib(n):
    x, y = 1, 1
    for i in range(n):
        x, y = y, x + y

    return x

אותה תוצאה, אותו אורך של קוד והרבה פחות חישובים.

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

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

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