Get best of the week

هل حان الوقت لننسى رد الفعل والترقية إلى Svelte؟

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

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

بالنسبة لي ، كانت إحدى النتائج الأكثر إثارة للاهتمام لـ State of JavaScript هي الاهتمام غير المتوقع لمن شاركوا في الاستطلاع بإطار Svelte الأمامي .

في التصنيف العام لأدوات الواجهة الأمامية الرائدة (بناءً على مؤشرات الوعي بالإطار والاهتمام به والرضا عنه) ، ظهر Svelte في المركز الثاني. يذهب إلى هناك مباشرة بعد React ، قبل الأدوات المعروفة مثل Vue.js و Preact و Angular و Ember .
لقد صدمني هذا قليلاً ، لأن Svelte هي أداة جديدة نسبيًا ، سواء من حيث العمر أو من حيث نموذج تطوير البرمجيات.


ترتيب أطر الواجهة الأمامية بناءً على بحث حالة JavaScript

أعلم أن العديد منكم يمكن أن يكون غاضبًا هنا ويقولون إن React و Svelte ليسوا مع ذلك أطر عمل ، بل مكتبات. أنا أعلم هذا ، لكن تقرير البحث لم أكتبه ، لذا دعنا نغلق سؤال المصطلحات حول هذا الموضوع.

لقد اكتشفت مثالاً على مشروع قالب Svelte وأنشأت تطبيق Hello World صغيرًا.


على اليسار هو أبسط مشروع رد فعل. على اليمين يوجد مشروع مماثل قائم على Svelte. على

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

هل يستحق الوقت لتعلم Svelte؟ ربما نواجه فقط شيء عصري آخر سيختفي بالسرعة التي ظهر بها؟ أقترح معرفة ذلك.

الغرض من الدراسة


أود أن أجيب على السؤال التالي: "هل يجب أن أتوقف عن إضاعة الوقت في التعلم وأبدأ في التعامل مع Svelte؟"

سنبحث عن إجابة لهذا السؤال من خلال استكشاف الاختلافات الأساسية بين React و Svelte. سيسمح لنا هذا بفهم الصفات الفريدة لكل أداة من هذه الأدوات. ونتيجة لذلك ، سنكتشف أيهما يستحق الاستثمار فيه.

نبدأ بمراجعة كل مكتبة ، ثم نتحدث عن إيجابياتها وسلبياتها ، ثم نستخلص النتائج.

تتفاعل


في العامين الماضيين ، كان الجميع يتحدثون حرفيا عن رد فعل. استولت هذه المكتبة ، التي أنشأتها Facebook ، بسرعة على عالم تطوير الويب. الآن هي أداة تطوير الويب التي تحتل المرتبة الأولى في العالم (الحقيقة ، الإجابة على سؤال "رقم واحد" أو لا تعتمد على من يطرح هذا السؤال).

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

فيما يلي ثلاث ميزات تفاعلية تجعل هذه المكتبة جذابة بشكل خاص:

  1. طبيعة تصريحية.
  2. هيكل التطبيق القائم على المكونات.
  3. سهولة الاستخدام من حيث الاندماج في حزمة التكنولوجيا الموجودة.

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

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

تم تصميم مكتبة React بحيث لا يهم بالضبط التقنيات المستخدمة في مجموعة أدوات المطور. يمكن "ثمل" الواجهة الأمامية لأي شيء. على سبيل المثال ، الواجهات الخلفية المستندة إلى Node.js و Ruby on Rails و Spring Boot و PHP وما إلى ذلك. هذه المكتبة محايدة تمامًا فيما يتعلق بما يجب أن تتفاعل معه.

لماذا يسمي البعض رد فعل "مكتبة" والبعض يسمي "إطار عمل"؟ لإنشاء تطبيق معين ، إلى جانب React ، تحتاج إلى استخدام مكتبات إضافية مستخدمة للتحكم في حالة التطبيق ، وللتوجيه وللتفاعل مع واجهات برمجة تطبيقات مختلفة. إذا قمت بإنشاء قالب مشروع رد فعل باستخدامcreate-react-app - لن يحتوي على مجموعة معينة من الأدوات التي يمكن توقعها من الإطار.

ممشوق


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

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

الكثير مما يمكن أن يُنسب إلى نقاط قوة React هو أساس Svelte. ريتش هاريس على دراية جيدة بمزايا وعيوب رد الفعل الداخلي.

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

لا يستخدم Svelte تقنية مثل مقارنة DOM الحقيقي والظاهري.

يأخذ المترجم Svelte مكونًا إعلانيًا ويحوله إلى رمز فعال وضروري ومنخفض المستوى يتفاعل مباشرة مع DOM.

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

صحيح ، مثل React ، يستخدم Svelte مكونات مكتوبة بأسلوب تعريفي. يبدأ معظم الفرق بين React و Svelte بعد إنشاء مشروع Svelte.

نقاط القوة والضعف في React و Svelte


لنتحدث عن نقاط القوة والضعف في المكتبات المدروسة.

▍ قدرات رد الفعل


  • دعم مجتمعي قوي.
  • الكثير من المكتبات لاختبار كود مكتوب على أساس رد الفعل.
  • دعم TypeScript.
  • أدوات مطور الجودة.
  • , .
  • React-.

▍ Svelte


  • , , Svelte.
  • - (HTML, CSS, JS).

    • JSX .
  • .

    • Svelte- 40% , React-.
  • ( ).
  • .

▍ React


  • DOM — .
  • .
  • .
  • - React.
  • JSX- .

▍ Svelte


  • ( React) .
  • TypeScript.
  • , , , .
  • , Svelte ( , ).


عودة إلى سؤالنا: "هل يجب أن أتوقف عن إضاعة الوقت في التعلم والتفاعل مع Svelte؟"

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

لا جدال في أن مشاريع Svelte تتمتع بأداء جيد للغاية.

تبدو الأفكار وراء Svelte جريئة وتقدمية. يتزايد حجم مجتمع Svelte. أنا متأكد من أن نجاح الأدوات الأمامية (بالإضافة إلى اتساع نطاق توزيعها) يعتمد بشكل كبير على المجتمع وكيف يعتمد المطورون هذه الأدوات.

نتيجة لذلك ، يمكننا القول أنه إذا استمر Svelte وكل ما يتعلق بهذه المكتبة في التطور بنفس الوتيرة ، فيمكننا أن نتوقع نشر هذه التكنولوجيا على نطاق واسع.

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

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

أنا متأكد من أن Svelte ينتظر الشيء نفسه. بعد كل شيء ، عالم تطوير الويب متقلب للغاية.

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

القراء الأعزاء! ما رأيك في Svelte؟

More articles:


All Articles