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

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

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

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

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

אז למה בעצם להתאמץ?

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

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

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

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

Nokia, our platform is burning.

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

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

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

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

2. ללמוד, גם (ובמיוחד) דברים שלא קשורים לעבודה.

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

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

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

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

אפשר להתקדם בלי לזוז. ושווה להתאמץ בשביל זה, כי האלטרנטיבה קשה יותר.

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

This crate provides a library for parsing, compiling, and executing regular expressions. Its syntax is similar to Perl-style regular expressions, but lacks a few features like look around and backreferences.

מה הם אותם look around features ואיזה כוחות על הם מוסיפים לביטויים רגולאריים? בואו נגלה.

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

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

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

קוד הטייפסקריפט הבא לא מתקמפל, למרות שאין בו שום דבר לא בסדר:

type AB = "a"|"b";

function test(x: AB): number {
    if (x === "a") {
        return 1;
    } else if (x === "b") {
        return 2;
    }
}

זה הלינק לפלייגראונד אם אתם צריכים הוכחה: https://www.typescriptlang.org/play?#code/C4TwDgpgBAggQlAvFARAQxQHxQIxQbgChCAzAVwDsBjYASwHsKpgIBnYACgA8AuWOAJR8KZALY4IAJygBvQlAVRaJKNySJk6FANnzF+yRGBlJTAIxF9AXygQANq2jLVXdZrw65+g0ZNMATJaKVoRWQA

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

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

function test(x: AB): number {
    switch(x) {
        case "a": return 1;
        case "b": return 2;
    }
}

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

במשבצת התיקונים הפחות טובים אפשר למצוא את זה:

function test(x: AB): number {
    if (x === "a") {
        return 1;
    } else if (x === "b") {
        return 2;
    } else {
        // never happens
        return 0;
    }
}

שמתקן את הבעיה אבל לא מגן עליי משינוי עתידי ב AB.

וגם את זה שסובל מאותה בעיה:

// @ts-ignore
function test(x: AB): number {
    if (x === "a") {
        return 1;
    } else if (x === "b") {
        return 2;
    }
}

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

function test(x: AB): number {
    return {
        "a": 1,
        "b": 2,
    }[x];
}

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

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

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

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

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

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

המחשבה מאחורי REST היתה גאונית בפשטותה - פרוטוקול שאחראי על העברת State משרת ללקוח, ובשמו המלא Representational State Transfer. הלקוח נכנס לקישור שמייצג State מסוים ביישום, והשרת בתגובה שולח את כל המידע של הסטייט הזה בדרך כלל כאוביקט JSON.

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

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

1. למערכת יש מספר לקוחות (למשל Web ו Mobile), וכל אחד מהם צריך להציג מידע שונה, כלומר State-ים שונים.

2. מאחר וכל State מיוצג ב REST על ידי Endpoint בשרת, אנחנו נשארים לבחור אחת משתי גישות בעייתיות - או שנבנה Endpoints נפרדים בשרת לכל יישום, או שכל יישום יצטרך לגשת לכמה Endpoints כדי למשוך את המידע שהוא צריך.

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

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

ביום חמישי הקרוב בתאריך 6/10 בשעה 10:00 שעון ישראל אעביר וובינר של שעה על GraphQL בו אספר על הפרוטוקול ואראה איך לקחת יישום Node.JS שבנוי בגישת REST ולהפוך אותו ל GraphQL באמצעות כתיבת Schema ו Resolver.

הוובינר יעבור בזום ואתם מוזמנים להירשם ולהצטרף בקישור: https://www.tocode.co.il/workshops/123

לפני כמה ימים שוחררה גירסה 6.4 של Qt ובעיניי הפיצ'ר הכי מלהיב שם הוא התמיכה המובנית ב Web Assembly. היום מה שכבר קיים ועובד ב Qt הוא:

1. תמיכה מלאה של Qt Creator ב Web Assembly, כך שאתם יכולים לקחת כל פרויקט Qt שכבר יש לכם (ווידג'טס או QML) ופשוט לקמפל אותו לקובץ wasm.

2. אירגון של כל הקוד שמסביב כך שהבניה מייצרת לכם תיקיית dist עם קובץ HTML ראשי וקבצי JavaScript, כך שכל מה שצריך לעשות זה לטעון את הקובץ HTML והתוכנית רצה בדפדפן, ונראית בדיוק כמו שהיא נראתה כאפליקציית Desktop.

3. מימוש של קוד עוטף סביב מנגנונים של הדפדפן, למשל בשביל לקרוא קבצים, לפתוח בקשות רשת או כל דבר אחר שאפליקציית Desktop היתה עושה. אז עכשיו קריאה לפונקציה QFileDialog::getOpenFileContent בעצם משתמשת ביכולות של הדפדפן כדי להקפיץ למשתמש חלון לבחירת קובץ ולטעון אותו.

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

דמו? ברור. זה קוד Qt שבניתי ב Qt Creator. התוכנית היא בסך הכל קובץ אחד main.cpp שבונה מונה לחיצות:

#include <QApplication>
#include <QtWidgets>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWidget w;
    auto clicked = 0;
    auto btn = new QPushButton("Add 1");
    auto result = new QLabel(QString("Button clicked %1 times").arg(clicked));
    w.setLayout(new QVBoxLayout());
    w.layout()->addWidget(new QLabel("Hello World"));
    w.layout()->addWidget(result);

    w.layout()->addWidget(btn);

    QObject::connect(btn, &QPushButton::clicked, [&]() {
        clicked++;
        result->setText(QString("Button clicked %1 times").arg(clicked));
    });

    w.show();
    return a.exec();
}

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

אחרי קומפילציה מקבלים קובץ wasm ענקי, שני קבצי js וקובץ html. אפשר לראות את כולם בריפו שיצרתי כאן: https://github.com/ynonp/qt-wasm-demo/

ודמו רץ בגיטהאב פייג'ס בקישור הזה: https://ynonp.github.io/qt-wasm-demo/

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

אם גם אתם רוצים לשחק עם הגירסה כל מה שצריך זה להוריד ולהתקין את Qt מהקישור הזה: https://www.qt.io/download-qt-installer

ולהתקין את Emscripten מהקישור הזה: https://emscripten.org/docs/getting_started/downloads.html

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

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

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

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

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

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

type Upsert<FullType, T> = T extends { id: number }
    ? Partial<FullType>
    : Omit<FullType, "id">;

מאוד רציתי לקחת טיפוס כזה:

type MyStuff = {
    id: number,
    foo: number,
    bar: number,
}

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

function upsert<T>(thing: Upsert<MyStuff, T>) {}

// I wanted these to compile:
upsert({ id: 10, foo: 5 });
upsert({ foo: 10, bar: 20 });

// And this to not compile:
upsert({ foo: 5 });

וכמובן שזה לא עובד.

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

הקוד הזה כבר עובד:

type Upsert<FullType, T> = T extends { id: number }
    ? T & Partial<FullType>
    : T & Omit<FullType, "id">;

type MyStuff = {
    id: number,
    foo: number,
    bar: number,
}

function upsert<T>(thing: Upsert<MyStuff, T>) {}

// Compiles
upsert({ id: 10, foo: 5 });
upsert({ foo: 10, bar: 20 });

// Doesn't compile - missing "id" or "bar"
upsert({ foo: 5 });

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

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