پیشرفت اکوسیستم چارچوب وب

Chrome با چارچوب های منبع باز همکاری می کند تا به سمت وب بهتر کار کند

Houssein Djirdeh

Chrome مشارکت‌کننده‌ای فعال در اکوسیستم چارچوب وب است و صحبت‌های ما در اجلاس کروم Dev Summit 2019 آنچه را که در سال گذشته روی آن کار کرده‌ایم را پوشش می‌دهد.

برای یک خلاصه مفصل صحبت با جزئیات و منابع بیشتر، ادامه مطلب را بخوانید.

چگونه وب را بهتر کنیم؟

هدف همه اعضای تیم Chrome بهتر کردن وب است. ما روی بهبود APIهای مرورگر و V8 کار می کنیم - موتور اصلی جاوا اسکریپت و WebAssembly که Chrome را تقویت می کند - تا توسعه دهندگان به ویژگی هایی مجهز شوند که به آنها کمک می کند صفحات وب عالی بسازند. ما همچنین سعی می‌کنیم تا وب‌سایت‌هایی را که امروزه در حال تولید هستند، با کمک به ابزارهای منبع باز به طرق مختلف بهبود دهیم.

اکثر توسعه دهندگان وب در صورت امکان به ابزارهای منبع باز تکیه می کنند و ترجیح می دهند زیرساخت کاملاً سفارشی ایجاد نکنند. چارچوب های جاوا اسکریپت سمت کلاینت و کتابخانه های UI بخش رو به رشدی از استفاده از منبع باز را تشکیل می دهند. داده‌های مربوط به سه فریم‌ورک و کتابخانه محبوب سمت کلاینت، React ، Angular و Vue نشان می‌دهد که:

• 72 درصد از شرکت کنندگان در اولین نظرسنجی سالانه توسعه دهندگان و طراحان وب MDN حداقل از یکی از این چارچوب ها و کتابخانه ها استفاده می کنند.
• بیش از 320000 سایت در 5 میلیون URL برتر تجزیه و تحلیل شده توسط HTTP Archive از حداقل یکی از این چارچوب ها و کتابخانه ها استفاده می کنند.
• هنگامی که بر اساس زمان صرف شده گروه بندی می شوند، 30 URL از 100 URL برتر حداقل از یکی از این چارچوب ها و کتابخانه ها استفاده می کنند. (تحقیق بر روی داده های داخلی انجام شد.)

این بدان معنی است که ابزار منبع باز بهتر می تواند مستقیماً منجر به وب بهتر شود و به همین دلیل است که مهندسان کروم مستقیماً با نویسندگان چارچوب و کتابخانه خارجی شروع به کار کرده اند.

مشارکت در چارچوب های وب

چارچوب‌هایی که معمولاً برای ساخت و ساختار صفحات وب استفاده می‌شوند به دو دسته تقسیم می‌شوند:

• چارچوب‌های UI (یا کتابخانه‌ها)، مانند Preact، React یا Vue، که کنترل لایه نمایش یک برنامه را فراهم می‌کنند (مثلاً از طریق یک مدل مؤلفه).
• چارچوب‌های وب ، مانند Next.js، Nuxt.js، و Gatsby، که یک سیستم سرتاسری با ویژگی‌های داخلی، مانند رندر سمت سرور، ارائه می‌دهند. این فریم ورک ها معمولاً از یک چارچوب یا کتابخانه UI برای لایه view استفاده می کنند.

توسعه‌دهندگان می‌توانند از فریم‌ورک‌ها استفاده نکنند، اما با کنار هم قرار دادن یک کتابخانه لایه مشاهده، روتر، سیستم استایل، رندر سرور و غیره، اغلب در نهایت نوع خود را از چارچوب ایجاد می‌کنند. فریمورک‌های وب، اگرچه عقیده دارند، به‌طور پیش‌فرض از بسیاری از این نگرانی‌ها مراقبت می‌کنند.

بقیه این پست به بسیاری از پیشرفت‌ها اشاره می‌کند که اخیراً در چارچوب‌ها و ابزارهای مختلف از جمله مشارکت‌های تیم کروم به دست آمده‌اند.

زاویه ای

تیم Angular تعدادی بهبود را به نسخه 8 فریمورک ارسال کرده است:

• بارگذاری دیفرانسیل به طور پیش فرض برای به حداقل رساندن پلی پرهای غیر ضروری برای مرورگرهای جدیدتر.

• پشتیبانی از نحو استاندارد واردات پویا برای مسیرهای بارگذاری تنبل.
• پشتیبانی وب کارگر برای اجرای عملیات در یک رشته پس زمینه جدا از رشته اصلی.
• Ivy ، موتور رندر جدید Angular که عملکرد کامپایل مجدد بهتر و کاهش اندازه باندل را ارائه می دهد، در حالت پیش نمایش برای پروژه های موجود در دسترس است.

می‌توانید در «نسخه 8 انگولار» درباره این پیشرفت‌ها بیشتر بدانید و تیم Chrome مشتاقانه منتظر است تا در سال آینده با افزایش قابلیت‌ها با آنها همکاری کند.

Next.js

Next.js یک چارچوب وب است که از React به عنوان یک لایه نمایش استفاده می کند. علاوه بر مدل مؤلفه UI که بسیاری از توسعه دهندگان از چارچوب سمت مشتری انتظار دارند، Next.js تعدادی ویژگی پیش فرض داخلی را ارائه می دهد:

• مسیریابی با تقسیم کد پیش فرض
• گردآوری و بسته بندی (با استفاده از Babel و webpack )
• رندر سمت سرور
• مکانیسم هایی برای واکشی داده ها در سطح هر صفحه
• استایل کپسوله شده (با styled-jsx )

Next.js برای کاهش اندازه بسته‌ها بهینه‌سازی می‌کند، و تیم Chrome به شناسایی مناطقی که می‌توانیم به بهبود عملکرد بیشتر کمک کنیم کمک کرد. می‌توانید با مشاهده درخواست‌های نظرات (RFC) و درخواست‌های کششی (PR) درباره هر یک از آنها اطلاعات بیشتری کسب کنید:

1. یک استراتژی تقسیم‌بندی بسته وب بهبودیافته که بسته‌های دانه‌دار بیشتری منتشر می‌کند و میزان کدهای تکراری دریافت شده از طریق مسیرهای متعدد ( RFC ، PR ) را کاهش می‌دهد.
2. بارگذاری دیفرانسیل با الگوی ماژول/نومول که می‌تواند مقدار کل جاوا اسکریپت را در برنامه‌های Next.js تا 20 درصد بدون تغییر کد کاهش دهد ( RFC ، PR ).
3. ردیابی متریک عملکرد بهبود یافته که از API زمان‌بندی کاربر ( PR ) استفاده می‌کند.

ما همچنین در حال بررسی ویژگی‌های دیگری برای بهبود تجربه کاربر و توسعه‌دهنده از استفاده از Next.js هستیم، مانند:

• فعال کردن حالت همزمان برای باز کردن قفل هیدراتاسیون تدریجی یا جزئی اجزا.
• یک سیستم انطباق مبتنی بر بسته وب که تمام فایل‌های منبع و دارایی‌های تولید شده را تجزیه و تحلیل می‌کند تا خطاها و هشدارهای بهتری را نشان دهد ( RFC ).

Nuxt.js

Nuxt.js یک چارچوب وب است که Vue.js را با کتابخانه‌های مختلف ترکیب می‌کند تا تنظیماتی را ارائه دهد. مشابه Next.js، شامل بسیاری از ویژگی های خارج از جعبه است:

• مسیریابی با تقسیم کد پیش فرض
• گردآوری و بسته بندی (با استفاده از Babel و webpack )
• رندر سمت سرور
• واکشی ناهمزمان داده برای هر صفحه
• ذخیره داده پیش فرض ( Vuex )

همراه با کار مستقیم بر روی بهبود عملکرد ابزارهای مختلف، ما صندوق چارچوب را برای ارائه پشتیبانی پولی از چارچوب‌ها و کتابخانه‌های منبع باز بیشتر گسترش داده‌ایم. با پشتیبانی اخیر ما از Nuxt.js، چند ویژگی از جمله ارائه هوشمندتر سرور و بهینه‌سازی تصویر در آینده نزدیک ارائه می‌شوند.

بابل

ما همچنین در بهبود عملکرد یک ابزار اساسی مهم در تقریباً همه چارچوب‌های ذکر شده - Babel پیشرفت کرده‌ایم.

Babel کدی را که حاوی نحو جدیدتر است در کدهایی که مرورگرهای مختلف می توانند درک کنند، جمع آوری می کند. استفاده از @babel/preset-env برای هدف قرار دادن مرورگرهای مدرن که در آن اهداف مرورگرهای مختلف را می توان برای ارائه چند پر کردن کافی برای همه محیط های انتخابی مشخص کرد، رایج شده است. یک راه برای تعیین اهداف استفاده از <script type="module"> برای هدف قرار دادن تمام مرورگرهایی است که از ماژول های ES پشتیبانی می کنند .

برای بهینه سازی برای این مورد، یک پیش تنظیم کاملاً جدید راه اندازی کردیم. @babel/preset-modules . به‌جای تبدیل نحو مدرن به نحو قدیمی‌تر برای جلوگیری از اشکالات مرورگر، preset-modules هر باگ خاص را با تبدیل به نزدیک‌ترین نحو ممکن بدون شکستگی برطرف می‌کنند. این منجر به کدهای مدرنی می شود که می توانند تقریباً بدون تغییر به اکثر مرورگرها تحویل داده شوند.

توسعه دهندگانی که قبلاً از preset-env استفاده می کنند نیز بدون نیاز به انجام کاری از این بهینه سازی ها بهره مند می شوند، زیرا به زودی در preset-env نیز گنجانده می شوند.

بعدش چی؟

همکاری نزدیک با چارچوب‌ها و کتابخانه‌های منبع باز برای ارائه تجربیات بهتر به تیم Chrome کمک می‌کند تا بفهمد چه چیزی اساساً برای کاربران و توسعه‌دهندگان مهم است.

اگر بر روی یک چارچوب وب، کتابخانه UI، یا هر شکلی از ابزارهای وب (بندلر، کامپایلر، لینتر) کار می‌کنید، برای صندوق چارچوب اقدام کنید !