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

1. איך עובדת מערכת Web

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

1. תוכנה על מחשב מרכזי (נקרא לו השרת) פועלת כל הזמן ומחכה לקבל הודעות ממשתמשים.

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

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

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

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

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

2. איך השרת יודע איזה קוד להחזיר לכל אחד?

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

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

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

3. אז מה עושים מפתחי Front End?

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

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

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

קוד צד הלקוח תמיד נכתב בשפות התכנות של הדפדפן: HTML, CSS ו JavaScript. מתכנתי פרונט-אנד יכולים לעבוד לבד ולבנות מערכות ווב ומשחקונים שיעבדו כ Standalone, כלומר ירוצו על הטלפון או הדפדפן של הגולש, יציגו מידע ויתקשרו עם הגולש אך יישארו לבד ולא יחברו בין הגולש לגולשים אחרים. אבל ברוב המקרים במערכת גדולה קוד צד הלקוח וקוד צד השרת עובדים יחד בתיאום:

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

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

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

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

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