ما هو سفيلت ؟

سفيلت Svelte هو إطار عمل لبرمجة وتصميم الواجهات الأمامية Front-end Framework يتشابه إلى حدٍ ما مع أطر عمل أخرى مثل فيو Vue و ريآكت React.

لكن في الواقع يمكن وصف سفيلت بعدة أوصاف أخرى, فهو أيضاً مجمّع Compiler ومكتبة Library.
وأيضاً يعتمد على HTML وCSS وJavascript.

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

صيغة أكواد سفيلت

ملفات سفيلت تمتلك اللاحقة .svelte
وكل ملف يمكن أن يحتوي على 3 أقسام بشكل مشابه لإطار عمل فيو Vue: 1. قسم أكواد Javascript (سفيلت) 2. قسم أكواد CSS 3. قسم أكواد HTML

علماً أن جميع الأقسام المذكورة هي اختيارية وليست إجبارية.

قسم أكواد Javascript (Svelte)

يمكننا فيه إعلان وإسناد قيم المتغيرات وإنشاء دوال والقيام بكافة العمليات الاعتيادية المتعلقة بالجافاسكريبت

<script>
    let name = "world";
</script>

قسم أكواد CSS

يمكننا فيه كتابة تنسيق مكونات الـHTML ومكونات Svelte بلغة CSS
مع العلم أن جميع التنسيقات المكتوبة في ملف معين سيكون تأثرها محصور فقط على مكونات ذلك الملف (local) ولكن يكون شامل (global) ولن يؤثر على المكونات الموجودة في باقي الملفات حتى وإن تم استيرادها واستخدامها في ملفنا هذا.
أما بالنسبة إذا كنت ترغب بتعيين CSS شامل فيوجد طريقة اخرى سيتم شرحها في دروس لاحقة.

<style>
    h1 {
        color: red;
    }
</style>

قسم أكواد HTML

ما يميز هذا القسم أنه غير محصور ضمن أوسمة Tags معينة كما الأقسام السابقة أو حتى كما في أطر عمل أخرى مثل فيو.

<h1>Hello</h1>

ربط HTML بالـ Javascript

قمنا أعلاه بإعلان وإسناد قيمة للمتغير name تساوي world, وإذا أردنا طباعة قيمة هذا المتغير فيكفي أن نضع اسمه في قسم الـHTML مُحاطاً بقوسين من نوع curly braces {}

<h1>Hello {name}</h1>

ربط ثنائي الاتجاه

ماذا لو أردنا القيام بتعديل قيمة المتغير name بواسطة حقل نصي ؟
في الواقع فإن تحقيق ذلك هو سهل جداً حيث يوفر لنا سفيلت إمكانية عمل binding بشكل بسيط جداً
وذلك عبر إضافة تعليمة bind: ثم اسم الـattribute ثم جعله مساوياً للمتغير الذي نريد الربط معه مُحاطاً بأقواس معوجة.

<h1>Hello {name}</h1>
<input bind:value={name}>

والآن نلاحظ أنه بشكل مبدئي ستكون قيمة الحقل النصي تساوي world وأنه عند تغيير قيمة الحقل ستتغير تلقائياً القيمة المعروضة ضمن وسم h1.

يمكنك التجربة والاطلاع على الكود الكامل من هنا

العمل على سفيلت

لكي تبدأ العمل تحتاج إلى Nodejs و مدير مكتبات npm, بالإضافة إلى أداة degit التي تقوم باستنساخ مشاريع من GitHub لتبسيط عملية البدء.

# Installing 'degit'
npm install -g degit

بعد تنصيب أداة degit, سنقوم بإنشاء مشروع سفيلت جديد عبر استنساخ نموذج موجود مسبقاً

# Scaffolding a new Svelte project from 'sveltejs/template'
npx degit sveltejs/template my-svelte-project

نلاحظ وجود أنه تم إنشاء مجلد جديد باسم my-svelte-project
وبالدخول إليه:

cd my-svelte-project

ثم نقوم بتنصيب كافة المكتبات التي تلزم للمشروع:

# to use TypeScript run:
# node scripts/setupTypeScript.js
npm install

ثم نقوم بتشغيل السيرفير المحلي لاستعراض الموقع الجديد

npm run dev

وسيظهر لنا رسالة تفيد بأنه تم تشغيل السيرفر المحلي على الرابط:

http://localhost:5000

بالاطلاع على محتويات ملف package.json نلاحظ أن المكتبات المعتمد عليها هي جميعها من نوع devDependencies أي أنها تستخدم فقط خلال عملية تطوير وبناء الموقع محلياً ولا تصل إلى الـ production

"devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },

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