سفلت

إطار عمل جافاسكربت

سِفلت (بالإنجليزية: Svelte)‏ هو مُجمع برمجي (Compiler) حر ومفتوحة المصدر لواجهات المستخدم على الويب، صُممه ريتش هاريس، يُدار عبر المتطوعين في الفريق الرئيسي لسِفلت[5]، على نقيض بقية إطارات عمل ومكتبات جافاسكربت لا يتبع سِفلت نفس النهج فبدلًا من أن يكون مكتبة تعدل على شجرة DOM، يتبع سفليت نهج المجمعات البرمجية (Compiler)، يحول قالب HTML إلى كُود مخصص بمقدوره التعديل على شجرة DOM مباشرةً، يُقلل ذلك حجم الملفات والبيانات المتبادلة بين الخادم والمتصفح، ويعطي أداءً أفضل.[6]

ويعد الكود الناتج من سِفلت تفاعليًا بمقدوره التعامل مع تغير البيانات وإعادة تصير المكونات (re-render) على الصفحة حال تغير البيانات، على عكس إطارات عمل جافاسكربت الإعتيادية التي تُحمل معها كود إضافي ليوفر بيئة وقت-التشغيل (Runtime) لإطار العمل تتمكن عبرها من تتبع التغيرات.

التاريخ

عدل

عمل ريش هاريس على Ractive.js في بداية التطوير، حيث أستلهم نموذجًا أوليًا لفكرة Svelte.[7]

كُتب الإصدار الأول من مُجمع سِفلت بلغة جافاسكربت، حيث أعتمد على Ractive.js في التفاعلية، وعلى المجمع في إنشاء العناصر، وتم اختيار الاسم سِفلت بواسطة ريتش هاريس وزملاءه بالعمل في صحيفة الغارديان، وصدر في 29 نوفمبر 2016، في حين صدر الإصدار الثاني من سفليت في 19 أبريل 2018، وكان بمثابة تصحيح للأخطاء التصميمية بالمجمع البرمجي في الإصدار الأول، وأصبحت القوالب تستخدم قوس معقوف واحد {}، بدلًا من قوسين معقوفين {{}}.[8]

أُعيد برمجة المجمع البرمجي في 21 أبريل 2019 بلغة تايب سكربت، وتم إعادة التفكير بشأن توفير التفاعلية عبر المحول البرمجي نفسه خلف الكواليس.

أطلق إطار عمل SvelteKit في أُكتوبر 2020، و أُعلن عن الإصدار التجريبي في مارس 2021.

نظرة عامة

عدل

أستطاع سِفلت إثبات فكرة استخدام محول برمجي لإنشاء مكونات تفاعلية، بدلًا من الإعتماد على مفاهيم مثل شجرة المكونات الظاهرية (VDOM)، أو تقنية مكونات الويب (web component)، واستلهمت فكرة «مكون في ملف واحد» (SFC) من فيو جي إس.[7]

تبني المطورين

عدل

حظي سِفلت بجمهور كبير، وتبنته العديد من الشركات في مشاريعها أبرزها: صحيفة نيويورك تايمز، كلاودفلاير، سبوتيفاي، أبل، بايت دانس، بلومبيرغ وبريف.[9][10] وبحسب إحصائية ستاك أوفر فلو لعام 2021 كان سِفلت أكثر إطار عمل محبوب بين مبرمجي الويب.[11] كما حصل على أكثر من 60 ألف نجمة في المستودع الرسمي للمشروع على قتهاب في 2022.

أستلهمت فكرة إنشاء إطار عمل SvelteKit من نكست جي إس، لتوفير طريقة أسهل على المطورين لإنشاء مواقع باستخدام سفلت، وهو بديل إطار عمل سِفلت Sapper السابق.[12]

بناء الجملة البرمجية

عدل

تُبنى تطبيقات ومكونات سِفلت عبر إنشاء ملف بإمتداد .svelte ويعد صيغة مُحسنة من HTML، مع نظام قولبة مشابه إلى JSX.

يستخدم سِفلت تعبير جافاسكربت $: للأجزاء التفاعلية، بينما تُعبر المتغيرات عن حالات للمكون وتدمج كل من هذه التعابير مع قالب HTML للحصول على مكون تفاعلي، كما تستخدم الأقواس المعقوفة، لتنفيذ تعابير جافاسكربت في داخل قالب HTML كما هو موضح أدناه:

<script>
    let count = 1;
    $: doubled = count * 2;
</script>

<p>{count} * 2 = {doubled}</p>

<button on:click={() => count = count + 1}>Count</button>

أنظر أيضًا

عدل

المراجع

عدل
  1. ^ وصلة مرجع: https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934.
  2. ^ "غيت هاب" (بالإنجليزية).
  3. ^ وصلة مرجع: https://svelte.dev/blog/frameworks-without-the-framework.
  4. ^ ا ب وصلة مرجع: https://github.com/sveltejs/svelte/releases/tag/svelte%405.0.0. الوصول: 23 أكتوبر 2024.
  5. ^ Krill, Paul (2 Dec 2016). "Slim, speedy Svelte framework puts JavaScript on a diet". InfoWorld (بالإنجليزية). Archived from the original on 2022-10-27. Retrieved 2022-10-27.
  6. ^ "React vs. Svelte, the JavaScript build-time framework". react-etc.net. مؤرشف من الأصل في 2022-10-27. اطلع عليه بتاريخ 2022-10-27.
  7. ^ ا ب Świstak، Tomasz (19 نوفمبر 2020). "About the Svelte JavaScript framework". ValueLogic | Blog. مؤرشف من الأصل في 2022-10-27. اطلع عليه بتاريخ 2022-10-27.
  8. ^ Svelte Origins: A JavaScript Documentary [أصل سِفلت، وثائقي جافاسكربت] (بالإنجليزية), OfferZen Origins, Archived from the original on 2022-10-27, Retrieved 2022-10-27
  9. ^ "Websites using Svelte - Wappalyzer". www.wappalyzer.com. مؤرشف من الأصل في 2022-10-27. اطلع عليه بتاريخ 2022-10-27.
  10. ^ "Svelte • Cybernetically enhanced web apps". svelte.dev (بالإنجليزية). Archived from the original on 2022-11-23. Retrieved 2022-10-27.
  11. ^ "Stack Overflow Developer Survey 2021". Stack Overflow (بالإنجليزية). Archived from the original on 2021-09-16. Retrieved 2022-10-27.
  12. ^ Harris, Rich. "Sapper: Towards the ideal web app framework". svelte.dev (بالإنجليزية). Archived from the original on 2022-10-27. Retrieved 2022-10-27.

وصلات خارجية

عدل