انطباق برای چارچوب ها

انطباق در اکوسیستم چارچوب جاوا اسکریپت

Shubhie Panicker

Houssein Djirdeh

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

در داخل گوگل، ما از عبارت " Conformance " برای توصیف این روش استفاده کردیم، و این مقاله نحوه برنامه‌ریزی ما برای باز کردن این مفهوم در اکوسیستم چارچوب جاوا اسکریپت را پوشش می‌دهد.

انطباق چیست؟

در گوگل، Conformance یک تحول بود. تیم ها به مجموعه کوچکی از نگهبانان با تجربه عمیق متکی بودند که بررسی های گسترده ای از کد انجام می دادند و مواردی را که بر کیفیت و قابلیت نگهداری برنامه تأثیر می گذاشتند، بسیار فراتر از مشکلات صحت، علامت گذاری می کردند. برای مقیاس‌بندی این امر برای تیم‌های رو به رشد توسعه‌دهندگان اپلیکیشن، یک سیستم Conformance برای تدوین بهترین شیوه‌ها به‌گونه‌ای که خودکار و قابل اجرا باشد، توسعه داده شد. این یک نوار دائمی بالا را برای کیفیت برنامه و قابلیت نگهداری پایگاه کد بدون در نظر گرفتن تعداد مشارکت کنندگان کد تضمین کرد.

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

انطباق بر اساس پیش فرض های قوی و ارائه قوانین قابل اجرا است که می توانند در زمان نوشتن اجرا شوند. این به 3 اصل زیر تقسیم می شود.

1. پیش فرض های قوی

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

برای عملکرد بارگذاری، هر منبع (فونت، CSS، جاوا اسکریپت، تصاویر و غیره) باید بهینه شود. این یک چالش پیچیده است که شامل کوتاه کردن بایت ها، کاهش رفت و برگشت، و جدا کردن آنچه برای اولین رندر، آمادگی بصری و تعامل کاربر نیاز است، است. به عنوان مثال، استخراج CSS حیاتی و تعیین اولویت روی تصاویر مهم.

2. قوانین قابل اجرا

حتی با وجود بهینه‌سازی‌های اساسی، توسعه‌دهندگان همچنان باید انتخاب کنند. وقتی صحبت از میزان ورودی برنامه‌نویس مورد نیاز است، طیفی از امکانات برای بهینه‌سازی وجود دارد:

• پیش‌فرض‌هایی که نیازی به ورودی توسعه‌دهنده ندارند، مانند درون‌سازی CSS حیاتی.
• نیاز به شرکت توسعه دهنده به عنوان مثال، استفاده از یک جزء تصویر ارائه شده توسط چارچوب برای اندازه و مقیاس کردن تصاویر.
• نیاز به شرکت توسعه دهنده و سفارشی سازی. به عنوان مثال، برچسب گذاری تصاویر مهم برای بارگذاری زودهنگام.
• یک ویژگی خاص نیست، اما چیزهایی که هنوز نیاز به تصمیم توسعه دهنده دارند. به عنوان مثال، اجتناب از فونت ها یا اسکریپت های همزمان که رندر اولیه را به تاخیر می اندازد.

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

3. زمان تألیف

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

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

انطباق در چارچوب

برای حفظ سطح بالای تجربه کاربر برای عملکرد بارگذاری، به سوالات زیر باید پاسخ داده شود:

1. چه چیزی بارگذاری بهینه را تشکیل می دهد و چه مسائل رایجی می تواند بر آن تأثیر منفی بگذارد؟
2. کدام راه حل ها را می توان در آن پخت کرد که نیازی به ورودی توسعه دهنده ندارند؟
3. چگونه می‌توانیم اطمینان حاصل کنیم که توسعه‌دهنده از این راه‌حل‌ها استفاده می‌کند و از آنها به‌طور بهینه استفاده می‌کند؟
4. توسعه‌دهنده چه انتخاب‌های دیگری می‌تواند بر عملکرد بارگذاری تأثیر بگذارد؟
5. الگوهای کدی که می توانند در مورد این انتخاب ها (#3 و #4 بالا) در اوایل زمان نگارش به ما بگویند چیست؟
6. چه قوانینی را می توانیم برای ارزیابی این الگوهای کد تدوین کنیم؟ چگونه می‌توان آن‌ها را در زمان نگارش به توسعه‌دهنده نشان داد در حالی که به‌طور یکپارچه در جریان کاری آن‌ها ادغام می‌شوند؟

برای آوردن مدل Conformance که در داخل گوگل داریم به چارچوب‌های منبع باز، تیم ما به‌شدت در Next.js آزمایش کرده‌اند و ما هیجان‌زده هستیم که چشم‌انداز و برنامه‌های اصلاح‌شده خود را به اشتراک بگذاریم. ما متوجه شده ایم که بهترین مجموعه قوانینی که می تواند الگوهای کد را ارزیابی کند، باید ترکیبی از تجزیه و تحلیل کد ایستا و بررسی های پویا باشد. این قوانین می توانند چندین سطح را شامل شوند، از جمله:

• ESLint
• TypeScript
• بررسی های پویا در سرور توسعه کاربر (پست ایجاد DOM)
• بسته‌کننده ماژول (وبک)
• ابزار CSS (هنوز اکتشافی)

با بهره‌گیری از ارائه قوانین از طریق ابزارهای مختلف، می‌توانیم از منسجم بودن آن‌ها اطمینان حاصل کنیم، اما هر مشکل تجربه کاربر که مستقیماً بر عملکرد بارگیری تأثیر می‌گذارد را نیز در بر می‌گیرد. علاوه بر این، این قوانین همچنین می توانند در زمان های مختلف برای توسعه دهندگان ظاهر شوند:

• در طول توسعه محلی در سرور توسعه، مرورگر و IDE کاربر اخطارهایی را نشان می‌دهند که توسعه‌دهندگان را وادار می‌کند تا تغییرات کوچکی در کد ایجاد کنند.
• در زمان ساخت، مشکلات حل نشده دوباره در ترمینال کاربر ظاهر می شود

به طور خلاصه، تیم‌ها نتایجی را انتخاب می‌کنند که به آن‌ها اهمیت می‌دهند، مانند Core Web Vitals یا عملکرد بارگذاری، و قوانین مربوطه را برای همه مشارکت‌کنندگان کد فعال می‌کنند تا از آنها پیروی کنند.

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

انطباق در Next.js

ESLint به طور گسترده در بین توسعه دهندگان جاوا اسکریپت استفاده می شود. و بیش از 50٪ از برنامه های Next.js از ESLint در بخشی از گردش کار ساخت خود استفاده می کنند. Next.js v11 پشتیبانی خارج از جعبه ESLint را معرفی کرد که شامل یک پلاگین سفارشی و پیکربندی قابل اشتراک‌گذاری است تا در حین توسعه و زمان ساخت راحت‌تر به مسائل مربوط به فریمورک متداول پی ببرید. این می تواند به توسعه دهندگان کمک کند تا مشکلات قابل توجهی را در زمان نوشتن برطرف کنند. مثال‌ها عبارتند از زمانی که از یک مؤلفه خاص استفاده می‌شود یا استفاده نمی‌شود، به نحوی که می‌تواند به عملکرد مانند پیوند بدون HTML برای صفحه آسیب برساند. یا اگر فونت، شیوه نامه یا اسکریپت خاصی می تواند بر بارگذاری منبع در صفحه تأثیر منفی بگذارد. به عنوان مثال، اسکریپت همزمان وجود ندارد .

علاوه بر ESLint، بررسی نوع یکپارچه در توسعه و تولید در Next.js از نسخه 9 با پشتیبانی از TypeScript پشتیبانی می‌شود. چندین مؤلفه ارائه شده توسط فریم ورک (تصویر، اسکریپت، پیوند) به عنوان پسوند عناصر HTML ( <img> ، <script> ، <a> ) ساخته شده اند تا به توسعه دهندگان رویکردی کارآمد برای افزودن محتوا به یک صفحه وب ارائه دهند. بررسی نوع از استفاده مناسب از این ویژگی ها با اطمینان از اینکه ویژگی ها و گزینه های اختصاص داده شده در محدوده قابل قبول مقادیر و انواع پشتیبانی شده هستند پشتیبانی می کند. برای مثال عرض و ارتفاع تصویر مورد نیاز را ببینید.

سطح خطاها با نان تست و روکش

همانطور که قبلا ذکر شد، قوانین انطباق را می توان در چندین حوزه ظاهر کرد. نان تست ها و همپوشانی ها در حال حاضر به عنوان راهی برای نشان دادن خطاها به طور مستقیم در مرورگر در محیط توسعه محلی کاربر در حال بررسی هستند.

بسیاری از ابزارهای بررسی خطا و ممیزی که توسعه دهندگان به آنها متکی هستند (برگه Lighthouse، Chrome DevTools Issues) غیرفعال هستند و برای بازیابی اطلاعات به نوعی از تعامل کاربر نیاز دارند. توسعه‌دهندگان زمانی که خطاها مستقیماً در ابزار موجود خود ظاهر می‌شوند، و زمانی که اقدامات مشخص و مشخصی را ارائه می‌کنند که باید برای رفع مشکل انجام شود، بیشتر عمل می‌کنند.

انطباق در سایر چارچوب ها

انطباق ابتدا در Next.js با هدف گسترش به چارچوب های دیگر (Nuxt، Angular و غیره) بررسی می شود. ESLint و TypeScript در حال حاضر در بسیاری از چارچوب ها به روش های مختلف استفاده می شوند، اما مفهوم یک سیستم زمان اجرا در سطح مرورگر به طور فعال در حال بررسی است.

نتیجه

انطباق بهترین شیوه ها را در مجموعه قوانینی که برای توسعه دهندگان قابل اجرا هستند به عنوان الگوهای کد ساده کدگذاری می کند. تیم Aurora بر عملکرد بارگیری تمرکز کرده است، اما بهترین روش‌ها، مانند دسترسی و امنیت، به همان اندازه قابل اجرا هستند.

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