في اليوم الآخر ، حدث حدث كبير لمجتمع SvelteJS ، وفي الواقع ، يبدو لي ، بالنسبة للواجهة الحديثة بالكامل - الإصدار الذي طال انتظاره من Svelte 3! لذلك ، تحت القصاصة هي ترجمة لمقال Svelte ومقطع فيديو ممتاز من تقريره في YGLF 2019.
وأخيرا هو هنا
بعد عدة أشهر من الطيران مثل بضعة أيام ، أصبحنا فوق القمر لأننا نستطيع الإعلان عن الإصدار الثابت من Svelte 3. هذا الإصدار الضخم حقًا هو نتيجة لمئات الساعات من العمل للعديد من الأشخاص في مجتمع Svelte ، بما في ذلك اختبار بيتا الذي ساعدت المراجعات التي لا تقدر بثمن على صقل تصميم الإطار في كل مرحلة من هذه الرحلة.
نعتقد أنك سوف ترغب في ذلك.
ما هو Svelte؟
Svelte هو إطار مكون يشبه React أو Vue ، ولكن مع اختلاف مهم. تتيح لك الأُطُر التقليدية أن تكتب شفرة تعريفية مدفوعة من قبل الدولة ، ولكن ليس دون عقاب: يحتاج المستعرض إلى القيام بعمل إضافي لتحويل هذه الهياكل التعريفية إلى معالجة DOM ، باستخدام تقنيات مثل
فرق DOM الظاهري الذي يستهلك الميزانية الحالية لتقديم الإطارات وإضافة مسؤوليات إلى المجمع القمامة.
بدلاً من ذلك ، تعمل Svelte
في وقت الإنشاء ، حيث تقوم بتحويل مكوناتك إلى رمز
إلزامي عالي الأداء يقوم بتحديث DOM بدقة جراحية. نتيجة لذلك ، يمكنك كتابة تطبيقات طموحة ذات خصائص أداء ممتازة.
تم تخصيص الإصدار الأول من Svelte
لاختبار الفرضية القائلة بأن المترجم المصمم خصيصًا يمكنه إنشاء كود موثوق وتوفير تجربة مستخدم ممتازة. تم تكريس الإصدار الثاني للتحسينات الصغيرة التي أدت إلى ترتيب عدد من الأشياء.
Svelte 3 هو بالفعل تنقيح كبير. خلال الأشهر الخمسة أو الستة الماضية ، نولي اهتمامًا خاصًا لتجربة المستخدم
للمطورين . الآن يمكنك كتابة المكونات التي تحتوي على كمية من رمز الغلاية
أقل بكثير من أي مكان آخر. جرب
البرنامج التعليمي الجديد الخاص بنا
وشاهد ما نعنيه - إذا كنت معتادًا على الأطر الأخرى ، نعتقد أنك ستفاجأ بسرور.
لجعل هذه الفرصة حقيقة واقعة ، نحتاج أولاً إلى إعادة التفكير في المفهوم الأساسي لأطر واجهة المستخدم الحديثة: التفاعل.
إعادة تحديد تقرير التفاعل في معسكر You Gotta Love Frontend Code Camp 2019نقل التفاعل إلى اللغة
في الإصدارات السابقة من Svelte ، كان عليك أن تخبر الكمبيوتر أن جزءًا من الحالة قد تغير عن طريق استدعاء طريقة
this.set :
const { count } = this.get();
this.set({
count: count + 1
});
. ,
this.set this.setState, ( ) React:
const { count } = this.state;
this.setState({
count: count + 1
});
( — React ), .
React, -. , , , . , . ,
embedded-, , .
, API … , API — API.
.
count , , :
count += 1;
, , :
count += 1; $$invalidate('count', count);
, . .
. Svelte
Achim Vedam, -,
svelte.technology svelte.dev.
« UI » « web-». Svelte — , , , , , , , . .
2
Svelte 2, , .
svelte-upgrade, , .
, .
: , , Svelte 3, , .
, . , , .
Sapper, Next.js, Svelte 3.
Svelte Native, Android iOS Svelte, .
, , , devtools . ., , .
TypeScript.
, , Svelte 3 — -. ,
, . ,
Discord ,
Telegram GitHub — , .
P/S —
Svelte 3.Svelte 3.Svelte 3.AlexxNB! - !