همگام شدن با همه چیزهایی که با چارچوب های جاوا اسکریپت پیش می رود می تواند دشوار باشد. این سند نکات برجسته مختصری از اتفاقات اخیر در اکوسیستم چارچوب های جاوا اسکریپت را در طول یک سال گذشته ارائه می دهد. برای بحث بیشتر در مورد برخی از این موضوعات، بحث مربوط به پیمایش در اکوسیستم چارچوب جاوا اسکریپت از رویداد Google I/O امسال را بررسی کنید.
روندهای چارچوب و همگرایی
همانطور که در نمودار نشان داده شده است، چارچوب های جاوا اسکریپت بر روی تعدادی ویژگی و معماری مشابه همگرا هستند. اینها شامل معماری مبتنی بر کامپوننت، مسیریابی مبتنی بر فایل و پشتیبانی مدرن SSR است. این همگرایی بلوغ و تکامل اکوسیستم را نشان می دهد زیرا چارچوب ها از یکدیگر یاد می گیرند و بهترین شیوه ها را اتخاذ می کنند.
در همان زمان، تعدادی از روندهای اخیر (مانند اجزای سرور و رویکردهای مختلف برای واکنش‌پذیری دقیق) همچنان چارچوب‌های فردی را متمایز می‌کنند. برای کمک به درک بهتر این روندها، در یک زمان به آنها می پردازیم.
زاویه ای
نسخه‌های اخیر Angular شامل تغییرات قابل توجهی از جمله سیگنال‌ها، نماهای معوق، NgOptimziedImage، هیدراتاسیون غیر مخرب و هیدراتاسیون جزئی است. برخی از نکات برجسته عبارتند از:
- سیگنال ها : سیگنال ها رویکردی هستند که توسط چندین چارچوب (از جمله اکنون Angular) برای ردیابی وضعیت در یک برنامه استفاده می شود. سیگنال‌های زاویه‌ای می‌توانند عملکرد زمان اجرا را بهبود بخشند - از جمله تعامل با رنگ بعدی (INP) - با کاهش تعداد محاسباتی که باید در طول تشخیص تغییر انجام شوند.
- نماهای معوق : نماهای معوق امکان به تعویق انداختن بارگذاری قطعات، دستورالعمل ها و لوله های خاص را فراهم می کند. برای مثال، می‌توانید بارگذاری یک وابستگی را تا زمانی که محتوا وارد viewport شود یا تا زمانی که رشته اصلی بی‌حرکت باشد به تعویق بیاندازید.
- NgOptimizedImage : NgOptimizedImage یک جزء تصویر برای Angular است که اتخاذ بهترین شیوه های بارگذاری تصویر را خودکار می کند.
- هیدراتاسیون غیر مخرب : هیدراتاسیون غیرمخرب، سوسو زدنی را که هنگام بازسازی DOM برنامه‌های Angular ارائه‌شده در سمت سرور در سمت کلاینت رخ می‌دهد، برطرف می‌کند.
- هیدراتاسیون جزئی: تیم Angular به زودی پیش نمایش توسعه دهنده هیدراتاسیون جزئی را منتشر خواهد کرد. با هیدراتاسیون جزئی، به طور پیش فرض، مرورگر هیچ یک از جاوا اسکریپت صفحه را هنگام رندر شدن صفحه بارگیری نمی کند. در عوض، بخش‌های خاصی از صفحه با تعامل کاربر با صفحه هیدراته می‌شوند.
Astro
Astro، یک سازنده سایت استاتیک مدرن، با رویکرد نوآورانه خود در توسعه وب، موجی را ایجاد کرده است. Astro با تمرکز بر عملکرد و تجربه توسعه دهنده چندین ویژگی و به روز رسانی هیجان انگیز را منتشر کرده است:
- Astro Islands : Astro Islands به توسعه دهندگان این امکان را می دهد که اجزای رابط کاربری تعاملی را بسازند که از بقیه صفحه جدا شده اند. این امکان به روز رسانی کارآمد و عملکرد بهینه را فراهم می کند.
- رندر ترکیبی : Astro اکنون از رندر ترکیبی پشتیبانی می کند و مزایای تولید سایت استاتیک و رندر سمت سرور را برای افزایش انعطاف پذیری ترکیب می کند.
- اجزای تصویر و تصویر : Astro اجزای تصویر و تصویر جدیدی را معرفی کرده است که کار با تصاویر را ساده می کند و بهینه سازی خودکار را ارائه می دهد.
- پشتیبانی از View Transitions : Astro پشتیبانی داخلی برای View Transitions API ارائه می‌کند، که امکان انتقال صاف و بدون درز صفحه را فراهم می‌کند.
- Astro Dev Toolbar : نوار ابزار Astro Dev مجموعه ای قدرتمند از ابزارها را برای اشکال زدایی و بهینه سازی برنامه های Astro ارائه می دهد.
واکنش نشان دهید
سال گذشته، انتشار React Server Components رویکرد جدیدی را برای اجزای React معرفی کرد. از آن زمان، تیم React روی انواع ویژگی‌های جدید از جمله ویژگی‌های React Compiler و Server Actions و همچنین:
- اجزای سرور : مؤلفه‌های سرور React مؤلفه‌هایی هستند که داده‌ها را واکشی می‌کنند و قبل از پخش جریانی برای مشتری، روی سرور ارائه می‌شوند. این کار رندرینگ را به سرور منتقل می کند و مقدار کدی را که باید به مشتری ارسال شود کاهش می دهد.
- React Compiler : React Compiler کامپایلری است که می تواند به طور خودکار اجزا را به خاطر بسپارد . این کار را با کاهش رندرهای غیر ضروری بهبود می بخشد. تیم React گفته است که توسعه‌دهندگان می‌توانند کامپایلر React را بدون هیچ تغییری در کد استفاده کنند.
- Server Actions : Server Actions ارتباط مشتری به سرور را فعال می کند. با Server Actions، می‌توانید توابع سمت سرور را تعریف کنید که می‌توانند مستقیماً از مؤلفه‌های React خود فراخوانی شوند و نیازی به تماس‌های API دستی و مدیریت پیچیده وضعیت را از بین ببرید. این می تواند به ویژه برای مواردی مانند جهش داده ها و ارسال فرم مفید باشد.
- بارگیری دارایی : React روی APIهای اعلامی برای بارگذاری و بارگذاری دارایی‌هایی مانند اسکریپت‌ها، سبک‌ها، فونت‌ها و تصاویر کار می‌کند.
- رندر خارج از صفحه : React بر روی Offscreen Rendering نیز کار کرده است. Offscreen Rendering "یک قابلیت آتی در React برای رندر کردن صفحات در پس‌زمینه بدون سربار عملکرد اضافی است. می‌توانید آن را نسخه‌ای از ویژگی CSS مشاهده محتوا در نظر بگیرید که نه تنها برای عناصر DOM بلکه برای اجزای React نیز کار می‌کند."
ریمیکس
Remix، یک چارچوب وب تمام پشته، در جامعه توسعه دهندگان مورد توجه قرار گرفته است. Remix با تمرکز بر اصول وب و تجربه توسعه‌دهنده پیشرفته، چندین به‌روزرسانی قابل توجه را معرفی کرده است:
- انتشار Remix 2.0 : Remix 2.0 که در سپتامبر 2023 منتشر شد، بهبودهای قابل توجه و ویژگی های جدیدی را در چارچوب به ارمغان آورد.
- پشتیبانی پایدار برای Vite : Remix اکنون پشتیبانی پایداری را برای Vite ارائه می‌کند، یک ابزار ساخت سریع و سبک، که ساخت‌های توسعه سریع‌تر و عملکرد بهبود یافته را ارائه می‌دهد.
- حالت SPA : Remix حالت SPA را معرفی کرد که امکان ساخت سایت‌های کاملاً ثابت را بدون نیاز به سرور جاوا اسکریپت در تولید می‌دهد. این به توسعه دهندگان این امکان را می دهد تا از ویژگی های قدرتمند Remix مانند مسیریابی مبتنی بر فایل، تقسیم خودکار کد و موارد دیگر استفاده کنند و در عین حال سادگی استقرار سایت ثابت را حفظ کنند.
Next.js
انتشار Next.js 13.4 در ماه مه 2023 بسیار قابل توجه بود زیرا پشتیبانی پایدار از React Server Components، استریم و Suspense را آغاز کرد. از آن زمان، Next.js به پشتیبانی از APIهای React جدید (به عنوان مثال، Server Actions ) ادامه می‌دهد و تجربه توسعه‌دهنده را از طریق طرح‌هایی مانند Turbopack تکرار می‌کند. سایر نکات برجسته عبارتند از:
- App Router : App Router که در Next.js 13.4 پایدار شد، روشی جدید برای ساختاردهی و مدیریت مسیریابی در برنامه های Next.js است. App Router پیش نیازی برای استفاده از ویژگی‌های جدید Next.js مانند طرح‌بندی‌های مشترک و مسیریابی تودرتو، و همچنین APIهای React جدید مانند React Server Components، Suspense و Server Actions در برنامه Next.js است.
Turbopack : رویکردی در حال حاضر آزمایشی برای رندر صفحه که بر روی Suspense API React ساخته شده است. پیش اجرا جزئی یک صفحه را با استفاده از پوسته بارگذاری ایستا رندر می کند. با این حال، پوسته "حفره هایی" را برای محتوای پویا در صفحه ایجاد می کند و این محتوا به صورت ناهمزمان بارگذاری می شود. این کار مزایای عملکرد یک صفحه ایستا و قابل کش را فراهم می کند در حالی که هنوز می تواند داده های پویا را در محتوای صفحه ترکیب کند.
Vue
آخرین نسخه Vue، Vue 3.4 ، شامل بهبودهای عملکردی متنوعی بود. Vue همچنین در حال حاضر روی Vue Vapor کار می‌کند که عملکرد محور نیز دارد. در اینجا چند نکته برجسته از آنچه در این فضا می گذرد آورده شده است:
- Vue 3.4 منتشر شد : ویژگی‌ها عبارتند از: «یک تجزیه‌کننده کاملاً بازنویسی شده که دو برابر سریع‌تر است، کامپایل SFC سریع‌تر و یک سیستم واکنش‌پذیری بازسازی‌شده که کارایی محاسبه مجدد را بهبود می‌بخشد ».
- Vue Vapor Mode : Vue بر روی Vapor Mode کار می‌کند، یک استراتژی تلفیقی انتخابی و عملکرد محور که با Vue Single File Components کار می‌کند. Vapor Mode کدی تولید می کند که کارایی بیشتری نسبت به کدی که در حال حاضر توسط Vue Compiler تولید می شود دارد. علاوه بر این، استفاده از حالت بخار با تمام اجزای سازنده، نیاز به Vue Virtual DOM (که اندازه باندل را کاهش می‌دهد) را از بین می‌برد.
- Vue 2 به EOL رسید : پایان عمر Vue 2 (EOL) 31 دسامبر 2023 بود. با این حال، Vue 2 هنوز به طور گسترده استفاده می شود: 50٪ از دانلودهای بسته Vue npm برای Vue 2 است.
Nuxt
Nuxt به انتشار Nuxt 4 نزدیک می شود . علاوه بر انتشار مکرر چارچوب Nuxt در سال گذشته، اکوسیستم ماژول‌های Nuxt به تقریباً 220 ماژول افزایش یافته است. برخی از تحولات اخیر در این فضا عبارتند از:
- نسخه‌های Nuxt 3.x : Nuxt معمولاً نسخه‌های جزئی جدید را ماهانه ارسال می‌کند. برخی از نکات برجسته این نسخه ها شامل پشتیبانی از Vite 5 ، صفحات فقط سرور و مشتری ، پشتیبانی از Node.js سمت کلاینت و جریان های وب بومی است . * ماژول‌های Nuxt : نکات برجسته اکوسیستم ماژول‌های Nuxt شامل انتشار ماژول nuxt/fonts جدید و نسخه‌های 1.0 nuxt/image و Nuxt DevTools است. نسخه های بعدی ماژول شامل nuxt/scripts، nuxt/hints، nuxt/a11y و nuxt/auth خواهد بود.
- مؤلفه‌های سرور ( جزایر مؤلفه‌ها ): Nuxt به پشتیبانی خود از مؤلفه‌های سرور (که در حال حاضر آزمایشی است) ادامه می‌دهد. در Nuxt، این مؤلفه‌های ارائه‌شده توسط سرور را می‌توان در سایت‌های ثابت استفاده کرد - امکان پذیرش معماری جزایر را فراهم می‌کند.
جامد
Solid برای انتشار پایدار 1.0 متا فریمورک SolidStart خود کار کرده است. SolidStart دارای واکنش پذیری ریز دانه، مسیریابی ایزومورفیک و پشتیبانی از انواع حالت های رندر است. نکات برجسته عبارتند از:
- واکنش پذیری ریز دانه: سیستم واکنش پذیری Solid امکان به روز رسانی دقیق و عملکرد بهینه را فراهم می کند و رندرینگ و مدیریت حالت کارآمد را ممکن می سازد.
- مسیریابی ایزومورفیک: SolidStart یک رویکرد یکپارچه برای مسیریابی ارائه می دهد و به توسعه دهندگان این امکان را می دهد تا مسیرهایی را تعریف کنند که هم بر روی مشتری و هم بر روی سرور یکپارچه کار می کنند.
- حالت‌های رندر انعطاف‌پذیر: SolidStart از حالت‌های رندر مختلف، از جمله رندر سمت سرور، تولید سایت استاتیک و رندر سمت کلاینت پشتیبانی می‌کند و به توسعه‌دهندگان انعطاف‌پذیری می‌دهد تا بهترین رویکرد را برای برنامه خود انتخاب کنند.
شیک
در سال گذشته، تیم Svelte بر روی انتشار آینده Svelte 5 متمرکز شده است که قابل توجه خواهد بود. سایر نکات برجسته عبارتند از:
- Svelte 5 در راه است : Svelte 5 علاوه بر گنجاندن " بازنویسی کامپایلر Svelte و زمان اجرا"، مفهوم Runes را نیز معرفی می کند.
- Runes اعلام شد : Runes یک ویژگی آینده در Svelte 5 است. "Runes قابلیت واکنش جهانی و ریز دانه را باز می کند... با Runes، واکنش پذیری فراتر از مرزهای فایل های .svelte شما گسترش می یابد... واکنش Svelte 5 توسط سیگنال ها تامین می شود - با این حال، [برخلاف سایر فریم ورک‌ها]، در Svelte 5، سیگنال‌ها جزییات پیاده‌سازی زیربنایی هستند نه چیزی که شما مستقیماً با آن تعامل دارید.
- SvelteKit 2 منتشر شد : SvelteKit متا فریم ورک برای Svelte است. از ویژگی های این نسخه می توان به مسیریابی کم عمق و پشتیبانی از Vite 5 اشاره کرد.
کروم آرورا
Chrome Aurora تیمی در Google است که با چارچوب‌های وب منبع باز مختلف برای بهبود تجربه کاربر - به ویژه عملکرد - در سراسر وب همکاری می‌کند. در اینجا برخی از ابتکاراتی است که ما در طول سال گذشته به آنها کمک کرده ایم:
- تصاویر ( next/image ، NgOptimizedImage و nuxt/image )
- ابزارهای فونت ( next/font ، nuxt/fonts ، و unjs/fontaine (افزونه Vite)
- بارگیری اسکریپت ( بعدی/اسکریپت و nuxt/اسکریپت ها)
- در حال بارگیری اسکریپت شخص ثالث ( شخصیت بعدی/شخص ثالث ، nuxt/شخصیت ثالث و اجزای YouTube و Google Maps Angular)
- رندر: ( SSR زاویه ای / هیدراتاسیون )
نتیجه
اکوسیستم چارچوب جاوا اسکریپت با سرعتی سریع به تکامل خود ادامه می دهد و هر فریم ورک مجموعه ای از نوآوری ها و پیشرفت های خود را به ارمغان می آورد. خواه به جدیدترین ویژگی‌های چارچوب‌های تثبیت‌شده مانند Angular، React و Vue علاقه‌مند باشید یا به بررسی گزینه‌های جدیدتر مانند Astro، Remix و Solid باشید، هیچ کمبودی در پیشرفت‌های هیجان‌انگیز وجود ندارد.
به‌عنوان توسعه‌دهندگان، مطلع ماندن از این پیشرفت‌ها به ما کمک می‌کند هنگام انتخاب چارچوبی برای پروژه‌هایمان تصمیمات آگاهانه بگیریم. با درک نقاط قوت و ویژگی‌های منحصربه‌فرد هر چارچوب، می‌توانیم چارچوبی را انتخاب کنیم که با الزامات پروژه و اولویت‌های توسعه ما مطابقت دارد.
امیدواریم این بررسی اجمالی نگاهی اجمالی به وضعیت فعلی چارچوب های جاوا اسکریپت برای شما داشته باشد. برای غواصی عمیق‌تر در موضوعات تحت پوشش این پست وبلاگ، حتماً بحث همراه از Google I/O را بررسی کنید. کد نویسی مبارک!