تعلم Svelte في 5 دقائق: دليلك السريع لمقدمة إطارية قوية

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

بينما قد لا يكون 5 دقائق كافية لتعلم Svelte بعمق، إلا أنها تتيح لك فهمًا قويًا للمفاهيم الأساسية، والتي تشمل:

• المكونات (Components)
• الاستيراد والتصدير (Importing and Exporting)
• القوالب (Templating)
• معالجة الأحداث (Event Handling)
• إرسال الأحداث (Event Dispatching)
• التفاعلية (Reactivity)

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

المكونات (Components) في Svelte: اللبنات الأساسية لتطبيقك

لنبدأ باستكشاف كيفية بناء مكون في Svelte، وهو الوحدة الأساسية التي تتكون منها تطبيقاتك. يمكن أن يشتمل المكون على ثلاثة أجزاء رئيسية:

• الجزء الأول: <script>، ويحتوي على شيفرة JavaScript المسؤولة عن منطق المكون.
• الجزء الثاني: <style>، ويحتوي على قواعد CSS لتنسيق المكون.
• الجزء الثالث: HTML، وهو الجزء الهيكلي الذي يستخدم منطق JavaScript المُعرف في وسم <script>.

إليك مثال بسيط يوضح هذه الأجزاء:

<script>
  let say = 'hi';
</script>

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

<div>Say: {say}</div>

تجدر الإشارة إلى أن الحد الأدنى المطلوب لمكون Svelte هو جزء HTML فقط. هذا يعني أن تطبيقك سيظل يعمل بشكل صحيح حتى بدون وجود وسمي <script> و <style>.

استيراد وتصدير المكونات: بناء تطبيقات معيارية

الاستفادة من نمطية الكود

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

import Face from './Face.svelte';

export: تمرير الخصائص (Props)

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

على سبيل المثال، يمكننا تحديد خاصية size بقيمة افتراضية داخل مكوننا:

<script>
  export let size = 1;
</script>

<div style="font-size: {size}em">=)</div>

يُتيح لنا هذا الأسلوب تعديل حجم المكون المستورد بسهولة في ملف App.svelte الخاص بنا:

<script>
  import Face from './Face.svelte';
</script>

<Face size="4" />
<Face size="10" />
<Face />

ستظهر الأحجام المختلفة للمكون على شجرة الـ DOM كالتالي:

يمكنك تجربة الشيفرة الكاملة واستكشافها في بيئة تطوير تفاعلية.

القوالب (Templating) في Svelte: منطق برمجي داخل HTML

تُعد صياغة القوالب في Svelte ميزة قوية تُمكّننا من دمج العبارات الشرطية (if statements) وحلقات التكرار (for loops) مباشرةً داخل شيفرة HTML الخاصة بنا بطريقة نظيفة وفعالة.

العبارات الشرطية (If Statements)

تُستخدم العبارات الشرطية لعرض محتوى معين بناءً على شرط محدد. إليك كيفية كتابة عبارة if في Svelte:

<Container>
  {#if say}
    <div>Hi!</div>
  {/if}
</Container>

في هذا المثال، سيتم عرض وسم <div> الذي يحتوي على “Hi!” فقط إذا كانت قيمة المتغير say صحيحة (truthy).

حلقات التكرار (For Loops)

تُستخدم حلقات التكرار لعرض قائمة من العناصر بشكل متكرر. إليك كيفية استخدام حلقة each (المكافئة لـ for loop) في Svelte:

{#each [2, 1, 0] as faceIndex}
  <Face index={faceIndex} />
{/each}

هذه الشيفرة ستقوم بتكرار المكون <Face> ثلاث مرات، مع تمرير قيمة faceIndex مختلفة لكل تكرار.

معالجة الأحداث (Event Handling): التفاعل مع المستخدم

لتمكين المستخدم من التفاعل مع تطبيقنا، نحتاج إلى استخدام معالجات الأحداث (event handlers). في Svelte، تُعد معالجة الأحداث عملية مباشرة وفعالة.

إضافة معالج حدث on:click

لنأخذ مثالاً بسيطًا يوضح كيفية إضافة معالج حدث on:click لزر <button> لعرض رأس (header) التطبيق:

<button on:click={() => {showHeader = true}}>show</button>

عند النقر على هذا الزر، ستتغير قيمة المتغير showHeader إلى true، مما يؤدي إلى عرض الرأس.

ملاحظة هامة: التعامل مع المكونات المخصصة

هناك نقطة مهمة يجب الانتباه إليها: معالجات الأحداث المباشرة مثل on:click تعمل فقط مع وسوم HTML الأصلية (مثل <button>)، ولا تعمل تلقائيًا مع المكونات المستوردة التي تحمل نفس الاسم ولكن بحرف كبير (مثل <Button>).

لحسن الحظ، يمكننا تجاوز هذه المشكلة باستخدام خاصية إعادة توجيه الأحداث (event forwarding). يتم ذلك عن طريق إضافة on:click إلى وسم <button> الأصلي داخل ملف المكون الخاص به:

<button on:click>
  <slot></slot>
</button>

بهذه الطريقة، يتم تمرير حدث النقر من الزر الأصلي إلى المكون الأب الذي يستدعي <Button>.

إرسال الأحداث (Event Dispatching): تعزيز مرونة المكونات

تُعد ميزة إرسال الأحداث (Event Dispatching) في Svelte أداة رائعة لزيادة قابلية استخدام الشيفرة (code usability)، حيث تُمكّننا من استخدام نفس العنصر لتنفيذ أكثر من إجراء واحد.

إنشاء مرسل أحداث (Event Dispatcher)

لنوضح ذلك بمثال: كيف يمكننا استخدام مكون زر (<Button>) واحد لإظهار عنصر وإخفائه في نفس الوقت. نبدأ بإنشاء مرسل أحداث داخل ملف مكون <Button> كالتالي:

<script>
  import {createEventDispatcher} from 'svelte';
  const dispatch = createEventDispatcher();
</script>

ربط المرسل بالأزرار

بعد ذلك، نضيف المرسل إلى وسمي <button> الأصليين داخل المكون:

<button on:click={() => dispatch('show')}> Show </button>
<button on:click={() => dispatch('hide')}> Hide </button>

تحديد وظائف الأزرار في المكون الأب

أخيرًا، نُعلن عن خيارات وظائف الزر في ملف App.svelte (المكون الأب) على النحو التالي:

<Buttons on:show={() => {showHeader = true}} on:hide={() => {showHeader = false}} />

تحسين الشيفرة باستخدام قيم الحدث

يمكننا إعادة هيكلة هذه الشيفرة (refactor) لتمرير القيم عبر المرسل باستخدام متغير الحدث (e). في هذه الحالة، سيبدو المكون <Buttons> في ملف App.svelte كالتالي:

<Buttons on:click={(e) => {showHeader = e.detail}} />

بينما ستبدو أزرار HTML الأصلية في ملف المكون الخاص بنا كالتالي:

<button on:click={() => dispatch('click', true)}> Show </button>
<button on:click={() => dispatch('click', false)}> Hide </button>

هذا الأسلوب يُعزز من مرونة المكونات ويُقلل من التكرار في الشيفرة.

التفاعلية (Reactivity): تحديثات فورية للواجهة

تُعد ميزة العبارات التفاعلية (reactive statements) إحدى الخصائص الفريدة والقوية في Svelte. إذا كنت ترغب في إعادة تشغيل جزء معين من الشيفرة في كل مرة يتم فيها تحديث المتغير المرتبط به، فإن هذه الميزة هي الحل الأمثل لك.

إعلان العبارات التفاعلية

نُعلن عن العبارة التفاعلية باستخدام الرمز $: على النحو التالي:

let score = 0;
$: smileySays = 'Hi there, your score is: ' + score;

في هذا المثال، كلما تغيرت قيمة المتغير score، سيتم تحديث قيمة smileySays تلقائيًا لتعكس التغيير، مما يضمن تحديث الواجهة بشكل فوري دون الحاجة إلى كتابة شيفرة إضافية لإدارة التحديثات.

العبارات الشرطية داخل العبارات التفاعلية

من الممكن أيضًا تضمين عبارات شرطية (if statements) داخل العبارات التفاعلية لإنشاء منطق أكثر تعقيدًا. إليك مثال يوضح كيفية القيام بذلك:

let score = 0;
$: smileySays = 'Hi there, your score is: ' + score;
$: if (score < -4) smileySays = 'Wow your score is low!';

هنا، بالإضافة إلى تحديث الرسالة بناءً على score، إذا انخفض score إلى أقل من -4، فستتغير رسالة smileySays إلى “Wow your score is low!” بشكل تفاعلي.

خاتمة سريعة

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

نتمنى لك رحلة تعلم ممتعة ومثمرة في عالم البرمجة!

الخلاصة التقنية

يُقدم Svelte نموذجًا منعشًا في عالم أطر عمل JavaScript، مُبتعدًا عن مفهوم الـ Virtual DOM لتقديم أداء مُحسّن وتجربة تطوير أكثر سلاسة. إن قدرته على تحويل المكونات إلى شيفرة JavaScript نقية أثناء مرحلة البناء (compile time) تُميزه عن منافسيه، مما يُقلل من حجم الحزمة (bundle size) ويزيد من سرعة التنفيذ. التركيز على التفاعلية البديهية، ومعالجة الأحداث الفعالة، ونمطية الشيفرة عبر المكونات، يجعله خيارًا جذابًا للمطورين الذين يسعون لبناء تطبيقات ويب سريعة، خفيفة، وسهلة الصيانة. Svelte ليس مجرد إطار عمل، بل هو مُجمّع (compiler) يُعيد تعريف كيفية بناء واجهات المستخدم التفاعلية.