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

הספריה ngReact מאפשרת להוסיף פקדי ריאקט יחסית בקלות ליישום Angular.JS (כן אנגולר1, הישן...) שלכם. התבנית הבאה יכולה לתת נקודת התחלה טובה לשימוש בה.

״רוצה לכתוב לי את זה כאן?״ ״לא עזוב זה ארוך... אתקשר אליך בערב״

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

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

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

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

function myCallbackFunction() {
  $('p').text('Thanks!');
}

$('button').on('click', myCallbackFunction);

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

1. הפונקציה on מקבלת שני פרמטרים: הראשון הוא שם האירוע והשני הוא ה Callback Function. אפשר לחשוב על זה כאילו בהפעלת הפונקציה on ביקשנו מידע - וזה באמת יהיה נכון. ביקשנו לדעת מי לחץ על הכפתור. הבעיה היחידה היא שאף אחד עדיין לא לחץ על הכפתור. לכן אני מעביר את פונקציית ה״צלצל אליי בערב״, או בשמה המקצועי את ה Callback Function. כשמישהו ילחץ על הכפתור הפונקציה on תתעורר ותפעיל את פונקציית ה Callback שלי.

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

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

והנה הקוד המפורק מתוכו:

function myCallback(data) {
  $('pre').html(JSON.stringify(data));
}

$.get('https://swapi.co/api/people/1', myCallback);

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

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

function getHairColor(id) {
  function myCallback(data) {
    $('pre').html(data.hair_color);
  }

  $.get(`https://swapi.co/api/people/${id}`, myCallback);
}

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

const hairColor = getHairColor(1);
alert("Luke's hair color is ", hairColor);

אני מקווה שעכשיו אתם כבר רואים שזה לא הולך לעבוד. הפונקציה getHairColor מחזירה את הערך לפני שהיא סיימה לקבל את המידע ב Ajax. בשביל להציג את צבע השיער מבחוץ אנחנו צריכים לשנות את המבנה שלה כך שהיא תקבל Callback Function. בדיוק כמו on. בדיוק כמו get.

הנה דרך אחת בה זה יכול לעבוד:

function getHairColor(id, fn) {
  function myCallback(data) {
    fn(data.hair_color);
  }

  $.get(`https://swapi.co/api/people/${id}`, myCallback);
}

getHairColor(1, function(hairColor) {
  alert(hairColor);
});

נ.ב. בשנים האחרונות נוספו לשפת JavaScript מספר פיצ'רים שמקצרים את הכתיב שראיתם, הבולט ביניהם הוא async/await. אני מאוד ממליץ ללמוד עליהם ולהשתמש בהם כשאתם יכולים. המטרה שלי כאן היתה להראות את הבסיס עליו אותם מנגנונים עומדים, כי רק עם הבנה טובה של הבסיס אפשר להבין ולהשתמש נכון במנגנונים המורכבים יותר.

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

החידוש הכי גדול ב Bootstrap 4 הוא המעבר לגריד מבוסס Flexbox, מה שנותן לו הרבה יותר יכולות ממה שראינו בגירסאות קודמות.

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

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

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

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

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

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

המערכת לא באוויר אבל הקוד זמין בגיטהאב בקישור הזה:

https://github.com/ynonp/secure-code-livedemo-loby

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

זה דף הוובינר לפרטים והרשמה:

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

נתראה בחמישי, ינון

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

קטע הקוד הבא עובד טוב ב Chrome, Firefox ו Edge וגם על מובייל לא עשה לי עדיין בעיות. רק IE צריך להיות מיוחד:

var form = document.querySelector('#myform');
var fd = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit');
xhr.send(fd);

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

וכך נראה טופס שעבורו הקוד הזה נכשל:

<form id="theform" action="/people" method="post">
  Name: <input type="text" name="person[name]" value="John Appleseed">

  <input type="radio" name="person[sex]" value="male"> Male
  <input type="radio" name="person[sex]" value="female"> Female
  <input type="radio" name="person[sex]" value="not_specified"> (Not Specified)

  <input type="submit" name="commit" value="Create Person">
</form>

מה שמיוחד כאן זה שיש Radio Button בתור האלמנט האחרון בטופס. וברגע שהבנתם את זה ה"תיקון" קל מאוד - פשוט תוסיפו לטופס שדה input נוסף אחרי ה Radio Button. הטופס הזה למשל עובר בכל הדפדפנים:

<form id="theform" action="/people" method="post">
  Name: <input type="text" name="person[name]" value="John Appleseed">

  <input type="radio" name="person[sex]" value="male"> Male
  <input type="radio" name="person[sex]" value="female"> Female
  <input type="radio" name="person[sex]" value="not_specified"> (Not Specified)
  <input type="hidden" name="dontcare" value="dontcare" />

  <input type="submit" name="commit" value="Create Person">
</form>

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

שימוש ב jQuery.serialize היה מונע את הבאג וחוסך לי את המחקר, הגילוי העצוב וה Work Around שלא בטוח שמכסה את כל המקרים. אז כן, גם ב 2018, אם אתם יכולים להרשות לעצמכם - שימו jQuery.

אגב תיעוד של הבאג קיים ברשת כבר מ 2014 למשל בקישור הזה: https://blog.yorkxin.org/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11.html

הספריה Express של Node.js היא הדרך האהובה על מתכנתי Front End רבים לכתוב קוד צד שרת, וזה לא סתם. בהיותה ספריית Node אקספרס מאפשרת לשתף המון קוד בין צד השרת לצד הלקוח, כולל שילוב מאוד קל של Server Side Rendering בפריימוורקס שתומכות בזה.

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

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

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

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

2. איך לפתח נכון קוד אסינכרוני באמצעות Promises.

3. מהם Express Middlewares, למה צריך אותם ואיך הם עוזרים לנו לכתוב קוד נקי יותר בפרויקטים שלנו.

השתתפות בחינם אבל דורשת רישום מראש בקישור: https://www.tocode.co.il/workshops/56

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

נתראה בחמישי, ינון