Bir Bakışta Svelte — Bölüm 1

Photo by Ferenc Almasi on Unsplash

Svelte, hızlı web uygulamaları geliştirmek için bir araçtır. React ve Vue gibi JavaScript frameworklerine benzer ancak çok önemli bir farkı vardır. Kodlarınızı run time da yorumlamak yerine build time da olması gereken JavaScript kodlarına çevirir. Böylece frameworkün sanallaştırmaları için performans kaybetmez, ayrıca ilk yükleme için olması gerekenden daha yavaş bir yüklenme süresine maruz kalmazsınız. Tüm uygulamanızı ya da sadece belirli bir kısmını Svelte ile yapabilirsiniz. En iyi yönlerinden birisi kullanmaya başlamanın ve anlamanın oldukça kolay olması. Hatta hiç Svelte bilmeyen birisi, hatta ve hatta hiç frontend framework bilmeyen birisi bile, bir svelte projesinde ilk günden ufak düzeltmeler yapmaya başlayabilir.

Bu kadar övdükten sonra biraz elimizi kirletmeye başlayabiliriz :) bakalım gerçekler böyle mi?

Kurulum

Bir svelte projesi başlatmanın en kolay yolu npx ile boş projenin kopyalanmasıdır. Şu kodu terminalde çalıştırarak projemizi oluşturalım;

npx degit sveltejs/template test-sv

En son yazdığımız “test-sv” projemiz için oluşturulacak yeni klasörün adı, istediğiniz gibi değiştirebilirsiniz. Klasörü kod editörünüz ile açabilirsiniz ve muhtemelen buna benzer bir yapı ile karşılaşacaksınız;

Aslında oldukça kolay bir başlangıcı var. README dosyasını silebilirsiniz ya da kendi projeniz için düzenleyebilirsiniz. package.json projenizle ilgili bilgileri içeriyor. Rollup ise webpack gibi bir bundler ve onun config dosyasını içeriyor. Şimdilik ellemenize gerek yok, ayrıca tabiki farklı bundler ile kullanabilirsiniz ama şimdilik sadece svelte temellerine odaklanalım.

src klasörü asıl kodlarımızı yazacağımız klasör. scripts klasörü TypeScript kurulumu için bir script dosyası içeriyor ama bu yazılarda kullanmayacağımız için bu klasörü silebilirsiniz. public klasörü ise static dosyalarımızın (global css, resimler vs) olduğu klasör.

Entry pointimizi src/main.js dosyasında belirliyoruz. Aslında bu dosyanın içeriği de JavaScript bilenler için oldukça basit. Probs kısmını silerek dosyayı şu hale getirelim;

main.js

Bu dosyada app uygulamasını başlatıyoruz, ve App uygulamamızda App.svelte dosyasında duruyor. Evet svelte dosyalarımızı .svelte uzantısı ile bitiriyoruz. Şimdi App.svelte dosyasını açıp içerisindeki her şeyi silebiliriz.

Uygulamayı görebilmek için öncelikle ana uygulama klasöründe “npm install” komutunu çalıştırın. Artık uygulamayı her geliştirmeye başladığınızda sadece “npm run dev” komutunu çalıştırmanız yeterli. Otomatik olarak bir local server oluşturulacak ve uygulamanızı http://localhost:5000 adresinde görebileceksiniz. Eğer localhost çalışmıyorsa http://127.0.0.1:5000/ olarak deneyin.

Şimdi App.svelte dosyasını düzenleyip “hello world” yazdığınızda, tarayıcınızdaki sayfanın otomatik olarak güncellenmiş ve sayfada hello world ü görmüş olmalısınız. Tebrikler! Kurulumu tamamladık ve svelte kodlarımıza geçebiliriz.

Svelte Temelleri

Bir svelte dosyasında normal bir html dosyası gibi hem HTML, hem CSS, hem de JavaScript yazabiliriz. Hemen App.svelte dosyamızı açarak deneme yapmaya başlayalım. Örneğin yazdığımız “hello world” yazısına html kodları ekleyelim.

<h1>hello world</h1>

Bunun altına CSS kodlarımızı ekleyebiliriz;

App.svelte

Kodları yazıp tarayıcınıza dönerseniz yine otomatik olarak güncellendiğini görebilirsiniz. Burada Svelte’in çok önemli bir konseptini açıklamadan geçmeyelim. Her ne kadar CSS kodlarımızı h1 için yazmış olsak da bu kodlar global olarak çalışmaz sadece bu App.svelte dosyamızda yazacağımız h1 ler için çalışır.

Eğer tarayıcınızda inspect element ile kodları incelerseniz, svelte’in h1 için bir class oluşturduğunu ve stilleri bu class’a verdiğini görebilirsiniz. Yani eğer Settings.svelte diye bir dosya oluşturur ve içerisine h1 ile yeni bir başlık yazarsanız App.svelte içerisindeki stiller uygulanmayacaktır.

Gelelim JavaScript kısmına. h1 yazımızı HTML içerisine yazmak yerine, JavaScript den HTML’e aktaralım;

App.svelte

Evet, sadece süslü parantezler kullanarak JavaScript değişkenlerimizin içeriğini HTML’e yazdırabiliriz. Hatta fonksiyonları da kullanabiliriz, hemen {text} yerine {text.toUpperCase()} yazarak deneyebilirsiniz.

Peki bu JavaScript değişkenlerini attribute olarak verebilir miyiz? Elbette, örneğin h1 yerine HTML etiketini a olarak değiştirelim. CSS’i değiştirmeyi unutmayalım, ve JavaScript de href özelliği oluşturalım;

App.svelte

Kodları yazdıktan sonra tarayıcınızda çalıştığını inspect element ile test edebilirsiniz. Hatta bunun kısaltılmış bir yolu da var. Eğer değişken ismini “href” gibi attribute ismi ile aynı veriyorsanız “href={href}” şeklinde yazmak yerine sadece “{href}” olarak yazabilirsiniz.

Bu bölümü kapatmadan yeni bir svelte dosyası oluşturarak, stillerin başka dosyalara uygulanmadığını kendimiz görelim. App.svelte dosyasının yanına Settings.svelte dosyasını oluşturalım. İçerisine sadece a etiketleri oluşturalım;

<a href="#">General</a>
<a href="#">Profile</a>

Şimdi bu yeni svelte dosyamızı App.svelte’in içerisine dahil edelim. Bunun için JavaScript ile import etmemiz yeterli;

import Settings from './Settings.svelte';

Daha sonra HTML içerisinde kullanmak için <Settings/> yazmamız yeterli. App.svelte dosyamızın son hali şu şekilde olmalı;

App.svelte

Bir svelte dosyası ile ilgili temel bilgileri edindiğimize göre diğer konulara geçebiliriz.

Reactivity

Svelte’in en güçlü olduğu yanlarının başında uygulamanızın durumu ve DOM’u senkronize tutan reactivity gelir. Bunu denemek için App.svelte dosyamızı düzenleyerek devam edelim. Önceki kodları temizleyerek bunları yazalım;

App.svelte

Öncelikle JavaScript içerisinde count isimli değişken ve bunu bir kez arttıran bir fonksiyon oluşturduk. HTML içerisinde h1 etiketi oluşturup daha önce öğrendiğimiz şekilde “clicked {count} times” yazarak count değişkeninin içeriğine HTML’e yazdırdık. İşte bundan sonra count değişkenimiz her değiştiğinde Svelte bunu otomatik olarak anlayarak kullanıldığı HTML içeriğini de otomatik olarak yeniden yazıyor.

Count değerini güncellemek için h1'e “on:click={incrementCount}” özelliğini ekliyoruz. “on:event” Svelte ile gelen bir özellik, dom olaylarına göre tepki vermemizi sağlıyor. Örneğin “on:click” yerine “on:mouseenter” ile deneyebilirsiniz.

HTML tamam ama JavaScript içinde reactive tanımlamalar nasıl yapabiliriz? Hemen örnek üstünden devam edelim ve önceki kodlarımızı biraz değiştirelim. Öncelikle count tanımlamamızın altına “doubled” iki ile çarpımını ekliyoruz;

let count = 0;
let doubled = count * 2;

h1 etiketimizi de şu şekilde değiştiriyoruz;

<h1 on:click={incrementCount}>clicked {count} times and {doubled} is double of it</h1>

Test ettiğinizde “doubled” değişkeninin artmadığını fark edeceksiniz çünkü henüz reactive değil. Şimdi doubled değişkenimizi tanımladığımız satırda ufak bir değişiklik yapıyoruz;

let count = 0;
$: doubled = count * 2;

Şimdi tekrar test edebilirsiniz, double değişkenimizin değeri count değiştikçe otomatik olarak değişecektir. Bunu bir adım daha ileri götürebiliriz, örneğin, count değişkeninin değeri belirli bir sayının üstüne çıkarsa console a yazdırmak istersek;

$: if(count > 3){
  console.log(doubled);
}

Bu kodu ekleyerek deneyebilirsiniz. Dikkat etmeniz gereken Svelte de reactivite assignment ile çalışıyor. Yani herhangi bir array için reactivite kullanırken push ya da splice çalıştırmak otomatik olarak diğer yerleri güncellemeyecektir. Bunu aşmak için bir diziyi tekrar kendine atayabilirsiniz.

Şimdilik bu kadar. Bir sonraki bölümde proplar, logicler, eventler ve daha fazlası için takip etmeyi unutmayın!

Instagram’dan takip etmek isterseniz: https://bit.ly/osinstas
Twitter’dan takip etmek isterseniz: https://bit.ly/ostwitters

👋