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

למרות שאין בעיה להמשיך לעבוד עם Class Components, קורה לפעמים שנמצא דוגמא ברשת של Class Component ונעדיף להפוך אותה ל Function Component לפני שמשלבים אותה ביישום שלנו.

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

https://github.com/josdejong/jsoneditor/tree/develop/examples/react_demo

והקובץ המרכזי ממנה הוא הפקד הבא:

import React, {Component} from 'react';

import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css';

import './JSONEditorDemo.css';

export default class JSONEditorDemo extends Component {
  componentDidMount () {
    const options = {
      mode: 'tree',
      onChangeJSON: this.props.onChangeJSON
    };

    this.jsoneditor = new JSONEditor(this.container, options);
    this.jsoneditor.set(this.props.json);
  }

  componentWillUnmount () {
    if (this.jsoneditor) {
      this.jsoneditor.destroy();
    }
  }

  componentDidUpdate() {
    this.jsoneditor.update(this.props.json);
  }

  render() {
    return (
        <div className="jsoneditor-react-container" ref={elem => this.container = elem} />
    );
  }
}

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

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

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

בישיבה הבאה שלכם, בהאקתון הבא שלכם, ב Team Programming או Code Review הבא שלכם או אפילו בשבוע עבודה הרגיל אצכלם בעבודה נסו לשים לב: מי האנשים שאי אפשר בלעדיהם? מה הם עשו מיוחד השבוע? ומה אני יכול לנסות לעשות שבוע הבא כדי להיכנס למועדון הזה?

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

דוגמא ראשונה היא קישור בשם 37 Essential JavaScript Interview Questions and Answers. השאלה הראשונה שם היא מה הבעיה עם הבדיקה:

typeof bar === "object"

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

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

מספר 3 ברשימה מכיל רשימה של 50 שאלות מראיונות (אתר בשם אדוריקה). הם פחות בקטע של להראות קטעי קוד ובמקום שואלים שאלות כמו "מה ההבדל בין call ל apply". עכשיו צריך להגיד זאת שאלה מצוינת ולדעתי כל מתכנת JavaScript צריך להכיר את התשובה, ועדיין אם אני צריך להחליט עם איזה מתכנתים לעבוד קשה להאמין שהייתי משתמש בשאלה כזו בתור איזשהו פרמטר. אותו דבר לגבי "איך לרוקן מערך ב JavaScript" או מה עושה Object.create.

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

במקום לשאול מה עושה Object.create אולי עדיף לשאול - הפקודה Object.create יוצרת אוביקט חדש שה Prototype שלו מוגדר להיות אוביקט אחר. באיזה מצבים נראה לך שהיינו משתמשים בה? יש לך רעיון איך לממש אותה מאפס?

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

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

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

השוו את זה לפונקציה toJS של Immutable.JS - הפונקציות fromJS ו toJS משמשות להמרת מבנה נתונים ממבנה של Immutable JS למבנה רגיל של JavaScript, המרה שמצריכה סריקת עומק של כל מבנה הנתונים והעתקת כל הנתונים. אלה פונקציות שאם תשתמשו בהן יהרגו את הביצועים של היישום שלכם, ובחיבור לריאקט עושות נזק כפול כי הן מקלקלות את ה Referential Equality וגורמות לזה שצריך לרנדר מחדש את כל הקומפוננטות שלנו (כי אנחנו לא יודעים מה באמת השתנה).

מה שיותר גרוע הוא של Immutable.JS יש למעשה שתי פונקציות המרה: האחת נקראת toJS והשניה toJSON, עם הבדל קריטי ביניהן. הפונקציה toJS מבצעת העתקה עמוקה ולעומתה toJSON מבצעת העתקה שטחית רק של הרמה הראשונה באוביקט.

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

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

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

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

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

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

נ.ב. במרץ אני מתכנן לפתוח מסלול לימוד כזה שישלב עבודה על פרויקט-צד, ליווי של מנטור ומיטאפים וירטואלים כדי ללמוד ולהשתפר בריאקט. המסלול מתאים למתכנתים שכבר יודעים ריאקט, או למתכנתי JavaScript שרוצים להיכנס לעניינים ויימשך חודשיים. לפרטים שווה להעיף מבט בדף הקורס בקישור: https://www.tocode.co.il/live_courses/1

בקורס פייתון שלימדתי השבוע חשבתי שיהיה נחמד לשלב שימוש ב Google Translate באחד התרגולים. לפני הקורס חיפשתי בגוגל חבילה לגשת מ Python ל Google Translate וכמובן תוצאה ראשונה היתה חבילה בשם googletrans.

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

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

ue to limitations of the web version of google translate, this API does not guarantee that the library would work properly at all times (so please use this library if you don’t care about stability).

זה קטן, זה בסוגריים, וזה מסביר הכל. החבילה היא לא דרך רשמית לגשת ל Google Translate. כותב החבילה ניגש לממשק ה Web של השירות, וכשניסינו להריץ את השאילתות מהכיתה הממשק זיהה אותנו בתור מתקפת DOS וחסם את הנתב הכיתתי.

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

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

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

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

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

const initialState = {
  visibleCards: new Set(),
  currentTurn: new Set()
};

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

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

const reducer = produce((state, { type, payload }) => {
  const { cards } = payload;
  if (state.currentTurn.size === 2) {
    startNewTurn(state, cards);
  }

  if (type === "click") {
    const { idx } = payload;
    if (!state.currentTurn.has(idx) && !state.visibleCards.has(idx)) {
      state.currentTurn.add(payload.idx);
    }
  }
});

function startNewTurn(state, cards) {
  const turnCards = Array.from(state.currentTurn);
  if (turnCards.every(c => cards[c] === cards[turnCards[0]])) {
    state.visibleCards = new Set([...state.visibleCards, ...state.currentTurn]);
  }
  state.currentTurn = new Set();
}

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

function MemoryGame(props) {
  const { cards } = props;
  const [state, dispatch] = useReducer(reducer, initialState);

  function cardClasses(state, idx) {
    let res = "card";
    if (state.visibleCards.has(idx) || state.currentTurn.has(idx)) {
      res += " visible";
    }
    return res;
  }

  return (
    <div className="game">
      <ul>
        {cards.map((val, idx) => (
          <li
            className={cardClasses(state, idx)}
            onClick={() => dispatch({ type: "click", payload: { idx, cards } })}
          >
            {val}
          </li>
        ))}
      </ul>
    </div>
  );
}

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

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

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

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

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

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

המודול csv של פייתון נותן לנו פיתרון ממש פשוט כשאנחנו רוצים לקרוא קובץ CSV ולגשת לשדות שלו מתוך תוכנית פייתון. שימו לב לתוכנית הדוגמא הבאה שקוראת קובץ בשם my.csv:

import csv
with open('my.csv', encoding='utf8', newline='') as csvfile:
    reader = csv.reader(csvfile)
    for row in reader:
        print(row[-1])

נקרא את התוכנית שורה אחר שורה:

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

2. הפקודה השניה פותחת את הקובץ my.csv ושומרת את הקישור אליו במשתנה בשם csvfile. בגלל שהקובץ נפתח בתוך בלוק with, בסיום הבלוק באופן אוטומטי הקובץ ייסגר בסיום הבלוק. מילת המפתח encoding תעזור לפייתון להתמודד עם קובץ בכל שפה ומילת המפתח newline גורמת לקובץ לא לטפל בשורות חדשות (כי המודול CSV יהיה זה שיטפל בהן).

3. הפקודה השלישית יוצרת אוביקט מסוג CSV Reader. אוביקט זה מקבל חיבור לקובץ (או מידע דמוי-קובץ) ויאפשר לנו לקרוא את המידע שורה אחר שורה. האוביקט בעצם הופך את המידע מ"שורת טקסט" ל"רשימת ערכים".

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

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

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

למידע נוסף על CSV Reader שווה להעיף מבט בתיעוד בקישור: https://docs.python.org/3.8/library/csv.html#id3

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

להרבה אנשים שמתחילים עם ריאקט יצא לעשות את הטעות הבאה ב Class Component:

class Counter {
  constructor() {
    this.state = { count: 0 };
  }

  inc = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <button onClick={this.inc}>{this.state.count}</button>
    );
  }
}

שזהה לטעות הבאה ב Functional Component:

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

  function inc() {
    setCount(count + 1);
  }

  return (
    <button onClick={inc}>{count}</button>
  );
}

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

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

  function inc() {
    const nextValue = count + 1;
    setCount(nextValue);
    setCount(nextValue);
  }

  return (
    <button onClick={inc}>{count}</button>
  );
}

או בגירסת הקלאסים:

class Counter {
  constructor() {
    this.state = { count: 0 };
  }

  inc = () => {
    const nextValue = this.state.count + 1;
    this.setState({ count: nextValue });
    this.setState({ count: nextValue });
  }

  render() {
    return (
      <button onClick={this.inc}>{this.state.count}</button>
    );
  }
}

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

  inc = () => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
  }

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