פיתוח פרונטאנד הוא תחום שמתפתח בקצב גבוה. כדי לשמור על פרודוקטיביות, אפקטיביות ואיכות העבודה שלכם – חשוב מאוד ללמוד ולהכיר את הכלים והעדכונים האחרונים בעולם הזה.
במאמר הזה נעבור על 5 כלים שהם שחקנים משמעותיים כיום בקהילת הפרונט, ולמעשה כל מפתחת או מפתח פרונט חייבים להכיר, אפילו אם לא השתמשו בהם בפועל.
תוכן עניינים
לא בטוחים אם תכנות זה בשבילכם?
הדרך היחידה לגלות אם אתם מתחברים לתחום היא על ידי התנסות מעשית. אבל זה לא אומר שחייבים להוציא אלפי שקלים רק כדי לבחון אם זה מתאים לכם.
במקום, עדיף שתתנסו בכתיבת קוד בשפה אחת בסיסית – למשל: HTML. שפת HTML היא הבסיס שעליו בנויים אתרים אינטרנט, ולמידה שלה תעזור לכם לבחון אם אתם נהנים מסוג כזה של עבודה.
כדי לעזור לכם לבחון את עצמכם סידרנו לכם שבועיים חינם במערכת של קודבוקס! שם תוכלו להתנסות בלמידת HTML ולקבל הערות בזמן אמת שיעזרו לכם ללמוד בקלות. לקבלת שבועיים התנסות בחינם >>
#1 – Vite
כלי לבניית קוד והרצת שרת מקומי המיועד לפיתוח מהיר ומודרני בסביבת הווב שמשפר משמעותית את חווית הפיתוח. עם Vite אפשר להשיג באופן כמעט מיידי טעינה ועדכון של מודולים מתוך הפרויקט, מה שנקרא HMR (Hot Module Replacement). תהליך הטעינה המהיר משתמש ביכולת הנייטיבית של דפדפנים מתקדמים לטעון ישירות ES Modules מפוצלים.
מעבר לזה ניתן להגדיר את Vite כך שיעבוד עם מנועי תרגום קוד ה ECMAScript שלכם המושתתים על Rust או Go כמו SWC ו- ESBuild (בהתאמה), שהם לחלוטין מהירים בעשרות מונים מהמנוע המסורתי של Babel שהרבה מפרויקטי הפרונט מושתתים עליו.
Vite תומך בפרויקטים הכוללים את הפריימוורקים הפופולרים ביותר, ביניהם – Vue, React, Svelte ועוד. מאמר מורחב של FED Cast מסקר כיצד Vite משנה את עולם הפיתוח.
פרטים על קורס תכנות? + מתנה
הרשמו לקבל מידע על תנאי קבלה, מועד פתיחה, ותנאי תשלום וקבלו מאיתנו שבועיים חינם לקורס תכנות אונליין של קודבוקס*
#2 – Storybook
סטוריבוק הוא פרויקט קוד פתוח שמטרתו לעזור בפיתוח קומפוננטות לשימוש חוזר ובצורה מבודדת משאר הפרויקט. אחת הפרקטיקות הנפוצות ביותר עם סטוריבוק היא יצירת טסטים שעוזרים לנו לבחון את הקומפוננטות עצמאית וללא תלות בהיגיון העסקי.
תאורטית, נוכל גם להכניס את אותן הקומפוננטות בפרויקט אחר לגמרי תוך שמירה על המראה והפונקציונליות שלהן.
אחת היכולות החזקות של סטוריבוק היא התוספים שניתן לחבר כדי לתקשר אפילו עם סרביסים אחרים.
במאמר הבא FED Cast סקרו בהרחבה את הסיפור המלא של Storybook.
אולי יעניין אותך:
7 מסלולי *בוטקאמפ* שיהפכו אתכם למתכנתים בהייטק
רוצים להפוך למפתחי Full Stack? ריכזנו עבורכם את תכניות הלימוד הפופולריות ביותר בארץ, שיכניסו אתכם לתעשייה!
#3 – Tailwind
טיילווינד הוא פריימוורק CSS שמנגיש helpers שהם למעשה קלאסים עם שמות אינטואיטיביים המכילים חוקי CSS. בעזרת הקלאסים של Tailwind נוכל להרכיב קומפוננטות בקלות מבלי לכתוב CSS מאפס. כמובן שתוכלו גם להכיל יכולות רספונסיביות על האתר שלכם דרך הכלי.
בנוסף, לטיילווינד מנגנון יצירת קלאסים בצורה דינמית תוך כדי הבניה של הקוד, מה שנקרא arbitrary values. תחביר זה אומר לכלי ליצור קלאס המחזיק חוק CSS עם ערך שלא קיים בסט הקלאסים הבסיסי אלא ייחודי לקומפוננטה ספציפית תוך כדי זמן הבניה של הקוד.
לטיילווינד ישנו גם מנגנון Tree-shaking שעוזר לזהות קלאסים שלא בשימוש ולהוריד אותם מהקובץ הסופי שנוצר.
#4 – TanStack Query
כלי זה עוזר בניהול מידע שחוזר מהשרת והעברתו לתוך הקומפוננטות שלכם עם כמה שפחות בויילרפלייט. האבסטרקציה שלו מפחיתה משמעותית את המורכבות במשיכת ושליחה של המידע לשרת.
אחד היתרונות המובהקים של TSQ הוא ניהול המידע ב state מרכזי שעוזר בשיפור תחזוקת הקוד ובנוסף גם מנגיש כלים לניהול שגיאות שחזרו מהשרת לשיפור חווית המשתמש.
פיצ׳ר חשוב של TSQ הוא שמירה של המידע במנגנון מטמון (cache) בזמן שברקע הוא מבצע קריאות לשרת ולכשאלו יגיעו הוא גם ירנדר את המידע החדש ב UI מה שללא ספק עוזר לשיפור חווית המשתמש. פרקטיקה מעניינת לשימוש עם מנגנון המטמון שלו נקראת Optimistic UI שבקצרה נותנת תחושה למשתמשים שהשינויים שלהם נשמרו מיידית וללא ספינרים וכשברקע נשלחת הקריאה לשרת לעדכון שלהם בבסיס הנתונים בפועל. לחצו לקריאה נוספת.
#5 – Micro frontends
מיקרו פרונטאנדז הוא סוג ארכיטקטורה יחסית חדש שמאפשר לכם לבנות אפליקציות ע״י חלוקה שלהם לאפליקציות עצמאיות וקטנות יותר. בעזרת טכניקה זו נוכל להגיש גרסאות מתקדמות של אותן תתי-אפליקציות בזריזות רבה יותר. בנוסף, מכניסה גמישות ביכולות הצוות כך שכל אפליקציה מנוהלת ע״י צוות נפרד עם יכולות שונות.
דוגמא פרקטית היא פיצול מסכים באפליקציה כך שמסך אחד יכתב ב React ומסך אחר יכתב בכלל ב Vue, כשמעל אלה ישנה האפליקציה הראשית שמנהלת את העברת המידע ביניהם.
רוצה לעבוד בפיתוח Full-Stack?
אספנו עבורך 7 קורסים מומלצים שיטיסו את הקריירה שלך בהייטק!
כלים וטכניקות שיעזרו לכם לממש מיקרו-פרונטאנדז
Webpack Module Federation
Webpack Module Federation זו היא יכולת מובנת ב Webpack 5 המאפשרת לנו להגדיר אילו חלקים נרצה לפצל לאפליקציות קטנות יותר וכיצד נרצה לשתף ביניהן את המידע.
בנוסף, נוכל לשתף גם תלויות של ספריות שונות בעזרת npm or yarn workspaces בין האפליקציות השונות כדי שלא נצטרך להתקין אותן כל פעם מחדש בכל תת אפליקציה.
Single-spa
Single-spa הוא פריימוורק JavaScript המאפשר לנו, בעזרת סט של יכולות מתוך ה API שלו, לחבר מיקרו פרונטאנדז לתוך אפליקציה גדולה יותר עם טכנולוגיות שונות ונפרדות כמו React, Vue, Angular ועוד.
פרטים על קורס תכנות? + מתנה
הרשמו לקבל מידע על תנאי קבלה, מועד פתיחה, ותנאי תשלום וקבלו מאיתנו שבועיים חינם לקורס תכנות אונליין של קודבוקס*
כמה מילים לסיום
העולם של מפתחי הפרונט מתפתח בקצב מסחרר ולכן זה הכרחי לשמור על כשירות ע״י הכרה והבנה של הכלים החדשים. הטכנולוגיות הללו הן רק חלק קטן ממאגר ענק של כלים זמינים וע״י שימוש ב Vite, Storybook, Tailwind, TanStack Query ו- Micro frontends תוכלו ללא ספק לשפר את יעילות ואיכות הקוד שלכם.
סניור Front End ב- Eureka Security ומייסד FED Cast – קהילת מפתחי הפרונט בישראל.
