من المحتمل أن يسمع أي مطور ويب يقوم بذلك منذ بضع سنوات على الأقل سؤالًا مماثلًا يومًا بعد يوم:
أريد حقًا أن أصبح مطور ويب ، لكنني لا أعرف من أين أبدأ. أي اقتراحات؟
منذ حوالي 10 سنوات ، كانت الإجابة بسيطة للغاية. ما عليك سوى إنشاء index.html ، وإضافة بعض العلامات إلى هناك ، وجعل العنوان باللون الأحمر باستخدام CSS ، وتمكين jQuery من معالجة النقرات!
أوه ، كيف تغير كل شيء. نحن نعمل الآن مع أدوات الإنشاء ، والتوجيه من جانب العميل ، والأطر الخاصة بوقت تشغيل فاخر ، وربط "هذا" في كل مكان ، والقوالب الحرفية ، و CSS-in-JS ... كيفية اختيار ما هو الأكثر أهمية؟
كل هذا أدى إلى اختلافات لا حصر لها من حيث نبدأ بدرجات متفاوتة من "فقط أدخله الآن ، وسأشرح لاحقًا". يشجع البعض القادمين الجدد على تعلم React أو Vue على الفور للبدء في الممارسات الحديثة. بينما يصرخ آخرون من قمم الجبال ، يجب أن يبدأ المبتدئين دائمًا بالأساسيات. في الحقيقة ، كلتا الطريقتين لها مزاياها. الأول يمكن أن يغري الوافدين الجدد إلى أشياء مثل إعادة التحميل الساخنة والمكونات ، في خطر ترك الكثير لجانب واحد. في حين أن الثاني يجعل الوافدين الجدد يفهمون كيف يعمل DOM تحت الغطاء ، في الوقت نفسه ، ربما يصرف انتباه الناس عن تعقيد الفانيليا JS ، الذي تجاهله منذ فترة طويلة.
لهذا السبب نحتاج إلى حل وسط. طريقة للبدء في الأساسيات ، مع استيعاب المفاهيم الحديثة في نفس الوقت مثل التطوير القائم على المكونات ، و CSS المعزول ، والقوالب ، والوظائف التعريفية ، إلخ. إلخ
Svelte ، في خدمتكم
SvelteJS هي خرطوشة جديدة إلى حد ما في إطار js للأطر ، والتي بدأت للتو في جذب الانتباه. قد يعرفها شخص ما بعد نشر
حالة جافا سكريبت 2018 . باختصار ، يهدف Svelte إلى أن يكون إطارًا ليس إطارًا بالفعل. يعتمد على أداة لتجميع المكونات في مرحلة التجميع ، مما يسمح لك بتحميل ما يلزم لعرضه على الصفحة فقط. هذا يعني أنه لا يوجد DOM ظاهري ولا توجد أطر عمل أعلى الأطر ، ولا
يوجد إطار في وقت التشغيل .
كل هذه الحجج خطيرة جداً للمطورين الأكثر خبرة ، ولكن معظم المبتدئين ربما لم يتمكنوا من قراءة الفقرة الأخيرة دون كسر الرأس. لحسن الحظ ، ليس سحر الترجمة هو الذي يجعل Svelte صديقًا للمبتدئين ، ولكنه بناء جملة.
إذا لم تشاهد مكون Svelte مطلقًا ، فإليك مثال بسيط:
<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> .pretty { color: red; } </style> <script> let name = "Ben"; </script>
دعونا معرفة ذلك. أولاً ، تجدر الإشارة إلى أن كل هذا يمكن كتابته حتى في ملف
.html منتظم ، حتى في ملف
.svelte ، إذا رغبت في ذلك. نرى أيضًا بعض العلامات المألوفة التي تذكرنا بالتطور بدون إطار:
النمط والنص . تتم كتابة الأنماط ورمز JS في هذه العلامات لإنشاء المكونات بشكل صحيح. بالإضافة إلى ذلك ، يسمح بتمييز بناء الجملة للعمل بدون ملحقات إضافية للمحرر ، مثل حلول CSS-in-JS. بالإضافة إلى ذلك ، فإن برنامج التحويل البرمجي Svelte ذكي بما يكفي لعزل أي أنماط خاصة بالمكونات بشكل افتراضي. لذلك ، لن يكون لديك أنماط تتدفق بين المكونات.
ترى أيضًا كيف يحدث شيء سحري باستخدام
اسم متغير JavaScript. هذا مفهوم جديد رائع لـ Svelte 3 ، حيث يمكن الوصول إلى أي متغير في البرنامج النصي للمكون الخاص بك من خلال العلامة. ليس لدينا بناء جملة خاص يجب تعلمه لإدارة الحالة. لا يوجد
نطاق $ Angular ، ولا
React this.state ، ولا
بيانات من Vue. بدلاً من ذلك ، يمكننا ببساطة استخدام المتغيرات العادية لوصف الحالة ، مما يتسبب في إعادة العرض كلما تغيرت قيمها.
هذه التحرر من "المصطلحات" النحوية تعني أن إنشاء مكون يبدأ مثل إنشاء CodePen ، فقط دون الحاجة إلى التفكير في كيفية توصيل وظيفة JS التعريفية بنوع معين من محددات DOM.
شيء جميل آخر هو أن مكونات Svelte يتم استيرادها بسهولة كما المكونات التقليدية. يمكنك ببساطة استيراد
.html ، لأن Svelte يعرف كيفية نشره:
<div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script>
بارد ، ولكن انتظر لحظة ...
قد يجد بعض القراء هذا المفهوم لالتقاط الأنفاس كما أنا. في الوقت نفسه ، ربما يكون لدى الآخرين حججهم الخاصة ضد استخدام هذا النهج لتعليم المبتدئين. أليسوا فضوليين كيف يعمل التلاعب DOM بالفعل؟
الجواب ... ممكن. ولكن عندما يبدأ شخص ما للتو (على الأقل من تجربة شخصية) ، يمكنك قبول بعض التجريد من أجل إنشاء الأشياء الرائعة بشكل أسرع.
بالإضافة إلى ذلك ، تمامًا مثل بعض اللغات ، مثل Java و JS ، إدارة المستخلص للمؤشر من خلال جمع البيانات المهملة ، تجاهلت معظم أدوات تطوير الويب الحديثة معالجة DOM. باستثناء الحالات القصوى الصعبة التي قد لا تحتاج للمبتدئين. بالمناسبة ، إذا كنت محيرًا حول ماهية إدارة المؤشر ، أعتقد أن هذا يثبت وجهة نظري فقط. وبالتالي ، بدلاً من إجبار newbies على التعامل مع DOM أو تعلم طرق خاصة بإطار العمل لإدارة الحالة ، لماذا لا تسمح لهم فقط بالوصول إلى المتغيرات مباشرة من الترميز؟ الآن يمكنهم تعلم المبادئ الأساسية لإدارة الدولة للمكونات دون الوقوع في الحداد.
حسنًا ، أرى مثالًا أساسيًا ، لكن يجب أن يكون لدى Svelte بعض الميزات المحددة لكي تعمل.
لا شك أن هذا صحيح ، لكنه أقل بكثير مما تعتقد. يتمثل جزء واحد من بناء جملة Svelte في تعيين عناصر DOM بشكل تكراري وشرطي. يعمل هذا بشكل مشابه
لخريطة JSX ، لكن بدون كل هذه الأقواس المتداخلة التي يمكن أن يضيع فيها القادمون الجدد (وأنا). إليك الطريقة الأساسية التي تنشئ قائمة بالعناصر من صفيف:
<ul> {#each profiles as profile} <li>{profile.name}: {profile.role}</li> {/each} </ul> <script> const profiles = [ {name: 'Wes Bos', role: 'React extraordinaire'}, {name: 'Chris Coyier', role: 'Father of CodePen'}, {name: 'Cassidy Williams', role: 'Letting you know it's pi time'} ]; </script>
مرة أخرى ، أتفهم أي نقد بخصوص بناء الجملة ، لكني أحب كم هو سهل الفهم. بدلاً من تضمين JavaScript في تعليمات HTML البرمجية الخاصة بنا ، نقول ببساطة: مهلاً ، دعنا نتصفح هذه المجموعة وننشئ عنصرًا لكل منها.
تجدر الإشارة إلى ميزة أخرى لـ Svelte ، والتي لست متحمسًا لها: بناء الجملة لنقل الدعائم إلى المكونات. نعم ، إنه وظيفي بالكامل وسهل التعلم ، ولكن في الوقت نفسه ، قد يبدو سحريًا جدًا لذوق بعض الأشخاص. لمعالجة الدعائم ، نقوم ببساطة بتمريرها إلى المكون أينما تم استيرادها ...
<Profile coolGuy="Scott Tolinski" />
... ونحصل على هذا المتغير كـ "تصدير":
<p>{coolGuy}</p> <script> export let coolGuy = ''; </script>
أنا أفهم تمامًا أنه بالنسبة للبعض سيبدو إساءة استخدام لـ "تصدير". ولكن على الأقل ، يتوافق هذا مع الطريقة التي يجب على المبتدئين بها تصور الوحدات النمطية: نقوم بتصدير ما نحتاج إلى الوصول إليه خارج المكون ، واستيراد ما نريد استخدامه في المكون الخاص بنا.
يمكنني التغلب على هذه الغرابة ... ولكن ماذا عن خطوة البناء المطلوبة؟
لذلك ، هناك نقد آخر حول بدء العمل باستخدام الأطر وهو الحاجة إلى استخدام مدير الحزم. وهو ما يعني ... الجحيم ، واستخدام المحطة!
اسمع ، أفهم أن فتح هذا الشيء يمكن أن يكون مخيفًا للغاية ، حيث يحتوي على قرص مضغوط أحادي اللون و "قرص مضغوط" زاحف للتنقل في الأدلة. لكن بصراحة ، هذه في الحقيقة ليست عقبة كبيرة عندما تحتاج إلى فريق واحد فقط للركض. بالإضافة إلى ذلك ، يجعل الجهاز المدمج في VS Code من السهل البدء. يفتح حتى في أسفل النافذة مباشرة في دليل المشروع الخاص بك!
تقدم Svelte بالفعل
بداية قابلة للتحميل ، لكنني أنشأت
قالب بداية خاص بي يستخدم Rollup للتنزيل المباشر. في الواقع ، ملف التكوين أقل من 30 سطرًا! بالنسبة لمشروع Svelte الأساسي ، فهذه هي جميع الأدلة والملفات التي تحتاجها:
/public
index.html
/src
index.html
app.js
rollup.config.js
package.json
فقط أضف الأمر لبدء خطوة الإنشاء في package.json وانتهيت! يمكنك بالطبع أن تقول أن جميع الوحدات النمطية والملفات الإضافية التي تحتاجها الأُطُر الأخرى ليست مشكلة إذا كان المبتدئين لا يمسها ، ولكن ، في رأيي ، عدد أقل من الأشياء الإضافية ، كلما كان ذلك أفضل للمبتدئين.
حسنًا ، هذا رائع ومريح للمبتدئين. ولكن ما مدى استقرار هذا الإطار؟
هذه هي القضية الموضعية للغاية لإطار الشباب مثل Svelte. تستخدم جميع الأمثلة التي أظهرتها بناء جملة الإصدار 3 من Svelte ، والذي كان وقت كتابة هذا التقرير لا يزال في مرحلة تجريبية. مثيرة كما كانت ، كنت أنتظر بضعة أشهر أخرى قبل التسرع معه في حلقات البرمجة. ومع ذلك ، تقدم Svelte صفحة
وثائق موجزة حقا
للإصدار 3 ، والتي يمكن أن تجعل الأمر أسهل بالنسبة للمبتدئين.
لذلك ، دعونا نلقي نظرة على بعض الفوائد الرئيسية للتعلم عن تطوير الشبكة مع Svelte:
- هذا هو إطار مكون مع 0 ملحقات إضافية.
- يدير الدولة دون أي قمامة عادية
- يستخدم عزل النمط دون استخدام CSS-in-JS (لذلك لا حاجة إلى مكونات إضافية للمحرر أو بناء جملة غبي)
- للبدء ، تحتاج فقط إلى برنامج نصي بسيط للغاية.
- لا توجد عمليا ملفات إضافية في المشروع الأساسي
بالطبع ، هذا أمر طبيعي تمامًا إذا لم أتمكن من إقناعك بهذا المقال. أثارت جميع المقالات الجيدة جدلا قليلا! ولكني آمل أن يوضح لك هذا المقال على الأقل كيف يمكن أن تكون Svelte رائعة وبسيطة للتعلم.
شكرا لقراءة هذا!
أنا مطور ويب أمامي في عملية التعلم ، ودائمًا ما أعبث بشيء جديد. سأحاول النشر بانتظام هنا ، لذا اكتب إذا كنت ترغب في ذلك!
***
من المترجم:
شكرا لقراءة هذه الترجمة! آمل أن يشجعك هذا المقال على النظر إلى Svelte كأداة للتدريب أو حتى لمشروع جديد.
تعال إلى ورشة العمل التي دامت ساعتين حول Svelte 3 في
HolyJS Piter من 24 إلى 25 مايو . الذي يريد فقط متابعة تطوير Svelte - مرحبا بكم في قناة برقية باللغة الروسية
SvelteJS . سنكون سعداء لرؤيتك!
ومسح صغير ، دون الرجوع إلى الإطار والتكنولوجيا. رأيك مثير للاهتمام