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

Chrome משתף פעולה עם מסגרות קוד פתוח כדי לשפר את חוויית האינטרנט

חוסיין דג'ירד

Chrome הוא תורם פעיל לסביבה העסקית של Web framework. השיחה שלנו בכנס Chrome Dev Summit 2019 סוקרת את הנושאים שעבדנו עליהם בשנה האחרונה.

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

איך אנחנו משפרים את האינטרנט?

המטרה של כל חברי הצוות של Chrome היא לשפר את האינטרנט. אנחנו עובדים על שיפור ממשקי API לדפדפן ואת V8 – מנוע הליבה של JavaScript ו-WebAssembly שמפעיל את Chrome – כדי שהמפתחים יהיו מצוידים בתכונות שעוזרות להם ליצור דפי אינטרנט מעולים. אנחנו גם מנסים לשפר אתרים שכבר נמצאים בייצור כיום, על ידי תרומה של כלים בקוד פתוח בדרכים רבות.

רוב מפתחי האתרים מסתמכים על כלים בקוד פתוח כשאפשר, והם מעדיפים לא לבנות תשתית בהתאמה אישית לחלוטין. מסגרות JavaScript וספריות ממשק משתמש בצד הלקוח מהוות חלק הולך וגדל מהשימוש בקוד פתוח. הנתונים על שלוש הספריות והמסגרות הפופולריות ביותר בצד הלקוח – React, Angular ו-Vue, מראים את הנתונים הבאים:

• 72% מהמשתתפים בסקר השנתי הראשון למפתחים ומעצבים באינטרנט של MDN משתמשים בלפחות אחת מה-frameworks והספריות האלה.
• יותר מ-320,000 אתרים ב-5 מיליון כתובות ה-URL המובילות שנותחו על ידי ארכיון HTTP משתמשים לפחות באחת מה-frameworks והספריות האלה.
• בקיבוץ לפי משך השימוש, 30 מתוך 100 כתובות ה-URL המובילות משתמשות לפחות באחת מהמסגרות והספריות האלה. (בוצע מחקר על נתונים פנימיים.)

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

תכנים שנוספו ל-frameworks

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

• מסגרות ממשק משתמש (או ספריות), כמו Preact, React או Vue, שמספקות שליטה על שכבת התצוגה של האפליקציה (לדוגמה, באמצעות מודל רכיב).
• מסגרות אינטרנט, כמו Next.js, Nuxt.js ו-Gatsby, שמספקות מערכת מקצה לקצה עם תכונות מובנות של תכונות מקובעות, כמו רינדור בצד השרת. המסגרות האלה בדרך כלל משתמשות ב-framework או בספרייה של ממשק המשתמש עבור שכבת התצוגה.

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

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

Angular

צוות Angular שלח מספר שיפורים לגרסה 8 של ה-framework:

• טעינה דיפרנציאלית כברירת מחדל עוזרת לצמצם את מספר ה-Polyfills שלא נחוצים בדפדפנים חדשים יותר.

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

מידע נוסף על השיפורים האלה זמין ב"גרסה 8 של Angular", וצוות Chrome ישמח לעבוד איתם בשיתוף פעולה הדוק בשנה הבאה, כשנוסיף תכונות נוספות.

Next.js

Next.js היא מסגרת אינטרנט שמשתמשת ב-React כשכבת תצוגה. בנוסף למודל של רכיבי ממשק משתמש שמפתחים רבים מצפים לקבל מ-framework בצד הלקוח, Next.js מספק כמה תכונות ברירת מחדל מובנות:

• ניתוב עם פיצול קוד כברירת מחדל
• איסוף וחבילה (באמצעות Babel ו-webpack)
• רינדור בצד השרת
• מנגנונים לאחזור נתונים ברמת כל דף בנפרד
• עיצוב אחיד (עם styled-jsx)

ב-Next.js מתבצעת אופטימיזציה לגדלים קטנים יותר של חבילות, וצוות Chrome עזר לזהות תחומים שבהם נוכל לעזור בשיפור הביצועים. ניתן לקרוא מידע נוסף על כל אחד מהם בבקשות לתגובות (RFC) ולבקשות משיכה (PR):

1. אסטרטגיה משופרת של חיתוך חבילות Webpack שמפיקה חבילות מפורטות יותר, ומפחיתה את כמות הקודים הכפולים שמאוחזרים דרך מספר מסלולים (RFC, PR).
2. טעינה דיפרנציאלית עם דפוס המודול/nomodule יכולה להפחית את הכמות הכוללת של JavaScript באפליקציות Next.js בשיעור של עד 20%, ללא צורך בשינויי קוד (RFC, PR).
3. מעקב משופר אחר מדדי ביצועים באמצעות User Timing API (PR).

אנחנו גם בוחנים תכונות נוספות לשיפור חוויית המשתמש והמפתחים בשימוש ב-Next.js, כמו:

• הפעלת מצב בו-זמני (concurrent) כדי לבטל את הנעילה של נוזלים הדרגתיים או חלקיים של רכיבים.
• מערכת תאימות מבוססת Webpack שמנתחת את כל קובצי המקור והנכסים שנוצרו כדי להציג שגיאות ואזהרות טובות יותר (RFC).

Nuxt.js

Nuxt.js היא מסגרת אינטרנט שמשלבת Vue.js עם ספריות שונות כדי לספק הגדרה מקובצת. בדומה ל-Next.js, היא כוללת תכונות רבות לשימוש מיידי:

• ניתוב עם פיצול קוד כברירת מחדל
• איסוף וחבילה (באמצעות Babel ו-webpack)
• רינדור בצד השרת
• אחזור נתונים אסינכרוני לכל דף
• מאגר הנתונים המוגדר כברירת מחדל (Vuex)

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

Babel

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

Babel מהדר קוד שמכיל תחביר חדש יותר לתוך קוד, שדפדפנים שונים יכולים להבין. מקובל להשתמש ב-@babel/preset-env כדי לטרגט לדפדפנים מודרניים, שבהם אפשר לציין יעדים שונים של הדפדפן כדי לספק מספיק מילוי פוליגוני לכל הסביבות שבחרתם. אחת הדרכים לציין את היעדים היא להשתמש ב-<script type="module"> כדי לטרגט את כל הדפדפנים שתומכים במודולי ES.

כדי לשפר את הטיפול בפנייה הזו, השקנו הגדרה חדשה לגמרי: @babel/preset-modules. במקום להמיר תחביר מודרני לתחביר ישן יותר כדי להימנע מבאגים בדפדפן, preset-modules מתקן כל באג ספציפי על ידי שינוי לתחביר המודרני הקרוב ביותר, שאינו שבור. התוצאה היא קוד מודרני שניתן לשלוח כמעט ללא שינוי לרוב הדפדפנים.

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

מה השלב הבא?

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

אם אתם עובדים על framework של אינטרנט, על ספריית ממשק משתמש או על כל סוג של כלי אינטרנט (Bundler, compiler, linter), עליכם להגיש בקשה לקרן framework!