Mengapa SvelteJS bisa dibilang kerangka kerja terbaik untuk pengembang web baru

Setiap pengembang web yang telah melakukan ini selama setidaknya beberapa tahun mungkin akan mendengar pertanyaan serupa hari demi hari:

Saya benar-benar ingin menjadi pengembang web, tetapi saya tidak tahu harus mulai dari mana. Ada saran?

Sekitar 10 tahun yang lalu, jawabannya sangat sederhana. Cukup buat index.html, tambahkan beberapa tag di sana, buat judulnya merah dengan CSS dan aktifkan jQuery untuk menangani klik!

Oh, betapa semuanya telah berubah. Sekarang kami bekerja dengan alat bangun, perutean sisi klien, kerangka kerja khusus dengan runtime mewah, mengikat "ini" di mana-mana, templat literal, CSS-in-JS ... bagaimana memilih apa yang paling penting?

Semua ini telah menyebabkan variasi yang tak terhitung jumlahnya di mana untuk memulai dengan berbagai tingkat "masukkan saja sekarang, dan saya akan jelaskan nanti." Beberapa mendorong pendatang baru untuk belajar Bereaksi atau Vue segera untuk memulai dengan praktik modern. Sementara yang lain berteriak dari puncak gunung bahwa pemula harus selalu mulai dengan dasar-dasarnya. Sebenarnya, kedua pendekatan memiliki kelebihan. Yang pertama dapat menarik pendatang baru ke hal-hal seperti pemuatan-panas dan komponen, dengan risiko terlalu banyak meninggalkan satu sisi. Sementara yang kedua membuat pendatang baru mengerti bagaimana DOM bekerja di bawah tenda, pada saat yang sama, mungkin mengganggu orang-orang dengan kompleksitas vanilla JS, yang sejak lama kita abaikan.

Itu sebabnya kita membutuhkan jalan tengah. Cara untuk memulai dengan dasar-dasar, sementara pada saat yang sama menyerap konsep-konsep modern seperti pengembangan berbasis komponen, CSS cascading yang terisolasi, template, fungsi deklaratif, dll. dll.

Langsing, siap melayani Anda

SvelteJS adalah kartrid yang cukup baru dalam kerangka kerja js, yang baru mulai menarik perhatian. Seseorang mungkin mengetahuinya setelah memposting Status JavaScript 2018 . Singkatnya, Svelte dimaksudkan sebagai kerangka kerja yang tidak benar-benar kerangka kerja. Ini didasarkan pada alat untuk mengkompilasi komponen pada tahap perakitan, yang memungkinkan Anda untuk memuat pada halaman hanya apa yang diperlukan untuk menampilkan aplikasi Anda. Ini berarti bahwa tidak ada DOM virtual, tidak ada kerangka kerja di atas kerangka kerja, dan tidak ada kerangka kerja dalam runtime .

Semua ini adalah argumen yang cukup serius untuk pengembang yang lebih berpengalaman, tetapi kebanyakan pemula mungkin tidak bisa membaca paragraf terakhir tanpa melanggar kepala. Untungnya, bukan sihir kompilasi yang membuat Svelte begitu ramah pemula, tetapi sintaksisnya.

Jika Anda belum pernah melihat komponen Svelte, berikut adalah contoh sederhana:

<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> /*   CSS */ .pretty { color: red; } </style> <script> /* ...        */ let name = "Ben"; </script> 

Mari kita cari tahu. Jadi, pertama-tama, perlu dicatat bahwa semua ini dapat ditulis bahkan dalam file .html biasa, bahkan dalam file .svelte , jika jiwa Anda menginginkannya. Kami juga melihat beberapa tag yang akrab mengingatkan pada pengembangan tanpa kerangka: gaya dan skrip . Gaya dan kode JS ditulis dalam tag ini untuk membangun komponen dengan benar. Selain itu, memungkinkan penyorotan sintaks bekerja tanpa plugin editor tambahan, seperti solusi CSS-in-JS. Selain itu, kompiler Svelte cukup pintar untuk mengisolasi gaya spesifik komponen apa pun secara default. Oleh karena itu, Anda tidak akan memiliki gaya yang mengalir di antara komponen.

Anda juga melihat bagaimana sesuatu yang ajaib terjadi dengan nama variabel JavaScript. Ini adalah konsep baru yang brilian untuk Svelte 3, di mana setiap variabel dalam skrip komponen Anda dapat diakses dari markup. Kami tidak memiliki sintaks khusus yang perlu dipelajari untuk mengelola status. Tidak ada ruang lingkup $ Angular, atau Bereaksi this.state , atau data dari Vue. Sebagai gantinya, kita bisa menggunakan variabel biasa untuk menggambarkan keadaan, menyebabkan rendering ulang setiap kali nilainya berubah.

Kebebasan dari "jargon" sintaksis ini berarti bahwa membuat komponen mulai seperti membuat CodePen, hanya tanpa harus berpikir tentang cara menghubungkan fungsi JS deklaratif ke beberapa jenis pemilih DOM.

Hal lain yang menyenangkan adalah komponen Svelte diimpor semudah komponen tradisional. Anda cukup mengimpor .html , karena Svelte tahu cara menggunakannya:

 <div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script> 

Keren, tapi tunggu sebentar ...

Beberapa pembaca mungkin menganggap konsep ini sama menakjubkannya dengan saya. Pada saat yang sama, orang lain mungkin memiliki argumen sendiri yang menentang penggunaan pendekatan ini untuk mengajar pemula. Bukankah mereka penasaran bagaimana manipulasi DOM sebenarnya bekerja?

Jawabannya adalah ... mungkin. Tetapi ketika seseorang baru memulai (setidaknya dari pengalaman pribadi), Anda dapat menerima sedikit abstraksi demi penciptaan hal-hal keren yang lebih cepat.

Selain itu, seperti beberapa bahasa, seperti Java dan JS, manajemen pointer abstrak melalui pengumpulan sampah, sebagian besar alat pengembangan web modern mengabaikan manipulasi DOM. Kecuali untuk kasus-kasus ekstrem yang lebih sulit yang pemula mungkin tidak perlu. By the way, jika Anda bingung tentang apa manajemen pointer, saya pikir ini hanya membuktikan maksud saya. Jadi, alih-alih memaksa pemula untuk memanipulasi DOM atau mempelajari cara-cara kerangka kerja khusus mengelola negara, mengapa tidak membiarkan mereka mengakses variabel langsung dari markup? Sekarang mereka dapat mempelajari prinsip-prinsip dasar pengelolaan komponen negara tanpa jatuh ke dalam berkabung.

Ok, saya melihat contoh dasar, tetapi Svelte harus memiliki beberapa fitur khusus agar bisa berfungsi.

Tidak diragukan itu benar, tetapi jauh lebih sedikit dari yang Anda pikirkan. Salah satu bagian dari sintaks Svelte adalah untuk memetakan elemen DOM secara iteratif dan bersyarat. Ini berfungsi sangat mirip dengan peta dari JSX, tetapi tanpa semua tanda kurung bersarang di mana pendatang baru (dan saya) dapat dengan mudah tersesat. Berikut ini cara dasar yang menghasilkan daftar elemen dari array:

 <ul> {#each profiles as profile} <li>{profile.name}: {profile.role}</li> {/each} </ul> <script> const profiles = [ {name: 'Wes Bos', role: 'React extraordinaire'}, {name: 'Chris Coyier', role: 'Father of CodePen'}, {name: 'Cassidy Williams', role: 'Letting you know it's pi time'} ]; </script> 

Sekali lagi, saya mengerti kritik tentang sintaksis, tapi saya suka betapa mudahnya untuk memahami. Alih-alih menanamkan JavaScript ke dalam kode HTML kami, kami hanya mengatakan: hei, mari kita lewati array ini dan buat elemen untuk masing-masingnya.

Perlu disebutkan fitur lain dari Svelte, dari mana saya tidak begitu antusias: sintaks untuk mentransmisikan alat peraga ke komponen. Ya, ini berfungsi penuh dan mudah dipelajari, tetapi pada saat yang sama, itu mungkin terasa terlalu ajaib untuk selera sebagian orang. Untuk memproses alat peraga, kami cukup meneruskannya ke komponen di mana pun itu diimpor ...

 <!-- somewhere.html --> <Profile coolGuy="Scott Tolinski" /> 

... dan kami mendapatkan variabel ini sebagai "let" yang diekspor:

 <!-- profile.html --> <p>{coolGuy}</p> <script> export let coolGuy = ''; </script> 

Saya sepenuhnya memahami bahwa bagi sebagian orang ini akan tampak seperti penyalahgunaan "ekspor." Tetapi setidaknya ini sesuai dengan bagaimana pemula harus membuat konsep modul: kita mengekspor apa yang kita butuhkan untuk mengakses di luar komponen, dan mengimpor apa yang ingin kita gunakan dalam komponen kita.

Saya bisa mengatasi keanehan ini ... tapi bagaimana dengan langkah membangun yang diperlukan?

Jadi, kritik lain tentang mulai bekerja dengan kerangka kerja adalah kebutuhan untuk menggunakan manajer paket. Yang artinya ... sial, gunakan terminal!

Dengar, saya mengerti bahwa membuka hal ini bisa sangat menakutkan, dengan font mono dan "cd" yang menyeramkan untuk menavigasi direktori. Tapi jujur, ini benar-benar bukan hambatan besar ketika Anda hanya perlu satu tim untuk menjalankan. Selain itu, terminal terintegrasi dalam VS Code memudahkan untuk memulai. Ia bahkan terbuka di bagian bawah jendela tepat di direktori proyek Anda!

Svelte sebenarnya menawarkan starter yang dapat diunduh , tetapi saya membuat template starter saya sendiri yang hanya menggunakan Rollup untuk unduh langsung. Bahkan, file konfigurasi kurang dari 30 baris! Untuk proyek Svelte dasar, ini adalah semua direktori dan file yang Anda butuhkan:

/public
index.html
/src
index.html
app.js
rollup.config.js
package.json


Cukup tambahkan perintah untuk memulai langkah build di package.json dan Anda selesai! Anda tentu saja dapat mengatakan bahwa semua modul dan file tambahan yang dibutuhkan kerangka kerja lain tidak menjadi masalah jika seorang pemula tidak menyentuhnya, tetapi, menurut saya, semakin sedikit hal tambahan, semakin baik untuk pemula.

Ok, well, ini keren dan nyaman untuk pemula. Tetapi seberapa stabil kerangka ini?

Ini adalah masalah yang sangat topikal untuk kerangka kerja muda seperti Svelte. Semua contoh yang saya tunjukkan menggunakan sintaks Svelte versi 3, yang pada saat penulisan ini masih dalam versi beta. Mengasyikkan, saya akan menunggu beberapa bulan lagi sebelum bergegas bersamanya ke seminar pemrograman. Namun demikian, Svelte menawarkan halaman dokumentasi yang sangat ringkas untuk versi 3 , yang dapat memudahkan pemula.

Jadi, mari kita lihat beberapa manfaat utama untuk belajar tentang pengembangan web dengan Svelte:

1. Ini adalah kerangka kerja komponen dengan 0 plugin tambahan.
2. Dia mengelola negara tanpa sampah biasa
3. Menggunakan isolasi gaya tanpa menggunakan CSS-in-JS (jadi tidak perlu plugin editor atau sintaks bodoh)
4. Untuk memulai, Anda hanya perlu skrip build yang sangat sederhana.
5. Praktis tidak ada file tambahan di proyek dasar

Tentu saja, ini sangat normal jika saya tidak dapat meyakinkan Anda dalam artikel ini. Semua artikel bagus memicu sedikit kontroversi! Tapi saya harap artikel ini setidaknya menunjukkan kepada Anda bagaimana Svelte yang keren dan sederhana dapat dipelajari.

Terima kasih sudah membaca ini!

Saya adalah pengembang web front-end-dalam-proses-pembelajaran, selalu mengacaukan sesuatu yang baru. Saya akan mencoba untuk menerbitkan secara teratur di sini, jadi tulislah jika Anda suka!

***

Dari penerjemah:

Terima kasih telah membaca terjemahan ini! Saya harap artikel ini mendorong Anda untuk melihat ke arah Svelte sebagai alat untuk pelatihan atau bahkan proyek baru.

Datanglah ke bengkel 2 jam saya di Svelte 3 di HolyJS Piter 24-25 Mei . Siapa yang ingin mengikuti perkembangan Svelte - selamat datang di saluran telegram berbahasa Rusia SvelteJS . Kami akan senang melihat Anda!

Dan survei kecil, tanpa referensi kerangka kerja dan teknologi. Pendapat Anda hanya menarik.