Günümüzde frontend dünyası, oldukça geniş seçeneklerin olduğu uçsuz bucaksız bir alan. Sayısız CSS frameworkü, JS frameworkü ve kütüphaneleri, modüller derken kendimizi koca bir okyanusun içinde buluyoruz. Hatta öyle ki, rastgele birkaç harf yazıp sonuna JS eklediğimizde önümüze herhangi bir sonucun çıkması, oldukça olağan bir durum. Tabii bu, bir çeşit zenginlik olsa da geliştiriciler için kaos oluşturmuyor değil. Ben de bu yazıda, bu kaosu bir nebze de olsa azaltan bir yapıyı ele alacağım; Svelte.

Modern web inşasında en önemli oyuncular, hiç şüphesiz SPA (Single Page Application) yazılımları. Kısaca SPA, bir web sayfasının tek bir sayfa üzerinden dolaşıldığı, masaüstü uygulamaları gibi davranan siteleri oluşturmaya yarayan yazılım demek. Bugün "Ben bir SPA ortaya çıkaracağım." diyen birisi için oldukça popüler, Bermuda Şeytan Üçgeni vari araçlara başvuruluyor, bunlar React, Angular ve Vue. Bu üçlüden Angular ve Vue birer framework iken React, jQuery gibi bir kütüphane. Yazınım konusu Svelte de SPA araçlarından biri.

Svelte Nedir?

Pek çok kütüphane ve frameworklerin aksine Svelte, bir derleyici olarak çalışıyor. Kullanım tarzı diğerlerine benziyor olsa da finalde çıkan ürün, içinde herhangi bir Svelte kodu barındırmıyor. Başlıkta belirttiğim maceraperestlik de buradan geliyor. Belli bir söz dizimine sahip Svelte, yazılan kodu olabilecek en optimize şekilde derliyor ve bir araya getiriyor. Diğer araçlara nazaran çok daha düşük alan kullanıyor. Bunun sebebi, yukarıda da bahsettiğim derleme işlemi sonucunda üretilmiş kodun, bir bağımlılığa ihtiyaç duymayan yapısı.

Svelte'nin Öne Çıkan Özellikleri.

Svelte componentleri, bir şablon motoru gibi çalışıyor. Bu ne demek? Bir bileşen oluşturmak için herhangi bir söz dizimi kullanmak zorunda değiliz. Uzantısı svelte olan bir dosyaya normal bir metin belgesi gibi içerik girerek bileşenlerinizi oluşturabilirsiniz. Svelte, bu dosyaları birbiri içinde kullanılabilir exportlar olarak derler.

Svelte, bileşen dosyalarında Vue'ya benzer bir yapı sunar. Stiller style etikleri içinde yazılır, JavaScript ifadeleri de script etiketleri arasında hayat bulur. Vue'dan farklı olarak içerik kısmını bir template etiketi içine almak zorunda değilsiniz. Birden fazla (ya da hiç) etiketi aynı seviyede kullanmak mümkün.

İçerik kısmında Svelte bize, bazı şablon motorlarında gördüğümüze benzer yapı sağlıyor. Koşula bağlı gösterimler için {#if} blokları, listeler için {#each} blokları ve (bence) en güzeli olan asenkron işlemlerin sonucuna göre hareket eden {#await} blokları. Bunların kullanım şekilleri için Svelte'nin dokümantasyonunu okumanız faydalı olacaktır.

Yine Svelte'in güçlü yanlarından birisi de dahili store mekanizması. Herhangi bir kütüphaneye veya modüle gerek duymadan, uygulama genelinde erişebileceğiniz store yapısı mevcut. Birkaç satir kodla uygulamanıza küresel canlılık kazandırmak çok hoşunuza gidecektir.

Bir başka güzellik de dahili animasyon kütüphanesine yer verilmesi. Modüler yapısı ve çok geniş konfigürasyon seçenekleri de elinizin altında. Bu animasyonlar sadece tek yönlü değil, çift yönlü çalışıyor, yani girişte ve çıkışta farklı animasyonlar kullanmak mümkün. Bu konuda transition, in ve out directive'leri sizin yardımcınız oluyor.

Bir elementin sayfada yer aldığında otomatik olarak çalışan fonksiyonları use: directive'i sağlıyor. Bu kullanım bize, düz JavaScript ile yazılmış kütüphaneleri kullanmada oldukça büyük kolaylık sağlıyor. Hatta bu directive'i kullanışı, kimi zaman jQuery rahatlığı sağlıyor da denebilir. DOM ile isiniz olduğunda ve bir elementin erişilebilir olması durumunda belli bir modülü kullanmak isterseniz, bu directive ile çok kolay kullanım sağlarsınız.

Svelte componentleri slot kullanımını da destekliyor. Slotlar, bir component içinde belli bir yeri işaretlemeye ve bu işaret yardımıyla kullanıldığı yerde ekstra içerik girişine imkân veren bir mekanik. Örneğin bir modal componentiniz var ve bu componentin içeriği ve footer kısmını slotlarla işaretlemişseniz, modalı kullandığınız sayfada/componentte, ilgili slotun bulunduğu yere bir başka component veya HTML içerik girebilmeniz mümkün.

Svelte, kendine has etiketler ile -bu etiketleri <svelte:...
ile başlıyor- uygulamanıza/sitenize ekstra güç katmanızı sağlıyor. Sitenin head bölümüne ekstra bir içerik girmek için <svelte:head>, dinamik componentler için <svelte:component>, kendini çağıran componentler için <svelte:self>, tarayıcının window objesine erişimi sağlayan ve event ataması yapmanızı sağlayan <svelte:window>, benzer şekilde body için event atamaları yapmaya yarayan <svelte:body> gibi özel etiketler sayesinde ilave işlemlere gerek duymuyorsunuz.

Svelte'in Yaşam Döngüsü.

Yaşam döngüleri, component frameworkleri için oldukça önemli bir bileşen. Svelte, beş adet yaşam döngüsü fonksiyonu barındırıyor. Bunlar;

• onMount: Component DOM'a yerleştirildiğinde çalışır.

• beforeUpdate: Herhangi bir state değişiminden önce çalışır.

• afterUpdate: State değişiminden sonra çalışır.

• onDestroy: Component DOM'dan çıkarıldığında çalışır.

• tick: Componentin içinde herhangi işlemi bir sonraki adıma iletir. Asenkron çalışır.

Svelte hakkında daha çok anlatılacak şey var, ancak bu yazı daha çok meraklıları ve bir başka framework kullanan ve yeni arayışta olan geliştiricileri hedef alıyor. Svelte'in ayrıca Sapper adında bir SSR framework kuzeni, SvelteKit adında da veliahdı mevcut. SvelteKit, Sapper ile Svelte'i tem çatı altında birleştiriyor. Kendini "Dünyanın Ilk Serverless Framework'u" olarak tanıtan SvelteKit'e önümüzdeki yazılarda bol miktarda değineceğiz. SvelteKit su an betada ve kit.svelte.dev adresinden erişilebilir durumda. Bir başka yazıda görüşünceye dek esen kalın ve kodlamanın keyfini çıkarın.