أي إطار عمل JS للاختيار؟ [2023]

تعد JavaScript من بين لغات البرمجة الأكثر استخدامًا حيث يمكنها إنشاء تطبيقات من جانب العميل والخادم.

تحتوي JavaScript على العديد من أطر العمل والمكتبات التي تبسط إنشاء تطبيقات الويب وتوسيع وظائفها.

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

ما هو Svelte؟

Svelte هو مترجم جافا سكريبت على الإنترنت مفتوح المصدر. على عكس معظم أطر عمل JavaScript التي تقوم بمعظم عملها في المتصفحات ، تستخدم Svelte مترجمها لتحسين كودها أثناء وقت الإنشاء.

تم إنشاء Svelte بواسطة Rich Harris في عام 2016 ومنذ ذلك الحين استقطب قاعدة مستخدمين كبيرة. وفقًا لاستطلاع Stack Overflow 2022 ، يعد Svelte من بين أكثر أطر عمل JavaScript المحبوبة.

لإنشاء Svelte ، يجب أولاً تثبيت Node.js على جهازك المحلي.

بعد تثبيت NodeJS ، يمكنك البدء باستخدام Svelte باستخدام هذه الأوامر:

npx degit sveltejs/template moz-todo-svelte

cd moz-todo-svelte

npm install

npm run dev

هذا ما سيتم عرضه على متصفحك

ميزات Svelte

• رد الفعل. Svelte تحديثات DOM في وقت البناء. لا يتعين على المطورين استخدام مكتبات إدارة الحالة الخارجية عند استخدام هذا الإطار.
• يستخدم جافا سكريبت عادي. المطورون الملمون بـ HTML و CSS وجافا سكريبت العادي سوف يتعلمون Svelte بسهولة.
• خفيف الوزن واستخدم رمزًا أقل. يمكنك إنشاء عالم ترحيب بسيط في Svelte باستخدام هذه الأسطر القليلة من التعليمات البرمجية:

<script>

  let name = "World"

</script>

<h1>Hello {name}!</h1>

فوائد استخدام Svelte

• الحجم الصغير: بالمقارنة مع الأطر الأخرى ، فإن تطبيق Svelte صغير ويتم تحميله بسرعة.
• بناء الجملة البسيط: من السهل تعلم Svelte بسبب تركيبها المباشر.
• لا يستخدم DOM الظاهري: تفتقر Svelte ، على عكس معظم الأطر ، إلى DOM الظاهري ، مما يؤدي إلى عرض سريع.
• أداء رائع: يجمع هذا المترجم عبر الإنترنت التعليمات البرمجية في وقت الإنشاء ، مما يؤدي إلى إنشاء تطبيقات سريعة وصغيرة.

ما هي React؟

React هي مكتبة JavaScript شائعة لإنشاء واجهات المستخدم. تتم صيانة هذه المكتبة مفتوحة المصدر بواسطة Meta (المعروفة سابقًا باسم Facebook) وتقوم بتشغيل واجهات المستخدم لتطبيقات الويب الشائعة مثل Airbnb و Facebook و Instagram.

كانت أول شركة تستخدم React هي Facebook في ملفها الإخباري. عندما أصبحت المكتبة مفتوحة المصدر في عام 2013 ، اختارتها المزيد من الشركات ، وأصبحت واحدة من مكتبات JavaScript الأكثر استخدامًا في مجال التطوير الحديث.

تعمل React أيضًا على NodeJS. بمجرد أن يكون لديك Node على جهاز الكمبيوتر الخاص بك ، قم بتشغيل هذه الأوامر لإعداد تطبيق React الخاص بك:

npx create-react-app my-app

cd my-app

npm start

هذا هو هيكل ملف تطبيق React

ميزات React

• امتداد JavaScript Syntax (JSX): يتيح JSX للمطورين كتابة كود HTML في نفس الملف الذي يحتوي على كود JavaScript. تختلف JSX أيضًا عن HMTL في كيفية تسمية أقسامها (DIVs) لأنها تستخدم “className” (camelCase) بدلاً من class.
• نموذج كائن المستند الافتراضي (VDOM): يحتوي React على تمثيل خفيف لـ DOM الحقيقي من خلال DOM الظاهري. عندما تتغير حالة الكائن ، يقوم VDOM بتحديث هذا الكائن فقط في DOM الحقيقي بدلاً من تحديث المشروع بأكمله.
• البنية المعيارية: تسمح React للمطورين بكتابة مكونات صغيرة وقابلة لإعادة الاستخدام. من السهل أيضًا تحديث هذه المكونات وصيانتها.

فوائد استخدام React

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

Svelte مقابل React: أوجه التشابه

على الرغم من اختلاف Svelte و React ، إلا أنهما يشتركان في بعض أوجه التشابه:

• القائم على المكونات. يتبع كل من Svelte و React بنية قائمة على المكونات. يسمح هذا الأسلوب للمطورين بتقسيم قاعدة التعليمات البرمجية الخاصة بهم إلى أجزاء صغيرة.
• رد الفعل. يلغي كلا الإطارين التدخل اليدوي حيث يتم تحديث تطبيقاتهما تلقائيًا عند تغيير البيانات.

Svelte مقابل React: الاختلافات

# 1. مقاس

إصدار Svelte’s .gzip هو 1.6 كيلو بايت فقط. وبالتالي يمكنك تحميل هذا التطبيق بسرعة وتأكد من الأداء العالي.

إصدار React .gzip هو 42.2 كيلوبايت. التطبيق أكبر قليلاً لأنه يأتي مع ReactDOM.

# 2. أداء

يستخدم React DOM الظاهري ، وهو تخزين ذاكرة مؤقت للتغييرات التي تُجرى على واجهة المستخدم. وبالتالي فإن React أسرع من نموذج كائن المستند التقليدي (DOM) المستخدم في Vanilla JavaScript حيث يؤخر DOM الظاهري التحديثات حتى يمكن إجراء العرض والتحديث بشكل فعال.

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

يؤدي غياب DOM الظاهري في Svelte إلى جعل تطبيق Svelte أسرع من React.

# 3. صيانة

عمر Svelte أقل من عقد من الزمان ، حيث تم طرحه في عام 2016. ومع ذلك ، فإن هذا المترجم عبر الإنترنت لديه فريق تطوير وصيانة مذهل.

يتم صيانة React بواسطة Meta والعديد من الشركات والمطورين الفرديين. تضم هذه المكتبة فريقًا مخصصًا يشرح سبب تقديمها دائمًا لميزات جديدة.

React يفوز عندما يتعلق الأمر بالصيانة.

# 4. اختبارات

يستخدم Svelte @ testing-library / svelte كإطار عمل للاختبار. تم تصميم المكتبة لاختبار التطبيقات باستخدام نهج يعكس عن كثب كيفية تفاعل المستخدمين مع التطبيق.

تستخدم React مكتبة اختبار React التي تختبر المكونات من منظور المستخدم. يمكنك أيضًا استخدام مكتبة Enzyme إذا كنت تريد التحكم الدقيق في عملية الاختبار.

خصصت Svelte و React مكتبات اختبار لمساعدة المطورين على بناء تطبيقات وظيفية. يمكنك أيضًا استخدام أطر عمل اختبار خارجية مثل Mocha لاختبار تطبيقات Svelte و React.

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

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

رد على الانتصارات على دعم المجتمع. هناك طلب مرتفع على مطوري React مقارنةً بـ Svelte.

# 6. مكتبات

لدى Svelte مجتمع مفتوح المصدر يوفر وظائف إضافية لـ React. على سبيل المثال ، يمكنك توجيه تطبيق Svelte الخاص بك باستخدام SvelteNavigator. يحتوي Svelte أيضًا على مكتبات واجهة مستخدم قوية مثل Sveltestrap و Svelte Material UI.

يتم دعم React من قبل مجتمعها مفتوح المصدر الذي ينشئ أدوات ومكتبات لتعزيز وظائفها. على سبيل المثال ، تحتوي هذه المكتبة على Material UI و React Bootstrap ومكتبات واجهة المستخدم ، كما تستخدم React Router للتوجيه. يستخدم React Next.js و Gatsby للتصيير من جانب الخادم.

على الرغم من أن مجتمع Svelte يعمل بجد لإضافة أدوات وأطر عمل ومكتبات جديدة ، إلا أن React لا تزال في المقدمة.

# 7. النحو وسهولة الاستخدام

يحتوي Svelte على بنية بسيطة ، باستخدام HTML و JavaScript و CSS خالص. أي شخص لديه معرفة أساسية بـ HTML و CSS و JavaScript سوف يتقن Svelte بسهولة.

تتمتع React بمنحنى تعليمي حاد حيث يتعين على المستخدمين تعلم وإتقان مفاهيم جديدة مثل JSX و CSS-in-JS. عند تسمية الفئات في div ، تستخدم React className (camelCase) ، والتي يمكن أن تربك شخصًا قادمًا من HTML و CSS.

يتفوق Svelte على بساطة بناء الجملة لأنه من الأسهل تعلمها لأولئك الذين يفهمون Vanilla CSS و HTML و CSS.

FeatureReact SvelteSize 42.2 كيلوبايت 1.6 كيلو بايت الأداء يستخدم Virtual DOM لا تستخدم Virtual DOMMaintenanceMeta والمطورين الفرديين والشركات فريق المطورين الأساسي بقيادة ريتش هاريس اختبار يستخدم React Testing LibraryUses @ testing-library / svelteCommunity supportHugeStill GrowSyntaxJSXPure و JavaScript

ايهما الافضل؟ رقيق أم رد فعل؟

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

متى تستخدم Svelte؟

• بناء المشاريع الصغيرة: يعتبر Svelte مناسبًا إذا كنت ترغب في إنشاء شبكة ويب بسيطة ، مثل موقع ويب خاص بمحفظة مع بعض الميزات.
• أنت تقدر الأداء والرمز المحسّن: لا تستخدم Svelte Virtual DOM ، مما يجعلها أسرع من تطبيقات React.
• تريد إنشاء واجهات مستخدم ديناميكية: يقوم هذا المترجم بترجمة التعليمات البرمجية إلى JavaScript محسّن للغاية ، مما يجعله مثاليًا لواجهات المستخدم التي تتغير كثيرًا.

متى تستخدم React؟

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

خاتمة

نأمل الآن أن تتمكن من المشاركة في مناقشة Svelte مقابل React وتوضيح أوجه التشابه والاختلاف وحالة الاستخدام الأفضل. تأكد دائمًا من تحديد طبيعة التطبيق الذي تريد إنشاؤه لاتخاذ قرار مستنير.

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

يمكنك أيضًا استكشاف الاختلافات بين React و React Native.