Software

June 25, 2021

תכנות דפי אינטרנט - בקליפת אגוז

הקדמה

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

מה זה HTML - HyperText Markup Language.

מתכנתים שיודעים תמיד ייצחקו על האמרה “אני מתכנת ב-Html”.
כי HTML זו לא שפת תכנות אלה שפת תגיות - Markup language.
השפה בנויה מתגיות כאשר כל תגית מתאר מידע כלשהו - תוכן או מאפיין כלשהו על האתר כגון כותרת.
לעיתים כל תגית נקראת “אלמנט”.
זאת אומרת כאשר מדברים על תגיות HTML מדברים על אלמנטים בHTML.

שפת התגיות HTML היא היררכית - לכל אלמנט יכולים להיות 0 ילדים או יותר.
HTML מזכירה מאוד את XML.

מה זה XML?

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

<root>
  <element property="value">
    <closedElement/>
  </element>
  <element2>
  </element2>
</root>

האלמנט הראשי כאן הוא - root ומתחתיו שאר האלמנטים.
לכל אלמנט יכולים להיות מאפיינים שמתארים משהו, או אלמנטים שהם ילדיו.
כמו כן לכל אלמנט יכול להיות יותר מאלמנט אחד.

דוגמא

מסמך HTML פשוט:

<!DOCTYPE html>
<html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
</html>

מסמך ה-HTML הוא ה-Document Object Model או בקיצור ה-DOM.
ה-DOM הוא מסמך שמתאר את התוכן ומתאר את ההיררכייה בין האלמנטים.

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

בדוגמא יש לנו כמה תגיות חשובות -

DOCTYPE - אומר שקיים לנו כאן HTML.
html - התג הראשי שמייצג דף.
body - התגית שכותבים בה את התוכן.

ולתוכן יש לנו שני תגיות:

h1 - מייצג כותרת, כמו כן ניתן לכתוב h2, h3 וכדו’…
p - פסקה לטקסט, תמונות וכדו’…

מה זה CSS - Cascading Style Sheets

CSS הוא הכלי שנותן לנו ניצוץ עיצובי יפה לדפי ה-Html.
השפה היא מאוד פשוטה להבנה אך קשה למימוש - יש בה הרבה אלמנטים ודרך לייצג אלמנטים.

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

למשל:

h1 { 
  text-align: center;
}
p {
  color: red;
  text-align: center;
}

יש פה שני חוקים - אחד לאלמנט p שמתאר פסקאות ואחד אלמנט h1 שמתאר כותרות גדולות.
המאפיינים שאנחנו משנים הם:

מרכוז התוכן.
צביעת התוכן באדום.

בלי CSS:

עם CSS:

מה זה Javascript?

חוץ מדבר מתועב? סתם…
אני לא מעריץ גדול של JavaScript - במיוחד אחרי שהתעסקתי ב-“Vanilla Javascript”.
Vanilla JavaScript - שפת התכנות ללא תוספים.

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

אין קשר בין שפת Java המאוד מוכרת לשפה Javascript.
השם נבחר כדי לתת לשפה פופולריות בקרב מתכנתים.

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

למה Javascript?

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

דוגמא

מקרה קלאסי זה להסתיר תוכן, למשל כפתור שמסתיר או מציג ספויילרים:

באופן טכני - אנחנו ניגשים למסמך ומוצאים את האלמנט ע”פ ערך מסוים ומסתירים אותו ע”י גישה למאפיין תצוגה.
אם אנחנו שמים בתצוגה “כלום” אז הוא מוסתר!
ככה זה ב-JS:

1	document.getElementById('mainText').style.display= 'none';

מאיפה כל זה התחיל

הכל התחיל בתחילת שנות ה-90 בזכות בחור בשם Tim Berners-Lee.
הוא עיצב את הפרוטוקולים החשובים ביותר שיש לנו עד היום - HTML, URI ו-HTTP.

ניתן לקרוא את ההצעה המקורית כאן

URI - Uniform Resource Identifier או URL.

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

1
2
3

mailto:ABC.DEF@example.com

https://john.doe@www.example.com:123/forum/questions/?tag=networking&order=newest#top

*הדוגמאות נלקחו מויקיפדיה.

למשל כתובת האתר היא URL:

HTTP - Hypertext Transfer Protocol

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

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

GET - תביא לי מידע
POST - תיקח את המידע הזה
DELETE - תמחק את המידע הזה

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

כשהשרת מגיש דף חצי מלא וממלא אותו רק בצד הלקוח זה נקרא “רנדור צד לקוח”.
נפוץ מאוד באתרי אינטרנט שמדמים דף אחד בלבד, תבנית אחת ותוכן פנימי מתחלף כגון Facebook.

Javacsript

בזכות Netscape ומתכנת בשם Brandan Eich נולדה שפה חדשה לעולם שעושה טרור עד היום הזה!
היא נבנתה ב-10 ימים בלבד!
ולקח לאנושות 25 שנה לחסל אותה! אוו שפה ארורה.

השפה הזו נקראה Mocha ואז עברה לשם -LiveScript כשבסוף הציעו את השם JavaScript.
וכמו כל דבר גדול בעולם הזה גם השפה הזו התקבלה לסטנדרט, ב-1997 Netscape העבירה את הניהול ל-ECMA.
גוף אירופאי לסנדרטיזציה, הסטנדרט נקרא ECMAScript.

ב-2005 קרתה מהפכה נוספת בשם AJAX - Asynchronous Javascript and XML.
ניתן לקרוא את הדף המקורי כאן

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

אני חושב שכל ילד ומבוגר חווים את זה במחשב המודרני - משאבים שנטענים בזמן ריצה ולא הכל מראש.
זו התפתחות מאוד משמעותית שהובילה את העיצוב לדפי האינטרנט שיש לנו היום,
לעיצוב חלק מה-Frameworkים שמנהלים לנו את האתרים: Angular, Vue.JS, React.JS וכדו’…
Framework הוא כמו תיק-כלים שעוזר לנו לבנות קוד בצורה יותר קלה.

התפתחות הדפדפנים

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

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

לא אזכיר את כל הדפדפנים אבל עד מהרה (כמה שנים) התפתחו דפדפנים שתמכו בכמה מערכות כגון ה-Lynx.
ואז מיקרוסופט נכנסו לתחום עם Internet Explorer ופתחו את השוק למלחמת הדפדפנים!

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

בין הדפדפנים שלא הזכרתי: NetScape, Safari, IBM WebExplorer.
כמו כן היו טכנולוגיות שלא נגעתי בהן : Flash, ActiveX, Silverlight וכדו’…

Netscape

IBM WebExplorer

גוגל כרום

אז מה קיים כיום?

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

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

ומבחינה טכנית (למתכנתים)

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

ספריות JS

מבחינת הצד לקוח - כמות הספריות והמתודולוגיות רק גדלה וקיים בלבול רב היום.
איזה ספרייה להשתמש בה, מה זה REACT, למה צריך REACT NATIVE, מה זה Web Progressive apps וכדו’…

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

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

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

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

1 2	<RegistrationForm username="...." isPasswordHidden="true" onSubmit="submitForm"> </RegistrationForm>

ספריות CSS

CSS הוא מורכב אך דומה להתפתחות הגראפיקה הממוחשבת עוד בשנות ה90 המוקדמות.
מי שלמד OpenGL יודע שזה התחיל בתור ספריה מאוד לא מודולרית,
החוסר העיקרי היה החוסר ביכולות הדינאמיות בבניית הגראפיקה - במילים אחרות חוסר היכולת לתכנת את כרטיס המסך.
הוספת היכולות הדינאמיות אפשרו למתכנתים להוסיף אפקטים - טשטוש, מאסקינג, Toon Shading וכדו’…

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

כמו כן יש לספריות CSS מספר מתודולוגיות שונות:

הוספת עיצובים - מוסיף עיצובים לאלמנטים ככה שאנחנו לא צריכים להגדיר חוקים משלנו.
תוספת מעל CSS - כגון SASS.
טכנולוגיות כאלו בד”כ מוסיפות עוד יכולות שאין ב-CSS.
ספריות JS-CSS.
שליטה בעיצוב בעזרת JS במקום CSS.

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

מה העתיד צופה לנו?

אם אתם חושבים שהגלגול של הטכנולוגיה השאיר כמה מתודולוגיות מאחור - אתם טועים.
Server-Side Rendering עדיין חי ובועט.
Client-Side Rendering ממשיך להתפתח בקצב מאוד מהיר.
ובשנים האחרונות ראינו התקדמות מרשימה מאוד בכלים שנותנים לנו לבנות אתרים.

שיפור ביצועי מנועי ה-JS

v8 - מנוע ה-JS של גוגל.

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

אלטרנטיבות אחרות ל-JavaScript

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

יותר שימוש באפליקציות טלפוניות

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

אבל זה לא עזר לפתור את כל הבעיות - ההתאמה לפלאפון הייתה נחמדה אבל עדיין הובסה ע”י אפליקציות:
בביצועים, בהתאמה ובשימוש.
Web Progressive Apps באים לעזרה!
האפליקציות האלו הן אתרים לכל דבר שעושות שימוש נרחב יותר ביכולות הדפדפנים על מנת לתת חווית משתמש כמו “אפליקציה”.

התפתחות שפות תכנות רבות

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

חוץ מהיכולות שהזכרתי הטכנולוגיה הזו
מתכנתים לא צריכים יותר לזנוח את השפה האהובה עליהם ולתכנת ב…JS….