أكثر أطر عمل Node.js شيوعًا في عام 2022

يعد Express.js قديمًا مثل Node.js ، وبينما لا يزال Express يمثل إطارًا خلفيًا استثنائيًا ، فإن سلالة جديدة من الأدوات والأطقم تترك بصماتها.

والجدير بالذكر أن الاتجاه قد تحول نحو الأطر الوصفية ، حيث يتم إعادة توجيه إطار عمل شائع مثل React لدعم التطوير الكامل. تتمثل ميزة هذا النهج في أنه يمكنك الحفاظ على خبرتك في إطار عمل محدد والعمل في نفس الوقت على العناصر الخلفية. بمعنى آخر ، قم بالتطوير الكامل.

كيف تم الحصول على هذه البيانات؟

تم الحصول على جميع البيانات من الاستطلاعات مثل State of JavaScript و Stack Overflow Developer Survey والتجربة الشخصية في العمل مع مشاريع مختلفة. هذه ليست مراجعة تستند إلى إطار عمل Node.js الذي يحتوي على أكبر عدد من نجوم GitHub.

بدلاً من ذلك ، قمت بمقارنة عدد النجوم المكتسبة في العام الماضي. هذا مؤشر قوي على مدى نشاط مشروع معين ومدى استجابة المطورين له.

 إذا كنت ترغب في تجربة أي من هذه الأطر في بيئة الوقت الفعلي ، فراجع مقالتي حول استضافة الأنظمة الأساسية للمطورين. تحتوي كل منصة على خطة مجانية ، وتتيح لك جميعها تقريبًا استيراد GitHub repo واستضافته مباشرةً. 

على سبيل المثال ، يمكنك أن تأخذ أي ريبو وتعيشه في غضون دقائق.

اتجاهات Node.js الحالية

ستلاحظ خلال هذا المنشور أن العديد من الأطر المذكورة في هذه المقالة تستند إلى أعلى إطار عمل الواجهة الأمامية. يُشار إلى هذا أيضًا باسم إطار العمل التلوي . إذن ، ما هي الصفقة مع هذا ، ولماذا هذا النهج؟

إذا نظرنا إلى شيء مثل React ، فإن الطريقة التي تعرض بها الصفحة تتم من خلال CSR - Client-Side Rendering. بمجرد تقديم الطلب ، يتم إعطاء المتصفح ملف HTML مجردة بدون محتوى الصفحة الفعلي. لذلك ، يقوم المتصفح برحلة ثانية للحصول على مستند JavaScript الذي يحتوي على محتوى الصفحة ، ثم يسلمه ويعرض الصفحة الفعلية.

وسيستمر هذا في كل مرة يتفاعل فيها المستخدم مع الصفحة. على الرغم من بقاء HTML كما هو ، فإن طلبات التوجيه المختلفة تعني أن المتصفح يجب أن يستمر في التحرك ذهابًا وإيابًا لعرض المحتوى الذي يريده المستخدم.

غالبًا ما يشار إلى هذا أيضًا باسم SPA أو تطبيق صفحة واحدة.

وإليك الجوانب السلبية لهذا - نهج المسؤولية الاجتماعية للشركات:

• التخزين المؤقت - نظرًا لأن جميع محتويات الصفحة يتم عرضها من خلال JavaScript ، فلا يوجد محتوى HTML فعلي على الصفحة يمكن تخزينه مؤقتًا.
• مُحسّنات محرّكات البحث - بينما تزداد برامج الزحف "ذكاءً" ، هناك مشكلات محددة تتعلق بوجود محتوى فهرس برامج الروبوت يعتمد فقط على JavaScript.
• التقديم - غالبًا ما يكون التجسيد الأولي بطيئًا وغير مستجيب حتى ينتهي تحميل كل جافا سكريبت.

لذا ، في هذا السياق ، فإن الفكرة الكامنة وراء أطر عمل مثل Next و Nuxt هي أخذ إطار عمل الواجهة الأمامية ، ولكن إعطائها SSR (عرض جانب الخادم) من خلال Node.js.

الحديث عن SSR - نشر نيك جونستون جوهرًا مثيرًا للاهتمام بعنوان "التعقيد السخيف للعرض من جانب الخادم". وهناك أيضًا موضوع Hacker News مطابق مع الكثير من المناقشات حول هذا الموضوع. في حين أنه لن يتغير الكثير في المستقبل القريب ، أعتقد أن بعض هذه المفاهيم ستؤدي إلى تغيير كبير في كيفية عمل بعض الأطر.

# 1 - Next.js

أكثر من كونه إطار عمل React - تستمر شعبية Next.js في الازدياد بفضل وتيرة التطوير العالية بشكل سخيف. استغرق Next.js 10 إلى Next.js 12 عامًا واحدًا فقط.

المفهوم الأساسي وراء Next.js هو أنه يستخدم React كأساس ، لكنه ينفذ كل بنية العرض من جانب الخادم من خلال مواصفاته الخاصة. نظرًا لأن التقديم يتم من جانب الخادم ، فلن تضطر إلى عرض الصفحات من جانب العميل ، مما يوفر مزايا أداء هائلة وتحسين محركات البحث (SEO) حيثما يتعلق الأمر بذلك.

أحد الأسباب التي جعلت Next قد شهدت مثل هذا التبني الجماعي هو أنه يلغي الحاجة إلى بناء الواجهة الخلفية الخاصة بك. طوال الوقت ، يوفر طرقًا مفيدة لتحسين أداء تطبيقاتك خارج الصندوق. Vercel يحافظ عليه.

# 2 - عش

تمكنت NestJS بهدوء من جذب موافقة كبيرة من المجتمع الخلفي. تتمثل إحدى الفلسفات الرئيسية وراء نيست في أنه بينما تعمل أطر مثل React على تسريع تطوير الواجهة الأمامية ، فإن العديد من هذه الأطر تكافح لحل مشكلة بنية التطبيق. يحل Nest هذا من خلال نهج الهندسة أولاً.

وهو أمر خاص بالنهاية الخلفية بالطبع.

يعتمد Nest على ثلاثة مكونات أساسية (مستوحاة من Angular) - وحدات التحكم والمزودون والوحدات النمطية . استخدام الوحدات هو الطريقة التي يحاول بها Nest حل مشكلة التسلسل الهرمي المعقد للتطبيق. يمكن تصنيف كل مكون في وحدة منفصلة ، يمكنك من خلالها تكوين وحدات التحكم والتبعيات والموفرين الخاصين به.

# 3 - ستربي

مقطوعة الرأس هي كل الغضب في السرد الأمامي الحالي. وقد قام ستربي بعمل رائع في وضع نفسه كواحد من أطر CMS الرائدة بدون رأس.

إذن ، ما هو ستربي؟ من الناحية العملية ، فإن Strapi هي الواجهة الخلفية لتطبيق الواجهة الأمامية. بمعنى ما ، يلغي ستربي الحاجة إلى تعلم إطار عمل مثل Express لأنه يمكنه القيام بمعظم العمل القانوني من خلال واجهة برمجة التطبيقات الخاصة به.

يتضمن ذلك إدارة المحتوى الخاص بك من خلال واجهة مستخدم مخصصة ، ونقاط نهاية سريعة لـ GraphQL و REST ، وإدارة المستخدم (الأدوار ، وما إلى ذلك) ، وواجهة مكونة إضافية يمكنك البناء عليها. Strai هو إطار حيادي تمامًا ويتكامل عمليًا مع أي لغة أو إطار عمل أو مكتبة أمامية.

# 4 - ريمكس

Remix عبارة عن إطار عمل متكامل تم إنشاؤه بواسطة الأشخاص الذين صنعوا React Router.

أعتقد أن Remix هو أيضًا أحد أطر العمل الكاملة الأسرع نموًا التي رأيناها في السنوات الأخيرة. إذن ، كيف يحدث ذلك؟ أولاً ، يحاول Remix التكامل قدر الإمكان مع معايير الويب من خلال توفير واجهات برمجة تطبيقات موجزة لرموز الحالة الشائعة وتفاعلات المستخدم.

على عكس إطار العمل التقليدي ، لا ينشئ Remix هياكل قائمة على الشلال (المكون). بدلاً من ذلك ، يتم تحميل البيانات بالتوازي على جانب الخادم ثم يتم تقديمها كصفحة HTML. هذا يعني أيضًا أن الميزات المستندة إلى JavaScript (مثل عمليات إرسال النماذج) لن تؤدي إلى تعطيل الموقع إذا كان المستخدم قد تم تعطيل JavaScript.

# 5 - Nuxt

Nuxt 3 (لـ Vue 3) في إصدار تجريبي مفتوح: ترقب.

يعتمد Nuxt على Vue كإطار عمل متكامل لبناء تطبيقات قوية. إنه أيضًا إطار تعريف ، تم إنشاؤه لتحسين تجربة تطوير Vue الكامل بشكل كبير. يدعم Nuxt SSR و SPA والصفحات المولدة الثابتة.

الميزة الرئيسية لمطوري Vue هي أن Nuxt يمكنه عرض العروض مسبقًا وتقديمها كملفات ثابتة. هذا بطبيعة الحال له نتائج رائعة لتحسين مُحسّنات محرّكات البحث ويوفر دفعة كبيرة في التفاعل. ولكن هناك بعض الجوانب السلبية أيضًا.

في حين أن Vue لديها قناة ثابتة من جانب العميل ، فإن Nuxt لا تفعل ذلك. لذلك ، قد يكون التفاعل مع DOM بعد أن عرض Nuxt الصفحة بالفعل أمرًا صعبًا.

# 6 - SvelteKit

يتمتع Svelte بحالة الطفل الرائعة في عصر الواجهة الأمامية الحالي ، ويعمل الفريق على SvelteKit - إطار عمل مكدس كامل يبني على الجزء العلوي (يحل محله) من Sapper. يتميز SvelteKit بنظام توجيه معقد قائم على الملفات.

الهدف الأساسي لـ SvelteKit هو تسريع تطوير الويب عن طريق إزالة بعض الاختناقات الأكثر شيوعًا. من خلال تنفيذ Snowpack و Vite وأدوات خارجية أخرى - يمكن أن توفر SvelteKit تجربة تطوير غنية بالميزات.

أخيرًا ، تنفذ SvelteKit عملية الترطيب. القدرة على الاحتفاظ بالحالة النشطة لعناصر DOM التي تم عرضها من جانب الخادم.

# 7 - Fastify

يتعلق إطار عمل Fastify بالأداء ، وقد أظهرت المعايير الفردية أنه يمكنه التعامل مع ما يصل إلى 60 ألف طلب في الثانية. يمكنك تمديد Fastify (فوق الأدوات الرائعة بالفعل) من خلال الخطافات والمكونات الإضافية. وعلى الرغم من عدم كونه إطار عمل TypeScript أولاً ، إلا أن Fastify يدعم TypeScript.

عند الحديث عن المكونات الإضافية ، يحدث الكثير من تطوير Fastify من خلالها . لدرجة أن Fastify لديها مستودع رسمي لكل من المكونات الإضافية التي يصنعها المجتمع والتي صنعها فريق Fastify. تكمن الفكرة وراء المكونات الإضافية في أنها توفر بنية نظام نظيفة ، وتزيل الحاجة إلى الانتقال إلى أطر عمل بديلة. هذا يجعل Fastify مفيدًا بشكل خاص لبناء واجهات برمجة تطبيقات منخفضة الحمل مع أداء قوي في الوقت الفعلي.

# 8 - ريدوود

هل تحب واجهات برمجة التطبيقات؟ هل تحب JAMStack؟ إذا كانت الإجابة بنعم ، فستحب RedwoodJS. إنه إطار تطبيق ويب متكامل يستخدم الكثير من التقنيات الحديثة. وتشمل هذه التقنيات GraphQL و Prisma و Storybook و Jest. الواجهة الأمامية في Redwood مبنية على قمة React ، وستحصل أيضًا على دعم TypeScript كامل.

# 9 - اكسبرس

هل سقط Express عن النعمة؟ ليس تماما. لا يزال إطار العمل يتمتع بشعبية كبيرة ومحبوب ، وليس بقدر اللاعبين الكبار الآخرين. بالنسبة لفريق عمل مع Express لسنوات ، ليس من المنطقي التبديل إلى شيء آخر نظرًا لعدم وجود أية مشكلات أساسية. لا يزال الكثير من الأطر مبنيًا على Express.

# 10 - أدونيس

Adonis هو إطار عمل MVC للجهة الخلفية من TypeScript تم إنشاؤه لـ Node.js. ضع في اعتبارك أنه على الرغم من أن Adonis يصف نفسه بأنه إطار عمل خلفي ، إلا أنه من الجيد القيام بتطوير متكامل باستخدامه.

أحد الأسباب الرئيسية التي تجعل المطورين يحبون Adonis هو دعمه الأصلي لـ TypeScript.

ولكن أيضًا ، دعم ORM (Object Relational-Mapping) ، وممارسات الأمان القوية ، والوثائق سهلة المتابعة.

أخيرًا وليس آخرًا ، يتكامل Adonis مع النظام البيئي Node.js على مستوى أساسي ، لذا فإن امتلاك خبرة سابقة في تطوير Node يعد أمرًا ضروريًا إلى حد كبير.

# 11 - كيستون

آخر إطار عمل Node.js في هذه القائمة هو Keystone. وهو يشبه إلى حد كبير Express ، فهو موجود منذ اليوم الأول تقريبًا . وهذا يجعل Keystone إطارًا ناضجًا يوفر أدوات وتكاملات ملموسة لإنشاء تجربة صديقة للمطورين.

تتضمن بعض الميزات البارزة (التي تم تحسين العديد منها على مر السنين) في Keystone تقنية CRUD الآلية من خلال واجهة برمجة تطبيقات GraphQL ، والتي يمكنك توسيعها بشكل أكبر. بالإضافة إلى ذلك ، يمكنك إنشاء مكونات React.js الخاصة بك وتنفيذها.

يتم استخدام Keystone في العديد من مجالات التطوير ويعمل بشكل جيد مع تطبيقات الأجهزة المحمولة والمواقع العملية وواجهات متاجر التجارة الإلكترونية وغير ذلك الكثير.

ميتا ، مواطن ، وقليل من مقطوع الرأس

لقد مر وقت طويل منذ آخر مرة أجريت فيها نظرة عامة كهذه. كانت الأمور أبسط كثيرًا في ذلك الوقت ، وبينما لم يتم العثور على Compound and Locomotive في أي مكان ، من الجيد أن ترى Keystone و Express يشقان طريقهما عبر اختبار الزمن.

يمكنني القول أيضًا أن هناك قدرًا كبيرًا من الضجيج المحيط بـ Node.js. أعتقد أن بعض الناس غير سعداء ويشعرون بأنهم عالقون في ذلك. كما بدأت فكرة مديري الحزم (npm) في التطور مع استمرار الحزم في إضافة أكوام على أكوام من أحجام الحزم غير الضرورية إلى مشروع صغير الحجم بخلاف ذلك.

ولكن مهما كانت الحالة ، فإن شعبية كل إطار تتحدث عن نفسها. بشكل عام ، يسعد المطورون بالعمل مع الأطر الوصفية ، وقد يكون لذلك علاقة بحقيقة أنه يبسط أيضًا التطوير الكامل. هذا يلغي الحاجة إلى إعادة تعلم إطار عمل جديد مفضل من البداية.