قد يكون من الصعب مواكبة كل ما يحدث في إطارات عمل JavaScript. يقدّم هذا المستند ملخّصًا موجزًا للأحداث الأخيرة في المنظومة المتكاملة لإطارات عمل JavaScript خلال العام الماضي أو نحو ذلك. للحصول على مناقشة أطول حول بعض هذه المواضيع، يمكنك الاطّلاع على محادثة التنقّل في المنظومة المتكاملة لإطارات عمل JavaScript ذات الصلة من حدث Google I/O لهذا العام.
اتجاهات الإطارات والتقارب
كما هو موضّح في الرسم البياني، تتلاقى إطارات عمل JavaScript في عدد مماثل من الميزات والبنى. وتشمل هذه التحسينات البنية المستندة إلى المكوّنات، والتوجيه المستنِد إلى الملفات، ودعم تقنية SSR الحديثة. يوضّح هذا التقارب نضج المنظومة المتكاملة وتطوّرها، إذ تستفيد الأطر من بعضها البعض وتتّبع أفضل الممارسات.
في الوقت نفسه، يواصل عدد من المؤشرات الحديثة (مثل مكوّنات الخادم وال approaches المختلفة للتفاعل الدقيق) تمييز الإطارات الفردية. للمساعدة في فهم هذه المؤشرات بشكل أفضل، سنتناول كل خطوة بالتفصيل.
Angular
تتضمّن الإصدارات الأخيرة من Angular مجموعة متنوّعة من التغييرات المهمة، بما في ذلك الإشارات، والمشاهدات التي يمكن تأجيل عرضها، وNgOptimziedImage، وميزة التضمين بدون تدمير، وميزة التضمين الجزئي. في ما يلي بعض النقاط البارزة:
- الإشارات: الإشارات هي نهج تستخدمه عدة إطارات عمل (بما في ذلك Angular الآن) لتتبُّع الحالة في أحد التطبيقات. يمكن أن تحسِّن إشارات Angular أداء وقت التشغيل، بما في ذلك مدى استجابة الصفحة لتفاعلات المستخدم (INP)، من خلال تقليل عدد العمليات الحسابية التي يجب إجراؤها أثناء رصد التغييرات.
- العروض التي يمكن تأجيل تحميلها: تتيح العروض التي يمكن تأجيل تحميلها تأجيل تحميل مكوّنات وتوجيهات وخطوط أنابيب معيّنة. على سبيل المثال، يمكنك تأجيل تحميل أحد المكوّنات إلى أن يدخل المحتوى إلى مساحة العرض أو إلى أن يصبح الخيط الرئيسي غير نشِط.
- NgOptimizedImage: NgOptimizedImage هو مكوّن صورة في Angular يعمل تلقائيًا على اتّباع أفضل الممارسات المتعلّقة بتحميل الصور.
- عدم الإضرار بالملف عند إعادة الترطيب: تؤدي إعادة الترطيب بدون الإضرار بالملف إلى إصلاح الوميض الذي قد يحدث عند إعادة إنشاء نموذج DOM لتطبيقات Angular المعروضة من جهة الخادم من جهة العميل.
- الترطيب الجزئي: سيطرح فريق Angular قريبًا الإصدار المخصّص للمطوّرين لميزة الترطيب الجزئي. في حال استخدام ميزة "العرض الجزئي"، لا يحمِّل المتصفّح تلقائيًا أيًا من رموز JavaScript في الصفحة عند عرضها. بدلاً من ذلك، يتم تحميل أجزاء معيّنة من الصفحة عندما يتفاعل المستخدم مع الصفحة.
Astro
Astro هي أداة حديثة لإنشاء المواقع الإلكترونية الثابتة، وقد حققت نجاحًا كبيرًا بفضل أسلوبها المبتكِر في تطوير الويب. مع التركيز على الأداء وتجربة المطوّرين، أطلق فريق Astro العديد من الميزات والتحديثات المشوّقة:
- جزر Astro: تتيح "جزر" Astro للمطوّرين إنشاء مكونات تفاعلية لواجهة المستخدم تكون معزولة عن بقية الصفحة. ويتيح ذلك إجراء تعديلات فعّالة وتحقيق الأداء الأمثل.
- العرض المختلط: يتيح Astro الآن استخدام ميزة العرض المختلط التي تجمع بين مزايا إنشاء المواقع الإلكترونية الثابتة وميزة العرض من جهة الخادم لتوفير مرونة أكبر.
- مكوّنات الصورة و الصورة: طرحت Astro مكوّنات جديدة للصورة والصور تعمل على تبسيط التعامل مع الصور وتوفير تحسين تلقائي.
- إتاحة View Transitions API: يوفّر Astro دعمًا مضمّنًا View Transitions API، مما يتيح الانتقال السلس بين الصفحات.
- شريط أدوات مطوّري تطبيقات Astro: يوفّر شريط أدوات مطوّري تطبيقات Astro مجموعة فعّالة من الأدوات لتصحيح أخطاء تطبيقات Astro وتحسينها.
React
في العام الماضي، أطلقنا React Server Components لتقديم نهج جديد لمكوّنات React. ومنذ ذلك الحين، بدأ فريق React العمل على مجموعة متنوعة من الميزات الجديدة، بما في ذلك ميزتا React Compiler و Server Actions، بالإضافة إلى:
- مكونات الخادم: مكونات خادم React هي مكونات تُستخدَم لجلب البيانات وعرضها على الخادم قبل بثّها إلى العميل. يؤدي ذلك إلى نقل عمل التقديم إلى الخادم وتقليل مقدار الرمز البرمجي الذي يجب إرساله إلى العميل.
- React المجمِّع: React Compiler هو compiler يمكنه تخزين المكونات تلقائيًا. ويؤدي ذلك إلى تحسين الأداء من خلال تقليل عمليات إعادة التقديم غير الضرورية. أعلن فريق React أنّه سيتمكّن المطوّرون من استخدام React Compiler بدون إجراء أي تغييرات على الرموز البرمجية.
- إجراءات الخادم: تُمكّن إجراءات الخادم من التواصل بين العميل والخادم. باستخدام "إجراءات الخادم"، يمكنك تحديد وظائف من جهة الخادم يمكن تنفيذها مباشرةً من مكونات React، ما يغني عن الحاجة إلى طلبات البيانات اليدوية من واجهة برمجة التطبيقات وإدارة الحالة المعقدة. ويمكن أن يكون ذلك مفيدًا بشكل خاص في ما يتعلّق بعمليات تحوُّل البيانات وإرسال النماذج.
- تحميل مواد العرض: يعمل فريق React على واجهات برمجة تطبيقات تعريفية لتحميل مواد العرض مسبقًا وتحميلها، مثل النصوص البرمجية والأنماط والخطوط والصور.
- العرض خارج الشاشة: عمل فريق React أيضًا على تحسين العرض خارج الشاشة. ميزة "العرض خارج الشاشة" هي "ميزة قادمة في React لعرض الشاشات في الخلفية بدون أيّ زيادة في تكلفة الأداء. يمكنك اعتبارها نسخة من سمة CSS الخاصة بمستوى رؤية المحتوى التي لا تعمل فقط لعناصر DOM، بل تعمل أيضًا مع مكونات React".
ريمكس
إنّ Remix هو إطار عمل كامل للويب، وقد اكتسب شعبية كبيرة في مجتمع المطوّرين. من خلال التركيز على أساسيات الويب وتجربة المطوّرين المحسّنة، قدمت أداة Remix العديد من التعديلات البارزة:
- إصدار Remix 2.0: طرحنا الإصدار 2.0 من Remix في أيلول (سبتمبر) 2023، وهو يتضمن تحسينات كبيرة وميزات جديدة في الإطار.
- إتاحة استخدام أداة Vite بشكل مستقر: يوفّر Remix الآن استخدام أداة Vite بشكل مستقر، وهي أداة إنشاء سريعة وخفيفة الوزن، ما يوفر عمليات تطوير أسرع وأداءً أفضل.
- وضع SPA: طرحت Remix وضع SPA، الذي يتيح إنشاء مواقع إلكترونية ثابتة تمامًا بدون الحاجة إلى استخدام خادم JavaScript في مرحلة الإنتاج. يتيح ذلك للمطوّرين استخدام ميزات Remix القوية، مثل التوجيه المستنِد إلى الملفات وتقسيم الرموز البرمجية تلقائيًا وغيرها، مع الحفاظ على بساطة نشر المواقع الإلكترونية الثابتة.
Next.js
كان إصدار Next.js 13.4 في أيار (مايو) 2023 مميّزًا بشكلٍ خاص، إذ وفّر دعمًا ثابتًا لمكوّنات React Server وميزة البث وSuspense. ومنذ ذلك الحين، يواصل Next.js توفير دعم لواجهات برمجة التطبيقات الجديدة في React (مثل Server Actions) وتحسين تجربة المطوّرين من خلال مبادرات مثل Turbopack. تشمل أهم الميزات الأخرى ما يلي:
- App Router: أصبح App Router، الذي أصبح متوفّرًا في الإصدار 13.4 من Next.js، طريقة جديدة لتنظيم وإدارة عمليات التوجيه في تطبيقات Next.js. يُعدّ "مسار التطبيق" شرطًا أساسيًا لاستخدام ميزات Next.js الجديدة، مثل التنسيقات المشتركة والتوجيه المُدمَج، بالإضافة إلى واجهات برمجة تطبيقات React الجديدة، مثل React Server Components وSuspense وServer Actions في تطبيق Next.js.
Turbopack: نهج (قيد الاختبار حاليًا) لعرض الصفحة يستند إلى React's Suspense API. يعرض التقديم المُسبَق المُجزأ الصفحة باستخدام ملفّ تحميل ثابت. ومع ذلك، تترك القشرة "ثغرات" للمحتوى الديناميكي داخل الصفحة، ويتم تحميل هذا المحتوى بشكل غير متزامن. ويمنح ذلك مزايا الأداء التي توفّرها الصفحات الثابتة القابلة للاحتفاظ بها في ذاكرة التخزين المؤقت، مع إمكانية دمج البيانات الديناميكية في محتوى الصفحة.
Vue
يتضمّن أحدث إصدار من Vue، وهو Vue 3.4، مجموعة متنوعة من تحسينات الأداء. تعمل Vue حاليًا أيضًا على تطوير Vue Vapor، وهو منصّة برمجية تهدف أيضًا إلى تحسين الأداء. في ما يلي بعض أهم الميزات التي تقدّمها هذه المساحة:
- إصدار Vue 3.4: تشمل الميزات "أداة تحليل تمت إعادة كتابتها بالكامل وتكون أسرع مرتين، وعمليات ترجمة SFC أسرع، ونظام إعادة صياغة للتفاعل الذي يُحسِّن كفاءة إعادة الحساب ".
- وضع Vapor في Vue: تعمل Vue على وضع Vapor، وهو استراتيجية تجميع مخصّصة للأداء ومخصّصة للاستخدام بعد الموافقة عليها، وتعمل مع مكونات ملف واحد في Vue. يُنشئ وضع Vapor رمزًا أفضل أداءً مقارنةً بالرمز الذي يُنشئه حاليًا "مُجمِّع Vue". بالإضافة إلى ذلك، يؤدي استخدام وضع Vapor مع جميع المكوّنات إلى عدم الحاجة إلى استخدام ملف Vue Virtual DOM (الذي يقلل حجم الحِزمة).
- إيقاف Vue 2 نهائيًا: كان 31 كانون الأول (ديسمبر) 2023 هو تاريخ إيقاف Vue 2 نهائيًا. ومع ذلك، لا يزال Vue 2 مستخدمًا بشكلٍ شائع إلى حدٍ ما: فنحو% 50 من عمليات تنزيل حزمة npm الخاصة بـ Vue هي لإصدار Vue 2.
Nuxt
اقترب موعد إصدار Nuxt 4. بالإضافة إلى إصدارات إطار عمل Nuxt المتكرّرة خلال العام الماضي، نمت منظومة وحدات Nuxt لتضمّن 220 وحدة تقريبًا. تشمل بعض التطورات الأخيرة في هذا المجال ما يلي:
- إصدارات Nuxt 3.x: تُصدر Nuxt عادةً إصدارات تكميلية جديدة شهريًا. تشمل بعض الميزات البارزة في هذه الإصدارات التوافق مع IDE IDE Vite 5 والصفحات المخصّصة للخوادم فقط والصفحات المخصّصة للعملاء فقط والتوافق مع Node.js على جانب العميل وعمليات البث المضمّنة في الويب. * Nuxt Modules: تشمل أهم الميزات في المنظومة المتكاملة لـ وحدات Nuxt إصدار nuxt/fonts المُعدّل الجديد، وإصدار 1.0 من nuxt/image وأدوات تطوير Nuxt. ستتضمّن الإصدارات القادمة من الوحدات nuxt/scripts وnuxt/hints وnuxt/a11y وnuxt/auth.
- مكونات الخادم (مكونات الجزر): يواصل Nuxt تطوير ميزات مكونات الخادم (التي تُعدّ في الوقت الحالي تجريبية). في Nuxt، يمكن استخدام هذه المكوّنات المعروضة من الخادم داخل المواقع الإلكترونية الثابتة، ما يتيح استخدام بنية المواقع الإلكترونية.
صلب
تعمل شركة Solid على إصدار 1.0 الثابت من إطار العمل الوصفي SolidStart. يتميز SolidStart بتفاعل دقيق وتوجيه متجانس ودعم لأنواع متعدّدة من أوضاع العرض. تشمل أهم الميزات ما يلي:
- التفاعل الدقيق: يتيح نظام التفاعل في Solid إجراء تعديلات دقیقة وتحقيق أداء مثالي، ما يتيح المعالجة الفعالة وإدارة الحالة.
- التوجيه المماثل: يوفّر SolidStart نهجًا موحّدًا للتوجيه، ويسمح للمطوّرين بتحديد مسارات تعمل بسلاسة على كلّ من العميل والخادم.
- أوضاع العرض المرنة: تتيح أداة SolidStart أوضاع عرض مختلفة، بما في ذلك العرض من جهة الخادم وإنشاء المواقع الإلكترونية الثابتة والعرض من جهة العميل، مما يمنح المطوّرين المرونة في اختيار أفضل نهج لتطبيقهم.
Svelte
في العام الماضي، ركّز فريق Svelte على الإصدار القادم من Svelte 5، والذي سيكون مهمًا. تشمل أهم الميزات الأخرى ما يلي:
- إصدار Svelte 5 قادم: بالإضافة إلى تضمين "إعادة كتابة لمجمع Svelte ووقت تشغيله"، يقدّم Svelte 5 أيضًا مفهوم الرموز Runes.
- إعلان عن الرموز Runes: الرموز Runes هي ميزة ستأتي قريبًا في Svelte 5. "توفّر الأحرف الرونية تفاعلاً عامًا دقيقًا... باستخدام الرموز، تتجاوز التفاعلية حدود ملفاتك التي تنتهي بالنطاق .svelte... تعتمد سرعة استجابة Svelte 5 على الإشارات، ولكن [على عكس الإطارات الأساسية الأخرى]، في Svelte 5، تكون الإشارات هي تفاصيل التنفيذ الأساسية بدلاً من التفاعل معها مباشرةً".
- إصدار SvelteKit 2: SvelteKit هو إطار عمل ميتافيرس لـ Svelte. تشمل الميزات في هذا الإصدار التوجيه غير المتعدّد المستويات وإتاحة استخدام Vite 5.
Chrome Aurora
Chrome Aurora هو فريق في Google يتعاون مع مختلف أطر عمل الويب المفتوحة المصدر لتحسين تجربة المستخدم، خاصةً الأداء، على الويب. في ما يلي بعض المبادرات التي ساهمنا فيها خلال العام الماضي:
- الصور (next/image، NgOptimizedImage، nuxt/image)
- أدوات الخطوط (next/font، nuxt/fonts وunjs/fontaine (مكوّن إضافي في Vite)
- تحميل النصوص البرمجية (next/script و nuxt/scripts)
- تحميل النصوص البرمجية التابعة لجهات خارجية (next/third-parties و nuxt/third-parties وYouTube ومكونات "خرائط Google")
- العرض: (Angular SSR / hydration)
الخاتمة
تواصل المنظومة المتكاملة لإطار عمل JavaScript التطور بوتيرة سريعة، ويقدّم كل إطار عمل مجموعة من الابتكارات والتحسينات. سواءً كان يهمّك الاطّلاع على أحدث الميزات في إطارات العمل الراسخة، مثل Angular وReact وVue، أو استكشاف خيارات أحدث، مثل Astro وRemix وSolid، لن تجد صعوبة في مواكبة التطورات المشوّقة.
وبصفتنا مطوّرين، يساعدنا البقاء على اطّلاع على هذه التطورات في اتّخاذ قرارات مدروسة عند اختيار إطار عمل لمشاريعنا. من خلال فهم نقاط القوة والميزات الفريدة لكل إطار عمل، يمكننا اختيار الإطار الذي يتوافق بشكل أفضل مع متطلبات المشروع والخيارات المفضّلة للتطوير.
نأمل أن تكون هذه النظرة العامة قد زوّدك بلمحة عن الحالة الحالية لإطارات عمل JavaScript. للاطّلاع على مزيد من التفاصيل حول المواضيع التي تتناولها هذه المشاركة، يُرجى الاطّلاع على المحادثة المصاحبة من مؤتمر Google I/O. مع أطيب التحيّات،