⚪️ 🎇 📙 Mengapa Anda harus menggunakan Svelte untuk proyek web Anda 👻 🔙 👒

Jika Anda seorang pengembang web, Anda mungkin pernah mendengar tentang Svelte Js. Namun demikian, saya pikir Anda akan bertanya-tanya mengapa ini mendapatkan popularitas dan keuntungan menarik apa yang dimiliki pengembang web.

Kami akan melakukan tinjauan singkat tentang kerangka kerja ini, kelebihan dan kekurangannya, sehingga setelah membaca Anda dapat memutuskan apakah itu sesuai dengan proyek Anda atau tidak.

Kerangka Svelte muncul pada 2018 dan itu sensasi. Baik pemula maupun pengembang berpengalaman suka menggunakannya untuk semua jenis proyek. Dalam hal ini, mari kita luangkan sedikit waktu untuk menjelaskan apa yang membuat Svelte begitu mudah diakses.

Apa Svelte dan apa kelebihannya?

Untuk beberapa pengembang, Svelte JS dikenal sebagai kerangka front-end paling populer yang tidak termasuk dalam enam besar Negara JavaScript pada tahun 2018. Ada artikel Wikipedia tentang Svelte , tetapi muncul hanya enam bulan yang lalu, jadi tidak ada banyak informasi di sana.

Svelte dikandung sebagai kerangka kerja, tetapi, pada kenyataannya, itu adalah kerangka kerja komponen yang dirancang untuk mengkompilasi komponen pada tahap pembangunan. Berkat pendekatan ini, Anda dapat mengunggah hanya satu bundle.js per halaman untuk merender seluruh aplikasi.

Sederhananya, dengan Svelte, Anda menulis komponen menggunakan HTML, CSS, dan JavaScript. Selama pengembangan, framework mengkompilasinya menjadi modul JavaScript kecil yang berdiri sendiri. Ini memastikan bahwa pekerjaan minimum dilakukan pada bagian browser, yang membuat aplikasi web lebih cepat, dan menulis kode lebih mudah.

Berikut ini adalah deskripsi singkat Svelte dari penulis:

Sumber: Svelte.dev

Berkat semua ini, Svelte Mobile adalah salah satu pemimpin dalam hal "kinerja startup". Jenis optimasi lain tidak. Svelte mencapai hasil luar biasa seperti itu melalui penggunaan kompiler JavaScript berbasis browser yang dapat diakses, dan bukan yang pihak ketiga. Dengan demikian, kami mendapatkan solusi hebat untuk pengembangan web di antara kerangka kerja populer dan bahasa pemrograman lainnya .

Jadi Svelte mencapai respon kode yang akurat dan peningkatan produktivitas, yang merupakan kerangka iklan yang sangat baik untuk pengembang dan pemilik bisnis. Selain itu, keuntungan lain dari Svelte untuk pengembang adalah kemudahan bagi pemula dan struktur sintaksis yang jelas.

Tinjauan Arsitektur Langsing

Svelte populer untuk kecepatannya dibandingkan dengan perpustakaan lain. Ini karena menyingkirkan fase pemuatan kerangka kerja untuk membangun DOM virtual . Alih-alih menggunakan alat saat runtime, kode Svelte dikompilasi ke dalam JS pada tahap build. Ini berarti bahwa aplikasi tidak memerlukan dependensi untuk dijalankan.

Bagaimana Svelte Bekerja

Saya akan mencoba menjelaskan prinsip Svelte dengan kata-kata yang paling sederhana:

Anda membuka situs.
Render halaman dalam JS murni.
Anda memberikan halaman tersebut kepada kolega Anda [jika Anda bekerja lebih dari satu].
Kolega mengharapkan reaktivitas nyata dari halaman.
Jika mereka menemukannya, aplikasi / situs harus bekerja dengan lancar, tidak hanya dalam mode uji, tetapi juga dalam pertempuran.

Svelte JS vs. Bereaksi vs. Vue: perbandingan

Banyak insinyur membandingkan Svetle.Js dengan kerangka kerja lain. Alternatif yang paling terkenal adalah React dan Vue.

Kerangka kerja web yang paling populer seperti Angular, React, dan Vue.js didasarkan pada prinsip menunggu kode dimuat untuk membangun DOM virtual. Hanya dengan begitu mereka dapat merender halaman menggunakan perpustakaan.

Misalnya, React, yang dikembangkan oleh Facebook pada tahun 2011, membuat pemrograman reaktif cukup populer. Kerangka kerja ini pertama kali mulai menggunakan DOM virtual. Ini memisahkan pemrosesan peristiwa, manipulasi atribut, dan pembaruan DOM manual yang seharusnya diperlukan untuk membangun aplikasi. Ini adalah faktor kunci yang membuat React sangat menarik.

Svelte, sementara itu, adalah kompiler. Ini mengkompilasi komponen Anda dalam JavaScript daripada mengandalkan konsep-konsep seperti Virtual DOM untuk memperbarui DOM browser. Berkat naskah Svelte, menjadi mungkin untuk membangun aplikasi jauh lebih efisien. Anda dapat menulis komponen Anda menggunakan CSS, HTML, dan JavaScript, dan selama proses pembuatan, Svelte mengkompilasinya menjadi modul JavaScript terpisah.

Akibatnya, Svelte 3 membangun DOM yang lebih rendah. Misalnya, implementasi TodoMVC pada Svelte dalam bentuk terkompresi berbobot 3,6 KB. Sebagai perbandingan, React plus ReactDOM, bahkan tanpa kode aplikasi, beratnya sekitar 45 KB dalam bentuk terkompresi. Mengunduh TodoMVC sepenuhnya pada React membutuhkan waktu 10 kali lebih lama di browser daripada di Svelte.

Benar, sulit untuk secara imparsial mengevaluasi kinerja Svelte dibandingkan dengan React, karena kerangka dasarnya sangat berbeda.

Namun, jika Anda ingin mengetahui detail lebih lanjut tentang perbandingan praktis kerangka kerja web ini, akan bermanfaat untuk menonton video ini.

Menurut GitHub , Svelte Native secara signifikan lebih cepat daripada Ember, Angular, React, Ractive, Preact, Mithril atau Riot. Bahkan mampu bersaing dengan Inferno, yang mungkin merupakan kerangka kerja UI tercepat di dunia saat ini. Pada akhirnya, ini adalah keuntungan yang menentukan, karena kecepatan aplikasi yang lebih tinggi dapat mendorong Anda di depan persaingan.

Komponen langsing

Mari kita menggali lebih dalam rincian struktur langsing. Komponen PWA [Aplikasi Web Progresif] apa pun di Svelte dapat berisi tiga bagian: skrip, gaya, dan templat. Berikut adalah deskripsi yang lebih terperinci tentang apa yang dimaksud:

Tag skrip: blok JavaScript opsional dengan deklarasi fungsi dan variabel yang digunakan di dalam komponen.

Tag gaya: unit opsional lain. Anggap saja sebagai tag gaya HTML biasa, dengan satu perbedaan kritis. Aturan yang dijelaskan di dalam blok ini hanya berlaku untuk komponen saat ini. Menerapkan gaya ke elemen Ptidak akan memengaruhi semua paragraf di halaman. Ini hebat, karena tidak perlu membuat kelas untuk elemen yang berbeda. Artinya, Anda tidak akan dapat secara tidak sengaja mendefinisikan kembali aturan gaya lain.

Blok template: Ini adalah blok wajib terakhir dan satu-satunya, biasanya tag H1. Ini adalah tampilan dan tampilan komponen Anda. Ini terkait erat dengan skrip dan blok gaya, karena ia mendefinisikan perilaku dan desainnya.

Untuk mendapatkan ide yang lebih baik dalam membuat semua komponen ini, saya sarankan Anda membaca penjelasan singkat dan dapat dimengerti dari A shot of code:

Untuk alasan ini, kita dapat menganggap Svelte sebagai perpustakaan yang mencoba menghadirkan modularitas ke frontend. Modularitas ini didukung oleh pengelompokan berbagai komponen. Namun, kerangka kerja juga mengisolasi template, logika, dan desain. Secara default, Svelte membuat style untuk setiap komponen secara terpisah. Artinya, Anda akan menghindari kebocoran gaya antara komponen, yang tidak menjamin penggunaan beberapa kerangka kerja lainnya.

Perlu juga dicatat bahwa Svelte berinteraksi dengan baik dengan variabel JavaScript yang disebut name. Ini adalah konsep baru dari Svelte v3. Variabel apa pun dalam skrip komponen Anda sekarang dapat diakses dari markup HTML. Juga tidak ada sintaks khusus kerangka kerja yang perlu Anda pelajari untuk mengelola negara. Anda tidak perlu berurusan dengandataVue, $scopeSudut, atau this.stateBereaksi. Sebagai gantinya, Anda dapat menggunakan di mana saja letuntuk mencapai nilai negara yang ditetapkan. Mengubah nilai setiap kali secara otomatis menyebabkan re-render.

Begini tampilannya dalam praktik:

Membuat komponen Svelte mirip dengan bekerja dengan CodePen. Anda tidak perlu bertanya-tanya bagaimana menghubungkan fungsi JS deklaratif yang Anda pelajari melalui beberapa DOM query-selector. Langsing tidak akan mempengaruhi window listenersatau callback functions. Fundamental ini tetap sebagaimana mestinya.

Hal baik lainnya tentang komponen-komponen ini adalah bahwa mereka sama prioritasnya dengan yang tradisional. Yang perlu Anda lakukan adalah mengimpor .html dan Svelte akan mengerti cara menggunakannya.

Apa lagi yang perlu Anda ketahui tentang Svelte.js

Mari kita bicara tentang keuntungan penting lain dari Svelte dalam proses pengembangan dibandingkan dengan kerangka kerja lainnya.

Ramah pemula

Kami sebutkan sebelumnya bahwa alasan popularitas Svelte adalah sebagian karena kesederhanaannya bagi pemula. Saat menggunakannya, tidak perlu memanipulasi DOM. Juga, Anda tidak perlu memahami pembungkus kerangka khusus negara. Akses ke variabel dapat diperoleh langsung dari markup, dan ini sangat menyederhanakan proses pembuatan aplikasi. Bekerja dengan Svelte, programmer dapat mempelajari prinsip-prinsip dasar status komponen tanpa menjadi bingung dalam detailnya.

Svelte menyediakan sintaksnya sendiri untuk pernyataan bersyarat dan loop untuk menampilkan elemen DOM. Prinsip operasi di sini mirip dengan JSX. Namun, semua tanda kurung tertutup ini di mana pemula dapat dengan mudah tersesat tidak begitu penting.

Ada satu keanehan tentang Svelte yang layak disebutkan: ia meneruskan properti ke komponen. Kerangka kerja ini mudah dipelajari dan berfungsi penuh, tetapi, menurut selera beberapa pengembang, sintaksisnya terlalu eksotis.

kompatibilitas terbalik

Sebelumnya, jika Anda perlu mengintegrasikan, misalnya, beberapa widget kalender atau lainnya ke dalam aplikasi Anda, Anda hanya bisa melakukan ini menggunakan versi kerangka kerja yang sama dengan widget tersebut dibangun. Artinya, jika Anda membangun aplikasi di Angular, dan widget dibangun di React, Anda tidak akan dapat mengintegrasikannya. Namun, jika widget atau aplikasi Anda dibuat menggunakan Svelte, ini menjadi mungkin.

Pemisahan kode

Katakanlah Anda menggunakan Bereaksi sebagai kerangka kerja utama. Jika Anda awalnya hanya menggunakan satu komponen Bereaksi, dan tidak banyak, maka Anda masih harus mengunduh seluruh Bereaksi. Dengan Svelte, pemisahan kode jauh lebih efisien, karena kerangka kerja dibangun ke dalam komponen dan komponen ini sangat kecil.

Mendukung Komunitas Sumber Terbuka

Svelte adalah perangkat lunak sumber terbuka yang dikembangkan oleh para penggemar. Dengan demikian, menggunakan kerangka kerja Svelte bebas biaya dan memungkinkan Anda untuk mengimplementasikan banyak fungsi secara gratis. Selain itu, Svelte memiliki komunitas pengembang aktif di GitHub, yang dapat Anda ikuti, dan di mana Anda selalu dapat meminta bantuan atau berkontribusi pada teknologi ini.

Apakah Svelte cukup stabil dan dapat diandalkan

Ini adalah masalah mendesak untuk kerangka kerja yang telah ada di pasaran baru-baru ini. Semua contoh di atas berhubungan dengan sintaks Svelte versi 3. Saat ini, masih dalam versi beta. Dibandingkan dengan raksasa industri seperti ReactJS dan VueJS, itu tidak terlalu berkembang.

Tidak peduli seberapa menariknya SvelteJS, Anda harus menunggu beberapa saat sebelum mengajar kelas master pada kode yang menggunakannya. Ini karena versi beta mungkin agak berbeda dari yang terakhir. Namun, Svelte menawarkan dokumentasi ringkas untuk versi 3, yang dapat memudahkan pemula. Jadi kerangka kerja ini tentu dapat dilihat sebagai bagian dari tumpukan teknologi tepercaya Anda.

Apakah Svelte.js raksasa berikutnya?

Sulit dijawab. Bisakah Svelte mengalahkan Vue dan React sebagai kerangka kerja front-end yang akan bertahan dalam ujian waktu?

Ini tidak mudah diprediksi. Saat ini, ia belum mencapai tingkat popularitas beberapa saudara lelakinya. Dia tidak memiliki dukungan yang sama dari perusahaan besar seperti React. Tapi sekali lagi, Vue melakukannya dengan cukup baik tanpa dia.

Tahun lalu, studi State of JS lainnya dilakukan. Itu diadakan setiap tahun untuk menilai preferensi pengembang terkemuka. Svelte telah menjadi yang paling populer dibandingkan dengan perpustakaan lain yang termasuk dalam survei. Ini bisa berarti bahwa cepat atau lambat itu akan dianggap sebagai salah satu kerangka kerja JS terbaik.

Langsing vs Bereaksi adalah topik diskusi yang umum di antara programmer, tetapi salah satu kerangka kerja belum tentu lebih baik dari yang lain. Svelte sangat cocok untuk mengembangkan aplikasi web atau MVP, sedangkan Angular sangat cocok untuk aplikasi web PWA atau perusahaan. Beberapa pengembang menemukan kerangka kerja yang mereka sukai dan tetap menggunakannya, tetapi meskipun demikian, jangan biarkan ini mencoba mencoba Svelte. Anda mungkin menyukai fitur yang kami jelaskan.

Mari kita secara singkat membahas fitur-fitur utama Svelte

lagi : ️

Ini adalah kerangka kerja berbasis komponen yang tidak memerlukan plugin tambahan.
️ Ia bekerja dengan manajemen negara tanpa kesulitan yang biasa.
️ Ini memungkinkan Anda untuk menggunakan gaya bawaan [dalam komponen] tanpa memerlukan CSS-in-JS, jadi tidak diperlukan ekstensi untuk editor kode atau sintaks aneh.
️ Skrip pembuatan yang sangat sederhana sudah cukup untuk memulai.
️Untuk mulai bekerja pada proyek dasar, praktis tidak ada file yang diperlukan.

Jika Anda seorang pengembang web yang membutuhkan kerangka kerja baru, pastikan Svelte patut dicoba. Dalam kasus lain, jika Anda mencari teknologi terbaik untuk solusi web Anda, Svelte mungkin merupakan opsi yang baik untuk diperhatikan.

Mengapa Anda harus menggunakan Svelte untuk proyek web Anda