Apa itu Framework Svelte dan Bagaimana Anda Menggunakannya?
Table of content:
Langsing adalah salah satu kerangka kerja JavaScript terpanas. Dalam Survei Pengembang StackOverflow 2022, ini muncul sebagai kerangka JavaScript paling disukai kedua di antara pengembang web. Dalam panduan ini, Anda akan mempelajari dasar-dasar dan cara membuat aplikasi tugas sederhana menggunakan Svelte.
Memulai Dengan Langsing
Anda akan mengatur semuanya dengan alat build Vite. Buka terminal dan jalankan perintah di bawah ini secara berurutan. Beri nama proyek “svelte-app” (atau pilihan Anda), pilih Svelte sebagai kerangka kerja, dan tetapkan JavaScript sebagai varian.
yarn create vite
cd svelte-app
yarn
yarn dev Buka proyek di editor kode, hapus lib folder, dan menghapus isi dari aplikasi.css berkas dan App.svelte mengajukan.
Baca Juga:
Bagaimana Svelte Dibandingkan dengan Bereaksi
DOM adalah struktur mirip pohon yang dihasilkan dari HTML situs, yang menunjukkan hubungan antara berbagai elemen yang membentuk laman.
Tidak seperti React yang menggunakan DOM virtual, Svelte adalah kompiler yang memahami pada waktu pembuatan, bagaimana hal-hal dalam aplikasi Anda dapat berubah. Karena Svelte bekerja pada waktu pembuatan, Svelte menghasilkan JavaScript vanilla yang berperforma tinggi dan dioptimalkan.
Reaktivitas dan Animasi di Svelte
Struktur sebagian besar aplikasi Svelte diilustrasikan di bawah ini. Anda dapat memilih untuk tidak menyertakan gaya tag hanya menyisakan naskah dan markup:
<script>
</script><!-- Markup -->
<style>
</style>
Di Svelte, reaktivitas didasarkan pada penugasan. Lihatlah kode berikut:
<script>
let count = 0;
const handleClick = () => {
count += 2;
}
</script><main>
You have clicked:
<button on:click={handleClick}>
{count} {count === 1 ? 'time' : 'times'}
</button>
</main>
Itu naskah tag mendefinisikan menghitung variabel dan handleClick fungsi yang meningkat menghitung oleh 2. The utama elemen memiliki tombol dengan pada: klik direktif untuk menjalankan handleClick fungsi. Itu tombol update kapan menghitung perubahan.
Svelte memudahkan menganimasikan elemen. Katakanlah Anda memiliki gambar yang lebarnya dapat disesuaikan dengan menekan sebuah tombol, modul svelte/motion’s tween utilitas dapat digunakan untuk mencapai efek ini.
<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
let src="https://images.pexels.com/photos/718752/pexels-photo-718752.jpeg";
let size=tweened(30, {
duration: 900,
easing: cubicOut
})
</script><button on:click={()=>size.set($size+30)}>
Increase Photo Size
</button>
<button on:click={()=>size.set($size-30)}>
Decrease Photo Size
</button>
<br />
<img src={src} width={$size} />
Kode ini menggunakan tween untuk komponen komunikasi dan animasi dan a kubik easing untuk membuat animasi yang halus. ukuran.set(…) mengembalikan janji yang diselesaikan setelah tween selesai.
Membangun Aplikasi Agenda Sederhana Dengan Svelte
Mari tambahkan fungsionalitas untuk memvalidasi item sebelum ditambahkan ke daftar tugas, menghapus item, memperingatkan pengguna jika input tidak valid, dan menyimpan daftar tugas di penyimpanan lokal.
Buat sebuah src/components/Item.svelte berkas dan di App.svelte file, tentukan elemen
<script>
import Item from "./components/Item.svelte";
</script>
Tentukan array yang disebut todo dan empat variabel yaitu: alertMessage, pesan eror, duplikatPesan, Dan successMessage.
import Item from "./components/Item.svelte";
let todo = [];
let errorMessage = "Item cannot be empty!";
let duplicateMessage = "Item already added!";
let successMessage = "Item has been added and list updated!";
let alertMessage;
Di bagian markup, di bawah skrip, buat elemen utama sebagai titik masuk. Di dalamnya, buat a div dengan kelas "aplikasi". Di dalam ini, buat div lain dengan an h6 elemen dengan kelas "peringatan tersembunyi". Elemen ini menampilkan pesan sukses berdasarkan alertMessage variabel.
<main>
<div class="app">
<h6 class="alert hidden">{alertMessage}</h6>
</div>
</main> Buat sebuah h1 menuju "Svelte To-Do List", lalu tambahkan a membentuk elemen dengan masukan jenis "text", Ini harus memiliki placeholder dan panjang maksimal 32 karakter, dan tombol kirim dengan pada: kirim direktif pada formulir untuk memicu fungsi addTododengan nilai masukan sebagai parameter.
<form on:submit|preventDefault={() =>
addTodo(document.querySelector("input").value)}>
<div>
<input type="text" placeholder="Enter Something" maxlength="39" />
<button type="submit">Add</button>
</div>
</form>
Buat "todo-container" div di dalam "aplikasi" div. Render "todo" div jika melakukan array tidak kosong, jika tidak render a div dengan teks "[Empty]".
Ulangi larik todo di div "todo", render an Barang komponen yang menerima props: "item", "done", "removeTodoHandler" dan "updateTodoHandler".
<div class="todo-container">
{#if todo.length}
<div class="todo">
{#each todo as { item, done } (item)}
<Item
{item}
{done}
removeTodoHandler={removeTodo}
updateTodoHandler={updateTodo}
/>
{/each}
</div>
{:else}
<div>[Empty]</div>
{/if}
</div>
</div>
Sebelum melanjutkan untuk menentukan logika aplikasi, mari kita atur gaya cakupan untuk pesan peringatan. Untuk melakukan itu, tentukan a gaya elemen di bawah markup dan tambahkan berikut ini:
:global(.alert) {
padding: 10px;
color: white;
position: absolute;
left: 50%;
top: -25px;
transform: translateX(-50%);
width: max-content;
}
:global(.error) {
background-color: rgba(255, 0, 0, 0.6);
}
:global(.success) {
background-color: rgba(0, 128, 0, 0.6);
}
:global(.hidden) {
display: none;
}
Kode menentukan gaya untuk kotak peringatan berdasarkan jenis peringatan menggunakan :global() pengubah. Dalam naskah tag, ada lima fungsi: mengesahkan(), peringatan tampilan(), addTodo(), hapusTodo()Dan updateTodo().
Setiap fungsi, kecuali displayAlert, mengambil parameter item. Fungsi validasi memeriksa string kosong atau item duplikat dalam daftar tugas yang ada (disimpan dalam larik allItems).
function validate(item) {
let allItems = todo.map((x) => x.item);
if (item.length === 0) {
return "error";
} else if (allItems.includes(item.trimEnd().trimStart())) {
return "duplicate";
} else {
return "success";
}
}
Itu peringatan tampilan() fungsi menampilkan pesan peringatan dengan jenis (kesalahan, duplikat, atau sukses). Ini mengatur pesan dan gaya yang sesuai berdasarkan jenis dan menyembunyikan peringatan setelah 2 detik.
function displayAlert(type) {
let alert = document.querySelector(".alert");
alert.classList.remove("hidden");
if (type === "error") {
alertMessage = errorMessage;
alert.classList.add("error");
} else if (type === "duplicate") {
alert.classList.add("error");
alertMessage = duplicateMessage;
} else {
alert.classList.add("success");
alertMessage = successMessage;
}
setTimeout(() => {
alert.className = "alert hidden";
}, 2000);
}
Itu updateTodo() menambahkan item baru ke melakukan larik setelah validasi. Jika item valid, ditambahkan ke array todo, kolom input dihapus, dan peringatan sukses ditampilkan.
function addTodo(item) {
let response = validate(item);
if (response === "error") {
displayAlert("error");
} else if (response === "duplicate") {
displayAlert("duplicate");
} else {
todo = [{ item: item.trimEnd().trimStart(), done: false }, ...todo];
console.log(todo);
localStorage.setItem("todo", JSON.stringify(todo));
document.querySelector("input").value = "";
displayAlert("success");
}
}
Itu updateTodo() matikan status "selesai" dari melakukan array sementara hapusTodo() fungsi menghapus item tertentu dari melakukan Himpunan.
function updateTodo(item) {
let target = todo.findIndex((x) => x.item === item);
todo[target].done = !todo[target].done;
}
function removeTodo(item) {
todo = todo.filter((x) => x.item !== item);
}
Sekarang, pergilah ke Barang.langsing file dan tentukan a naskah elemen yang mengekspor barang, hapusTodoHandler, Selesai, Dan updateTodoHandler menopang. Tentukan variabel yang disebut melayang yang menyimpan nilai boolean, false.
<script>
export let item;
export let removeTodoHandler;
export let done;
export let updateTodoHandler;
let hover = false;
</script>
Di bagian markup, a div didefinisikan dengan kelas yang diatur secara dinamis berdasarkan nilai variabel "selesai". Jika "selesai" benar, kelas "pemogokan" ditambahkan, yang menerapkan dekorasi teks baris-melalui CSS untuk menunjukkan penyelesaian. Dua arahan komponen, "on:mouseenter" dan "on:mouseleave," disertakan untuk mengaktifkan melayang negara.
<div class="item {done ? 'strike' : ''}"
on:mouseenter={() => (hover = true)}
on:mouseleave={() => (hover = false)}></div>
Div induk terdiri dari dua elemen: div (yang menampilkan kotak centang dan item todo), dan tombol yang dirender secara kondisional saat status melayang BENAR. Kotak centang ditautkan ke variabel "selesai" dan memicu fungsi "updateTodoHandler" saat diubah.
<div>
<input
class="done"
type="checkbox"
bind:checked={done}
on:change={() => updateTodoHandler(item)}/>
<span>{item}</span>
</div> {#if hover}
<button class="delete" on:click={() => removeTodoHandler(item)}
>Remove
</button>
{/if}
</div>
Dan itu saja! Anda telah berhasil membuat aplikasi to-do list yang fungsional.
Aplikasi todo membuat, menghapus, dan menandai item sebagai selesai, tetapi semua data itu hilang saat halaman disegarkan.
Mari kita perbaiki dengan menambahkan penyimpanan. Untuk menyimpan data saat penyegaran halaman, ubah larik todo sebagai berikut:
let todo=JSON.parse(localStorage.getItem("todo")) || [];
Kode mengambil dan mem-parsing kunci "todo" dari penyimpanan lokal browser. Jika nilainya tidak benar, defaultnya adalah array kosong.
Selanjutnya, tambahkan baris berikut ke addTodo(), updateTodo(), Dan hapusTodo() fungsi.
localStorage.setItem("todo", JSON.stringify(todo));
Ini menyimpan melakukan array di penyimpanan lokal, memastikan kegigihan data.
Pertahankan Segalanya Sederhana Dengan Langsing
Pengembang menyukai Svelte karena lebih mudah untuk menulis, terutama jika Anda seorang pemula di bidang pengembangan web.
Svelte adalah alternatif yang luar biasa untuk React, tetapi bagi mereka yang menginginkan lebih, seperti halnya Pengembang React memiliki NextJS (kerangka kerja yang dibangun di atas React), pengembang Svelte memiliki SvelteKit yang mirip dengan NextJS.
Artikel Terkait
