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

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

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

import React, { useEffect } from 'react';

// trackedRef is a reference to a DOM element
export default function ResizeHandler({ trackedRef }) {
  useEffect(() => {
    const resizeObserver = new ResizeObserver(() => {
      const height = trackedRef.current.scrollHeight;
      console.log(`Your new height is: ${height}`);
    });
    resizeObserver.observe(trackedRef.current);

    return function cancel() {
      resizeObserver.disconnect();
    }
  }, [trackedRef]);

  return <></>;
}

רואים את הבאג? מוזמנים לשתף בתגובות ולהיזהר מסכינים חדות.

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

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

השבוע אנחנו הולכים לתקן את זה.

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

1. מה זה OAuth, מה זה OpenID Connect, ותכל׳ס איך זה עובד.

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

3. נבנה בעזרת Auth0 שרת API שרק משתמשים רשומים יכולים לפנות אליו.

4. נבנה לקוח React שיאפשר למשתמשים "להתחבר" למערכת ולבצע פעולות בשרת ה API.

בדרך נדבר על JWT, Access Tokens, ID Tokens, Refresh Tokens, על ניהול Session בעזרת Cookies או Local Storage, וכל שאלה אחרת שתהיה לכם בנושא הזדהות.

הוובינר יערך בזום ביום חמישי הקרוב ה 2/6 בשעה עשר בבוקר. לפרטים והרשמה בחינם הכנסו לדף הוובינר בקישור:

https://www.tocode.co.il/workshops/114

פוסט זה הוא חלק שני של מדריך הקמת יישום React ו Rails ב Rails 7. אם פספסתם החלק הראשון זמין בקישור:

https://www.tocode.co.il/blog/2022-05-react-rails-7-vite-rails

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

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

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

Warning: Invalid DOM property `class`. Did you mean `className`?

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

import "./styles.css";

export default function App() {
  return (
    <div class="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

ל div המרכזי יהיה את הקלאס App.

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

export default function App(props) {
    const { class } = props;
}

שלא היה עובד בגלל ש class זו מילה שמורה.

וכן ברור שהיינו יכולים לכתוב במקום משהו כזה:

export default function App(props) {
    const { class: className } = props;
    // now I use className inside the component, to handle the "class" from outside
}

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

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

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

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

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

1. לכתוב אתר בסיסי עם מערכת ניהול

2. לכתוב רשת חברתית

3. לכתוב אתר כמו ויקס - שכל אחד יכול ליצור תוכן לעצמו

4. לכתוב מערכת של חנות דיגיטלית

5. לכתוב API ולתקשר איתו מתוך אפליקציית Front End

6. לכתוב Rails Engine המשותף למספר פרויקטים

7. לכתוב ולהפיץ Rails Gem

8. לשכתב את ה Rails Gem שלך כשיש לך הרבה משתמשים ואתה מגלה שה API כבר לא מספיק טוב

9. לכתוב מערכת Real Time Web בה גולשים משתפים תוכן ורואים תוכן של אחרים בזמן אמת

10. לתקן בעיות אבטחה בשרת ריילס שנפרץ

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

12. לתקן בעיות ביצועים ו Deadlocks במערכת גדולה עקב עומס משתמשים

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

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

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

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

זה מרגיש כאילו רק אתמול פרסמתי כאן מדריך איך לעבוד עם React ב Rails 6 והנה יצאה ריילס 7 עם גישה חדשה לגמרי לעבודה עם JavaScript. בפוסט זה נראה את הג'ם vite-ruby שמאפשר לנו לבנות אפליקציית ריאקט עם ריילס 7 גם בלי webpacker.

השינוי הגדול המרכזי של Rails 7 ביחס לעבודה עם JavaScript הוא ההחלטה לוותר על שלב ה Precompilation. הטענה של DHH היא שהטכנולוגיות בשלות: עם HTTP Push אפשר להחליף את ה Bundling בלי לאבד ביצועים, ודפדפנים יודעים כבר להריץ JavaScript ברמה טובה כך שלא צריך Babel. נכון, אנחנו מפסידים את scss אבל אולי זה לא סוף העולם.

הקורבן הגדול ביותר של ההחלטה הזאת הוא דווקא JSX, כי בלי pre-compilation אין מי שיהפוך את ה JSX-ים לקוד JavaScript רגיל. לפני כמה ימים כתבתי על ספריית htm והיא יום אחד תהיה המפתח לחיבור. הבעיה שכרגע העבודה עם jspm ובאופן כללי עם import maps לא מספיק יציבה - הרבה מודולים ב jspm ייכשלו אם ננסה להוריד אותם אלינו, ואחרים ייכשלו בכל מקרה. כן אפשר לתקן כל תקלה, אבל אם אתם רוצים שהכלים יעבדו בשבילכם ולא אתם בשביל הכלים אני ממליץ בינתיים לחכות עם import maps.

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

1. נבנה אפליקציית ריילס ואפליקציית ריאקט שמחוברת אליה באמצעות הג'ם vite-rails.

2. נעביר משתנים מריילס לריאקט באמצעות הג'ם gon.

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

מוכנים? בואו נצא לדרך.

בתיקיה חדשה ניצור 3 קבצים. הראשון הוא Dockerfile:

FROM ubuntu:22.04

WORKDIR /app

COPY . .

RUN chmod +x /app/startup.sh

CMD ["/app/startup.sh"]

השני נקרא startup.sh ומכיל את התוכן הבא:

#!/bin/bash

echo Hello World

והשלישי docker-compose.yml עם התוכן הבא:

version: "3.9"

services:
  app:
    build: .
    volumes:
      - .:/app

אני מפעיל:

$ docker compose build
$ docker compose run

ומקבל את השגיאה:

[+] Running 1/1
 ⠿ Container chmod-in-run-app-1  Recreated                                                                         0.2s
Attaching to chmod-in-run-app-1
Error response from daemon: failed to create shim: OCI runtime create failed: container_linux.go:380: starting container process caused: exec: "/app/startup.sh": permission denied: unknown

מה קרה שם? איך נתקן?

לא רואה את זה

לא רואה את זה

לא רואה את זה

לא רואה את זה

לא רואה את זה

רואה את זה

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

מהר מאוד הם מגלים שידע לא מדבק.

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