לפעמים קשה לעקוב אחרי כל מה שקורה ב-frameworks של JavaScript. המסמך הזה מספק תקצירים על אירועים שקרו לאחרונה בסביבת JavaScript frameworks במהלך השנה האחרונה. לדיון ארוך יותר על כמה מהנושאים האלה, מומלץ לעיין בהרצאה המתאימה בנושא Navigation the JavaScript Frameworks Ecosystem של האירוע Google I/O השנה.
מגמות והתכנסות של מסגרת
כפי שמוצג בתרשים, המסגרות של JavaScript מתמזגות במספר תכונות וארכיטקטורות דומות. הארכיטקטורה כוללת ארכיטקטורה מבוססת רכיבים, ניתוב מבוסס-קבצים ותמיכה ב-SSR מודרני. השילוב הזה מדגים את הבגרות וההתפתחות של הסביבה העסקית, כי המסגרות לומדות זו מזו ומאמצות שיטות מומלצות.
במקביל, כמה מגמות אחרונות (כמו רכיבי שרת וגישות שונות לתגובה פרטנית) ממשיכות לבדל מסגרות נפרדות. כדי לעזור לכם להבין טוב יותר את המגמות האלה, אנחנו מתעמקים בכל פריים בנפרד.
Angular
הגרסאות האחרונות של Angular הכילו מגוון שינויים משמעותיים, כולל אותות, צפיות שניתן להגדיר, NgOptimziedImage, מאזן הנוזלים לא הרס ומאזן מים חלקי. אלה חלק מהעדכונים העיקריים:
- אותות: אותות הם גישה שמשמשת כמה מסגרות (כולל Angular) למעקב אחרי מצבי מעקב באפליקציה. אותות זוויתיים יכולים לשפר את ביצועי זמן הריצה – כולל Interaction to Next Paint (INP) – על-ידי הפחתת מספר החישובים שמתרחשים במהלך זיהוי שינויים.
- תצוגות גרועות: תצוגות דחופות מאפשרות לעכב את הטעינה של רכיבים, הוראות וצינורות ספציפיים. לדוגמה, אפשר לדחות את טעינת התלות עד שהתוכן ייכנס לנקודת התצוגה או עד שה-thread הראשי לא יהיה פעיל.
- NgOptimizedImage: רכיב NgOptimizedImage הוא רכיב תמונה ב-Angular, שמאפשר לאמץ באופן אוטומטי את השיטות המומלצות לטעינת תמונות.
- הידרציה לא הרסנית: מאזן הנוזלים לא הרסני מתקנת את ההבהוב שהתרחש כשה-DOM של אפליקציות Angular שעבר עיבוד בצד השרת נבנה מחדש בצד הלקוח.
- מאזן הנוזלים חלקי: הצוות של Angular יפרסם בקרוב תצוגה מקדימה למפתחים של מאזן הנוזלים חלקי. במקרה של התייבשות חלקית, כברירת מחדל הדפדפן לא טוען אף אחד מה-JavaScript של הדף בזמן העיבוד של הדף. במקום זאת, חלקים מסוימים בדף עוברים הזנה בזמן שהמשתמש מבצע אינטראקציה עם הדף.
אסטרו
Astro, כלי לבניית אתרים סטטיים ומודרניים, השיגה גלים חדשים בזכות הגישה החדשנית שלה לפיתוח אתרים. Astro התמקדה בביצועים ובחוויית המפתח, מספר תכונות ועדכונים מלהיבים:
- איי אסטרו: איי אסטרו מאפשרים למפתחים ליצור רכיבים אינטראקטיביים בממשק המשתמש שמבודדים משאר הדף. כך מתאפשרים עדכונים יעילים וביצועים אופטימליים.
- רינדור היברידי: Astro עכשיו תומך ברינדור היברידי ומשלב את היתרונות של יצירת אתרים סטטיים ורינדור בצד השרת, כדי לשפר את הגמישות.
- רכיבי Image ו-Picture: ב-Astro הוספנו רכיבי 'תמונה' ו'תמונה' חדשים שמפשטים את הטיפול בתמונות ומספקים אופטימיזציה אוטומטית.
- תמיכה במעברים מ-View: ב-Astro יש תמיכה מובנית ב-View Migrates API כדי לאפשר מעבר חלק וחלק בין דפים.
- סרגל הכלים של Astro Dev: סרגל הכלים של Astro Dev כולל ערכת כלים מתקדמת לניפוי באגים ולאופטימיזציה של אפליקציות אסטרו.
React
בשנה שעברה, בהשקה של רכיבי React Server הושקה גישה חדשה לרכיבי React. מאז, צוות React עובד על מגוון פיצ'רים חדשים, כולל התכונות React Compiler ו-Server Actions, וגם:
- רכיבי השרת: רכיבי שרת התגובות הם רכיבים שמאחזרים נתונים ומעובדים בשרת לפני שהם מועברים בסטרימינג ללקוח. כך תהליך העיבוד מועבר לשרת ומפחית את כמות הקוד שצריך לשלוח ללקוח.
- מהדר התגובות: React Compiler הוא מהדר שיכול לזכור רכיבים באופן אוטומטי. כך ניתן לשפר את הביצועים על ידי צמצום של עיבודים מחדש מיותרים. לדברי צוות React, מפתחים יוכלו להשתמש ב-React Compiler בלי לבצע שינויים בקוד.
- פעולות שרת: פעולות של השרת מאפשרות תקשורת לקוח לשרת. בעזרת 'פעולות בשרת' אפשר להגדיר פונקציות בצד השרת שאפשר להפעיל ישירות מרכיבי React, ללא צורך בקריאות ידניות ל-API ובניהול מצבים מורכבים. האפשרות הזו יכולה להיות שימושית במיוחד במקרים כמו מוטציות של נתונים ושליחה של טפסים.
- טעינת נכסים: צוות React כבר עובד על ממשקי API מוצהרים כדי לטעון מראש ולטעון נכסים כמו סקריפטים, סגנונות, גופנים ותמונות.
- רינדור מהמסך: React כבר עובד על רינדור מחוץ למסך. 'רינדור מחוץ למסך' הוא 'יכולת חדשה ב-React לעיבוד מסכים ברקע בלי תקורת ביצועים נוספת'. אפשר לחשוב עליו כגרסה של מאפיין CSS עם הרשאות גישה לתוכן שעובד לא רק לרכיבי DOM אלא גם לרכיבי React."
רמיקס
Remix, מסגרת אינטרנט מסוג פול סטאק, צבר פופולריות בקרב קהילת המפתחים. Remix מתמקד ביסודות האינטרנט ובחוויית פיתוח משופרת, ולכן הוספנו לו כמה עדכונים חשובים:
- גרסת רמיקס 2.0: גרסה 2.0 של הרמיקס הושקה בספטמבר 2023 והוסיפה שיפורים משמעותיים ותכונות חדשות למסגרת.
- תמיכה יציבה ב-Vite: עכשיו אפשר להשתמש ב-Remix תמיכה יציבה ב-Vite, כלי מהיר וקל לפיתוח, שמאפשר פיתוחים מהירים יותר וביצועים משופרים.
- מצב SPA: הרמיקס נוסף למצב SPA, שמאפשר לבנות אתרים סטטיים לחלוטין בלי צורך בשרת JavaScript בסביבת הייצור. כך מפתחים יכולים להשתמש בתכונות רבות-העוצמה של הרמיקס, כמו ניתוב מבוסס-קבצים, פיצול קוד אוטומטי ועוד, תוך שמירה על הפשטות של פריסת אתר סטטית.
Next.js
הפרסום של Next.js 13.4 במאי 2023 היה בולט במיוחד, מאחר שהוא פתח תמיכה יציבה ברכיבי React Server, בסטרימינג וב-Suspense. מאז, Next.js ממשיכה לפתח תמיכה בממשקי React API חדשים (למשל, Server Actions) ולבצע איטרציה לחוויית המפתח באמצעות יוזמות כמו Turbopack. דגשים נוספים:
- App Router: נתב אפליקציות, שהשתנה יציב בגרסה 13.4 של Next.js, הוא דרך חדשה לבנייה וניהול של הניתוב באפליקציות Next.js. נתב אפליקציות הוא דרישה מוקדמת לשימוש בתכונות החדשות של Next.js, כמו פריסות משותפות וניתוב מקונן, וגם ממשקי API חדשים של React כמו React Server Components, Suspense ו-Server Actions באפליקציית Next.js.
Turbopack: הגישה הניסיונית הנוכחית לעיבוד דפים, שמבוססת על Suspense API של React. במהלך עיבוד מראש חלקי מעבד דף באמצעות מעטפת טעינה סטטית. עם זאת, המעטפת משאירה "חורים" לתוכן הדינמי בדף, והתוכן הזה נטען באופן אסינכרוני. כך נהנים מיתרונות הביצועים של דף סטטי וניתן לשמירה במטמון, ועדיין יש אפשרות לשלב נתונים דינמיים בתוכן הדף.
מקום
הגרסה האחרונה של Vue, Vue 3.4, כללה מגוון שיפורי ביצועים. Vue עובד כרגע גם על Vue Vapor, שמיועד גם לביצועים. הנה כמה נקודות עיקריות לגבי מה שקורה בתחום הזה:
- Vue 3.4 הושק: התכונות כוללות 'מנתח משוכתב לחלוטין, בעל קיצור כפול מהיר ומהיר יותר של SFC, ומערכת מקודדת מחדש שמשפרת מחשוב מחדש."
- Vue Vapor Mode: Vue עובד על מצב Vapor, אסטרטגיית הידור שממוקדת בביצועים ומבוססת על רכיבי Vue Single File. מצב אדים יוצר קוד בעל ביצועים טובים יותר מהקוד הנוכחי שמופק על ידי Vue Compiler. בנוסף, שימוש במצב אדים עם כל הרכיבים מבטל את הצורך ב-Vue Virtual DOM (שמפחית את גודל החבילה).
- Vue 2 מגיע ל-EOL: סוף חיי המוצר של Vue 2 (EOL) היה ב-31 בדצמבר 2023. עם זאת, עדיין קיים שימוש הוגן ב-Vue 2: כ-50% מההורדות של חבילות Vue npm הן ל-Vue 2.
גרגרים
Nuxt קרובה להשקה של Nuxt 4. בנוסף לגרסאות ה-framework התכופות של Nuxt במהלך השנה האחרונה, המערכת האקולוגית של המודולים של Nuxt גדלה לכמעט 220 מודולים. דוגמאות לפיתוחים אחרונים בתחום הזה:
- גרסאות של Nuxt 3.x: Nuxt שולחת בדרך כלל פריטי תוכן קטנים חדשים מדי חודש. בין התכונות העיקריות שבגרסאות האלה: תמיכה ב-Vite 5, בדפי שרת בלבד ובדפים של לקוחות בלבד, תמיכה ב-Node.js בצד הלקוח וזרמי אינטרנט מותאמים. גרסאות המודול הבאות יכללו nuxt/scripts, nuxt/hints, nuxt/a11y ו-nuxt/auth.
- רכיבי השרת (רכיבי איים): Nuxt ממשיכה לפתח את התמיכה ברכיבי השרת (כרגע בשלב ניסיוני). ב-Nuxt, אפשר להשתמש ברכיבים שמעובדת על ידי השרת בתוך אתרים סטטיים, וכך לאמץ את ארכיטקטורת האיים.
מוצק
הצוות Solid עובד על הגרסה היציבה 1.0 של ה-SolidStart במטא-מסגרת. פלטפורמת SolidStart כוללת תגובה פרטנית, ניתוב איזומורפי ותמיכה במגוון מצבי רינדור. בין הפרטים החשובים:
- תגובה פרטנית: מערכת התגובה של Solid מאפשרת לקבל עדכונים מדויקים וביצועים אופטימליים, כדי לאפשר רינדור יעיל וניהול מצבים.
- ניתוב איזומורפי: SolidStart מספקת גישה מאוחדת לניתוב, ומאפשרת למפתחים להגדיר מסלולים שפועלים בצורה חלקה גם בלקוח וגם בשרת.
- מצבי רינדור גמישים: SolidStart תומך במצבי רינדור שונים, כולל רינדור בצד השרת, יצירת אתרים סטטיים ועיבוד בצד הלקוח, וכך מעניקים למפתחים את הגמישות לבחור את הגישה הטובה ביותר לאפליקציה שלהם.
סולטה
בשנה האחרונה, צוות Svelte התמקד בפרסום הקרוב של Svelte 5, שתהיה לו השפעה משמעותית. דגשים נוספים:
- בקרוב Svelte 5 מגיע: בנוסף לביצוע 'שכתוב של מהדר וזמן הריצה של Svelte, Svelte 5 כולל גם את המושג Runes.
- רצות הן תכונה שהושקה ב-Svelte 5. "Runes מבטל את הנעילה של תגובה אוניברסלית, פרטנית... עם רצות, התגובתיות מתרחבת מעבר לגבולות של קובצי ה- .svelte שלכם... התגובה של Svelte 5 מבוססת על אותות – עם זאת, [בניגוד למסגרות אחרות], ב-Svelte 5, האותות הם פירוט הטמעה יסודי, ולא משהו שיש לכם אינטראקציה איתו באופן ישיר."
- השקת SvelteKit 2: SvelteKit היא המטא-framework של Svelte. התכונות בגרסה הזו כוללות ניתוב shallow ותמיכה ב-Vite 5.
הזוהר הצפוני ב-Chrome
Chrome Aurora הוא צוות ב-Google שפועל בשיתוף עם מסגרות אינטרנט שונות בקוד פתוח, כדי לשפר את חוויית המשתמש - ובמיוחד את הביצועים - ברחבי האינטרנט. הנה כמה מהיוזמות שיתרמו במהלך השנה האחרונה:
- תמונות (next/image, NgOptimizedImage ו-nuxt/image)
- תוכניות שירות גופנים (next/font, nuxt/fonts ו-unjs/fontaine) (פלאגין של Vite)
- טעינת הסקריפט (Next/script ו-nuxt/scripts)
- טעינת סקריפטים של צד שלישי (הצדדים הבאים/השלישיים, צדדים שלישיים/צדדים שלישיים, ו-YouTube והרכיבים של מפות Google)
- רינדור: (Angular SSR / hydration)
סיכום
הסביבה העסקית של JavaScript ממשיכה להתפתח בקצב מהיר, וכל מסגרת מספקת חידושים ושיפורים משלה. לא משנה אם אתם מתעניינים בתכונות החדשות של מסגרות מבוססות כמו Angular, React ו-Vue, או אם אתם מעוניינים לנסות אפשרויות חדשות כמו Astro, Remix ו-Solid, לא מחמיצים פיתוחים מרגשים נוספים.
בתור מפתחים, התעדכנות כל הזמן בהתפתחויות האלה עוזרת לנו לקבל החלטות מושכלות כשבוחרים מסגרת לפרויקטים. אם נבין את החוזקות ואת התכונות הייחודיות של כל מסגרת, נוכל לבחור את זו שהכי מתאימה לדרישות הפרויקט שלנו ולהעדפות הפיתוח שלנו.
אנחנו מקווים שהסקירה הכללית הזו סיפקה לכם הצצה למצב הנוכחי של JavaScript frameworks. כדי להתעמק בנושאים שמופיעים בפוסט בבלוג, אל תשכחו לראות את ההרצאה הנלווה מ-Google I/O. שיהיה בהצלחה!