Svelte nedir?

Svelte, 2016 yılında Rich Harris tarafından oluşturulan, ve açık kaynak kodlu olarak geliştirilen bir component frameworküdür. React, Vue, Angular ve diğer frameworklere benzer bir amaçla geliştirilmektedir.

Framework nedir?

Component frameworkleri bize yazmak istediğimiz uygulamaları daha declarative bir şekilde yazmamıza olanak sağlar. Bu declarative kelimesi oldukça sık kullanılıyor bu yüzden ne demek istediğimizi anlatmak için şöyle bir örnek verelim:

Bu declerative kod...

<script>
    let count = 0;
</script>

<button on:click={() => count += 1}>
    Clicks: {count}
</button>:

...bu imperative koda eşittir:

function component() {
    let count = 0;

    const button = document.createElement('button');
    button.textContent = `Clicks: ${count}`;

    button.addEventListener('click', () => {
        count += 1;
        button.textContent = `Clicks: ${count}`;
    });

    return button;
}

Burada imperative kodda tarayıcıya tam olarak ne yapması gerektiğini anlatıyoruz. Declarative kodda ise sadece hangi sonucu istediğimizi yazıyoruz ve arka planda ne yaptığı ile ilgilenmiyoruz. Bütün olay sadece bu mu diye düşünebilirsiniz. O zaman yukarıdaki örnekteki count değişkenimizi <strong> etiketi içinde yazdırmak isteyelim.

Declarative kodda sadece {count} un önüne ve arkasına <strong> etiketini yazdık.

<script>
    let count = 0;
</script>

<button on:click={() => count += 1}>
    Clicks: <strong>{count}</strong>
</button>

Imperative kodda ise neredeyse bütün kodu baştan yazmak zorunda kaldık

function component() {
    let count = 0;

    const button = document.createElement('button');
    const strong = document.createElement('strong');
    strong.textContent = count;

    button.append(
        document.createTextNode('Clicks: '),
        strong
    );

    button.addEventListener('click', () => {
        count += 1;
        strong.textContent = count;
    });

    return button;
}

Böylesine küçük bir işlem için harcanan bu kadar zamanı göz önünde bulundurduğumuz zaman, frameworklerin ne kadar önemli olduğunu ve geliştirici deneyimini ne kadar arttırdığını fark edeceksinizdir.

ℹ Frameworkler her ne kadar bizim işimizi kolaylaştırsa da tarayıcı ile aramıza girerek bir ekstra verimsizlik sağlayabilir.

Peki Svelte'in farkı ne?

React ve Vue gibi frameworklerin aksine Svelte aslında bir compilerdır. Yani yazdığımız declarative kod bir derleme sürecinden geçer ve imperative JavaScript koduna dönüştürerek sunulur. Yani ziyaretçinin tarayıcısında çalışan bir Virtual DOM yerine tarayıcı düz JavaScript çalıştırır. Dolayısıyla sayfayı ziyaret eden kişi bir framework ve kütüphane indirmediği için hem dosya boyutu olarak hem de performans açısından çok avantajlıdır. Ayrıca Svelte'de React ve Vue ile kıyaslandığı zaman daha az kod yazarsınız.

Svelte'i incelemek için websitesindeki Examples ve Tutorial sayfalarındaki kod örneklerine bakılabilir. Şöyle bi' yarım saat inceledikten sonra hayran kalmamak elde değil. :)

Svelte'i Denemek

Svelte'i denemek için en basit yol Svelte REPL sayfasıdır. Burada Svelte kodunuzu çalıştırıp burada gördüklerinizi deneyebilirsiniz.

Bilgisayarımıza Svelte Kurmak

Svelte'i bilgisayarımıza kullanmak için komut satırını nasıl kullanacağını bilmemiz ve ayrıca bilgisayarımızda Node.js'in kurulu olması gerek. Kurulu olup olmadığını kontrol etmek için komut satırına node -v yazabilirsiniz. Eğer 14.16 gibi bir versiyon numarası gelirse kuruludur. Hata veriyorsa yüklü değildir, Node indirip kurmanız gerekiyor.

Kurduktan sonra komut satırından Svelte'i kurmak istediğimiz klasöre gidelim. Ardından aşağıdaki komutlar ile Svelte'i klasörümüze kuralım.

# Projeyi indirmek için: (svelte-deneme adında bir klasör oluşturulacak)
npx degit sveltejs/template svelte-deneme

# İndiği klasöre girelim
cd svelte-deneme

# npm ile bağımlılıkları indirmek için
npm install

# Svelte geliştirici serverını çalıştırmak için
npm run dev

npm run dev dedikten sonra localhost'ta 5000 portunda Svelte projemizin çalışmaya başlaması gerek.

Bu noktadan sonra svelte-deneme klasörümüzü kod editörümüzde açıp src klasörü içindeki App.svelte dosyasını düzenleyerek Svelte'i kullanmaya başlayabiliriz. http://localhost:5000 adresinden çalışan projemizi görebiliriz.

ℹ İster bilgisayarınızdan isteseniz ise REPL üzerinden bu yazıyı takip edebilirsiniz.

Svelte'te sayfa yapısı bu şekilde oluşuyor:

<script>
// Buraya JavaScript kodumuzu yazıyoruz
</script>

<style>
/* Buraya CSS kodumuzu yazıyoruz */
</style>

<!-- Sayfanın geri kalanına ise HTML yazabiliriz. -->

<header>
    <h1>Merhaba dünya</h1>
</header>

Değişken oluşturma

Svelte ile değişkenleri böyle tanımlıyor ve böyle sayfada gösteriyoruz.

<!-- App.svelte dosyamıza bu kodları ekledik -->
<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>

Çıktı:

Hello world!

---

CSS

Componentimizi şekillendirmek için HTML deki gibi CSS kodlarımızı <style> etiketi içine yazıyoruz.

<!-- App.svelte -->
<script>
    let name = 'world';
</script>

<style>
    h1 {color:red;}
</style>

<h1>Hello {name}!</h1>

ℹ Svelte'de her bir componentte yazılan CSS, varsayılan olarak scoped'tur. Yani sadece o componentteki elemanlara etki eder. Eğer global olarak etki etmesini istediğimiz bir CSS özelliği varsa onu :global(...) {...} içinde yazmamız gerek. Örnek

<style>
  :global(p) {
    color: orange
  }
</style>

---

Componentler

Svelte'de component oluşturmak için .svelte uzantılı bir dosya oluşturmamız yeterli. Daha sonra bu componenti göstermek istediğimiz yerde import edip <ComponentAdi/> şeklinde gösterebiliriz.

ℹ Svelte'in gibi bir etiketi, HTML etiketi olarak yorumlamaması için baş harfini büyük yazmamız gerekiyor.

<!-- App.svelte -->
<script>
    import Paragraf from "./Paragraf.svelte"
</script>

<h1>Merhaba dünya!</h1>

<Paragraf/>

<!-- Paragraf.svelte -->
<p>Ben Paragraf.svelte dosyasındaki bir paragrafım.</p>

Canlı REPL Örneği: svelte.dev/repl/9807ba6986f94df58bfc648af7d..

If Blockları

<script>
    let user = { loggedIn: false };

    function toggle() {
        user.loggedIn = !user.loggedIn;
    }
</script>

{#if user.loggedIn}
    <button on:click={toggle}>
        Log out
    </button>
{/if}

{#if !user.loggedIn}
    <button on:click={toggle}>
        Log in
    </button>
{/if}

Denemeye değer mi?

Evet, Svelte'e şöyle bir göz attık ve kabaca nedir nasıl kullanılır gördük. Svelte hakkında daha fazla bilgiye sahip olmak için svelte.dev adresini ziyaret edebilirsiniz. Eğer bu yazı hoşunuza gittiyse ve Svelte hakkında daha fazla içerik görmek isterseniz yorumlar bölümünde bunu belirtebilirsiniz. :)