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

کروم با چارچوب‌های متن‌باز برای بهبود وب همکاری می‌کند

Houssein Djirdeh

کروم یکی از مشارکت‌کنندگان فعال در اکوسیستم چارچوب وب است و سخنرانی ما در اجلاس توسعه‌دهندگان کروم ۲۰۱۹، به بررسی فعالیت‌های ما در سال گذشته می‌پردازد.

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

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

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

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

• ۷۲٪ از شرکت‌کنندگان در اولین نظرسنجی سالانه توسعه‌دهندگان و طراحان وب MDN حداقل از یکی از این چارچوب‌ها و کتابخانه‌ها استفاده می‌کنند.
• بیش از ۳۲۰،۰۰۰ سایت در ۵ میلیون URL برتر که توسط HTTP Archive تجزیه و تحلیل شده‌اند، حداقل از یکی از این چارچوب‌ها و کتابخانه‌ها استفاده می‌کنند.
• وقتی بر اساس زمان صرف شده گروه‌بندی می‌شوند، ۳۰ مورد از ۱۰۰ URL برتر حداقل از یکی از این چارچوب‌ها و کتابخانه‌ها استفاده می‌کنند. (تحقیقات روی داده‌های داخلی انجام شده است.)

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

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

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

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

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

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

زاویه دار

تیم Angular تعدادی بهبود را به نسخه ۸ این فریم‌ورک اضافه کرده است:

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

• پشتیبانی از سینتکس استاندارد ایمپورت پویا برای مسیرهای lazy-loading.
• پشتیبانی از Web Worker برای اجرای عملیات در یک thread پس‌زمینه جدا از thread اصلی.
• Ivy ، موتور رندر جدید Angular که عملکرد کامپایل مجدد بهتری را ارائه می‌دهد و اندازه بسته‌ها را کاهش می‌دهد، در حالت پیش‌نمایش برای پروژه‌های موجود در دسترس است.

می‌توانید اطلاعات بیشتری در مورد این پیشرفت‌ها را در «نسخه ۸ انگولار» کسب کنید و تیم کروم مشتاقانه منتظر است تا با ارائه ویژگی‌های بیشتر در سال آینده، از نزدیک با آنها همکاری کند.

بعدی.js

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

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

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

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

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

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

Nuxt.js

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

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

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

بابل

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

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

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

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

بعدش چی؟

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

اگر روی یک چارچوب وب، کتابخانه رابط کاربری یا هر نوع ابزار وب (bundler، compiler، linter) کار می‌کنید، برای دریافت صندوق چارچوب درخواست دهید !