🔥Mengapa SvelteJS adalah Masa Depan Pengembangan Frontend

SVELTE JS

Apa itu SvelteJS dan mengapa perlu dipelajari?

SvelteJS adalah kerangka aplikasi web berbasis JavaScript yang berfokus pada pembuatan aplikasi web yang cepat dan efisien dengan mengompilasi kode aplikasi selama proses pembuatan, bukan saat runtime. Pendekatan ini memungkinkan Svelte membuat aplikasi yang lebih kecil dan lebih cepat serta lebih mudah dipelihara dan diperbarui.

Svelte juga menyediakan sintaksis yang sederhana dan intuitif untuk membuat antarmuka pengguna reaktif, sehingga memudahkan pembuatan aplikasi web yang dinamis dan responsif tanpa memerlukan perpustakaan manajemen keadaan yang rumit.

Pendekatan unik Svelte dalam membangun aplikasi web dengan cepat mendapatkan popularitas di kalangan pengembang, dan telah diadopsi oleh banyak perusahaan terkenal seperti The New York Times, IBM, dan Netflix.

Ada beberapa alasan mengapa mempelajari Svelte layak dilakukan ☞

  1. Ukuran bundel yang lebih kecil: Kompiler Svelte menghasilkan kode yang sangat optimal sehingga menghasilkan ukuran bundel yang lebih kecil, membuat aplikasi web lebih cepat dimuat dan lebih mudah dipelihara.
  2. Sintaks sederhana: Sintaks Svelte mudah dipahami dan dipelajari, menjadikannya pilihan ideal bagi pengembang yang baru dalam membangun aplikasi web.
  3. Kinerja: SvelteJS dirancang untuk menjadi sangat cepat dan efisien, dengan ukuran kecil yang menjadikannya ideal untuk membangun aplikasi berkinerja tinggi. Dengan mengompilasi kode pada waktu pembuatan, Svelte dapat menghasilkan kode yang dioptimalkan dan lebih cepat dibandingkan kerangka kerja tradisional seperti React dan Angular.
  4. Fitur yang kaya: SvelteJS hadir dengan serangkaian fitur bawaan yang kaya, termasuk komponenisasi, rendering bersyarat, animasi, dan banyak lagi. Hal ini memungkinkan pengembang untuk membangun UI yang kaya dan interaktif dengan cepat dan mudah.
  5. Kemampuan beradaptasi: SvelteJS dapat digunakan untuk berbagai proyek pengembangan web, mulai dari aplikasi satu halaman kecil hingga aplikasi perusahaan berskala besar. Kemampuan beradaptasi ini menjadikannya pilihan ideal untuk berbagai jenis proyek.
  6. Ramah SEO: SvelteJS menawarkan rendering sisi server dan hidrasi otomatis, yang dapat membantu meningkatkan SEO situs web. Ini berarti mesin pencari dapat dengan mudah merayapi dan mengindeks konten di situs web SvelteJS, sehingga meningkatkan visibilitasnya dalam hasil pencarian.
  7. Komunitas yang berkembang: SvelteJS memiliki komunitas pengembang yang terus berkembang yang secara aktif berkontribusi terhadap pengembangannya dan menciptakan alat dan perpustakaan baru. Ini berarti pengembang dapat menemukan dukungan dan sumber daya untuk membantu mereka mempelajari dan menggunakan SvelteJS secara efektif.

Secara keseluruhan, SvelteJS adalah kerangka kerja yang kuat dan efisien yang patut dipelajari bagi pengembang yang ingin membangun aplikasi web yang cepat dan efisien dengan sintaks sederhana dan kode minimal.

Memulai dengan SvelteJS

  1. Menginstal Svelte.js menggunakan npm

Untuk menginstal Svelte.js menggunakan npm, Anda dapat menggunakan perintah berikut:

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

2. Menggunakan templat awal:

Cara lain untuk memulai Svelte.js adalah dengan menggunakan templat starter yang mencakup semua yang Anda perlukan untuk membangun aplikasi Svelte.js. Salah satu template starter yang populer adalah template resmi Svelte, yang dapat diinstal menggunakan perintah berikut

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
npm run dev

Perintah ini akan membuat direktori baru bernama my-svelte-app dan menyalin template starter ke dalamnya. Anda kemudian dapat menavigasi ke direktori dan mulai membangun aplikasi Svelte.js Anda.

Ini hanyalah beberapa contoh cara menginstal Svelte.js. Tergantung pada pengaturan dan preferensi proyek Anda, Anda mungkin perlu menyesuaikan proses instalasi.

Juga terdapat plugin untuk semua web bundler utama untuk menangani kompilasi Svelte.

Anda dapat memperoleh informasi lebih lanjut https://svelte.dev/docs#getting-started

Dasar-dasar SvelteJS

Memahami struktur file Svelte.js

Anda dapat memperoleh informasi lebih lanjut tentang struktur proyek: https://kit.svelte.dev/docs/project-structure

Memahami komponen Svelte:

Di Svelte.js, komponen adalah blok penyusun aplikasi Anda. Mereka dapat dianggap sebagai potongan kode yang dapat digunakan kembali yang merangkum fungsionalitas dan dapat disusun bersama untuk membuat aplikasi yang lebih kompleks.

2. Bekerja dengan sistem reaktif Svelte:

Svelte.js menggunakan sistem reaktif untuk memperbarui UI secara otomatis ketika data berubah. Hal ini memungkinkan Anda membuat aplikasi yang dinamis dan responsif tanpa harus menulis kode manajemen status yang rumit.

<!-- Counter.svelte -->
<script>
 // Define a Svelte component
 let count = 0;

 function increment() {
  count += 1;
 }

 function decrement() {
  count -= 1;
 }
</script>

<!-- Define the HTML template for the component -->
<div class="counter">
 <button on:click={decrement}>-</button>
 <span>{count}</span>
 <button on:click={increment}>+</button>
</div>

<style>
 /* Define some styles for the component */
 .counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
 }

 button {
  margin: 0 10px;
 }
</style>

3. Menggunakan sintaksis Svelte:

Svelte.js memiliki sintaksnya sendiri yang digunakan untuk mendefinisikan komponen, mengikat data, dan membuat elemen UI dinamis. Memahami cara menggunakan sintaks Svelte sangat penting ketika bekerja dengan kerangka kerja.

<!-- TodoList.svelte -->
<script>
 // Define a Svelte component
 let todos = [
  { id: 1, text: 'Learn Svelte.js', completed: false },
  { id: 2, text: 'Build a Svelte app', completed: false },
  { id: 3, text: 'Deploy Svelte app to production', completed: false }
 ];

 function toggleCompletion(todo) {
  todos = todos.map((t) => {
   if (t.id === todo.id) {
    return {
     ...t,
     completed: !t.completed
    };
   } else {
    return t;
   }
  });
 }
</script>

<!-- Define the HTML template for the component -->
<div>
 <h1>My Todo List</h1>

 <ul>
  {#each todos as todo}
   <li class:selected={todo.completed} on:click={() => toggleCompletion(todo)}>
    {todo.text}
   </li>
  {/each}
 </ul>

 <p>{todos.filter((todo) => !todo.completed).length} items left to do</p>
</div>

<style>
 li {
  font-size: 18px;
  line-height: 1.5;
  padding: 8px;
  margin: 8px 0;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
 }

 li.selected {
  background-color: #d9d9d9;
  text-decoration: line-through;
 }

 li:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
</style>

4. Render bersyarat di Svelte:

<script>
  let loggedIn = true;
</script>

{#if loggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please log in.</p>
{/if}

5. Mengelola status dengan Svelte:

Di Svelte.js, Anda dapat mengelola status aplikasi menggunakan penyimpanan lokal atau global. Penyimpanan lokal digunakan untuk mengelola status dalam suatu komponen, sedangkan penyimpanan global dapat digunakan untuk berbagi status antar komponen.

<!-- App.svelte -->
<script>
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import TodoList from '$lib//TodoList.svelte';

 const initialTodos = [
  { id: 1, text: 'Learn Svelte.js', completed: false },
  { id: 2, text: 'Build a Svelte app', completed: false },
  { id: 3, text: 'Deploy Svelte app to production', completed: false }
 ];

 const todos = writable(initialTodos);
 setContext('todos', todos);
</script>

<div class="main">
 <TodoList />
</div>
<!-- TodoList.svelte -->
<script>

 import { getContext } from 'svelte';

 const todos = getContext('todos');

 function toggleCompletion(todo) {
  todos.update((todos) => {
   return todos.map((t) => {
    if (t.id === todo.id) {
     return {
      ...t,
      completed: !t.completed
     };
    } else {
     return t;
    }
   });
  });
 }
</script>

<div>
 <h1>My Todo List</h1>
 <ul>
  {#each $todos as todo}
   <li class:selected={todo.completed} on:click={() => toggleCompletion(todo)}>
    {todo.text}
   </li>
  {/each}
 </ul>

 <p>{$todos.filter((todo) => !todo.completed).length} items left to do</p>
</div>

<style>
 ... // Same style with todos.
</style>

6. Animasi di Svelte:

Animasi di Svelte.js memungkinkan pengembang menambahkan efek visual yang dinamis dan menarik ke aplikasi web mereka. Svelte menyediakan arahan transition bawaan yang dapat digunakan untuk membuat animasi dan menerapkannya ke elemen berdasarkan statusnya.

Arahan transition memungkinkan pengembang untuk menentukan gaya awal dan akhir suatu elemen, serta fungsi durasi dan waktu animasi. Svelte juga menyediakan serangkaian transisi bawaan yang dapat diimpor dari modul svelte/transition, seperti fade, slide, fly, dan scale.

Selain arahan transition, Svelte juga menyediakan fungsi animate yang dapat digunakan untuk membuat animasi khusus menggunakan JavaScript. Fungsi ini menggunakan elemen yang akan dianimasikan, objek konfigurasi animasi, dan fungsi panggilan balik untuk dijalankan saat animasi selesai.

Animasi di Svelte dapat digunakan untuk membuat efek sederhana seperti memudar dan meluncur, atau efek yang lebih kompleks seperti parallax scrolling dan morphing. Dengan sintaksis intuitif dan kemampuan animasi yang kuat, Svelte memudahkan pembuatan aplikasi web menakjubkan dengan efek visual yang kaya.

<script>
 import { fade } from 'svelte/transition';

 let visible = true;

 function toggle() {
  visible = !visible;
 }
</script>

<button on:click={toggle}>Toggle</button>

{#if visible}
 <div transition:fade>
  <h1>Hello, world!</h1>
 </div>
{/if}

7. Render sisi server di Svelte:

Render sisi server (SSR) dapat meningkatkan kinerja dan SEO aplikasi Svelte.js Anda dengan merender HTML awal di server dan mengirimkannya ke klien. Berikut cara mengatur SSR di Svelte.js:

A. Instal paket svelte-ssr dan svelte-nodeadapter:

npm install svelte-ssr svelte-nodeadapter

B. Buat file server (misalnya server.js) yang mengimpor komponen Svelte Anda dan menyiapkan middleware SSR:

const express = require('express');
const { createServer } = require('http');
const { createRenderFn } = require('svelte-ssr');
const { nodeAdapter } = require('svelte-nodeadapter');
const App = require('./App.svelte');

const app = express();
const server = createServer(app);
const render = createRenderFn(nodeAdapter);

app.use(express.static('public'));

app.get('*', (req, res) => {
  const { html, head } = render(App, { props: { /* props */ }, hydrate: true });
  res.send(`
    <!doctype html>
    <html lang="en">
      <head>
        ${head}
      </head>
      <body>
        <div id="app">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

C. Jalankan file server Anda:

node server.js

Ini akan memulai server yang mendengarkan pada port 3000 dan merender komponen Svelte Anda di server. Saat klien meminta halaman, server akan mengirimkan HTML yang telah dirender sebelumnya ke klien, yang kemudian dapat menghidrasi komponen Svelte dan menambahkan pendengar peristiwa atau pengikatan data apa pun yang diperlukan.

Perhatikan bahwa rendering sisi server dapat meningkatkan kompleksitas aplikasi Anda, jadi penting untuk mempertimbangkan manfaat dibandingkan kompleksitas tambahan sebelum memutuskan untuk menggunakan SSR. Selain itu, SSR mungkin tidak diperlukan untuk semua jenis aplikasi, jadi penting untuk mempertimbangkan kasus penggunaan sebelum menerapkan SSR di aplikasi Svelte.js Anda.

8. Pertimbangan SEO saat menggunakan Svelte:

Pengaturan SEO (Search Engine Optimization) penting untuk memastikan bahwa mesin pencari dapat mengindeks dan memberi peringkat pada konten aplikasi Svelte.js Anda dengan benar. Berikut beberapa pertimbangan utama untuk mengoptimalkan pengaturan SEO saat menggunakan Svelte.js:

A. ‹judul› dan ‹meta›

Setiap halaman harus memiliki elemen <title> dan <meta name="description"> yang ditulis dengan baik dan unik di dalam <svelte:head>.

B. Data terstruktur

Data terstruktur adalah jenis markup yang memberikan informasi tambahan tentang konten pada halaman web, sehingga memudahkan mesin pencari untuk memahami dan mengindeks konten tersebut. Menggunakan data terstruktur pada aplikasi Svelte.js dapat meningkatkan SEO situs web dengan memberikan lebih banyak informasi kepada mesin pencari tentang konten dan konteks situs web.

Ada beberapa cara untuk mengimplementasikan data terstruktur pada aplikasi Svelte.js. Salah satu pendekatan yang populer adalah dengan menggunakan markup JSON-LD (JavaScript Object Notation for Linked Data), yang memungkinkan Anda menyematkan data terstruktur langsung ke dalam HTML laman web Anda.

Untuk mengimplementasikan JSON-LD pada aplikasi Svelte.js, Anda dapat membuat komponen terpisah untuk setiap objek data terstruktur, lalu menyertakan komponen tersebut di tempat yang sesuai di templat halaman Anda. Misalnya, Anda mungkin membuat komponen untuk suatu produk, lalu menyertakan komponen tersebut di halaman detail produk.

Saat membuat komponen data terstruktur di Svelte.js, Anda dapat menggunakan direktif @html bawaan untuk merender markup JSON-LD langsung ke HTML halaman Anda. Misalnya, Anda dapat membuat komponen Product dengan markup JSON-LD berikut:

<script>
  export let name;
  export let description;
  export let price;
  export let image;
</script>

<div class="product">
  <!-- product content -->
</div>

{@html `<!-- JSON-LD markup for product -->`}

Dengan menggunakan direktif @html, Anda dapat dengan mudah menyematkan markup JSON-LD ke dalam komponen Svelte.js, sehingga memudahkan untuk menambahkan data terstruktur ke laman web dan meningkatkan SEO situs web Anda.

C. Peta Situs

Peta Situs membantu mesin pencari memprioritaskan halaman dalam situs Anda, terutama bila Anda memiliki konten dalam jumlah besar.

Informasi lebih lanjut dapat Anda kunjungi → https://kit.svelte.dev/docs/seo#manual-setup-structured-data

9. Pengujian di Svelte:

Misalkan Anda memiliki komponen Counter yang menampilkan hitungan dan menyediakan tombol untuk menambah dan mengurangi hitungan:

<!-- Counter.svelte -->

<script>
  export let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div class="counter">
  <button on:click={increment}>+</button>
  <span>{count}</span>
  <button on:click={decrement}>-</button>
</div>

Untuk menguji komponen ini, Anda dapat membuat file pengujian bernama Counter.spec.js dan menggunakan pustaka @testing-library/svelte untuk merender dan berinteraksi dengan komponen. Berikut ini contoh file pengujian:

// Counter.spec.js

import { render, fireEvent } from "@testing-library/svelte";
import Counter from "./Counter.svelte";

describe("Counter component", () => {
  it("displays the initial count", () => {
    const { getByText } = render(Counter, { count: 0 });
    expect(getByText("0")).toBeInTheDocument();
  });

  it("increments the count when the + button is clicked", async () => {
    const { getByText } = render(Counter, { count: 0 });
    const button = getByText("+");
    await fireEvent.click(button);
    expect(getByText("1")).toBeInTheDocument();
  });

  it("decrements the count when the - button is clicked", async () => {
    const { getByText } = render(Counter, { count: 1 });
    const button = getByText("-");
    await fireEvent.click(button);
    expect(getByText("0")).toBeInTheDocument();
  });
});

Dalam file pengujian ini, kami mengimpor fungsi render dan fireEvent dari @testing-library/svelte, lalu menentukan tiga pengujian:

  • Tes pertama memeriksa apakah komponen menampilkan hitungan awal 0.
  • Tes kedua mengklik tombol “+” dan memeriksa apakah hitungan bertambah menjadi 1.
  • Tes ketiga mengklik tombol “-” dan memeriksa apakah hitungannya dikurangi menjadi 0.

Untuk menjalankan pengujian, Anda dapat menggunakan Jest dengan menjalankan jest di terminal Anda. Jika semua tes lulus, Anda akan melihat keluaran seperti berikut:

 PASS  ./Counter.spec.js
  Counter component
    ✓ displays the initial count (10 ms)
    ✓ increments the count when the + button is clicked (6 ms)
    ✓ decrements the count when the - button is clicked (3 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total

KESIMPULAN

  1. Svelte adalah kerangka web reaktif yang mengkompilasi kode Anda ke JavaScript yang sangat optimal pada waktu pembuatan, sehingga menghasilkan aplikasi web yang cepat dan efisien.
  2. Pendekatan reaktif Svelte memungkinkan Anda membangun UI kompleks dengan kode boilerplate minimal, dan sintaks templatnya intuitif serta mudah dipelajari.
  3. Sistem manajemen status Svelte memungkinkan Anda mengelola dan memperbarui status aplikasi Anda dengan cara yang dapat diprediksi dan terukur.
  4. Svelte menawarkan sejumlah fitur bawaan, termasuk komponenisasi, rendering bersyarat, dan animasi, yang dapat membantu Anda membangun antarmuka pengguna yang kaya dan interaktif.
  5. Svelte menawarkan kemampuan SEO yang baik, termasuk rendering sisi server dan hidrasi otomatis, sehingga memudahkan untuk mengoptimalkan aplikasi Anda untuk mesin pencari.
  6. Jejak Svelte yang ringan dan waktu proses yang minimal menjadikannya pilihan yang sangat baik untuk membangun aplikasi yang cepat dan ringan, khususnya untuk perangkat seluler.
  7. Svelte mudah dipelajari dan digunakan, menjadikannya pilihan tepat bagi pengembang web baru dan berpengalaman yang ingin membangun aplikasi web yang cepat dan efisien.

Secara keseluruhan, Svelte menawarkan cara yang kuat dan intuitif untuk membangun aplikasi web yang cepat dan reaktif. Jejaknya yang ringan, fitur bawaan, dan kemampuan SEO menjadikannya pilihan tepat untuk berbagai proyek pengembangan web.

Tautan Bio Saya

Github

Linkedin

"Twitter"