Lebih Ringan dan Lebih Cepat - Panduan untuk Kerangka Langsing

Aplikasi web menjadi lebih populer dari hari ke hari. Mereka adalah dunia yang berkembang yang dipilih orang karena kesederhanaan, kecepatan, dan ketersediaan lintas platformnya. Aplikasi Halaman Tunggal (SPA) telah mengambil bagian besar dalam proses ini. Kerangka kerja seperti Angular, Vue.js, dan React membantu pengembang untuk memberikan pengalaman pengguna terbaik dalam waktu singkat sehingga kode dapat didukung dan diperpanjang. Alat-alat ini telah lama tetap paling populer di lapangan, dengan banyak keunggulan dibandingkan paket yang baru dibuat. Rasanya seperti oligopoli di dunia SPA. Namun, sekelompok pengembang berwawasan ke depan yang menargetkan pasar ini dapat masuk dengan pesaing serius—Svelte.

Svelte adalah pendekatan baru untuk membangun antarmuka pengguna. Mari selami dan jelajahi apa yang membuatnya begitu segar dengan membuat formulir masuk umum.

Arsitektur

Svelte dirancang untuk menjadi lebih cepat daripada perpustakaan lainnya. Itu dicapai dengan menggeser langkah memuat kerangka kerja untuk membangun DOM virtual. Alih-alih menggunakan alat selama proses berjalan, alat ini dikompilasi ke Vanilla JS pada tahap pembuatan sehingga aplikasi tidak memerlukan ketergantungan untuk memulai.

Tabel di atas menjelaskan mengapa Svelte adalah pemenang mutlak dalam kinerja startup. Itu tidak diperoleh dengan pengoptimalan apa pun tetapi dengan menggunakan kompiler JavaScript browser yang tersedia alih-alih kompiler samping.

Instalasi

Instalasi langsing sangat mudah, membuat penggunaannya sangat menyenangkan. Langkah pertama adalah mengunduh template proyek:

 npx degit sveltejs/template svelte-login-form

Menyelesaikan perintah di atas berarti kita memiliki template proyek Svelte. Kosong untuk saat ini dan paket NPM yang diperlukan belum diinstal. Mari kita perbaiki itu.

 cd svelte-login-form npm install

Sekarang aplikasi siap untuk memulai dengan menggunakan perintah berikut:

 npm run dev

Struktur

Setiap komponen Svelte dapat berisi bagian berikut:

• Naskah
• Gaya
• Templat

Mari kita lihat contohnya pada file src/App.svelte .

 <script> export let name; </script> <style> h1 { color: purple; } </style> <h1>{name}</h1>

Kode di atas berisi tepat tiga bagian:

1. tag script , yang merupakan blok JavaScript opsional dengan variabel dan deklarasi fungsi yang harus digunakan di dalam komponen.

2. tag style , yang merupakan blok opsional lainnya. Ini seperti tag gaya HTML biasa kecuali satu perbedaan penting. Aturan yang dijelaskan di dalam blok ini hanya mencakup komponen ini. Menerapkan gaya ke elemen p tidak akan memengaruhi semua paragraf di halaman. Ini luar biasa karena Anda tidak harus membuat nama kelas dan Anda tidak akan pernah secara tidak sengaja menimpa aturan lain.

3. Blok terakhir dan satu-satunya yang diperlukan adalah blok template - dalam hal ini, tag h1 . Ini adalah presentasi/tampilan komponen Anda. Ini terikat erat dengan blok gaya dan skrip saat menentukan bagaimana tampilan akan ditata dan bagaimana perilakunya.

Svelte adalah perpustakaan yang mencoba menghadirkan modularitas ke dalam game front-end. Itu menjaga modularitas itu tidak hanya dalam memisahkan komponen yang berbeda tetapi juga dalam mengisolasi logika, tampilan, dan template.

Kembali ke form login yang sedang kita buat, mari buat file baru LoginForm.svelte di dalam folder src dengan konten berikut:

 <style> form { background: #fff; padding: 50px; width: 250px; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0px 20px 14px 8px rgba(0, 0, 0, 0.58); } label { margin: 10px 0; align-self: flex-start; font-weight: 500; } input { border: none; border-bottom: 1px solid #ccc; margin-bottom: 20px; transition: all 300ms ease-in-out; width: 100%; } input:focus { outline: 0; border-bottom: 1px solid #666; } button { margin-top: 20px; background: black; color: white; padding: 10px 0; width: 200px; border-radius: 25px; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: all 300ms ease-in-out; } button:hover { transform: translateY(-2.5px); box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.58); } h1 { margin: 10px 20px 30px 20px; font-size: 40px; } </style> <form> <h1></h1> <label>Email</label> <input name="email" placeholder="[email protected]" /> <label>Password</label> <input name="password" type="password" placeholder="password" /> <button type="submit">Log in </button> </form>

Ini adalah komponen bergaya bodoh yang akan kita buat lebih pintar nanti. Untuk melihat komponen ini di situs kita, kita harus merendernya di dalam komponen root - App. Mari kita pergi dan mengedit src/App.svelte sehingga akan terlihat seperti ini:

 <script> import LoginForm from "./LoginForm.svelte"; </script> <style> section { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, #cd76e2, #e358ab); } </style> <section> <LoginForm /> </section>

Jika semuanya telah dilakukan dengan benar dan aplikasi masih berjalan, formulir kami akan muncul di localhost:5000 . Mari tingkatkan keterampilan Svelte kita dengan membuat formulir lebih cerdas.

Menjadi Stateful

Komponen apa pun di Svelte dapat memiliki statusnya. State adalah variabel khusus atau sekelompok variabel khusus yang dapat digunakan di dalam template. Kenapa saya bilang “istimewa”? Setiap kali variabel seperti itu diubah, templat diberi tahu tentangnya dan membuat konten dengan status terbaru. Ini memungkinkan aplikasi untuk bereaksi terhadap interaksi pengguna dengan sangat cepat.

Kami akan mendeklarasikan variabel status email dan password tempat nilai formulir untuk bidang yang sesuai akan disimpan. Artinya, variabel email dan password kami akan selalu sinkron dengan nilai formulir, jadi kami akan siap mengirimkan nilai ini kapan saja tanpa takut ada perbedaan antara nilai pengiriman dan nilai sebenarnya di formulir.

 <script> let email = ""; let password = ""; let isLoading = false; const handleSubmit = () => { isLoading = true; // Simulate network request setTimeout(() => { isLoading = false; // Authorize the user }, 1000); }; </script> <style> /* Style is unchanged */ </style> <form on:submit|preventDefault={handleSubmit}> <h1></h1> <label>Email</label> <input name="email" placeholder="[email protected]" bind:value={email} /> <label>Password</label> <input name="password" type="password" bind:value={password} /> {#if isLoading}Logging in...{:else}Log in {/if} </form>

Variabel status terlihat seperti variabel JavaScript umum tetapi untuk membuatnya disinkronkan dengan nilai formulir (mengikatnya ke bidang formulir), perlu menggunakan arahan bind:value . Ada juga beberapa hal yang tidak biasa:

• on:submit|preventDefault adalah singkatan untuk mencegah perilaku peristiwa default. Cara ini lebih nyaman daripada harus menulis e.preventDefault() setiap saat.

• {#if isLoading}Logging in...{:else}Log in {/if} adalah bagian dari sintaks template Svelte. Karena tidak ada JS di blok template, ada sintaks khusus untuk menggunakan ifs, loop, dll.

Terakhir, mari gunakan opsi yang tersedia dengan menggunakan status untuk menambahkan validasi ke formulir kita. Ini dapat dicapai dengan membuat errors variabel status lain, yang akan diisi dengan kesalahan saat formulir dikirimkan dengan nilai yang tidak valid.

 <script> let email = ""; let password = ""; let isLoading = false; let errors = {}; const handleSubmit = () => { errors = {}; if (email.length === 0) { errors.email = "Field should not be empty"; } if (password.length === 0) { errors.password = "Field should not be empty"; } if (Object.keys(errors).length === 0) { isLoading = true; // Simulate network request setTimeout(() => { isLoading = false; // Authorize the user }, 1000); } }; </script> <style> // Previous styles unchanged .errors { list-style-type: none; padding: 10px; margin: 0; border: 2px solid #be6283; color: #be6283; background: rgba(190, 98, 131, 0.3); } </style> <form on:submit|preventDefault={handleSubmit}> <h1></h1> <label>Email</label> <input name="email" placeholder="[email protected]" bind:value={email} /> <label>Password</label> <input name="password" type="password" bind:value={password} /> <button type="submit"> {#if isLoading}Logging in...{:else}Log in {/if} </button> {#if Object.keys(errors).length > 0} <ul class="errors"> {#each Object.keys(errors) as field} <li>{field}: {errors[field]}</li> {/each} </ul> {/if} </form> 

Formulir hampir selesai. Satu-satunya yang tersisa adalah pesan sukses setelah otentikasi berhasil.

Mari buat variabel status untuk melacak pengiriman yang berhasil yang false secara default. Setelah pengiriman formulir berhasil, nilai variabel ini harus disetel ke true .

 let isSuccess = false;

Fungsi yang menangani pengiriman formulir juga harus diubah mengikuti logika toggling isSuccess setelah operasi berhasil.

 const handleSubmit = () => { errors = {}; if (email.length === 0) { errors.email = "Field should not be empty"; } if (password.length === 0) { errors.password = "Field should not be empty"; } if (Object.keys(errors).length === 0) { isLoading = true; // Simulate network request setTimeout(() => { isLoading = false; isSuccess = true; // Authorize the user }, 1000); } };

Modifikasi ini membuat formulir masuk ke status sukses segera setelah pengiriman selesai.

Tetapi jika Anda memeriksa server pengembangan Anda, Anda tidak akan menemukan perubahan apa pun dalam perilaku formulir. Kami mengubah kode tetapi belum menyentuh template. Kita perlu menambahkan instruksi ke template untuk menampilkan pesan sukses ketika pengguna berhasil login. Sintaks template Svelte memungkinkan kita untuk mengimplementasikannya dengan mudah:

 <form on:submit|preventDefault={handleSubmit}> {#if isSuccess} <div class="success"> <br /> You've been successfully logged in. </div> {:else} <h1></h1> <label>Email</label> <input name="email" placeholder="[email protected]" bind:value={email} /> <label>Password</label> <input name="password" type="password" bind:value={password} /> <button type="submit"> {#if isLoading}Logging in...{:else}Log in {/if} </button> {#if Object.keys(errors).length > 0} <ul class="errors"> {#each Object.keys(errors) as field} <li>{field}: {errors[field]}</li> {/each} </ul> {/if} {/if} </form>

Abstrak dengan Properti

Kami telah memilah segala sesuatu tentang keadaan komponen internal. Sekarang saatnya untuk melewati dependensi eksternal yang disebut properti, atau "alat peraga". Alat peraga adalah masukan atau argumen yang diteruskan ke komponen untuk menjelaskan kepada komponen apa yang harus muncul atau bagaimana komponen harus berperilaku.

Deklarasi properti terlihat mirip dengan negara bagian, kecuali untuk kata kunci export .

 <script> export let answer; </script> <p>The answer is {answer}</p>

 <script> import Nested from './Nested.svelte'; </script> <Nested answer={42}/>

Ini semua tentang properti. Deklarasikan dan berikan - semua yang perlu Anda ketahui untuk menggunakan alat peraga.

Tetapi bagaimana properti ini berlaku untuk komponen formulir masuk? Alat peraga dapat membuat formulir masuk kami lebih umum dengan mengekstraksi fungsi pengiriman ke dalam properti. Ini akan memungkinkan Anda untuk menggunakan komponen ini dengan tindakan pengiriman apa pun yang Anda perlukan (permintaan ke server pengujian, permintaan ke server aktual, dll.). Prop ini akan disebut submit dan akan menjadi fungsi yang mengembalikan janji yang diselesaikan jika tindakan pengiriman telah berhasil dan janji yang ditolak jika ada kesalahan. Mari kita nyatakan prop dengan contoh yang diberikan di atas:

 export let submit;

Handler pengiriman di dalam formulir masuk juga harus diedit untuk menggunakan properti submit yang baru.

 const handleSubmit = () => { errors = {}; if (email.length === 0) { errors.email = "Field should not be empty"; } if (password.length === 0) { errors.password = "Field should not be empty"; } if (Object.keys(errors).length === 0) { isLoading = true; submit({ email, password }) .then(() => { isSuccess = true; isLoading = false; }) .catch(err => { errors.server = err; isLoading = false; }); } };

Komponen tampaknya sudah siap. Namun, jika Anda kembali ke formulir dan mencoba mengirimkannya, Anda akan melihat bahwa status tombol tidak berubah sejak memuat. Juga, ada pengecualian di konsol: Uncaught TypeError: submit is not a function . Tentu saja, kami mendeklarasikan prop tetapi lupa untuk menyebarkannya. Mari kita mendeklarasikan fungsi dalam komponen aplikasi dan meneruskannya ke formulir masuk.

 const submit = ({ email, password }) => new Promise((resolve, reject) => setTimeout(resolve, 1000));

 <section> <LoginForm submit={submit} /> </section>

Sekarang formulir berfungsi sebagaimana dimaksud. Itu bisa menunjukkan kesalahan dan memberi tahu pengguna jika login telah berhasil.

Berbagi Konteks

Tampaknya semua yang diperlukan untuk membangun aplikasi terdaftar. Dengan properti dan keadaan batin, kami siap untuk pergi. Itu hanya sebagian benar, meskipun. Dua poin umum ini memungkinkan untuk merancang SPA dengan kompleksitas tinggi. Namun, jika Anda mencoba berbagi data di antara banyak komponen yang berbeda, Anda akan merasa sangat sulit.

Contoh paling sederhana adalah memiliki variabel user yang dapat diakses secara global. Banyak komponen harus mengubah perilakunya terkait dengan pengguna, tergantung pada peran pengguna, usia, status, dll. Namun, bukanlah KERING untuk mengulangi diri kita sendiri dengan meneruskan pengguna ke setiap komponen dalam aplikasi menggunakan alat peraga.

Svelte memiliki solusi untuk ini: API konteks.

API konteks menyediakan mekanisme bagi komponen untuk 'berbicara' satu sama lain tanpa menyebarkan data dan berfungsi sebagai alat peraga atau mengirimkan banyak peristiwa. Ini adalah fitur canggih tetapi berguna.

Mari tambahkan konteks pengguna ke formulir masuk yang sedang kita rancang. Buat file userContext.js di dalam folder src dengan konten berikut:

 export const key = "userContext"; export const initialValue = null;

key adalah pengidentifikasi unik untuk konteks karena aplikasi mungkin memiliki jumlah konteks berbeda yang tidak terbatas yang harus tetap dapat diakses. initialValue hanyalah nilai default untuk konteks sebelum disetel.

Langkah selanjutnya adalah menambahkan konteks ke aplikasi kita. Arahkan ke file App.svelte dan tambahkan 2 pernyataan impor:

 import { onMount, setContext } from "svelte"; import { key as userContextKey, initialValue as userContextInitialValue } from "./userContext";

Melihat kode di atas, Anda mungkin bertanya-tanya apa yang kami impor dari paket svelte . onMount adalah fungsi pembantu yang membutuhkan fungsi panggilan balik sebagai argumen. Panggilan balik ini akan dijalankan ketika komponen saat ini sedang dipasang (di awal pemuatan komponen). setContext adalah fungsi setter untuk konteks. Ini membutuhkan kunci konteks dan nilai baru sebagai argumennya.

Mari kita gunakan fungsi onMount untuk menetapkan nilai default untuk konteksnya:

 onMount(() => { setContext(userContextKey, userContextInitialValue); });

Dan ubah fungsi submit untuk mengatur konteks pengguna:

 const submit = ({ email, password }) => new Promise((resolve, reject) => { setTimeout(() => { setContext(userContextKey, { name: "Foo", lastName: "Bar", email: "[email protected]" }); resolve(); }, 1000); });

Itu dia. Pengiriman yang berhasil akan mengubah konteks pengguna menjadi objek pengguna palsu yang dapat diakses oleh pengambil konteks getContext :

 <script> import { getContext } from 'svelte'; import { key as userContextKey } from "./userContext"; const user = getContext(key); </script>

Ringkasan

Svelte adalah alat canggih yang mampu berkinerja tinggi dan dengan API yang fleksibel. Selain dasar-dasar yang tercakup dalam posting ini, Svelte memiliki fitur-fitur berikut di luar kotak:

• Deklarasi dan pernyataan reaktif
• Tunggu blok template
• Pengikatan dimensi
• Toko global seperti Redux
• Pembantu animasi dan transisi
• Pembantu debug

Singkatnya, Svelte adalah perpustakaan hebat yang memenuhi semua kebutuhan untuk membangun SPA, dan banyak lagi. Itu dapat bersaing dengan pemain terbesar di pasar, dan bahkan menang. Apa yang bisa digunakan sekarang, adalah dukungan di komunitas pengembang front-end.

Catatan: Semua kode dalam artikel ini dapat ditemukan di repositori GitHub teimurjan/svelte-login-form . Demo untuk formulir masuk tersedia di sini.