Langsing 3: Memikirkan Kembali Reaktivitas

Beberapa hari yang lalu, sebuah peristiwa besar terjadi untuk komunitas SvelteJS, dan memang, menurut saya, untuk seluruh frontend modern - rilis yang sudah lama ditunggu-tunggu dari Svelte 3! Oleh karena itu, di bawah cut adalah terjemahan artikel oleh Svelte dan video yang sangat baik dari laporannya di YGLF 2019.

Akhirnya dia ada di sini

Setelah beberapa bulan yang terbang seperti beberapa hari, kami melewati bulan karena kami dapat mengumumkan rilis stabil Svelte 3. Rilis yang sangat besar ini adalah hasil dari ratusan jam kerja bagi banyak orang di komunitas Svelte, termasuk penguji beta yang ulasan yang tak ternilai membantu mengasah desain kerangka kerja di setiap tahap perjalanan ini.

Kami pikir Anda akan menyukainya.

Apa itu Svelte?

Svelte adalah kerangka kerja komponen yang mirip dengan React atau Vue, tetapi dengan perbedaan penting. Kerangka kerja tradisional memungkinkan Anda untuk menulis kode deklarasi negara-didorong, tetapi bukan tanpa hukuman: browser perlu melakukan pekerjaan ekstra untuk mengubah struktur deklaratif ini menjadi manipulasi DOM, menggunakan teknik seperti DOM virtual yang menggunakan anggaran yang ada untuk membuat bingkai dan menambahkan tanggung jawab kepada kolektor sampah.

Alih-alih, Svelte bekerja saat membangun , mengubah komponen Anda menjadi kode imperatif kinerja tinggi yang memperbarui DOM dengan presisi bedah. Sebagai hasilnya, Anda dapat menulis aplikasi yang ambisius dengan karakteristik kinerja yang sangat baik.

Versi pertama Svelte didedikasikan untuk menguji hipotesis bahwa kompiler yang dirancang khusus dapat menghasilkan kode yang andal dan memberikan pengalaman pengguna yang luar biasa. Versi kedua dikhususkan untuk perbaikan kecil yang membawa sejumlah hal dalam rangka.

Svelte 3 sudah merupakan revisi yang signifikan. Selama lima atau enam bulan terakhir, kami telah memberikan perhatian khusus pada pengalaman pengguna pengembang . Sekarang Anda dapat menulis komponen dengan jumlah kode boilerplate secara signifikan lebih sedikit daripada di tempat lain. Coba tutorial baru kami dan lihat apa yang kami maksud - jika Anda sudah terbiasa dengan kerangka kerja lain, kami pikir Anda akan terkejut.

Untuk menjadikan peluang ini kenyataan, pertama-tama kami perlu memikirkan kembali konsep di balik kerangka UI modern: reaktivitas.


Mendefinisikan Ulang Laporan Reaktifitas di You Gotta Love Frontend Code Camp 2019

Pindahkan reaktivitas ke bahasa

Dalam versi Svelte sebelumnya, Anda harus memberi tahu komputer bahwa beberapa bagian negara telah berubah dengan memanggil metode 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! - !