قد يبدو عنوان المقال مبهجا بعض الشيء ، مثل إطار Svelte نفسه والأفكار التي تقف وراءه. إذا كنت لا تزال لا تعرف شيئًا عن Svelte ، فقم بربط حزام الأمان ، الآن سنندفع نحو الثورة.
يرجى ملاحظة أن هذا ليس تعليميًا على بدء Svelte. يوجد بالفعل دليل تفاعلي ممتاز خطوة بخطوة من فريق Svelte من شأنه أن ينغمس في عالم البرمجة التفاعلية.
تنويه: أنا لست نجم موسيقى الروك في البرمجة ولا أعرف كل شيء في العالم. أنا ببساطة متحمس للاتجاهات الجديدة التي تحدث كل يوم ، وأحب أن أتحدث عنها عندما أستطيع - هكذا ظهر هذا المقال. كن ينتقدها وتأكد من إخباري إذا كتبت شيئًا سخيفًا.
حسنًا ، دعنا الآن نتعمق في الموضوع!
ولكن أولا ، رد
قبل معرفة سبب اعتقادي أن Svelte سوف يمزق الجميع ، دعنا نلقي نظرة على هذه التغريدة الحديثة من رجل يدعى Dan ، وحاول أن نفهم ما يعنيه:
حسنًا ، لماذا يطلق عليه React إذن؟
تحذير واحد آخر: هذا المقال لا يهدف بأي حال من الأحوال إلى نقد رد الفعل. قررت أن أستخدمها كمثال لأن معظم الناس الذين قرأوا هذه المقالة كانوا يتعاملون مع React في مرحلة ما أو أخرى في حياتهم. إنه الآن فقط هذا هو أفضل مثال على تباين Svelte.
ماذا يعني دان ، وكيف أثر هذا على الطريقة التي نكتب بها الكود الآن؟ للإجابة على هذه الأسئلة ، دعوني أبسط طريقة عمل React تحت الغطاء.
عند تقديم تطبيق React ، يتم وضع نسخة من DOM في بنية تسمى Virtual DOM . يتوسط DOM الظاهري بين رمز React الخاص بك وما يعرضه المستعرض في DOM.
, (, this.setState useState), React , , .
DOM , , . DOM, DOM, , DOM .
, DOM , , React DOM. .
, . React, ( this.setState ), DOM , React (-! ).
Dan, , React . React , . .
, Svelte
Svelte — - , - . DOM , .
, , , JavaScript ? — . .
1.
Svelte — . Svelte — . , Svelte — , JavaScript, DOM - .
-, ? ? — . , , . , .
Rich Harris YGLF 2019:
Svelte 3.0 API .
? , , React ( ) API, , ( this.setState useState) DOM.
this.setState React ( UI ) , API, .
Svelte .
, Observable. , . , — .
1. (() => {
2. let square = number => number * number;
3.
4. let secondNumber = square(firstNumber);
5. let firstNumber = 42;
6.
7. console.log(secondNumber);
8. })();
, №4, secondNumber firstNumber, .
, . ? , ( , ).
, , :
1. 'square' ?
- ,
2. 'secondNumber' ?
- 'square' 'firstNumber'. 'square', 'firstNumber', .
3. , 'firstNumber'. 'secondNumber' 'square' 'firstNumber'
- , 'console.log'?
- , .
, , , , .
№4, , firstNumber, , . , №5, №5, №4 .
: , A B, B .
, , Svelte ? JavaScript . : $: foo = bar. , , , $ foo = bar ( strict mode , foo ).
, Svelte $:, , . .
! API JavaScript API this.setState.
:
1. // js
2. let foo = 10;
3. let bar = foo + 10; // bar 20
4. foo = bar // bar 20 ( )
5. bar = foo + 10 // bar 30
6. // svelte js
7. let foo = 10;
8. $: bar = foo + 10; // bar 20
9. foo = 15 // bar 25, foo
, bar foo, , bar = foo + 10, API, this.setState ({bar = foo + 10}). .
, foo 15, bar 25, API, . Svelte .
Javascript , , :
1. //...
2. function instance($$self, $$props, $$invalidate) {
3. let foo = 10; // bar 20
4. $$invalidate('foo', foo = 15) // bar 25, foo
5. let bar;
6. $$self.$$.update = ($$dirty = { foo: 1 }) => {
7. if ($$dirty.foo) { $$invalidate('bar', bar = foo + 10); }
8. };
9. return { bar };
10. }
11. //...
, . .
, foo , bar ? , Svelte- , .
Svelte . , — .
: №4, bar , EventLoop .
, . , Svelte UI .
2.
, , Svelte , ? React Svelte, :
17 29
, , React.js — Angular .
, Svelte , , . , — .
, -. ? , , , ?
, , , . , , React-, .
, API Svelte , .
3.
, , Svelte - . ? , Svelte?
, React , , DOM , DOM , - ( ).
, , React , , . React API, shouldComponentUpdate, useMemo, React.PureComponent ..
DOM .
Svelte DOM, DOM ? , Rich Harris YGLF:
— . .
, -, , . , Svelte , .
, Svelte . Svelte Javascript, DOM. , Svelte DOM ?
, (, React) Svelte , - . , React API, , . Svelte =.
— , foo — =, Svelte, , , foo. Svelte DOM, foo.
, . , Rich Harris .
Svelte 3.0 — , - . , . Svelte , Javascript- .
, , . Svelte React, Angular UI ?
— . Svelte , , , , .
, React -, Svelte , .
!
Svelte: C Telegram