לגזור ולשמור: הכלים לפרונט אנד שממש שווה להכיר

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

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

הכול מתחיל בעורך

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

תוכנה טובה לפיתוח היא כזו היודעת להתמודד עם JavaScript, CSS ו-HTML , מעבר ליכולת של פשוט ״לערוך טקסט״. התמודדות כזאת דורשת הכרת ה-syntax של כל שפה, וכוללת יכולות חשובות בצביעת תחביר (Syntax Highlighting) והשלמת קוד אוטומטית.

WebStorm

לאלו מכם המחפשים כלי המאגד בתוכו את כל הנדרש לכתיבת קוד פרונט אנד – מניהול גרסאות ועד הבנה עמוקה של קוד ויכולות בנייה מתקדמות – התכנה המבוקשת היא WebStorm. התכנה שייכת למשפחת הכלים של חברת JetBrains (לה תוכנות אחיות גם לפיתוח בשפות אחרות כמו Java, Ruby, Python ו-C). אמנם זו תוכנה בתשלום, אך ל-WebStorm יש גרסה חינמית למי שמפתח תוכנה חופשית, והנחה לסטארטאפים, תלמידים ואנשי חינוך. חסרונה העיקרי של התוכנה מתבטא בכמות המשאבים הרבים הנדרשים להפעלתה כראוי.

מבוקשת אך דורשת לא מעט משאבים, webstorm

Visual Studio Code

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

נכון לימים אלו, לאחר שימוש לאורך תקופה בעורכים רבים, החלטתי להשתמש Visual Studio Code.

כדי להשלים יכולות חסרות לעורך, התקנתי מספר תוספים שמשפרים את חווית השימוש. על אף של-WebStorm כלים רבים וטובים ביותר לעריכת קוד פרונט אנד,בחרתי ב-Visual Studio Code בזכות פשטותו, קלילותו והעובדה שהוא מופץ באופן חופשי.

לא מלוטש אך גם לא דורש יותר מידי משאבים, Visual Studio Code

מנהל חבילות

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

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

NPM

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

הידור

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

Babel

ב-2015 טולטל עולמם של מפתחי ה-JavaScript: הוכרזה גרסה חדשה לשפה, עם מפרט אדיר של תחביר ופונקציות חדשות לשפה. אך כמו כל שינוי בתחום, הדפדפנים עוד לא תמכו בכל היכולות המתקדמות הללו, ומנעו מן המפתחים ליהנות מהיכולות החדשות. לפתרון הבעיה והצלת המצב הגיע Babel: כלי היודע לתרגם JavaScript מהגרסה החדשה והמודרנית, לגרסה שהדפדפנים הישנים יוכלו להבין. הכלי צבר תאוצה ועם הזמן החל לתמוך גם בהצעות עתידיות לשפה ואף בתחבירים אשר אינם חלק מ-JavaScript התיקנית – כמו JSX מבית פייסבוק. Babel מוכר על ידי כל החברות הגדולות בעולם הווב, נתמך על ידי צוות בינלאומי של מפתחים מובילים מתחום הפרונט אנד, וזוכה לתמיכה מה-JS Foundation (העמותה של קהילת ה-JavaScript).

Autoprefixer

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

Sass

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

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

אמצעי מניעה לבאגים

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

ESLint

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

Stylelint

כלי דומה ל-ESLint הנועד לניתוח CSS (על ניביו). גם ל-Stylelint מערכת מודולרית המורכבת מחוקים רבים. המערכת כרגע צוברת מומנטום בקהילה וזכתה להמלצות מכמה גופים מרכזיים.

אך לא על הבאגים לבדם

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

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

TypeScript ו-Flow

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

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

אריזות של פרונט אנד

כחלק מלימודי הבסיס של HTML נלמד כי כדי להשתמש בקוד של CSS ושל JavaScript יש להשתמש בתגיות המגדירות ״ייבוא״ של אלה (<link> ו-<script>). אך ישנו פתרון אחר: אריזה מבעוד מועד של כל הקוד הזה באתר שלנו. בשל יתרונותיה הרבים של אריזת קוד והפיכתה לקונצנזוס בקהילת הפרונט אנד, ספריות רבות לא תומכות כלל בשימוש בהן ללא תוכנת אריזה כזאת, שזכתה לשם bundler.

Webpack

האורז הפופולרי ביותר היום הנו Webpack. בנוסף ליכולתו לארוז קוד הוא מסוגל להתממשק לכלי הידור (כמו Babel ו-Sass) ולכלי ניתוח שגיאות כמו (כמו ESLint). בנוסף Webpack מציע שרת פיתוח מקומי (dev server) פשוט לשימוש כדי להקל אף יותר את תהליך הפיתוח של פרונט אנד.

לסיכומו של עניין

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

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

מתעניינים בלימודי פיתוח פרונט אנד? לחצו כאן לכל המידע

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

• CSS
• html
• JavaScript
• כלים לפיתוח
• כלים לפרונט
• כלים לפרונט אנד
• פיתוח פרונט
• פרונט אנד