Yenilikçi Bir Bakış — Svelte
Web geliştirme dünyası uçsuz bucaksız. Bu uçsuz bucaksız dünyada yeni teknolojiler keşfetmekten keyif alıyorum. Bu yazıda son zamanlarda ilgiyle öğrendiğim Svelte teknolojisini anlatmak istiyorum. Svelte son yıllarda oldukça dikkat çeken ve geliştiricilere benzersiz bir deneyim sunan web framework’üdür. Diğer framework’lerden daha farklı bir yaklaşım benimseyerek performans odaklı ve öğrenmesi kolay bir ortam sunmaktadır. O zaman hadi Svelte’in derinliklerine dalış yapalım!🫧
Bu yazının konu başlıkları şu şekilde:
- Svelte Nedir?
- Svelte’in Diğer Web Framework’lerinden Farkı Nedir?
- Svelte Syntax’ı
- Component Oluşturma
- Componentler Arası Veri Geçişi
- Koşullu İfadeler
4. Svelte’in Temel İlkesi Olan Reactivity Nedir?
5. CSS ve Svelte
6. İlk Projenizi Oluşturma
Svelte Nedir?✨
Svelte, kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript framework’üdür. Diğer framework’lerden farklı olarak Svelte, çalışma zamanında değil compile aşamasında kodunuzu optimize eder ve tarayıcıya daha hafif bir JavaScript kodu gönderir.
Svelte öğrenmek özellikle junior geliştiriciler için oldukça kolay ve güzel bir başlangıç olabilir. Svelte’in basit syntax’ı ve component tabanlı yapısı sayesinde kodunuzu anlamak ve yazmak oldukça kolaydır. Bu da öğrenme sürecinizde hızlı ilerlemenize ve projelerinize odaklanmanıza yardımcı olur.
Svelte’in performans odaklı yapısı web uygulamalarınızın daha hızlı yüklenmesine ve daha hızlı çalışmasına olanak tanır. Bu da junior geliştiriciler için performans optimizasyonu konularına derinlemesine dalma ihtiyacını azaltarak başlangıçta daha kolay öğrenme sağlar.
Svelte’in Diğer Web Framework’lerinden Farkı Nedir?✨
Svelte, diğer web framework’lerinden farklı bir yaklaşım benimsediğini iddia ediyor. Peki nedir bu yaklaşımlar?
Derleme Zamanında Optimizasyon:
Svelte, kodunuzu compile aşamasında optimize eder ve bu optimizasyonlar, tarayıcıya daha performanslı JavaScript kodu gönderilmesini sağlar. Finalde projenizin daha hızlı çalışmasını sağlar. Diğer framework’ler genellikle bu optimizasyonları çalışma zamanında yapar.
Çalışma Zamanı Bağımlılıkların Azalması:
Svelte, sadece kullanılan özellikleri içeren kodu oluşturur. Bu sayede projenizde sadece ihtiyacınız olan kısımları içeren daha küçük dosyalar elde edersiniz. Diğer framework’ler genellikle tüm bağımlılıkları içeren büyük dosyalar üretir.
Reactivity:
Svelte, reactivity konseptini diğer framework’lerden daha basit bir şekilde sunar. Değişkenlerin durumu değiştiğinde otomatik olarak componentin yeniden render edilmesini sağlar.
Scoped CSS ve Component Tabanlı Yaklaşım:
Svelte, her component için Scoped(kapsamı sınırlı) CSS kullanımını destekler bu da daha düzenli bir stil yönetimi sağlar. Ayrıca component tabanlı geliştirme anlayışını benimseyerek projeyi modülerleştirmeyi ve proje ilerleyişini daha kolay hale getirmeyi teşvik eder.
Öğrenme Eğrisi:
Svelte, daha basit bir syntax’a sahiptir. Bu nedenle diğer framework’lerle karşılaştırıldığında öğrenme eğrisi daha düşüktür. Bu da geliştiricilerin daha hızlı bir şekilde Svelte’i öğrenip etkili bir şekilde kullanmalarına olanak tanır.
Svelte Syntax’ı✨
Svelte kullanımı oldukça basit bir syntax’a sahiptir. Bu syntax; HTML, CSS ve JavaScript’i içeren birleşik bir yapı sunar. Dosyalar .svelte uzantısıyla oluşturulur. Syntax’ının oldukça basit olduğunu daha anlaşılır şekilde aktarmak için bazı kod blokları göstermek istiyorum. Bu kod bloklarını Svelte’in çevrimiçi kod yazma ortamı olan REPL ile oluşturuyorum.
Component Oluşturma:
Svelte ile çok basit bir şekilde nasıl component oluşturacağımızı göstermek istiyorum:
<script> tag’ının içerisine JavaScript kodlarımızı yazıyoruz. Burada name adında değişken tanımladım. <script> tag’ının altında HTML kodlarımızı yazabiliriz. Burada <h1> tag’ı içerisinde değişkenimi {} süslü parantez içerisinde çağırdım. Reactjs yazıyorsanız süslü parantezle benzer işlemi yapmaya aşinasınız demektir. Stille ilgili tüm kodları ise <style> tag’ının içerisine yazıyoruz. Sonuca bakalım:
Voilà! İşte ilk Svelte componentimiz hazır!
Peki bu componenti sayfada nasıl çağırıyoruz?
Componenti çağırmak için <script> tag’ının içerisinde import edip tag’ın altında çağırmamız yeterli olacaktır. Bu kullanımı da diğer JavaScript framework’lerindeki component çağırma mantığına çok benziyor.
Componentler Arası Veri Geçişi:
Svelte’te bir componentten diğerine prop geçişini gerçekleştirmek oldukça basittir. Prop geçişi için iki component arasında iletişim sağlanır ve bir component diğerine veri iletebilir. Örnek kod bloklarıyla inceleyelim:
Ana Component (App.svelte):
Child Component (ChildComponent.svelte):
Bu örnekte App.svelte dosyasındaki parentMessage değişkenini, ChildComponent componentindeki childMessage prop'una aktardım. Bu sayede ChildComponent componenti aldığı prop'u kullanarak içeriğini oluşturur.
export ifadesi, ChildComponent componentine dışarıdan bir prop gelmesini sağlar. Bu şekilde childMessage, ChildComponent componenti tarafından kullanılabilir hale gelir.
Koşullu İfadeler:
Svelte ile koşullu ifadeler de oluşturmak oldukça kolay. If/else if blokları Svelte’te de kullanılıyor. Biraz alışılmışın dışında ama aşina olduğumuz bir syntax’ı var. Çok konuştum en iyisi kod üzerinde bakalım😄:
<script> tag’ı içerisine loggedIn değişkenini true olarak tanımladım. Eğer loggedIn true ise “Kullanıcı giriş yaptı!” yazsın, false ise “Kullanıcı giriş yapmadı.” yazsın istiyorum. Svelte’te if bloğunu kullanmak için süslü parantez içerisinde # işaretiyle if bloğumu oluşturuyorum ve / işaretiyle if bloğumu kapatıyorum. else if-else işlemlerini yapabilmek için if bloğu içerisinde süslü parantez içerisinde : işaretini kullanarak yazabiliriz.
Yukarıdaki örneklerle Svelte’in syntax’ından bahsetmek istedim. Svelte’in bu kolay syntax’ı geliştiricilere hızlı ve verimli bir şekilde web uygulamaları oluşturma imkanı sunar.
Svelte’in Temel İlkesi Olan Reactivity Nedir?✨
Svelte’in temel ilkesi olan reactivity, değişkenlerin değerlerindeki değişikliklerin otomatik olarak koda yansımasını ifade eder. Yani bir değişkenin değeri değiştiğinde bu değişiklik uygulamanın arayüzüne anında ve otomatik olarak yansır. Peki nasıl? Hadi kod üzerinde inceleyelim:
Değişkenler Üzerinde Reactivity:
Bu örnekte count adında bir değişken tanımladım. Butona tıklandığında on:click eventiyle count değişkeni bir arttırılarak arayüzdeki sayı anında güncellenir. Bu değişkenin değeri değiştiğinde otomatik olarak arayüzün güncellenmesine olanak tanımasına reactivity denir.
Bağımlılıkları İzleme:
Bu örnekte ise Svelte çalışmalarında karşılaşabileceğiniz reactivity’i ifade eden $: işaretinden bahsetmek istiyorum. Pencere genişliği değiştiğinde bu değişikliğe göre çalışan bir kod bloğu yazdım. Bu sayede ($:) ekranın genişlik değeri değiştikçe isMobile değişkeni otomatik olarak güncellenir ve bu duruma bağlı olarak arayüzdeki metinler dinamik olarak değişir. $: reactivity işareti ilgili kodun dinamik hale gelmesini sağlıyor.
Reactivity ilkesi, kodun otomatik olarak optimize edilmesini ve güncellenmesini sağlar. Değişkenlere, ifadelere ve bağımlılıklara reactivity eklemek geliştiricilere daha anlaşılır, okunabilir ve bakımı kolay kod yazma imkanı tanır.
CSS ve Svelte✨
Scoped CSS:
Svelte, componentler arasında stil çatışmalarını önlemek için Scoped CSS kullanımını destekler. Her component içindeki CSS sadece o componente özgüdür ve diğer componentleri etkilemez. Örneğin:
Global CSS:
Bazen global stil tanımlamaları yapmamız gerekebilir. :global() selectorı kullanarak global stil tanımlaması yapabiliriz. Örneğin:
CSS Preprocess:
Svelte PostCSS, SCSS, Less, Stylus gibi preprocess’leri kullanmaya olanak tanır. Bunun için öncelikle aşağıya bıraktığım linkten ilgili kütüphaneyi indirebilirsiniz:
Daha sonra ilgili stil bloğunu lang özelliği ile tanımlayabilirsiniz. Örneğin:
Bu örnek kodlar ile Svelte’te CSS kullanımını anlaşılır şekilde ifade etmeye çalıştım. Scoped CSS, Global CSS ve CSS Preprocess gibi konseptler Svelte ile stil uygulamak için sık kullanılan yöntemlerdir.
İlk Projenizi Oluşturma✨
Hadi şimdi Svelte dokümantasyonunu takip ederek ilk Svelte projenizin kurulumunu birlikte yapalım. İlgili dokümantasyon linkini aşağıya bırakıyorum:
Hadi şimdi proje kurulumuna başlayalım:
svelte-deneme adında bir klasör oluşturdum. Terminale gelip npm create vite@latest ./ komutunu çalıştırıyorum. Daha sonra:
Çıkan listeden Svelte’i seçiyorum. Daha sonra:
Hangi dille yazmak istediğimizi soruyor. Svelte ekibi SvelteKit’i seçmemizi tavsiye ediyor ancak bu bizim ilk projemiz önce kolay yoldan gidelim. Bu yüzden JavaScript’i seçiyorum. Daha sonra:
Şimdi de npm install komutunu çalıştırarak node_modules’ü yüklüyoruz. Daha sonra:
npm run dev komutunu çalıştırarak projeyi 5173 portunda ayağa kaldırıyoruz.
İlk Svelte projemizi oluşturduk. İşte sadece bu kadar!🥳
Sonuç olarak Svelte, modern web geliştirme dünyasında hız, performans ve basitlik arayanlar için güçlü bir çözüm sunuyor. Kendine özgü reactivity sistemi, component tabanlı yapısı ve compile zamanındaki optimizasyonlar geliştiricilere daha etkili bir kod yazma deneyimi sunmaktadır. Bu yenilikçi yaklaşım geliştiricilere daha fazla kontrol sağlarken aynı zamanda performans odaklı uygulamaların geliştirilmesine olanak tanıyan bir framewrok olarak öne çıkıyor. Svelte ile tanışmak web geliştirmenin geleceğine dair heyecan verici bir adım olabilir.
Sorularınız, yorumlarınız veya konu önerileriniz varsa lütfen bana bildirin. Sizlerin geri bildirimleri blog serimi daha da iyileştirmeme yardımcı olur. Bir sonraki yazıda görüşmek üzere!
