قد يكون من الصعب مواكبة كل شيء يجري في أطر عمل JavaScript. يقدّم هذا المستند لحظات بارزة موجزة عن آخر الأحداث في المنظومة المتكاملة لأُطر عمل JavaScript على مدار العام الماضي أو نحو ذلك. ولمناقشة المزيد من هذه المواضيع، يمكنك الاطّلاع على محاضرة التنقل في المنظومة المتكاملة لأُطر عمل JavaScript من فعالية مؤتمر Google I/O لهذا العام.
اتجاهات إطار العمل وتقاربه
كما هو موضح في المخطط، تتقارب إطارات عمل JavaScript مع عدد من الميزات والبُنى الأساسية المماثلة. ويشمل ذلك البنية القائمة على المكونات والتوجيه القائم على الملفات ودعم SSR الحديث. يوضح هذا التقارب نضج النظام الشامل وتطوره، حيث تتعلم أطر العمل من بعضها البعض وتتبنى أفضل الممارسات.
وفي الوقت نفسه، يستمر عدد من المؤشرات الحديثة (مثل مكونات الخادم والأساليب المختلفة للتفاعل الدقيق) في تمييز أُطر العمل الفردية. للمساعدة في فهم هذه الاتجاهات بشكل أفضل، نتعمق فيها إطار عمل واحد في كل مرة.
Angular
احتوت إصدارات Angular الأخيرة على مجموعة متنوعة من التغييرات المهمة، بما في ذلك الإشارات، والمشاهدات التي يمكن تأجيلها، وNgoptimziedImage، وشرب الماء غير المدمر، والترطيب الجزئي. تشمل بعض أبرز الميزات ما يلي:
- الإشارات: الإشارات هي نهج تستخدمه أطر عمل متعددة (بما في ذلك Angular الآن) لتحديد حالة التتبّع في أحد التطبيقات. يمكن أن تساهم ميزة Angular Signals في تحسين أداء وقت التشغيل، بما في ذلك التفاعل حتى سرعة استجابة الصفحة (INP)، عن طريق تقليل عدد العمليات الحسابية التي يجب أن تحدث أثناء رصد التغيير.
- طرق العرض التي يمكن تأجيلها: تتيح طرق العرض القابلة للتأجيل تأجيل تحميل مكونات وتوجيهات ومسارات معيّنة. على سبيل المثال، يمكنك تأجيل تحميل التبعية حتى يدخل المحتوى إلى إطار العرض أو حتى تصبح سلسلة التعليمات الرئيسية غير نشطة.
- NgOptimizedImage: NgOptimizedImage هو أحد مكونات الصور في Angular، وهو يتيح تلقائيًا تبني أفضل ممارسات تحميل الصور.
- تحويل صفحة ويب ثابتة إلى صفحة ديناميكية: تعمل عمليات تحويل الماء غير المدمرة على إصلاح الوميض الذي قد يحدث عند إعادة إنشاء نموذج العناصر في المستند (DOM) لتطبيقات Angular المعروضة من جهة الخادم.
- الترطيب الجزئي: سيصدر فريق Angular قريبًا معاينة للمطوّرين حول الترطيب الجزئي. في حال استخدام الترطيب الجزئي، لا يحمِّل المتصفّح تلقائيًا أي محتوى من JavaScript للصفحة عند عرض الصفحة. بدلاً من ذلك، تتم ترطيب أجزاء معينة من الصفحة أثناء تفاعل المستخدم مع الصفحة.
نجم
تعمل Astro، وهي أداة حديثة لإنشاء المواقع الثابتة، على إحداث تغييرات في نهجها المبتكر في مجال تطوير البرامج على الويب. من خلال التركيز على الأداء وتجربة المطورين، أصدرت العديد من الميزات والتحديثات المثيرة:
- جزر أسترو: تسمح Astro آيلاند للمطورين بإنشاء مكوِّنات واجهة مستخدم تفاعلية منعزلة عن باقي أجزاء الصفحة. ويتيح ذلك إجراء تحديثات فعّالة وأداء أمثل.
- العرض المختلط: تتيح Astro الآن العرض المختلط، حيث تجمع بين مزايا إنشاء المواقع الإلكترونية الثابتة والعرض من جهة الخادم لتحسين المرونة.
- مكوّنات الصور والصورة: طرحت Astro مكوّنات جديدة للصور والصور تبسّط معالجة الصور وتوفّر تحسينًا تلقائيًا.
- عرض دعم عمليات النقل: تقدم Astro دعمًا مضمّنًا لواجهة برمجة تطبيقات View Transitions، ما يتيح عمليات انتقال سلسة وسلسة للصفحات.
- شريط أدوات Astro Dev: يوفّر شريط أدوات Astro Dev مجموعة فعّالة من الأدوات لتصحيح الأخطاء في تطبيقات Astro وتحسينها.
تفاعل
في العام الماضي، قدّم إصدار مكوّنات خادم React نهجًا جديدًا لاستخدام عناصر React (التفاعل). ومنذ ذلك الحين، عمل فريق React على ميزات جديدة متنوّعة، منها ميزات React Compiler وServer Actions، بالإضافة إلى:
- مكوّنات الخادم: مكوّنات خادم التفاعل هي مكونات تجلب البيانات ويتم عرضها على الخادم قبل بثها إلى العميل. ينقل هذا عمل العرض إلى الخادم ويقلل من كمية التعليمات البرمجية التي يجب شحنها إلى العميل.
- React Compiler: React Compiler هو مجمع يمكنه تلقائيًا حفظ المكونات. يؤدي ذلك إلى تحسين الأداء عن طريق تقليل عمليات إعادة العرض غير الضرورية. ذكر فريق React أنّ المطوّرين سيتمكّنون من استخدام React Compiler بدون إجراء أي تغييرات على الرموز البرمجية.
- إجراءات الخادم: تتيح الإجراءات في الخادم إمكانية الاتصال من عميل إلى خادم. باستخدام "إجراءات الخادم"، يمكنك تحديد الدوال من جهة الخادم التي يمكن استدعاؤها مباشرةً من مكوّنات React، ما يلغي الحاجة إلى طلبات البيانات اليدوية من واجهة برمجة التطبيقات وإدارة الحالات المُعقّدة. يمكن أن يكون هذا مفيدًا بشكل خاص لأشياء مثل طفرات البيانات وعمليات إرسال النماذج.
- تحميل مواد العرض: يعمل تطبيق React على تطوير واجهات برمجة تطبيقات وصفية لتحميل مواد العرض مسبقًا وتحميلها، مثل النصوص البرمجية والأنماط والخطوط والصور.
- العرض خارج الشاشة: يعمل التفاعل أيضًا على العرض خارج الشاشة. "العرض خارج الشاشة" هو ميزة قادمة في React لعرض الشاشات في الخلفية بدون الحاجة إلى بذل مجهود إضافي في الأداء. يمكنك اعتبارها نسخة من خاصية content- visibility CSS التي تعمل ليس فقط مع عناصر DOM ولكن مع مكونات React أيضًا.
ريمكس
يكتسب Remix زخمًا في منتدى المطورين، وهو عبارة عن إطار عمل ويب متكامل. بتركيزه على أساسيات الويب وتحسين تجربة المطوّرين، قدَّم Remix العديد من التحديثات المهمة:
- إصدار Remix 2.0: تم إطلاق Remix 2.0 في أيلول (سبتمبر) 2023 وإضافة تحسينات كبيرة إلى هذا الإطار.
- الدعم الثابت لنظام Vite: يوفّر Remix الآن دعمًا ثابتًا لـ Vite، وهي أداة إنشاء سريعة وخفيفة، تقدّم إصدارات أسرع للتطوير وأداءً محسَّنًا.
- وضع SPA: قدّمت ميزة Remix وضع SPA، الذي يتيح إنشاء مواقع إلكترونية ثابتة بشكل كامل بدون الحاجة إلى خادم JavaScript في الإنتاج. يتيح ذلك للمطوّرين استخدام ميزات Remix الفعّالة، مثل التوجيه المستند إلى الملفات والتقسيم التلقائي للرموز وغير ذلك، مع الحفاظ على بساطة النشر الثابت للموقع الإلكتروني.
Next.js
كان إصدار Next.js 13.4 في أيار (مايو) 2023 جديرًا بالملاحظة بشكل خاص لأنّه أشار إلى الدعم الثابت لمكوّنات خادم React والبث والتشويق. ومنذ ذلك الحين، واصلت Next.js توفير الدعم لواجهات برمجة تطبيقات React الجديدة (مثل إجراءات الخادم)، وتكرار تجارب المطوّرين من خلال مبادرات مثل Turbopack. تشمل الميزات البارزة الأخرى ما يلي:
- جهاز توجيه التطبيقات: أصبح موجه التطبيقات، الذي أصبح ثابتًا في الإصدار 13.4 من Next.js، طريقة جديدة لهيكلة وإدارة التوجيه في تطبيقات Next.js. "جهاز توجيه التطبيقات" هو شرط أساسي لاستخدام ميزات Next.js الجديدة، مثل التنسيقات المشتركة والتوجيه المتداخل، بالإضافة إلى واجهات برمجة التطبيقات React API الجديدة مثل مكوّنات خادم React والتشويق وإجراءات الخادم في تطبيق Next.js.
Turbopack: أسلوب تجريبي حاليًا في عرض الصفحات تم إنشاؤه استنادًا إلى واجهة برمجة تطبيقاتSuspense من React. ويعرض العرض المُسبَق الجزئي الصفحة باستخدام واجهة تحميل ثابتة. ومع ذلك، تترك الواجهة "ثقوبًا" للمحتوى الديناميكي داخل الصفحة، ويتم تحميل هذا المحتوى بشكل غير متزامن. ويوفّر هذا مزايا الأداء للصفحة الثابتة القابلة للتخزين المؤقت، مع القدرة في الوقت نفسه على دمج البيانات الديناميكية في محتوى الصفحة.
مكان
شمل أحدث إصدار من Vue، Vue 3.4، مجموعة متنوعة من تحسينات الأداء. تعمل Vue حاليًا أيضًا على Vue Vapor، التي تركّز أيضًا على الأداء. في ما يلي بعض أبرز ما يحدث في هذا المجال:
- تم طرح الإصدار Vue 3.4: تشمل الميزات "محلّلًا لغويًا معاد كتابته بالكامل يتميز بمضاعفة سرعة وسرعة تجميع SFC، فضلاً عن نظام تفاعل مُعاد تأهيله يحسّن إعادة الحوسبة.
- وضع Vue Vapor: تعمل Vue على وضع بخار، وهي استراتيجية تجميع مبنية على الأداء ومبدأة بالتفعيل ومتوافقة مع مكوّنات الملف الفردي في Vue. ينشئ وضع البخار رمزًا برمجيًا أكثر أداءً من الرمز الذي أنتجه أداة Vue Compiler حاليًا. بالإضافة إلى ذلك، يؤدي استخدام وضع البخار مع جميع المكوّنات إلى إلغاء الحاجة إلى Vue Virtual DOM (مما يؤدي إلى تقليل حجم الحزمة).
- تاريخ انتهاء صلاحية Vue 2 هو EOL: كان تاريخ انتهاء دورة Vue 2 هو 31 كانون الأول (ديسمبر) 2023. ومع ذلك، لا يزال Vue 2 يستخدم على نطاق واسع: حوالي 50٪ من عمليات تنزيل حزم Vue npm تتوفر لـ Vue 2.
نوكست
إنّ Nuxt بالقرب من إصدار Nuxt 4. بالإضافة إلى إصدارات إطار العمل المتكررة من Nuxt على مدار العام الماضي، نما المنظومة المتكاملة لوحدات Nuxt إلى ما يقرب من 220 وحدة. وتشمل بعض التطورات الأخيرة في هذا المجال ما يلي:
- إصدارات Nuxt 3.x: تشحن Nuxt عادةً إصدارات جديدة كل شهر. وتشمل بعض أهمّ الميزات من هذه الإصدارات دعم Vite 5 وصفحات الخادم فقط والعميل فقط ودعم Node.js من جهة العميل ومصادر بيانات الويب الأصلية. * وحدات Nuxt: تشمل أهم الأخبار في المنظومة المتكاملة لوحدات Nuxt إطلاق وحدة nuxt/fonts الجديدة والإصدارات 1.0 من nuxt/image وNuxt DevTool. ستشمل الإصدارات القادمة الخاصة بالوحدات nuxt/scripts وnuxt/hints وnuxt/a11y وnuxt/auth.
- مكونات الخادم (مكونات الجزر): يستمر Nuxt في تقديم دعمه لمكونات الخادم (التي تُعد تجريبية حاليًا). في Nuxt، يمكن استخدام هذه المكونات التي يعرضها الخادم في المواقع الثابتة - مما يتيح تبني بنية الجزر.
صلب
تعمل شركة Solid على توفير الإصدار 1.0 المستقر لإطار العمل الوصفي SolidStart. يتميز SolidStart بتفاعلات دقيقة والتوجيه المتماثل الشكل والتوافق مع مجموعة متنوعة من أوضاع العرض. تتضمن أهم الميزات ما يلي:
- التفاعل الدقيق: يتيح نظام التفاعل الصلب إمكانية إجراء تحديثات دقيقة وأداء مثالي، ما يتيح العرض الفعال وإدارة الحالة.
- التوجيه المتماثل: يوفر SolidStart منهجًا موحدًا للتوجيه، ما يسمح للمطورين بتحديد المسارات التي تعمل بسلاسة على كل من العميل والخادم.
- أوضاع العرض المرنة: يتوافق SolidStart مع أوضاع عرض متعدّدة، بما في ذلك العرض من جهة الخادم وإنشاء المواقع الإلكترونية الثابتة والعرض من جهة العميل، ما يمنح المطوّرين المرونة في اختيار الطريقة الأفضل لتطبيقهم.
سفلت
في العام الماضي، ركز فريق Svelte على الإصدار القادم من Svelte 5، والذي سيكون مهمًا. تشمل الميزات البارزة الأخرى ما يلي:
- إصدار Svelte 5 قريبًا: بالإضافة إلى "إعادة كتابة المحول البرمجي لـ Svelte ووقت التشغيل"، يقدم Svelte 5 أيضًا مفهوم Runes.
- الإعلان عن إصدارات Rune: ميزة Runes هي ميزة قادمة في الإصدار Svelte 5. "إنّ عمليات التشغيل السريع تعمل على إتاحة تفاعل عام ودقيق... في عمليات تشغيل ملفات svelte، يتجاوز التفاعل حدود ملفات .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/النصوص البرمجية)
- تحميل النص البرمجي لجهة خارجية (next/rd-parties، وnuxt/rd-parties، ومكونات YouTube وخرائط Google من Angular)
- العرض: (Angular SSR / Hydration)
الخلاصة
تواصل المنظومة المتكاملة لإطار عمل JavaScript التطور بوتيرة سريعة، حيث يقدّم كل إطار عمل مجموعته الخاصة من الابتكارات والتحسينات. سواء كنت مهتمًا بأحدث ميزات أطر العمل المعتمَدة، مثل Angular وReact وVue، أو كنت تريد استكشاف خيارات جديدة مثل Astro وRemix وSolid، لن نملك نقصًا في أحدث التطورات المشوّقة لمواكبةها.
بصفتنا مطورين، يساعدنا البقاء على اطلاع بهذه الإنجازات في اتخاذ قرارات مستنيرة عند اختيار إطار عمل لمشروعاتنا. من خلال فهم نقاط القوة والميزات الفريدة لكل إطار عمل، يمكننا اختيار الإطار الذي يتوافق بشكل أفضل مع متطلبات المشروع وتفضيلات التطوير.
نأمل أن تكون هذه النظرة العامة قد قدّمت لك لمحة عن الحالة الحالية لإطارات عمل JavaScript. وللتعمق أكثر في الموضوعات التي يتم تناولها في مشاركة المدونة هذه، تأكد من الاطلاع على المحاضرة المصاحبة لمؤتمر Google I/O. نتمنى لك وقتًا ممتعًا في الترميز.