الألم والدموع في Svelte 3

بدلا من المقدمة

ستكون المقالة مفيدة لأولئك الذين ، مثلما قررنا تجربة Svelte في مشروع مباشر. تلقت شركتنا الصغيرة طلبًا لتطوير مسؤول ويب لخدمة ذات خلفية في Mongodb Stitch. في العامين الماضيين ، الواجهة الأمامية نكتب في React أو Vue (اعتمادًا على حجم المشروع وما إذا كانت ReactNative ضرورية) ، ولكن بعد سماعنا عن جمال Svelte ، قررنا أن نحاول أن نفهم بأنفسنا ما إذا كان جيدًا. وربما يجب علينا أيضًا استخدامه بدلاً من Vue أو React؟

من هو Svelte؟

إذا كان باختصار - هذا هو الإطار الجديد js (لكنه لا يعتبر نفسه هكذا) ، وهو قاتل React و Vue ، و blah ، blah ، blah ... في مقالتي ، أريد أن أعتبر Svelte ليس فقط كم هو رائع "تحت غطاء محرك السيارة" ، ولكن من النقطة عرض لراحة استخدامه في مشروع حقيقي.
نحن لا نصنع السيارات ، بل نقودها ولدينا عملاء شريرون بشروط لا تقل عنهم شر.

البرنامج التعليمي

أول شيء تبدأ في التعرف على لغة أو إطار عمل جديد هو البرنامج التعليمي على الموقع. في Svelte ، هذا هو Svelte.dev/Tutorial .

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

عدة واجهة المستخدم والأساليب

كان العثور على طقم واجهة مستخدم لـ Svelte بمثابة ألم منفصل لنا جميعًا. أردت أن أصرخ: "على الأقل مادة ، Bootstrap ... على الأقل شيء ...".

تم العثور على sveltematerialui.com و svelteui.js.org فقط ، والذي بدا في هذه اللحظة خامًا للغاية.

من خلال استيراد بسيط لـ <Button/> منه ، وقع خطأ خارج الحزمة أثناء التجميع ، ولم يكن هناك وقت لحل خطأ kit ui.

بعد أن ركضت بسرعة عبر الوثائق ، قررت التخلي عنها لصالح استيراد الفانيليا من CDN.

أردت استخدام Material UI في المشروع ، نظرًا لأنه من الممكن أن يتم استخدام لوحة الإدارة أيضًا من جهاز محمول ، كما أن Material مناسبة جدًا لهذا (في رأيي ، يبدو الأمر أسوأ على سطح المكتب).

باستخدام JS بدون UI Kit أعادني عقليا منذ 10 سنوات) قاطرات الدرجة والحنين إلى الماضي).

نظرًا لحقيقة أن Svelte يعمل مع DOM "بشكل مختلف" في MaterialUI ، فقد بدأوا في الخروج بكل أنواع الأشياء السيئة المتعلقة بكيفية عرض مكونات واجهة المستخدم التي تمت إضافتها عبر js إلى dom. على سبيل المثال ، يتم عرض سبينر بسيط كل مرة:



بعد إجراء عملية بحث طويلة ، ما الخطأ الذي حدث ، تبين أنه تم إضافة المغزل في Material UI عبر JS بعد أن أصبح المستند جاهزًا (onLoad) ، ولكن بعد هذا الحدث ، تبدأ Svelte في إضافتها إلى DOM وأن مادة JS البرمجية النصية لا ترى ذلك بسهولة منذ أن كان الحدث قبل.

كان لابد من معالجتها عن طريق إضافة المكون الأصلي لـ Svelte:

  afterUpdate(() => { componentHandler.upgradeDom(); }); 

أسلوب

مع الأنماط ، كل شيء واضح للغاية ، نحن نوفر كل الأنماط كما في Vue. تكتب النمط وكل شيء على ما يرام ، ثم تكتب مكون واجهة المستخدم (بما أنك لا تملك UIKit) والذي يجب أن يأخذ معلمات الدعائم ، على سبيل المثال العرض والارتفاع ، ويفعل ذلك بشكل منطقي مثل هذا:

 <script> export let width = '20px'; export let height = '20px'; </script> <style> .loader { width: { width }, height: { height }, } </style> 

و ... لا ، في النمط لا يمكنك إدراج متغيرات. يمكنك الخروج من هذا الموقف من خلال "ReactWay" وإنشاء أنماط ديناميكية في "البرنامج النصي" كمتغيرات أو وظائف مع عودة النمط.

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

التوجيه وأجهزة التوجيه

بدون جهاز توجيه عادي ، لا يمكنك حتى إنشاء تطبيق صفحة واحدة.

رد فعل ، Vue عند سكالبينج مشروع "Hello World" يأتي بالفعل مع جهاز توجيه في المربع (أو يمكنك تحديده). ولكن مثل كل شيء في Svelte ، هذا ليس بالأمر السهل.

تحتاج إلى اختيار جهاز توجيه بنفسك ، وحتى بين حلول متشابهة للغاية. في الحقيقة ، لا يوجد سوى مساران github.com/EmilTholin/svelte-routing و github.com/kazzkiq/svero حتى الآن.

كلاهما متشابهان للغاية ، لكنني اخترت الأول ، اخترته بعدد النجوم (نعم ، أعرف ، أنا شخص فظيع).

لذلك دعونا نبدأ في تضمينه في MDL لدينا.

لف كل شيء في <Router url = "{url}"> وقم بإضافة <Link /> للروابط من التنقل.



انتقل إلى المعاينة ونرى ما حدث.

لكن اتضح أن أمراض الطفولة في Svelte تستمر وأن الفصول الدراسية لا يمكن نقلها إلى <Link />. نشأ سؤال معقول ، وكيف ستنمي ذلك؟

يبدو أن هذا لا يزال في مشاكل لجهاز التوجيه.

لحسن الحظ ، يمكننا ربط المعتاد لدينا href = '' بالموجه عن طريق تحديد الاستخدام: link الذي شكر خاص.

أخطاء

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

في React و Vue ، اعتدنا أن نرى مثل هذه الأخطاء في مرحلة الإنشاء أو الوبر.

نتيجة لذلك ، سوف تضطر إلى اكتشاف الأخطاء في مكانين. في الإنصاف - هذا في React و Vue ، ولكن في كثير من الأحيان يتم اكتشاف مثل هذه الأخطاء الواضحة في مرحلة الوبر.

Svelte فقط يحتاج اصطلاح التسمية

سوف تواجه هذه المشكلة في كثير من الأحيان - مع عدم وجود اصطلاح التسمية.

على سبيل المثال ، العودة إلى جهاز التوجيه.

هناك مثل هذا الاستيراد:

     import { Router, link, Link ,Route } from "svelte-routing"; 

ماذا عن هذا الرابط والرابط ؟ حتى في مثل هذا المشروع الصغير مثل مشروعي ، كان هناك بالفعل تشويش مع عدم وجود اصطلاحات التسمية في المشاريع المستخدمة في Svelte.

بالطبع ، كان ينبغي أن يكون هذا في عيون ReactMan:

 import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing"; 

في Svelte هناك تشابه بين المرجع كما هو الحال في رد الفعل ، وهذا هو إشارة إلى عنصر dom أو مكون.
البرنامج التعليمي الرسمي يخبرنا أن نفعل ذلك مثل هذا:

 <script> let dialog; </script> <dialog bind:this={dialog} class="mdl-dialog» /> 

وإذا كان لديك 15 متغيرات في المكون؟

 <script> let loading; let pins; let dialog; let stitch; </script> <dialog bind:this={dialog} class="mdl-dialog» /> 

أين وما هي هذه المتغيرات حقا ، وأين هي الروابط إلى المكونات أو العناصر؟
أقوم بتعديل البرنامج التعليمي وجعل الأمثلة أكثر صحة من وجهة نظر المبتدئين واتفاق المتغيرات الخاصة بهم (انظر React Tutorial للحصول على مثال جيد). إذا سمحت لمتخلّف الخل بالقيام بمتغيرات ، فسيكون من اللطيف أن أقسم اللنتر أو المجمّع في مثل هذا الخل ، على سبيل المثال ، تم ذلك عن طريق golang.

 <script> let dialogElement; </script> <dialog bind:this={dialogElement} class="mdl-dialog» /> 

مثال آخر على "الحياة" عندما تتلقى بعض البيانات في وظيفة المكون ويجب إرسال هذه البيانات إلى طريقة العرض الخاصة بك ، حيث يتم ربط بعض المتغيرات بجزء من عنصر واجهة المستخدم. ويبدو معنا (أو بالأحرى ، مع مبرمجنا) مثل هذا:

  async function ReloadPins() {        loading =  true;        pins = await getAllPins();        status = 0;    } 

عندما فتحت الكود الخاص بها ، "أصبح واضحًا" على الفور أن هناك متغير أي دولة وأي منها مرتبط بواجهة المستخدم الخاصة بنا.

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

ما الذي تغير أين ومن فعل ذلك؟

المتغيرات داخل مكون Svelte عالمية وتتغير في كل مكان (hello Angular).
ولكن هناك أخبار سارة ، فهي عالمية داخل مكون واحد (بينما الزاوية) ، وبالتالي فإن هذا التغيير للجميع وقبل كل شيء ليس مخيف جدا داخل مكون واحد.

في الوقت نفسه ، يمكنك توفير الوقت على "جمال" الكود ولا تفكر في ما تحتاجه لجعل الحالة متغيرة ، ولكن ما يمكنك تركه داخل الوظيفة (مرحباً React) - لديك كل شيء وفي كل مكان.



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

ربط غرزة

يعد الإبرة أمرًا رائعًا ، وسأخبرك بالتأكيد بالمزيد حول هذا الموضوع ، وقم بمقارنته مع أقرانه ، وقياس الاختبارات في الإنتاج في مقالتي التالية ، والآن يتعلق الأمر بـ Svelte.

لاستخدام Stitch ، يجب عليك السير على طول طريق "Vanilla" وإدخال:

 <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script> 

منذ عند استخدام npm وحزمة استيراد عادية ، تبدأ مشكلة الخطأ في المخزن المؤقت .

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

هذه هي المشاكل الرئيسية التي واجهناها أثناء العمل مع Svelte. وأن نكون صادقين - بشكل عام ، لم نكن نحب ذلك ، ولا أحد ...

ما هي النتيجة:

لماذا تحتاج Svelte؟

• إذا كنت تعمل بمفردك وكنت بحاجة ماسة إلى القيام MVP أو لوحة المسؤول الصغيرة. ستكون هناك مشكلات في لوحة المشرف الكبيرة ، لأنه عندما تكتب رمزًا جديدًا ، فإنك ستنسى الرمز القديم أو يجب عليك كتابة التعليمات البرمجية الموثقة ذاتيًا ، لأن Svelte لا "تجبر" على القيام بذلك.
• إذا كان حجم الحزمة مهم للغاية بالنسبة لك. على سبيل المثال ، أنت بصدد إنشاء تطبيق ويب لبلد لا يوجد فيه 3G بعد أو الإنترنت بطيئة للغاية ومكلفة للغاية. في معظم أنحاء العالم ، فإن المبرمجين الباهظين ، وليس الإنترنت ، لذلك فإن حجم الحزمة ضمن حدود معقولة لن يكون مشكلة حقيقية في 99٪ من الحالات.
  
• إذا كنت بدأت للتو في تعلم كيفية الكتابة في JS والقيام بواجهة أمامية ، فسوف تمنحك Svelte الحرية الكاملة في "إطلاق النار في القدم" أو عند أحد الجيران المكتبيين أو ترتيب إطلاق نار كثيف في الساقين. في الواقع ، لن تحتاج إلى تعلم JSX أو فهم اصطلاحات التعليمات البرمجية لفترة طويلة ، يمكنك على الفور تنفيذ أول مشروع أمامي لك ولاحظ أنك قد نجحت بالفعل وأن هناك شيئًا ما يعمل.
  

بناءً على الأخير ، لا أفهم حقًا سبب قيام مشرفي Svelte بتقديم دعم TypeScript؟ نحن نحب Svelte لمجرد "إطلاق النار على الساقين" و TypeScript في رأيي مثل مسارات جميع التضاريس لسيارة Svelte الرياضية. كما تعلمون ، بعد أن عملت مع Svelte ، أدركت مدى تغير JS في السنوات الأخيرة ، وأنه لم يعد JS.

يوفر Svelte الفرصة للعمل في نفس JS القديم والمصباح ، دون PropTypes ، Flow و TypeScript.

ماذا اعجبني

• قراءة جيدة إذا / آخر ، وهو ليس في فيو. أود حقًا أن أرى شيئًا مماثلاً في Vue.
• يمكنك إنشاء الحدث الخاص بك في مكونات والتخلص من تمرير عمليات الاسترجاعات إلى الوظائف في الطفل ، للتواصل بين الطفل> الوالد.
  

لماذا لا تستخدم Svelte؟

• لا يوجد مجموعة واحدة تعمل بشكل كامل. من الصعب تخيل تطبيق ويب بدون UIKit ؛ فالمشاريع الكبيرة التي لا يناسب Svelte فقط هي التي يمكنها كتابة مجموعة أدوات واجهة المستخدم نفسها. ينتقل شيء ما بالفانيليا إلى إنشاء مكونات واجهة المستخدم الخاصة بك (مجموعة أدوات واجهة المستخدم الخاصة بك) أو في مكافحة الأخطاء و "قاطرات" الطبقات.
  
• الطبيعة الضمنية لبعض الأخطاء البسيطة ، والتقاطها فقط في مرحلة الاختبار.
  
• إذا كنت بصدد إنشاء تطبيق متعدد المنصات (والآن في كل مكان هو المحمول أولاً) ، فسوف يتعين عليك إعادة كتابة كل شيء إلى ReactNative أو إنهاء NativeScript الذي تم إنشاؤه بيديك (يوجد مولد NS من Svelte). في الإنصاف ، لا تقدم Vue مع تطوير الأجهزة المحمولة أداءً جيدًا ، لكن لديها أيضًا بعض ميزات العمل.
  
• يجب أن تهتم بكتابة نص تعليمة برمجية واضحة جدًا للمطورين في المشروع ، حيث لا يتم إعداد البرنامج التعليمي والأمثلة لتطوير الفريق.