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

עם השידרוג ל Webpack 4 גם כל ההגדרות של הכלי הפכו הרבה יותר פשוטות והיום בהרבה פרויקטים כבר לא צריך להתחיל עם משהו גדול כמו create-react-app ואפשר יחסית בקלות לבנות לעצמכם קובץ הגדרות Webpack שיגדל יחד עם הפרויקט שלכם.

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

מי מהיר יותר- אנגולר או React? ומה יותר בטוח- קוד פתוח או קוד סגור? ומה, לא שמעתם ש MySQL כבר מת, וכולם עברו ל Mongo?

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

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

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

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

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

הם לא.

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

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

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

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

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

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

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

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

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

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

אם תפעילו את Express Generator בלי לציין View Engine תקבלו פרויקט שמשתמש ב View Engine בשם Pugs, אבל פעם קראו לו Jade והרבה אנשים ממשיכים עם השם הישן. מדובר על מנוע תבניות שבגדול הוא ממש נוח במיוחד בהשוואה ל EJS.

קחו דף HTML סטטי לדוגמא:

<div>
  <h1>Ocean's Eleven</h1>
  <ul>
    <li>Comedy</li>
    <li>Thriller</li>
  </ul>
</div>

אנחנו יכולים לכתוב אותו ב Jade ולקבל דף הרבה יותר נקי:

div
  h1 Ocean's Eleven
  ul
    li Comedy
    li Thriller

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

<div>
  <h1>Ocean's Eleven</h1>
  <ul>
    <% items.forEach(function(item) { %>
        <li><%= item %></li>
    <% }) %>
  </ul>
</div>

ואותו דף עם רשימה דינמית ב Jade:

div
  h1 Ocean's Eleven
  ul
    each item in items
    li= item

או קוד עבור קישור ב EJS:

<a href="<%= link.href %>"><%= link.text %></a>

לעומת Jade:

a(href=link.href)= link.text

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

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

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

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

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

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

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

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

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

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

1. מערכת לניהול Affiliates- אפשר להירשם אליה ולהגדיר Affiliate חדש והמערכת כבר תנפיק אוטומטית את הלינק לתת לאותו Affiliate ותגיד לכם כמה ערוץ המכירה הזה היה אפקטיבי.

2. מערכת CRM (כן, עדיין אנשים משתמשים בכאלה). תראו לדוגמא את Powerlink CRM הישראלים.

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

4. מערכת הזמנות לאירועים, כולל אישור הגעה בווטסאפ.

5. מערכת ניהול יומנים לחדרי בריחה (או לספרים, או למטפלים הוליסטיים).

6. מערכת לפיתוח בוטים לטלגרם. כמו כמו זה: https://instamake.io/bots.html

7. מערכת לניהול ושליחת וידאו- אתה מעלה וידאו ויכול להטמיע אותו באתרים. קצת כמו יוטיוב אבל עם אפשרות להגבלת גישה, לאנאליטיקס וכו'. כמו זה: https://wistia.com/

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

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

רק תעשו לי טובה, אל תחכו לרעיון טוב. הרבה יותר משתלם לקחת רעיון ולעשות אותו טוב.

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

במקביל אנחנו חיים בתקופה של פיצולים אינסופיים- עבודה שבעבר היתה נעשית על ידי מתכנת PHP ו DBA נותנת היום פרנסה למפתחת Front End, מעצבת, מפתחת Back End, יועץ לשיפור ביצועים, מומחית אבטחת מידע וכמובן אחראי הנגישות. אז נכון שלאנשי ה PHP והאורקל יש היום פחות מה לעשות, אבל אם הם השכילו לראות בזמן את השינויים ולמצוא לעצמם תפקיד בסיבוב הנוכחי מצבם לא רע בכלל.

אבל גם בתוך התפקידים החדשים יש לנו אינספור פיצולים- מתכנת React לעומת מפתחת Angular לעומת איש Vue. אנשי ה Mobile Web עם החיים המאתגרים שלהם ובצד השני מעצבים שגם כותבים HTML/CSS ו JavaScript. מתכנתי TypeScript ויש לי גם חבר שכותב ב Closure Script. וכל אחד כזה חי בעולם שלו עם המומחיות שלו ועם הבלוגים שלו.

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

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