🕵️ 🏵️ 👩🏽‍🔧 لماذا يجب عليك استخدام Svelte لمشاريع الويب الخاصة بك 🐸 👩‍❤️‍💋‍👨 🍟

إذا كنت مطور ويب ، فربما تكون قد سمعت عن Svelte Js. ومع ذلك ، أعتقد أنك سوف تتساءل لماذا تكتسب شعبية وما المزايا المثيرة للاهتمام التي تتمتع بها لمطوري الويب.

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

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

ما هو Svelte وما مزاياه؟

بالنسبة لبعض المطورين ، يُعرف Svelte JS بأنه إطار العمل الأكثر شعبية للواجهة الأمامية الذي لم يتم تضمينه في الستة الأوائل من حالة جافا سكريبت في 2018. هناك مقالة ويكيبيديا حول Svelte ، لكنها ظهرت قبل ستة أشهر فقط ، لذلك لا يوجد الكثير من المعلومات هناك.

وقد صممت ممشوق كإطار، ولكن، في الواقع، بل هو عنصر الإطار مصممة لتجميع المكونات في مرحلة البناء. بفضل هذا النهج ، يمكنك تحميل bundle.js واحدة فقط لكل صفحة لتقديم التطبيق بأكمله.

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

فيما يلي وصف موجز لـ Svelte من المؤلفين:

المصدر: Svelte.dev

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

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

نظرة عامة على هندسة Svelte

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

كيف يعمل Svelte

سأحاول شرح مبدأ Svelte في أبسط الكلمات:

قمت بفتح الموقع.
اعرض الصفحة بتنسيق JS خالص.
تقوم بتمرير الصفحة إلى زملائك [إذا كنت تعمل أكثر من واحد].
يتوقع الزملاء تفاعلًا حقيقيًا من الصفحة.
إذا وجدوا ، يجب أن يعمل التطبيق / الموقع بسلاسة ، ليس فقط في وضع الاختبار ، ولكن أيضًا في المعركة.

Svelte JS vs. رد فعل مقابل فيو: مقارنة

يقارن العديد من المهندسين Svetle.Js مع أطر أخرى. أشهر البدائل هي React و Vue.

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

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

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

نتيجة لذلك ، يبني Svelte 3 DOM منخفض الوزن. على سبيل المثال ، يزن تطبيق TodoMVC على Svelte في شكل مضغوط 3.6 كيلو بايت. للمقارنة ، يزن React plus ReactDOM ، حتى بدون رمز التطبيق ، 45 كيلوبايت تقريبًا في شكل مضغوط. يستغرق تنزيل TodoMVC بالكامل على React وقتًا أطول 10 مرات على المتصفح من Svelte.

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

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

وفقًا لـ GitHub ، يعد Svelte Native أسرع بشكل ملحوظ من Ember أو Angular أو React أو Ractive أو Preact أو Mithril أو Riot. حتى أنه قادر على التنافس مع Inferno ، والذي ربما يكون أسرع إطار عمل لواجهة المستخدم في العالم في الوقت الحالي. في النهاية ، هذه ميزة حاسمة ، لأن سرعة التطبيق الأعلى يمكن أن تدفعك قبل المنافسة.

مكونات Svelte

دعونا نتعمق في تفاصيل هيكل Svelte. يمكن أن يحتوي أي مكون PWA [تطبيق ويب تقدمي] على Svelte على ثلاثة أقسام: البرنامج النصي والنمط والقالب. فيما يلي وصف أكثر تفصيلاً لما يُقصد به:

علامة البرنامج النصي: كتلة JavaScript اختيارية مع إعلانات عن الوظائف والمتغيرات المستخدمة داخل المكون.

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

قالب قالب: هذا هو الكتلة الإلزامية الأخيرة والوحيدة ، وعادة ما تكون علامة H1. هذه هي طريقة العرض والعرض للمكون الخاص بك. يرتبط ارتباطًا وثيقًا بالكتل النصية وكتل الأنماط ، لأنه يحدد سلوكه وتصميمه.

للحصول على فكرة أفضل لإنشاء كل هذه المكونات ، أقترح أن تقرأ شرحًا موجزًا ومفهومًا من لقطة رمز:

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

من الجدير بالذكر أيضًا أن Svelte يتفاعل بشكل جيد مع متغير JavaScript يسمى name. هذا مفهوم جديد من Svelte v3. يمكن الآن الوصول إلى أي متغير في البرنامج النصي للمكون الخاص بك من ترميز HTML. ولا توجد أي بنية خاصة بإطار العمل ستحتاج إلى تعلمها لإدارة الحالات. لا تحتاج للتعامل معهاdataVue أو $scopeAngular أو this.stateReact. بدلاً من ذلك ، يمكنك استخدام كل مكان letلتحقيق قيم الحالة المعينة. يؤدي تغيير القيم في كل مرة تلقائيًا إلى إعادة العرض.

هكذا تبدو في الممارسة:

يشبه إنشاء مكون Svelte العمل مع CodePen. ليس عليك أن تتساءل عن كيفية ربط وظيفة JS التصريحية التي تعلمتها من خلال البعض DOM query-selector. لن يؤثر Svelte window listenersأو callback functions. تبقى هذه الأساسيات كما يجب أن تكون.

شيء آخر لطيف حول هذه المكونات هو أنها ذات أولوية مثل المكونات التقليدية. كل ما عليك فعله هو استيراد .html وسيفهم Svelte كيفية نشره.

ماذا تريد أن تعرف عن Svelte.js

لنتحدث عن المزايا الأخرى المهمة لـ Svelte في عملية التطوير مقارنةً بالأطر الأخرى.

صديقة للمبتدئين

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

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

هناك غرابة واحدة في Svelte تستحق الذكر: فهي تمرر الخصائص إلى المكونات. هذا الإطار سهل التعلم ويعمل بكامل طاقته ، ولكن حسب ذوق بعض المطورين ، فإن البنية غريبة للغاية.

التوافق

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

فصل الكود

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

دعم مجتمع المصدر المفتوح

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

هو Svelte مستقرة بما فيه الكفاية وموثوق بها

هذه قضية ملحة للإطار الذي تم طرحه في السوق مؤخرًا. جميع الأمثلة المذكورة أعلاه تتعلق ببناء النسخة Svelte من الإصدار 3. في الوقت الحالي ، لا تزال في مرحلة تجريبية. بالمقارنة مع عمالقة الصناعة مثل ReactJS و VueJS ، فهي ليست متطورة للغاية.

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

هل Svelte.js هو العملاق التالي؟

من الصعب الإجابة. هل يمكن لـ Svelte التغلب على Vue و React كإطار أمامي يتحمل اختبار الزمن؟

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

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

Svelte vs. رد الفعل هو موضوع شائع للنقاش بين المبرمجين ، ولكن أحد الأطر ليس بالضرورة أفضل بشكل واضح من الآخر. Svelte مناسب تمامًا لتطوير تطبيقات الويب أو MVP ، في حين أن Angular مناسب تمامًا لتطبيقات الويب PWA أو المؤسسة. يجد بعض المطورين إطار عمل يعجبهم ويلتزمون به ، ولكن مع ذلك ، لا تدع هذا يحاول تجربة Svelte. قد ترغب في الميزات التي وصفناها.

دعنا نذهب لفترة وجيزة من خلال الميزات الرئيسية لـ Svelte

مرة أخرى : ️

هذا إطار عمل قائم على المكونات ولا يتطلب مكونات إضافية إضافية.
️ يعمل مع إدارة الدولة دون أي صعوبات مألوفة.
️ يسمح لك باستخدام الأنماط المضمنة [في المكون] ، دون الحاجة إلى CSS-in-JS ، لذلك لا يلزم وجود ملحقات لمحرر التعليمات البرمجية أو بناء جملة غريب.
️ يكفي إنشاء برنامج نصي بسيط للغاية.
work لبدء العمل في المشروع الأساسي ، لا يلزم عمليا أي ملفات.

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

لماذا يجب عليك استخدام Svelte لمشاريع الويب الخاصة بك