בס"ד

מדריך אנגולר:

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

נתחיל?

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

בוא נבין קצת יותר על מה מדובר.

אי שם בשנות התשעים, האינטרנט פורץ לחיינו. אני הייתי בתיכון. אתם חיתתם באף (חלקכם עוד לא נולד..) ומשכתם לקרן בצמה. דפדפן נטסקייפ (בטוח שלרוב הקוראים לא אומר כלום..), אקספלורר, ואתרים שנראים היום ממש ענתיקה. בזמנו לפתח אתר (לפתח – איזה מילה גדולה.., בזמנו פשוט פתחת אתר אינטרנט..) לא הצריך הרבה. בהתחלה רק html. את העימוד עשו עם טבלאות. אחר כך הפרידו את העיצוב ועברו (למה שהיום ברור מאליו) לגיליונות עיצוב נפרדים – קבצי css. אני עוד זוכר פוסטים שמלמדים איך לעבור לעמוד עם דיוים (Div's). זהו בגדול. בערך באותה תקופה יוצאת ג'אווה סקריפט, שפת תסריטים שפותחה בשבועיים. האמת שמי מתעניין כדאי לקרוא, סתם כי מעניין.

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

ג'אווה סקריפט היא שפה מבוססת תסריטים. היא די דומה לשפות תכנות אחרות בתחביר, אך היא בעיקר שונה בהתנהגות ובבסיס. שפות תכנות ותיקות יותר הן מאוד קשיחות. יש אוסף כללים מאוד ברור. בג'אווה סקריפט לעומת זאת הבלאגן אפשר לומר חוגג. זה הופך את השפה למאוד גמישה מצד אחד, אבל זה גם מפריע למתכנתים מנוסים שמגיעים משפות כמו #C, ג'אווה, וכו'. בשנים האחרונות דברים משתנים. ג'אווה סקריפט עושה שימוש בתכנות מונחה עצמים, אבל לא באופן ששפות אחרות עושות. כל זה טוב ויפה כשמדובר על משימות פשוטות ואתרים יחסית פשוטים. אבל, עם ההתפתחות של האינטרנט האתרים הפכו להיות הרבה יותר מורכבים (היום כבר לא קוראים להם אתרי אינטרנט אלא אפליקציות רשת), וג'אווה סקריפט כבר לא ממש סיפקה את הדרישות. לכן למשל, הגרסא האחרונה של ג'אווה סקריפט – ES6 נחשבת הרבה יותר מסודרת ויותר מונחית עצמים. איפה אנגולר נכנסת לתמונה? רגע רגע. מייקרוסופט הלכה צעד נוסף קדימה ופיתחה את Type Script, שבהגדרה היא super set tools for Javascript. כלומר, היא באה להרחיב את ג'אווה סקריפט, ולמעשה להכניס סדר. טייפ סקריפט מבוססת על ג'אווה סקריפט, וכאשר קובץ טייפ סקריפט מקומפל, הוא מקומפל לג'אווה סקריפט. לתהליך הזה קוראים Transpilation.

לאורך השנים נוצרו ספריות שונות שהרחיבו את ג'אווה סקריפט והפכו את הפיתוח לקל ומהיר יותר. אחת הנפוצות למשל היא jquery (שהיום היא אשכרה ענתיקה – לא להתקרב!). כמו css אגב – ספריות כמו בוטסטראפ ו – foundation חוסכות הרבה זמן פיתוח. למה להמציא את הגלגל מחדש אם מישהו כבר כתב קוד יעיל? הספריות האלה, בין אם ל – css או ג'אווה סקריפט מספקות פונקציות ומחלקות שנכתבו מראש ושמבצעות פעולות שונות שבדרך כלל משתמשים בהם כשמפתחים אתר, כך שלא צריך לכתוב אותן כל פעם מחדש. ספריות נפוצות כיום הן למשל ריאקט (חרא ספרייה, לא להתקרב!), vue – שהיא די סבבה, מבוססת על אנגולר 1, ולוקחת את הדברים הטובים מריאקט (אם יש בכלל דברים טובים בריאקט ..). עוד ספרייה שצוברת לאחרונה תאוצה היא Svelte. אבל המדריך שלי הוא על אנגולר, אז תשכחו משאר הספריות כרגע..

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

אגב, זה עוד חסרון של אנגולר – המשמעות של אתר שנכתב עם אנגולר היא שכל האתר מבוסס ג'אווה סקריפט – מה שלא ממש טוב ל – SEO, ובנוסף, דפדפנים שלא ממש תומכים בג'אווה סקריפט לא יוכלו להציג את האתר. אז למה כן אנגולר? כי עבור משימות / מטרות מסוימות הפיתוח עם אנגולר מאוד מקל על החיים ומקצר משמעותית את זמן הפיתוח. למשל בעבודה עם נתונים. יש אתרים שלכתוב עם ג'אווה סקריפט בלבד יהיה מאוד קשה, ידרוש מיומנות מאוד גבוהה בתכנות, וגם יקח הרבה זמן. עם אנגולר הדברים האלה הרבה יותר פשוטים וגם מהירים. המנגנון של כריכת נתונים (binding) למשל מאוד נוח ועוצמתי באנגולר. עבודה עם טפסים, טבלאות ונתונים מאוד נוחה ויעילה עם אנגולר – נסו לעשות את אותו הדבר רק עם ג'אווה סקריפט. חוץ מזה שבעולם האנטרפרייז והבנקאות עובדים עם אנגולר. ולא עם ריאקט. כי ריאקט זה מעאפן ורק סטארטאפים מעאפנים שעוד לא גייסו עובדים עם ריאקט. רוצים משכורת טובה ועבודה עם לקוחות גדולים? תמשיכו עם המדריך שלי. 

טוב, חפרנו. נתחיל?

התחלת עבודה:

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

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

Node js:

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

https://nodejs.org/en/

Angular cli:

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

Command line:

כיום פיתוח אפליקציות רשת מצריך שימוש ב – command line.

בהנחה שמי שקורא את המדריך נולד אחרי שנות השמונים העליזות – פעם, כשאני הייתי ילד, מערכת ההפעלה למחשב היתה דוס. התקשורת מול המחשב התנהלה בעיקר על בסיס פקודות. בלי עכבר / חלונות וכו'. היום מערכות ההפעלה כבר מבוססות ממשק גרפי, אבל מפתחים עדיין משתמשים בממשק הישן של דוס. כשמפתחים עם אנגולר (ובכלל, כשעושים את הסוויץ' מסתם בניית אתרים כתחביב, לרמה מקצועית יותר), צריך להתחיל להתרגל לעבוד עם ה – command line. למי שנולד עם חלונות וסמארטפון, הממשק יראה מאוד מיושן ולא אינטואיטיבי. אבל זה לא כזה נורא. יודעים מה – לפעמים זה אפילו נוח יותר. אתם רושמים פקודות – המחשב מבצע. פשוט, לא?

עורך:

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

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

המועדף עליי: notepad++ (עורך חינמי שעושה את העבודה). גגלו notepad ++

תורידו ותתקינו.

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

אז עכשיו, השלב הבא הוא לפתוח את הקונסולה (לפעמים אנחנו קוראים ל – command line קונסולה), ולהתחיל לחלק פקודות.

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

הפקודה הראשונה שתתנו לקונסולה היא להתקין את ה – cli (command line interface) שיהיה מעתה החבר הכי טוב שלכם בזמן שאתם מפתחים עם אנגולר.

בקונסולה רושמים:
npm install -g @angular/cli
ולוחצים Enter.

ה – cli יותקן. רק שנבין מה עשינו פה: נתנו פקודה ל – npm להתקין את אנגולר cli באופן גלובלי (-g). כלומר, הוא יהיה זמין בכל תיקייה שנפתח.

עכשיו אפשר להתחיל.

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

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

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

אז בואו נתחיל עם אפליקציה קטנה כדי להיכנס לעניינים.

דבר ראשון שאתם צריכים לעשות זה ליצור תיקייה לפרויקט (פרויקט באנגולר 2 ומעלה = הרבה קבצים…). אחרי שיצרתם תיקייה, נתתם לה שם יפה, אתם פותחים את הקונסולה. איך מגיעים? לוחצים על התחל / תיבת חיפוש ורושמים cmd, לוחצים על האייקון השחור של ה – command line

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

למשל, אם יצרתם תיקייה בשם my-new-angular-app, אתם צריכים לרשום cd my-new-angular-app וללחוץ Enter. חזרה לתיקייה קודמת אגב, מתבצע עם cd..

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

נעשה זאת על ידי הקלדה של הפקודה הבאה:

ng new my-app

my-app זה השם של האפליקציה. סתם בחרתי. אתם גם יכולים לקרוא לה שמוליק. או איך שבא לכם.

ng new shmulik-app

 אתם יכולים לקרוא איך שבא לכם לאפליקציה, אבל נהוג לתת שם שמתאר את האפליקציה. למשל:

ng new hello-world-app

לוחצים Enter וממתינים 2-3 דקות עד שה – cli ייצור עבורכם את האפליקציה.

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

מבנה אפליקציית אנגולר:

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

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

איך זה עובד בפועל? לכל קומפוננטה אנחנו מגדירים תגית html משלה. כלומר, במילים אחרות – אנגולר מרחיבה את html. עכשיו נניח יצרנו קומפוננטה שמדפיסה על המסך את הטקסט Hi Moti, וקראנו לה: hi-moti, עכשיו כל פעם שנרצה להשתמש בקומפוננטה ולכתוב על המסך Hi Moti, אנחנו פשוט נרשום בקוד:

<hi-moti></hi-moti>

פשוט, אה?

איפה אגב, נרשום בקוד?

לכל אפליקציית אנגולר תהיה תמיד את הקומפוננטה הבסיסית שאיתה מתחילה האפליקציה: root component

בתוך הקומפוננטה הזו אנחנו נקרא לשאר הקומפוננטות האחרות.

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

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

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

יש את התיקייה הראשית של האפליקצייה שיצרנו. בתוכה יש תיקיות משנה ועוד קבצים. כרגע מה שמעניין אותכם בעיקר זו התיקייה src, בה רוב העניינים קורים. אבל בו נסביר קצת על שאר התיקיות והקבצים בתיקיה הראשית. נתחיל עם e2e. שזה למעשה end to end. כלומר, בדיקות (testing) מקצה לקצה. כרגע זה עוד לא ממש מעניין אותכם. כשתתקדמו ותתחילו לפתח אפליקציות רציניות, כבר תלמדו על זה. כרגע פשוט תשאירו את התיקייה במקומה ותתעלמו. 

node_modules: התוספים שהאפליקציה משתמשת בהם. תוספים שהתקנתם מה – npm ותוספים שבאים עם האפליקציה. נלמד על זה בהמשך.

יש עוד כמה קבצים – כמו package, package-lock וכו' – גם לזה תגיעו בהמשך.

התיקייה src:

src זו התיקייה שמכילה למעשה את האפליקציה ואת הקוד. שימו לב לקובץ index.html. זהו למעשה הדף ממנו האפליקציה מתחילה. שם גם נקרא לקומפוננטה הבסיסית שממנה האפליקציה תתחיל: <app-root></app-root>

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

התיקייה app:

בתוך התיקייה הזו יש את הקוד של האפליקציה, המודולים, הקומפוננטות והשירותים השונים (services) שנכתוב לאפליקציה. רוב העבודה שלכם תהיה בתיקייה הזו.

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