دليلك الشامل لتعلم Svelte: دورة مجانية متكاملة لبرمجة الواجهات الأمامية

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

ما هو Svelte؟

يُعرف Svelte بأنه أكثر من مجرد إطار عمل JavaScript؛ إنه في الواقع مترجم (compiler) ولغة برمجة في آن واحد. على عكس أطر العمل الأخرى التي تقوم بمعظم عملها في المتصفح أثناء وقت التشغيل، يقوم Svelte بمعالجة الكود في خطوة الترجمة (compile step). هذا النهج الفريد ينتج عنه كود عالي الكفاءة وصغير الحجم، مما يضمن أداءً أسرع بكثير على جانب العميل (client-side).

يقدم Svelte تجربة تطوير محسّنة بشكل ملحوظ، وصفحات ويب أسرع، وتجربة مطور أكثر سلاسة وراحة (فقد صُمم Svelte مع وضع المطورين في الاعتبار). علاوة على ذلك، فإن إتقان Svelte سيميزك في سوق العمل ويظهر اهتمامك بالتقنيات الحديثة والمبتكرة.

دورة Scrimba المجانية لتعلم Svelte

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

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

فيما يلي أبرز المحاور التي ستغطيها الدورة:

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

المكونات (Components)

في Svelte، كل شيء يتواجد داخل مكون (component). يعرض الجزء الأول من الدورة التركيب التشريحي لهذه المكونات. يتكون المكون من ثلاثة أجزاء اختيارية:

• <script>: يحتوي على كود JavaScript.
• <style>: يحتوي على كود CSS.
• جزء HTML: يمكنه استخدام كود JavaScript من وسم <script>.

مثال توضيحي لبنية المكونات:

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

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

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

استيراد وتصدير المكونات (Importing and Exporting)

نتناول هنا كيفية استيراد وتصدير المكونات لتمكين استخدامها في أجزاء أخرى من تطبيقنا. تُستورد المكونات باستخدام الكلمة المفتاحية import:

import Face from "./Face.svelte";

بينما تسمح الكلمة المفتاحية export للمكونات الأخرى بتغيير خصائص المكونات عند الاستيراد:

<script>
  export let size;
</script>

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

تحدي 1: تطبيق مهارات Svelte

في هذا الجزء، يدعونا Noah لاختبار مهاراتنا الجديدة في Svelte. لا توجد حرق للأحداث هنا، لذا انقر للانتقال إلى الدورة لتجربة التحدي والتحقق من الحل.

الفتحات (Slots)

تتيح لنا الفتحات (Slots) وضع عناصر داخل المكونات. على سبيل المثال، إدراج وسم <slot> داخل وسم <div> يحمل الفئة Container، يسمح لنا بوضع أي عدد نريده من العناصر داخل المكون <Container>:

<div class="Container">
  <slot></slot>
</div>

تصبح العناصر المضافة حديثًا أبناءً للمكون:

<Container>
  <div>Say: {say}</div>
  <Face index={0} />
  <Face />
  <Face index={2} />
</Container>

القوالب (Templating)

تتيح لنا صيغة القوالب (templating syntax) في Svelte إضافة عبارات شرطية (if statements) وحلقات تكرارية (for loops) مباشرة إلى كود HTML الخاص بنا. نعم، إلى HTML الخاص بك!
تبدو العبارة الشرطية if كما يلي:

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

بينما تبدو حلقة for (أو each في Svelte) كما يلي:

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

تحدي 2: بناء رأس الصفحة (Header)

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

معالجة الأحداث (Event Handling)

بعد ذلك، يعرض لنا Noah طريقة بسيطة لمعالج أحداث مضمن (inline event handler)، والذي يسمح للمستخدم بإظهار رأس التطبيق بنقرة زر.

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

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

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

إرسال الأحداث (Event Dispatching)

يسمح إرسال الأحداث (Event dispatching) للمكون بإصدار أكثر من نوع واحد من الأحداث. على سبيل المثال، يمكن استخدام نفس مكون <Button> لإظهار عنصر وإخفائه.
نقوم بإنشاء مرسل أحداث (event dispatcher) بهذه الطريقة:

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

ثم نضيفه إلى زر HTML الأصلي <button> كما يلي:

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

أخيرًا، نحدد خيارات وظائف مكون <Button> في ملف App.svelte بهذه الطريقة:

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

يمكن تحقيق نفس النتيجة أيضًا عن طريق تمرير القيم (في هذه الحالة true و false) عبر المرسل (dispatch). يمكن بعد ذلك الوصول إلى هذه القيم من خلال متغير الحدث e.

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

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

تحدي 3: الأزرار وتوزيع الأحداث

تحدينا الثالث أكثر تعقيدًا من التحديين السابقين، ويضع معرفتنا الجديدة بمرسلات الأحداث على المحك. لمساعدتنا، يقسم Noah التحدي إلى أجزاء صغيرة:

<!-- Challenge 3 -
1. add a prop in Buttons.svelte called buttons which is a list of objects like:
   [{ value: '', text: '' }, ...etc]
2. use #each to turn all the objects into buttons that:
   a. have innerHTML equal to the .text of the object.
   b. dispatch a click event that passes the .value of the object.
3. Handle the event in App.svelte to update the score.
-->

انتقل إلى الدورة الآن لتجربته والاطلاع على الحل.

التفاعلية (Reactivity)

العبارات التفاعلية (Reactive statements) هي ميزة فريدة في Svelte تخبر جزءًا من الكود بإعادة التشغيل في كل مرة يتم فيها تحديث متغير داخل هذا الكود. على سبيل المثال، سيتم تشغيل الكود أدناه في كل مرة يتغير فيها متغير score (لاحظ أننا نعلن عن عبارة تفاعلية باستخدام $:).

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

يمكننا أيضًا تشغيل عبارات if داخل العبارات التفاعلية:

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

تحدي 4: التفاعلية المتقدمة

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

<!-- Challenge 4 -
1. add happyScore and storyIndex (both equal 0)
2. smileySays and buttons get updated whenever storyIndex changes
3. add clickHandler function that increments storyIndex and adds e.detail.value to the happyScore
-->

انقر للانتقال إلى الدورة لتجربته والتحقق من إجابتك.

المزيد من التفاعلية

بعد ذلك، يقدم لنا Noah مثالًا آخر لاستخدام العبارات التفاعلية، وهو وجه تعبيري يتغير وفقًا لمتغير happyScore الحالي:

const faceList = [
  "?", "?", "?", "?", "?", "?", "?", "?", "?", "?", "?"
];
$: index = happyScore + 5;

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

الربط (Binding)

يسمح الربط (Binding) للمستخدم بتحديث متغير (في هذه الحالة يُسمى name) عن طريق إدخال قيمة في حقل <input>. نظرًا لأن الربط عملية ثنائية الاتجاه (two-way process)، فإن تغيير المتغير يؤدي أيضًا إلى تحديث قيمة حقل <input>.
نقوم بربط القيم بهذه الطريقة:

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

  let showHeader = false;
  let storyIndex = 0;
  $: smileySays = story[storyIndex].smileySays;

  //variable name below:
  let name = '';
</script>

<Container>
  //binding declared below:
  <input type="text" bind:value={name}>
  <h1>{name}, {smileySays}</h1>
</Container>

بالإضافة إلى ربط المتغيرات، من الممكن أيضًا ربط القيم من الكائنات (objects) أو القوائم (lists) أو المكونات (components).

المشروع النهائي

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

<!-- Final Challenge
1. The header appears if the user chooses Svelte answer (HINT: happyScore will be greater than 0 if they answer Svelte)
2. Display final message depending on happyScore
3. Implement the Reset functionality
-->

اطلع على الجزء الخاص بالمشروع لاختبار مهاراتك الجديدة في Svelte والاطلاع على الحل.

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

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

وبهذا نصل إلى نهاية هذه الدورة الرائعة. عمل ممتاز على إكمالها! إذا كنت متحمسًا لتعلم المزيد عن Svelte، فلا تتردد في مراجعة الوثائق الرسمية على موقع svelte.dev لمواضيع مثل: Context، Stores، Lifecycle methods، Actions، Sapper والمزيد.
يمكنك أيضًا متابعة قناة SvelteMaster Youtube Channel والاشتراك في Scrimba Svelte Bootcamp لتكون أول من يعرف عن الإطلاق وأي خصومات.
آمل أن تكون قد وجدت هذا المقال مفيدًا وأن تتمكن من استخدام معرفتك الجديدة قريبًا. في غضون ذلك، لماذا لا تتجه إلى Scrimba لترى الدورات الأخرى المعروضة لمساعدتك في تحقيق أهدافك البرمجية؟
إذا كنت ترغب أيضًا في التواصل مع زملائك المتعلمين أو الدردشة مع ذوي الخبرة ومنشئي دورات Scrimba، فانضم إلى خادم Scrimba Discord server. تعلم سعيد!
إذا قرأت هذا الحد، شكرًا للمؤلف لإظهار اهتمامك.
تعلم البرمجة مجانًا. ساعد منهج freeCodeCamp مفتوح المصدر أكثر من 40,000 شخص في الحصول على وظائف كمطورين. ابدأ.