در تیم Chrome، ما به تجربه کاربر و یک اکوسیستم وب پررونق اهمیت می دهیم. ما می خواهیم کاربران بهترین تجربه ممکن را در وب داشته باشند، نه تنها با اسناد ثابت، بلکه همچنین زمانی که از برنامه های کاربردی غنی و بسیار تعاملی استفاده می کنند.
ابزارها و چارچوب‌های منبع باز نقش بزرگی را در ایجاد برنامه‌های مدرن برای وب به توسعه‌دهندگان ایفا می‌کنند و در عین حال از تجربیات خوب توسعه‌دهندگان نیز پشتیبانی می‌کنند. این چارچوب‌ها و ابزارها به شرکت‌ها در هر اندازه و همچنین افرادی که برای وب می‌سازند، قدرت می‌دهند.
ما معتقدیم که فریمورکها همچنین می‌توانند نقش مهمی در کمک به توسعه‌دهندگان با جنبه‌های کیفیت کلیدی مانند عملکرد، دسترسی، امنیت، آمادگی موبایل داشته باشند. به جای اینکه از هر توسعه‌دهنده و صاحب سایت بخواهیم در این زمینه‌ها متخصص شوند و با بهترین شیوه‌های دائماً در حال تغییر همراه شوند، این چارچوب می‌تواند با راه‌حل‌های آماده پشتیبانی کند. این به توسعه دهندگان قدرت می دهد و آنها را قادر می سازد بر روی ساخت ویژگی های محصول تمرکز کنند.
به طور خلاصه، چشم انداز ما این است که سطح بالای کیفیت UX به یک اثر جانبی ساختن برای وب تبدیل می شود.
Aurora: همکاری بین کروم و چارچوب‌ها و ابزارهای وب منبع باز
تقریباً دو سال است که ما با برخی از محبوب‌ترین فریمورکها مانند Next.js، Nuxt و Angular کار کرده‌ایم و برای بهبود عملکرد وب تلاش می‌کنیم. ما همچنین ابزارها و کتابخانه های محبوبی مانند Vue، ESLint، webpack را تامین مالی کرده ایم. امروز، ما به این تلاش نامی می دهیم - Aurora .
شفق قطبی یک نمایشگر نور طبیعی است که در آسمان می درخشد. از آنجایی که سعی می کنیم به تجربه کاربر ساخته شده با فریمورک ها کمک کنیم تا درخشش و درخشش داشته باشند، فکر کردیم این نام انتخاب مناسبی است.
در ماه های آینده، جزئیات بیشتری را در مورد Aurora به اشتراک خواهیم گذاشت. این یک همکاری بین تیم کوچکی از مهندسان کروم (با کد داخلی WebSDK) و نویسندگان فریمورک است. هدف ما ارائه بهترین تجربه کاربری ممکن برای برنامه های تولیدی بدون توجه به مرورگری است که در آن رندر می کنید.
استراتژی ما چیست؟
در Google، هنگام استفاده از چارچوب‌ها و ابزارها برای ساخت و نگهداری برنامه‌های کاربردی وب در مقیاس بزرگ مانند جستجوی Google، Maps، جستجوی تصویر، Google Photos و غیره، چیزهای زیادی یاد گرفته‌ایم. ارائه پیش فرض های قوی و ابزارهای نظری
فریمورکها نقطه‌ی برتری منحصربه‌فردی برای تأثیرگذاری بر DX و UX دارند زیرا کل سیستم را در بر می‌گیرند: کلاینت و سرور، محیط‌های توسعه و تولید، و ابزارهایی مانند کامپایلر، باندلر، لینتر و غیره را ادغام می‌کنند.
وقتی راه‌حل‌ها در چارچوب قرار می‌گیرند، تیم‌های توسعه‌دهنده می‌توانند از این راه‌حل‌ها استفاده کنند و زمان خود را بر آنچه برای محصول مهم‌تر است متمرکز کنند - ارائه ویژگی‌های عالی برای کاربران.
در حالی که ما برای بهبود ابزارهایی کار می کنیم که در هر لایه پشته زندگی می کنند، فریمورک هایی مانند Next.js، Nuxt و Angular CLI، هر مرحله از چرخه عمر برنامه را مدیریت می کنند. به همین دلیل، و این واقعیت که پذیرش React در اکوسیستم چارچوب UI اصلی است، بیشتر بهینه‌سازی‌های ما قبل از گسترش به بقیه اکوسیستم با اثبات در Next.js آغاز شده‌اند.
Aurora از موفقیت در مقیاس با ارائه راه حل ها به لایه مناسب پشته های فناوری محبوب پشتیبانی می کند. با پر کردن شکاف بین مرورگرها و چارچوب‌ها، کیفیت بالا را قادر می‌سازد تا به عنوان یک حلقه بازخورد برای بهبود پلتفرم وب عمل کند.
روند کار ما چگونه است؟
اصول ما برای پل زدن Aurora بین مرورگرها و اکوسیستم توسعه دهندگان عبارتند از: فروتنی، کنجکاوی، تحقیق علمی و عمل گرایی. ما با نویسندگان چارچوب در زمینه بهبود کار می کنیم، با جامعه همکاری می کنیم و قبل از ایجاد هرگونه تغییر، بررسی های لازم را انجام می دهیم.
برای خلاصه کردن مراحلی که برای هر ویژگی جدیدی که روی آن کار می کنیم انجام می دهیم:
- با استفاده از برنامه‌های نماینده، درد تجربه کاربر را در یک پشته محبوب شناسایی کنید.
- نمونه اولیه راه حل هایی که به این موضوع می پردازند، با تاکید بر "پیش فرض های قوی".
- ویژگی را با پشته فریمورک دیگری تأیید کنید تا از سازگاری آن اطمینان حاصل کنید.
- با آزمایش در چند برنامه تولیدی، معمولاً با آزمایش عملکرد، ویژگی را تأیید اعتبار کنید.
- طراحی درایو با استفاده از فرآیند RFC، پرداختن به بازخورد جامعه.
- ویژگی را در یک پشته محبوب، معمولاً پشت پرچم قرار دهید.
- برای ارزیابی کیفیت و ادغام گردش کار توسعه‌دهنده، این ویژگی را در یک برنامه تولید نماینده فعال کنید.
- بهبود عملکرد را با ردیابی معیارها در برنامه‌های تولید نماینده که این ویژگی را پذیرفته یا ارتقا داده‌اند، اندازه‌گیری کنید.
- این ویژگی را به‌عنوان پیش‌فرض در پشته فعال کنید تا همه کاربرانی که به‌روزرسانی می‌کنند از آن بهره‌مند شوند.
- پس از اثبات، با چارچوب‌های اضافی کار کنید تا این ویژگی را ایجاد کنید.
- با یک حلقه بازخورد، شکاف‌ها را در بستر وب شناسایی کنید.
- برو سراغ مشکلات بعدی
ابزارها و پلاگین های زیربنایی (وب بسته، Babel، ESLint، TypeScript و غیره...) در بسیاری از چارچوب ها به اشتراک گذاشته شده اند. این به ایجاد افکت‌های ریپل کمک می‌کند، حتی زمانی که به یک پشته فریمورک کمک می‌کنید.
علاوه بر این، Chrome Framework Fund از ابزارهای منبع باز و کتابخانه ها با بودجه پشتیبانی می کند. در حالی که ما امیدواریم که همپوشانی کافی در مشکلات و لایه های راه حل برای تلاش های ما در بالا برای ترجمه به چارچوب ها و ابزارهای دیگر وجود داشته باشد، می دانیم که می توانیم کارهای بیشتری انجام دهیم. برای این منظور، ما می خواهیم سهم خود را برای اطمینان از پیشرفت کتابخانه ها و چارچوب هایی که به توسعه دهندگان کمک می کنند انجام دهیم. این یکی از دلایلی است که ما به سرمایه گذاری در Chrome Framework Fund ادامه خواهیم داد. تا به امروز، کار در زمینه Webpack 5، Nuxt و عملکرد و بهبود ESLint را پشتیبانی کرده است.
کار ما تا الان چه چیزی باز شده است؟
کار ما بر روی بهینه سازی های اساسی برای منابعی مانند تصاویر، JS، CSS، فونت ها متمرکز شده است. ما تعدادی بهینه‌سازی را برای بهبود پیش‌فرض‌های چارچوب‌های مختلف ارسال کرده‌ایم، از جمله:
- یک مؤلفه Image در Next.js که بهترین روش‌ها را برای بارگذاری تصویر و به دنبال آن همکاری با Nuxt در همان کپسوله می‌کند. استفاده از این مؤلفه منجر به بهبودهای قابل توجهی در زمان‌های رنگ‌آمیزی و تغییر طرح‌بندی شده است (به عنوان مثال: کاهش 57 درصدی در Largest Contentful Paint و کاهش 100 درصدی در تغییر چیدمان تجمعی در nextjs.org/give ).
- درون‌سازی خودکار CSS برای اعلان‌های فونت وب در زمان ساخت. این ویژگی در Angular (Google Fonts) و Next.js (Google Fonts و Adobe Fonts) قرار گرفته است که منجر به بهبودهای قابل توجهی در Largest Contentful Paint و First Contentful Paint شده است ( مثال ).
- درون‌سازی CSS حیاتی با استفاده از Critters در Angular و Next.js برای کاهش زمان رنگ. در یک برنامه Angular معمولی و در مقیاس بزرگ، هنگامی که این ویژگی با ویژگی درونی قلم CSS ترکیب شد، منجر به بهبود 20 تا 30 امتیازی در نمرات عملکرد Lighthouse شد.
- پشتیبانی خارج از جعبه ESLint در Next.js که شامل یک پلاگین سفارشی و پیکربندی قابل اشتراک‌گذاری است تا در زمان ساخت راحت‌تر به مسائل مربوط به فریمورک متداول پی ببرید و در نتیجه عملکرد بارگیری قابل پیش‌بینی‌تری داشته باشید.
- معرفی یک رله عملکرد داخلی در Create React App و Next.js برای دسترسی آسان تر به عملکرد صفحه از طریق موارد حیاتی وب و سایر معیارهای سفارشی.
- تکه تکه شدن دانه‌ای در Next.js و Gatsby ارسال شد که منجر به کاهش 30 تا 70 درصدی اندازه بسته‌ها و در عین حال بهبود عملکرد حافظه پنهان شد. این به طور پیش فرض در Webpack 5 تبدیل شده است.
- یک تکه پلی پر جداگانه برای مرورگرهای قدیمی، با همکاری تیم Next.js، برای بهبود اندازه بسته نرم افزاری در مرورگرهای مدرن.
هر یک از این ویژگی‌ها یا خودکار شده‌اند تا به‌طور پیش‌فرض فعال شوند یا فقط به یک انتخاب ساده نیاز دارند. این امر ضروری است تا اطمینان حاصل شود که توسعه دهندگان می توانند به راحتی از مزایای خود بدون افزودن پیچیدگی به گردش کار خود بهره ببرند.
برای سال 2021 چه برنامه ای داریم؟
در بقیه سال جاری، ما بر کمک به مجموعه‌های چارچوب برای بهبود تجربه کاربر و عملکرد آنها در معیارهایی مانند Core Web Vitals متمرکز خواهیم بود. این اثر شامل:
- انطباق برای اجرای بهترین شیوه ها. برای کسب اطلاعات بیشتر پست وبلاگ را بررسی کنید.
- بهینه سازی عملکرد بار اولیه با ایجاد همکاری های ما برای بهینه سازی تصاویر ، فونت ها و CSS بحرانی .
- بارگیری اسکریپت‌های شخص ثالث (3Ps) با کمترین تأثیر عملکرد با ساختن پایه کار ما بر روی یک مؤلفه Script و انجام تحقیقات عمیق در مورد بهترین نحوه سفارش و ترتیب دادن 3P.
- عملکرد جاوا اسکریپت در مقیاس (مثلاً پشتیبانی از React Server Components در Next.js).
هدف تیم ما ارسال اطلاعات منظم بیشتر در مورد RFC ها و اسناد طراحی برای این ایده ها است تا هر چارچوب یا توسعه دهنده ای که مایل به دنبال کردن آن است بتواند این کار را انجام دهد.
نتیجه
تیم Aurora ( Shubhie ، Houssein ، Alex ، Gerald ، Ralph ، Addy ، Kara ، Keen ، Katie ) مشتاقانه منتظر ادامه همکاری نزدیک با جامعه چارچوب منبع باز برای بهبود پیش‌فرض‌های تجربه کاربر در Next.js، Nuxt و Angular هستند. ما تعامل خود را افزایش خواهیم داد تا چارچوب ها و ابزارهای بیشتری را در طول زمان پوشش دهیم. این فضا را برای پست‌های وبلاگ، گفتگوها و RFCهای بیشتر تیم ما در سال آینده تماشا کنید :)