Dev-Time

JavaScript בעברית

קודם כל ברוכים הבאים! , את המאמר הראשון שלי החלטתי לכתוב בהשראה מסיפור שאני מכיר מקרוב הסיפור שלי :).

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

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

ובעצם גם אם נלמד במוסד או מסגרת, קורס מתקדם, שיעור פרטי וכו…, אין ספק שנרחיב את הידע אבל כשנגיע למקום העבודה יכול להיות שלמדנו קורס על React.Js ואנחנו פשוט עפים על הקוד, אבל כשהגענו למקום העבודה פיתחו ספריה בשם whatEver.js (לא באמת קיימת ספרה כזאת, כן!?) שהיא הדבר הבא ומקום העבודה דורשת שנעבוד רק עם הספרייה החדשה. ושוב חוזרים ללמוד לבד כי לא נכנס לקורס בכל פעם שתקום ספריה חדשה.

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

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

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

לפני שנמשיך לנושא המרכזי כמה הערות:

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

( אני יושב(גם ברגע זה) בין 8-9 שעות ביום, וזה משתלם 🙂 ).

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

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

פרונט-אנד – JavaScript | HTML | CSS

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

בצד של הBack-End, אנחנו מדברים על שרת(מחשב) שמספק שרותים.

השרת מתוכנת לקבל בקשות ממפתחי הפרונט, לטפל בבקשה, להחזיר תשובה אלינו מפתחי הפרונט. לדוגמא אנחנו מפתחים דף Log-In: (דוגמא מעולה לתאר את חלוקת המשימות, איזה פעולות אנחנו אמורים לפתח ואיזה פעולות מתבצעות בצד השרת)

מהצד שלנו כמפתחי פרונט נתחיל ב-HTML&CSS נפתח דף המכיל -טופס, -2 שדות קלט, כפתור שליחה. נוסיף לזה קוד JavaScript שבעצם כשאר לוחצים על הכפתור -שלח-, תפעל פונקציה(כמה פעולות בבלוק אחד) שתבצע שליחת בקשה(request) לכתובת מסוימת בשרת (endpoint – לדוג’ http://server.com/login), השרת מקבל את הבקשה והתוכן שלה, בודק את תאימות שם המשתמש והסיסמא למסד הנתונים, ומחזיר לנו מפתחי הפרונט תשובה(response), המשתמש קיים או לא קיים, ואנחנו מחליטים בצד הפרונט לאשר את המשתמש או לא לאשר את ההתחברות שלו. איך שולחים בקשה נלמד בהמשך זה ממש פשוט.

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

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

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

דפדפן(browser). לדוגמה : Google Chrome

לסיכום, מה זה אומר?! ופה אתם חייבים להבין פרונט-אנד:

פרונט-אנד מפתחים רק -> JavaScript | HTML | CSS

מה סיימת? אבל מה זה angular? ומה זה React.js ? אז אני רושם פה משפט חד חלק וברור

” כל מה שאפשר לכתוב בangular/react וכל ספריה דומה… אפשר לכתוב ב JavaScript ” זאת אומרת שיש הרבה ספריות קוד כמו angular / react שנכתבו ב JavaScript ולכן כל היכולות שהספריות האלה מביאות לנו, קיימות ב JavaScript pure, בקוד הטהור שתלמדו בבסיס אפשר לעשות הכל. אז למה בכל זאת אנחנו צריכים אותם? כי אנשים מומחים מאוד מאוד כתבו הרבה קוד, פונקציות, שמיישם הרבה מתודולוגיות ועוד הרבה דברים שיקצרו וישפרו את הקוד שלנו. בעצם הספריות האלה הם סוג של קיצור דרך להגיע לתוצאות טובות יותר ביעילות ומהירות גבוהה.

חלק ב’ – טיפים:

הטיפ הראשון: אני מאוד ממליץ על קורסים שמסבירים את המנוע של השפה את הבסיס ולא קורסים של דוגמאות(קורסים שמבטיחים לכם 12 פרויקטים בסוף הקורס)! חפשו קורסים באינטרנט שמסבירים לכם איך הדברים עובדים מאחורי הקלעים, אתם תדעו להתמודד אח”כ טוב יותר.
הטיפ השני: נתקלתם במושג שאתם לא מכירים, לדוגמא grunt? אל תישארו מאחורה, וזה לא אומר לרוץ ללמוד. זה אומר לפחות לקרוא 10 דק’ להבין מזה אומר מה השימושים של זה. כדי שבעתיד בתהליך הלמידה שלכם שתגיעו למושגים האלה תגיעו מוכנים.
הטיפ השלישי: לראות כל קורס לפחות פעמים! כן, אני אישית לומד מהר, אבל עדיין אני לוקח קורס פעמיים לפחות. למה? כי בד”כ קורסים טובים שמדברים על מאחורי הקלעים מתחילים בתאוריה ורק בסוף מסבירים את היכולות של כל התאוריה, זאת אומרת שרק בסוף זה נהיה מעניין. אז מה שקורה בפעם הראשונה שרואים את הקורס לא מבינים למה אנחנו צריכים את כל התאוריה המשעממת הזאת. אז אני רואה פעם ראשונה מבין\לא מבין מתקדם מגיע לעיקר. בפעם השנייה שאני חוזר על הקורס אני מתחיל להבין למה אני צריך את התאוריה ופתאום החלק המשעמם של תאוריה נהיה מעניין יותר!.
הטיפ הרביעי: דיברתי על זה מקודם אבל זה הכי חשוב בעייני. אל תפחדו ממושגים, אל תיבהלו! אתם תפגשו הרבה מושגים מפוצצים, שהפירוש שלהם מאוד מאוד פשוט. לדוגמא: function first class – זה אומר שפונקציות מתנהגות כמו כל type אחר,  בJavaScript אפשר להשוות אותם למשתנה, אפשר להעביר אותם כפרמטר.
יש עוד הרבה מושגים שתפגשו, אבל אני מקווה שתפנימו מהמאמר הזה ערך מנטלי בראש שלכם. אתם צריכים להבין שבהתחלה תקדישו את רוב זמנכם בשביל ללמוד JavaScript, כמובן גם HTML & CSS אבל העיקר שיותר קשה להבין זה JavaScript.

כשתלמדו את הבסיס ותבינו איך הקוד שלכם מתנהג ( IIFE ,scope, closures וכד..) אתם תיגשו לכל ספריה בראש פתוח בראש קליל כי הכל בסופו של דבר זה JavaScript. 🙂

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

לידור אביטן

מפתח FullStack בחברת Intel-Security

3 comments

  • כתבה יפה מאוד לפעם ראשונה 🙂
    אגב, איך לומדים כל יום 4-5 שעות במסגרת עבודה של נגיד 8 שעות ביום? יש לך טיפ להתייעלות משמעותית או שפשוט מתפשרים על אין חיים?

    בנוסף, יש לך טיפים מעשיים למציאת משרות סטודנט בFED? (במקרה שלי נסיון של שנתיים בHTML וCSS עם הכרות ונסיון קל בjQuery)

    אני – Yarivfruend.com

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

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

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

Follow

Get every new post delivered to your Inbox

Join other followers