Judul artikel mungkin tampak sedikit mencolok, seperti kerangka Svelte itu sendiri dan ide-ide yang ada di baliknya. Jika Anda masih tidak tahu apa-apa tentang Svelte, teguh, sekarang kita akan bergegas menuju revolusi.
Harap dicatat bahwa ini bukan tutorial untuk memulai dengan Svelte. Sudah ada panduan interaktif selangkah demi selangkah yang sangat baik dari tim Svelte yang akan membenamkan Anda dalam dunia pemrograman reaktif.
Penafian: Saya bukan bintang rock dalam pemrograman dan tidak tahu segalanya di dunia. Saya hanya antusias tentang tren baru yang terjadi setiap hari, dan saya suka membicarakannya ketika saya bisa - ini adalah bagaimana artikel ini muncul. Jadilah kritis terhadapnya dan pastikan untuk memberi tahu saya jika saya menulis sesuatu yang konyol.
Ok, sekarang mari kita mempelajari topiknya!
Tapi pertama-tama, Bereaksi
Sebelum memberi tahu mengapa menurut saya Svelte akan merobek semua orang, mari kita lihat tweet baru-baru ini dari seorang pria bernama Dan, dan cobalah untuk memahami apa yang ia maksud:
Hmm, mengapa disebut React?
Satu peringatan lagi: artikel ini sama sekali tidak dimaksudkan untuk mengkritik React. Saya memutuskan untuk menggunakannya sebagai contoh karena sebagian besar orang yang membaca artikel ini berurusan dengan React pada satu titik atau lain dalam kehidupan mereka. Baru saja inilah contoh terbaik untuk membandingkan Svelte.
Apa maksud Dan, dan bagaimana ini memengaruhi cara kami menulis kode sekarang? Untuk menjawab pertanyaan ini, izinkan saya menyederhanakan bagaimana Bereaksi bekerja di bawah tenda.
Ketika aplikasi Bereaksi dibuat, salinan DOM ditempatkan dalam struktur yang disebut Virtual DOM . DOM virtual ini memediasi antara kode Bereaksi Anda dan apa yang ditampilkan oleh browser dalam 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