Alih-alih kata pengantar
Artikel ini akan bermanfaat bagi mereka yang, seperti Kami memutuskan untuk mencoba
Svelte dalam proyek langsung. Perusahaan kecil kami menerima pesanan untuk mengembangkan admin web untuk layanan dengan backend di Mongodb Stitch. Dalam beberapa tahun terakhir, frontend Kami menulis dalam React atau Vue (tergantung pada ukuran proyek dan apakah ReactNative diperlukan), tetapi setelah mendengar tentang keindahan Svelte, kami memutuskan untuk mencobanya untuk memahami sendiri apakah itu baik. Dan mungkin kita juga harus menggunakannya sebagai ganti Vue atau React? ..
Siapakah Svelte?
Singkatnya - ini adalah kerangka js baru (tapi dia tidak menganggap dirinya seperti itu), yang merupakan pembunuh React dan Vue, dan bla, bla, bla ... Dalam artikel saya, saya ingin mempertimbangkan Svelte bukan hanya bagaimana kerennya “di bawah tenda”, tetapi dari titik itu pandangan kenyamanan penggunaannya dalam proyek nyata.
Kami tidak membuat mobil, kami mengendarainya dan kami memiliki pelanggan jahat dengan ketentuan yang tidak kalah jahat.
Tutorial
Hal pertama yang Anda mulai pelajari tentang bahasa atau kerangka kerja baru adalah tutorial di situs. Di Svelte, ini adalah
Svelte.dev/Tutorial .
Sayangnya, bagian dari tutorial tidak berfungsi di situs dalam pratinjau, sementara itu tidak sepenuhnya jelas apakah itu berfungsi dalam kenyataan atau tidak. Anda harus menghabiskan waktu dan memeriksanya sendiri secara manual, karena tidak jelas apakah tutorialnya kedaluwarsa atau ada yang salah di situs web Svelte. Dan itu benar-benar membutuhkan banyak waktu.
Kit dan Gaya UI
Menemukan Kit UI untuk Svelte adalah rasa sakit tersendiri bagi kita semua. Saya ingin berseru: "Setidaknya Material, Bootstrap ... setidaknya sesuatu ...".
Hanya
sveltematerialui.com dan
svelteui.js.org yang ditemukan, yang saat ini terlihat sangat mentah.
Dengan impor sederhana
<Button/> dari itu, kesalahan jatuh dari paket selama perakitan, tidak ada waktu untuk menyelesaikan kesalahan kit ui.
Setelah menjalankan dokumentasi dengan cepat, saya memutuskan untuk meninggalkannya demi impor Vanilla dari CDN.
Saya ingin menggunakan Material UI dalam proyek ini, karena mungkin panel admin juga akan digunakan dari perangkat seluler, dan Material sangat cocok untuk ini (menurut saya, terlihat lebih buruk di desktop).
Menggunakan JS tanpa Kit UI secara mental membawa saya kembali 10 tahun yang lalu) Lokomotif kelas dan nostalgia yang baik).
Karena fakta bahwa Svelte bekerja dengan DOM “dengan cara yang berbeda”, MaterialUI mulai mengeluarkan segala macam hal buruk terkait dengan bagaimana komponen UI yang ditambahkan melalui js to dom ditampilkan. Misalnya, pemintal sederhana ditampilkan setiap saat:
Setelah pencarian yang panjang, apa yang salah, ternyata pemintal di UI Bahan ditambahkan melalui JS setelah dokumen siap (onLoad), tetapi setelah acara ini, Svelte mulai menambahkannya ke DOM dan Bahan skrip JS tidak melihatnya karena peristiwa itu terjadi sebelumnya.
Ini harus diperlakukan dengan menambahkan ke komponen induk Svelte:
afterUpdate(() => { componentHandler.upgradeDom(); });
Stilisasi
Dengan style, semuanya sangat jelas, kami mengisi semua style seperti di Vue. Anda menulis gaya dan semuanya baik-baik saja, dan kemudian menulis komponen UI (karena Anda tidak memiliki UIKit) yang akan mengambil parameter alat peraga, misalnya lebar dan tinggi, dan secara logis melakukannya seperti ini:
<script> export let width = '20px'; export let height = '20px'; </script> <style> .loader { width: { width }, height: { height }, } </style>
Dan ... tidak, dalam gaya Anda tidak dapat memasukkan variabel. Anda bisa keluar dari situasi ini melalui "ReactWay" dan membuat gaya dinamis dalam "skrip" sebagai variabel atau fungsi dengan pengembalian gaya.
Akibatnya, kita kembali memiliki bubur, bagian dari gaya di bagian
gaya dalam
naskah . Kode murni akan diperoleh hanya jika Anda tidak memiliki parameter dalam gaya atau Anda hanya memiliki parameter dinamis dan mereka hanya dalam
skrip .
Routing dan Router
Tanpa router normal, Anda bahkan tidak dapat membuat aplikasi satu halaman.
Bereaksi, Vue ketika scalping proyek 'Hello World' sudah dilengkapi dengan router di dalam kotak (atau Anda dapat memilihnya). Tapi seperti semua yang ada di Svelte, ini tidak mudah.
Anda harus memilih router sendiri, dan bahkan di antara solusi yang sangat mirip. Sebenarnya, hanya ada dua
router github.com/EmilTholin/svelte-routing dan
github.com/kazzkiq/svero sejauh ini.
Keduanya sangat mirip, tetapi saya memilih yang pertama, saya memilihnya dengan jumlah bintang (ya, saya tahu, saya orang yang mengerikan).
Jadi mari kita mulai menanamkannya di MDL kami.
Bungkus semuanya dalam
<Router url = "{url}"> dan tambahkan
<Link /> untuk tautan dari navigasi.
Buka pratinjau dan lihat apa yang terjadi.
Tetapi ternyata penyakit masa kecil Svelte berlanjut dan kelas tidak dapat ditransfer ke <Link />. Sebuah pertanyaan masuk akal muncul dan bagaimana Anda menyesuaikan dgn mode itu?
Ternyata ini masih dalam masalah untuk router.
Untungnya, kita dapat mengikat
href = '' biasa kita ke router dengan menentukan
penggunaan: tautan yang khusus terima kasih.
Kesalahan
Tidak seperti React, yang tidak akan membiarkan Anda membuat bundel dan akan berteriak keras tentang kesalahan, Svelte akan dengan sempurna mengumpulkan semuanya dengan kesalahan. Pada saat yang sama, jika Anda lupa sesuatu, instal npm install atau ekspor, semuanya akan baik-baik saja dan hanya menampilkan layar putih (Kebetulan, ini adalah kasus dalam versi React pertama).
Di Bereaksi dan Vue, Kami biasa melihat kesalahan seperti itu pada tahap build atau lint.
Akibatnya, Anda harus menangkap kesalahan di dua tempat. Dalam keadilan - ini dalam Bereaksi dan Vue, tetapi jauh lebih jarang dan kesalahan yang jelas seperti itu ditangkap pada tahap serat.
Svelte hanya perlu konvensi penamaan
Anda akan sering menghadapi masalah ini - dengan tidak adanya konvensi penamaan.
Misalnya, kembali ke router.
Ada impor seperti itu:
import { Router, link, Link ,Route } from "svelte-routing";
Bagaimana dengan
Tautan dan
tautan ini ? Bahkan dalam proyek sekecil itu seperti milik saya, sudah ada kebingungan dengan kurangnya penamaan konvensi dalam proyek yang digunakan di Svelte.
Tentu saja, itu seharusnya terlihat seperti ini di mata ReactMan:
import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing";
Dalam Svelte ada kesamaan dengan
ref seperti pada reaksi, ini adalah referensi ke elemen dom atau komponen.
Tutorial resmi memberitahu kita untuk melakukannya seperti ini:
<script> let dialog; </script> <dialog bind:this={dialog} class="mdl-dialog» />
Dan jika Anda memiliki 15 variabel dalam komponen?
<script> let loading; let pins; let dialog; let stitch; </script> <dialog bind:this={dialog} class="mdl-dialog» />
Di mana dan apa ini benar-benar variabel, dan di mana tautan ke komponen atau elemen?
Saya akan memodifikasi tutorial dan membuat contoh lebih benar dari sudut pandang pemula dan konvensi variabel mereka (lihat Tutorial Bereaksi untuk contoh yang baik). Jika Anda membiarkan vinaigrette melakukan variabel, alangkah baiknya jika
linter atau
bundler bersumpah pada vinaigrette seperti itu, misalnya, ini dilakukan oleh golang.
<script> let dialogElement; </script> <dialog bind:this={dialogElement} class="mdl-dialog» />
Contoh lain "hidup" ketika Anda menerima beberapa data dalam fungsi komponen dan data ini harus dikirim ke tampilan Anda, di mana beberapa variabel disekrup ke bagian elemen UI. Dan tampilannya bersama kami (atau lebih tepatnya, dengan programmer kami) seperti ini:
async function ReloadPins() { loading = true; pins = await getAllPins(); status = 0; }
Ketika saya membuka kodenya, segera "menjadi jelas" bagi saya bahwa ada variabel yang
menyatakan dan mana yang dilampirkan ke
UI kami.
Hanya bercanda, tentu saja, tidak ada yang jelas. Selain itu, negara bahkan tidak jelas atau hanya variabel tambahan. Dalam Bereaksi, ini diputuskan oleh negara, yang setidaknya entah bagaimana membawa kejelasan.
Apa yang berubah di mana dan siapa yang melakukannya?
Variabel di dalam komponen Svelte bersifat global dan mereka berubah di mana-mana (halo Angular).
Tetapi ada kabar baik, mereka bersifat global dalam satu komponen (sementara Angular), oleh karena itu perubahan ini semua dan pada dasarnya tidak begitu menakutkan di dalam satu komponen.
Pada saat yang sama, Anda menghemat waktu pada "keindahan" kode dan jangan berpikir tentang apa yang Anda perlukan untuk
menyatakan status , tetapi apa yang harus ditinggalkan di dalam fungsi (Hai Bereaksi) - Anda memiliki segalanya dan di mana-mana.
Akibatnya, Anda menulis komponen dengan cepat, tetapi sangat sulit untuk memahami apa yang ditulis oleh junior di "salad" ini beberapa hari kemudian ketika ia sendiri sudah lupa (kadang-kadang bahkan namanya). Karena itu, tidak mungkin untuk memahami apa yang ada di dalamnya tanpa organisasi kode yang jelas dalam proyek atau tim.
Bind Stitch
Stitch adalah hal yang hebat, dan saya pasti akan memberi tahu Anda lebih banyak tentang hal itu, dan membandingkannya dengan teman sebaya, mengukur tes dalam produksi di artikel saya berikutnya, dan sekarang ini lebih lanjut tentang Svelte.
Untuk menggunakan Stitch, Anda harus menyusuri jalur "Vanilla" dan memasukkan:
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script>
Sejak saat menggunakan
npm dan paket
impor normal, masalah dengan kesalahan
buffer dimulai.
Saya tidak tahu apakah ini terhubung dengan kolektor Svelte atau Stitch itu sendiri, atau sesuatu yang lain, tetapi saya tidak punya waktu untuk mengambilnya dan saya hanya perlu menambahkan
skrip dengan impor, setelah itu semuanya bekerja dengan sukses.
Ini adalah masalah utama yang kami temui saat bekerja dengan Svelte. Dan jujur - secara umum, kami tidak menyukainya, dan tidak ada yang ...
Apa hasilnya:
Mengapa Anda membutuhkan Svelte?
- Jika Anda bekerja sendirian dan Anda sangat perlu melakukan MVP atau panel admin kecil. Akan ada masalah dengan panel admin besar, karena ketika Anda menulis kode baru, Anda akan melupakan yang lama atau Anda harus menulis kode yang didokumentasikan sendiri, karena Svelte tidak "memaksa" Anda untuk melakukan ini.
- Jika ukuran bundel sangat penting bagi Anda. Misalnya, Anda membuat aplikasi web untuk negara di mana masih belum ada 3G atau Internet sangat lambat dan sangat mahal. Di sebagian besar dunia, pemrogram mahal, bukan Internet, jadi ukuran bundel dalam batas wajar tidak akan menjadi masalah aktual dalam 99% kasus.
- Jika Anda baru mulai belajar cara menulis dalam JS dan melakukan front-end, Svelte akan memberi Anda semua kebebasan untuk "menembak di kaki", di meja tetangga, atau mengatur penembakan besar-besaran di kaki. Bahkan, Anda tidak perlu mempelajari JSX atau memahami konvensi kode untuk waktu yang lama, Anda dapat segera melakukan proyek front-end pertama Anda dan melihat bahwa Anda telah berhasil dan sesuatu bahkan bekerja.
Berdasarkan yang terakhir, saya benar-benar tidak mengerti mengapa pengelola Svelte akan membuat dukungan TypeScript? Kami menyukai Svelte hanya untuk "menembak kaki" dan TypeScript menurut saya seperti trek semua medan untuk mobil sport Svelte. Dan Anda tahu, setelah bekerja dengan Svelte, saya menyadari betapa JS telah berubah dalam beberapa tahun terakhir, dan itu bukan JS lagi.
Svelte memberikan kesempatan untuk bekerja di JS tua dan lampu yang sama, tanpa PropTypes, Flow, dan TypeScript.
Apa yang saya suka?
- Dapat dibaca jika / selain itu, yang tidak dalam Vue. Saya benar-benar ingin melihat sesuatu yang serupa di Vue.
- Anda dapat membuat acara Anda dalam komponen dan menyingkirkan melewati panggilan balik ke fungsi pada anak, untuk komunikasi antara anak> orang tua.
Mengapa tidak menggunakan Svelte?
- Tidak ada satu pun Kit UI yang berfungsi penuh. Sulit membayangkan aplikasi web tanpa UIKit, hanya proyek besar yang tidak cocok untuk Svelte yang dapat menulis Kit UI sendiri. Meniduri sesuatu vanilla masuk ke pembuatan komponen UI mereka sendiri (Kit UI mereka) atau dalam perang melawan kesalahan dan kelas "lokomotif".
- Sifat implisit dari beberapa kesalahan sederhana, dan penangkapannya hanya pada tahap pengujian.
- Jika Anda akan membuat aplikasi multi-platform (dan sekarang di mana-mana adalah ponsel pertama), Anda harus menulis ulang semuanya untuk ReactNative atau menyelesaikan NativeScript yang dihasilkan dengan tangan Anda (ada generator NS dari Svelte). Dalam keadilan, Vue dengan pengembangan ponsel juga tidak berjalan dengan baik, tetapi juga memiliki beberapa fitur yang berfungsi.
- Anda harus mengurus penulisan konvensi kode yang sangat jelas untuk pengembang Anda dalam proyek ini, karena tutorial dan contoh tidak dibuat untuk pengembangan tim.