Svelte ile İlk Adımlar: React ve Vue’ya Karşı Hızlı mı?

Öncellikle herkese merhaba. Bildiğiniz gibi frontend dünyasında çeşitli frameworkler ve kütüphanelerle tanışmak her geliştiricinin geçtiği bir süreçtir. React, Vue ve Angular gibi devlerin arasına yeni bir oyuncu olarak giren Svelte, son dönemde popülerliğini artırdı. Peki, Svelte’i diğerlerinden ayıran temel farklar neler ve neden daha hızlı? Bu yazımda, Svelte’in yapısını, performans avantajlarını ve React ile Vue’ya karşı neden daha hızlı olduğunu inceleyelim.

Svelte Nedir ve Nasıl Çalışır?

Svelte, 2016 yılında Rich Harris tarafından geliştirilmiş, modern web uygulamaları oluşturmak için kullanılan bir framework’tür. Ancak Svelte’i diğer frameworklerden ayıran temel fark, bir framework değil, bir compiler (derleyici) olmasıdır. Bu, Svelte’in çalışma zamanı kütüphanesi olmadan doğrudan tarayıcıda çalıştığı anlamına gelir.

React ve Vue, tarayıcıda bir sanal DOM (Virtual DOM) kullanarak bileşenleri yönetir. Herhangi bir değişiklik olduğunda, sanal DOM ile gerçek DOM karşılaştırılır ve güncellenir. Bu işlem, her ne kadar optimize edilse de, tarayıcı üzerinde ekstra bir yük oluşturur. Svelte ise sanal DOM kullanmaz. Bunun yerine, bileşenlerin oluşturulma anında, doğrudan etkin ve optimize edilmiş JavaScript kodu üretir. Bu da onlara göre minimal bşr hız dahi olsa avantaj kazandırır.

Svelte’i Neden Daha Hızlı Yapan Unsurlar?

1. Compile-time Optimizasyonlar
   Svelte’in en büyük avantajlarından biri, değişikliklerin compile-time’da optimize edilmesidir. Diğer frameworkler, tarayıcıda çalışma zamanı sırasında gerekli işlemleri yaparken, Svelte bu işlemleri geliştirme aşamasında yapar ve tarayıcıya doğrudan optimize edilmiş, minimal kod sunar.
2. Sanal DOM Yok
   Svelte, sanal DOM kullanmadığı için performans kaybı yaşamaz. React ve Vue, değişiklikleri sanal DOM’da işleyip ardından gerçek DOM’a yansıtırken, Svelte bu adımı atlar ve direkt olarak gerçek DOM üzerinde çalışır. Bu da uygulamanın daha hızlı tepki vermesini sağlar.
3. Daha Küçük Bundle Boyutları
   Svelte, framework kütüphanesini projeye dahil etmez. Bunun yerine, sadece bileşenlerde kullanılan kod derlenir ve çıktı dosyası oluşturulur. Bu sayede final bundle boyutu küçülür ve sayfa yükleme süreleri hızlanır.
4. Reaktif Yapı
   Svelte, reaktiviteyi bir dil özelliği gibi ele alır. Bir değişkenin değerini güncellediğinizde, Svelte otomatik olarak bu değişkenin kullanıldığı bileşenleri yeniden render eder. Bu, React ve Vue’da kullanılan state management yapılarından daha hafif ve hızlıdır.

Svelte mi, React/Vue mu?

Tabii ki de her framework’ün kendine has avantajları ve kullanım alanları vardır. React ve Vue, geniş topluluk desteği, zengin ekosistem ve olgunlaşmış bir yapıya sahiptir. Ancak performans, küçük boyutlu projeler ve basitlik öncelikli olduğunda, Svelte dikkat çeken bir seçenek haline gelir.

Svelte, özellikle performansın kritik olduğu projelerde (örneğin düşük performanslı cihazlarda çalışacak uygulamalarda) önemli bir fark yaratabilir. Ayrıca, minimal yapısı sayesinde öğrenmesi de oldukça kolaydır. Bu yüzden yeni başlayanlar için de ideal bir tercih olabilir. Gelin örnek olarak react ve svelte yazımında ki farklara da göz atalım.

React vs Svelte: Bileşen Oluşturma ve State Yönetimi

React’ta Bir Bileşen ve State Yönetimi

React’ta bir bileşen oluşturmak ve state yönetmek için genellikle useState hook'u kullanılır. İşte basit bir sayaç bileşeni örneği:

// React'ta sayaç bileşeni
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (

Burada React’in useState hook'u ile state yönetimi sağlanır. onClick olayında state güncellenir ve bileşen yeniden render edilir. Peki bunu svelte ile nasıl yapıyoruz?

Svelte’te Aynı Bileşen

Svelte’de aynı işlevselliği elde etmek çok daha basit ve doğrudan olur. State yönetimi doğrudan JavaScript değişkenleri üzerinden yapılır ve Svelte reaktif yapısı sayesinde değişiklikler otomatik olarak bileşenleri yeniden render eder:

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

<div>
<p>Count: {count}</p>
<button on:click={() => count += 1}>
Increase
</button>
</div>

Bu daha büyük projelerde dez avantaj yaratabilir fakat küçük çaplı projelerde sürecin hızlanmasına olanak tanır.

React vs Svelte: Props Kullanımı

React’ta Props Kullanımı

React’ta bir bileşene props geçirerek veri aktarımı şu şekilde yapılır:

// React'ta parent bileşen
import React from 'react';
import Greeting from './Greeting';

function App() {
return <Greeting name="Svelte" />;
}

export default App;

// React'ta child bileşen
function Greeting({ name }) {
return <p>Hello, {name}!</p>;
}

export default Greeting;

Burada Greeting bileşenine props olarak name değerini geçiyoruz ve bu props'u child bileşende kullanıyoruz.

Svelte’te Props Kullanımı

Svelte’de props kullanımı ise daha basit ve doğrudandır:

<script> import Greeting from './Greeting.svelte';</script>

<Greeting name="Svelte" />

<script> export let name;</script>

<p>Hello, {name}!</p>

Svelte’de bir değişkeni export ederek dışarıdan bileşene veri aktarılabilir. Bu, React'taki props yapısına karşılık gelir ve çok daha sade bir kullanım sunar. Aslında yine aynı yere varıyoruz. Daha komplike projelerde tercih edilmeyebilir.

React vs Svelte: Form ve Event Yönetimi

React’ta Form ve Event Yönetimi

React’ta formlarda state yönetimi ve event handling biraz daha karmaşık olabilir:

import React, { useState } from 'react';

function Form() {
const [inputValue, setInputValue] = useState('');

const handleChange = (e) => {
setInputValue(e.target.value);
};

return (
<div>
<input type="text" value={inputValue} onChange={handleChange} />
<p>Input: {inputValue}</p>
</div>
);
}

export default Form;

Her input değişikliğinde state güncellenir ve render tetiklenir.

Svelte’te Form ve Event Yönetimi

Svelte’de form kontrolü ve event yönetimi ise çok daha basit:

<script> let inputValue = '';</script>

<div>
<input type="text" bind:value={inputValue} />
<p>Input: {inputValue}</p>
</div>

Svelte’de bind ifadesi ile bir input elemanını doğrudan bir değişkene bağlayabilirsiniz. Bu, iki yönlü veri bağlamayı (two-way binding) çok basit hale getirir. Gelin burada ki ana mantığı anladığımıza göre biraz daha Svelte’e odaklanalım ve Svelte’in özelliklerini daha derinlemesine inceleyelim.

Svelte’de Lifecycle Metotları

Svelte’de lifecycle metotları, bileşenlerin yaşam döngüsü içinde belirli anlarda çalıştırmak istediğimiz kodları tanımlamamıza olanak tanır. Svelte, bu amaçla birkaç temel fonksiyon sunar:

• onMount: Bileşen DOM'a yerleştirildiğinde çalışır.
• beforeUpdate: DOM güncellenmeden hemen önce çalışır.
• afterUpdate: DOM güncellendikten hemen sonra çalışır.
• onDestroy: Bileşen DOM'dan kaldırıldığında çalışır.

onMount Örneği:

Svelte’de bir bileşenin DOM’a eklenmesiyle birlikte yapılacak işlemleri onMount fonksiyonu ile tanımlayabilirsiniz:

<script> import { onMount } from 'svelte';

let data;

onMount(async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
data = await res.json();
});</script>

<div>
{#if data}
<p>{data.title}</p>
{/if}
</div>

Bu örnekte onMount, bileşen DOM’a yerleştiği anda bir API çağrısı yapar ve sonuçları ekranda görüntüler.

Svelte’de Reaktivite

Svelte’in en güçlü özelliklerinden biri reaktiviteyi doğal olarak ele almasıdır. Bir değişkenin değerinde bir değişiklik olduğunda, Svelte bu değişikliği otomatik olarak takip eder ve ilgili bileşeni yeniden render eder.

Svelte’de reaktiviteyi tetiklemek için sadece bir değişkenin değerini güncellemek yeterlidir. Reaktif ifadeler let anahtar kelimesiyle tanımlanır ve herhangi bir ek kod yazılmasına gerek kalmaz.

Reaktif İfadeler:

<script> let count = 0;
let doubled;

// $: ifadesi, reaktif bir bloğu işaretler
$: doubled = count * 2;</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button on:click={() => count++}>Increase</button>

Bu örnekte, count değişkeni her arttığında doubled reaktif olarak güncellenir ve bu değişiklik ekrana yansır.

Svelte’de Store Kullanımı

Svelte, küçük projeler için bileşenler arası veri paylaşımı amacıyla oldukça basit bir state yönetim sistemi sunar. Bunun için store adı verilen bir yapı kullanılır. Svelte, 3 tür store sağlar: writable, readable ve derived store’lar.

Writable Store Örneği:

Writable store, bileşenler arasında güncellenebilir bir veri paylaşımı sağlar. Aşağıda bir sayaç uygulaması için writable store kullanımını görebilirsiniz:

import { writable } from 'svelte/store';

export const count = writable(0);

<script> import { count } from './store';</script>

<p>Count: {$count}</p>
<button on:click={() => count.update(n => n + 1)}>Increase</button>

Store değerine erişmek için $ işaretini kullanarak reaktif bir bağlama yapabilirsiniz. Ayrıca, count.update() ile store değerini güncelleyebilirsiniz. Gördüğünüz gibi oldukça basit.

SvelteKit: Modern Web Uygulamaları İçin Güçlü Bir Araç

Svelte’in yanı sıra, SvelteKit de güçlü bir araç olarak ön plana çıkıyor. SvelteKit, Svelte’in üzerine inşa edilmiş bir framework’tür ve özellikle modern web uygulamaları geliştirmek için tasarlanmıştır. SSR (Sunucu Tarafı Rendering), statik site oluşturma, rotalama (routing) ve çok daha fazlasını kolayca entegre edebilmenizi sağlar.

SvelteKit’in Temel Özellikleri:

• Sunucu Tarafı Rendering (SSR): SvelteKit, uygulamanın sunucu tarafında render edilmesine olanak tanır, bu da SEO dostu sayfalar ve hızlı ilk render süreleri anlamına gelir.
• Statik Site Üretimi: Dinamik verileri çekip statik HTML dosyaları oluşturmak için kullanılabilir. Bu, SvelteKit’i hem dinamik hem de statik siteler için mükemmel bir seçim haline getirir.
• API Route’ları: SvelteKit ile kendi API’larınızı oluşturabilirsiniz. Bu, tam anlamıyla bir full-stack uygulama geliştirmeyi mümkün kılar.

Svelte’in sunduğu sadelik, reaktivite ve performans avantajları ile özellikle küçük ve orta ölçekli projeler için harika bir çözüm sunar. Sonraki adım olarak SvelteKit kullanarak, daha geniş kapsamlı projelere yönelik işlevsellikler ekleyebilirsiniz.

Sonuç

Svelte, modern web geliştirme dünyasında performans ve sadelik arayanlar için mükemmel bir çözüm sunuyor. React ve Vue gibi popüler framework’lere kıyasla daha basit bir yapıya sahiptir Svelte.

Svelte’in en büyük avantajlarından biri, öğrenmesi kolay ve reaktif yapısının doğal olarak sade olmasıdır. Bir değişkenin değerini güncellemek bile bileşenleri yeniden render etmek için yeterli olurken, lifecycle metodları ve store yönetimi de basit ve sezgiseldir. Ayrıca, animasyonlar ve geçiş efektleri gibi işlevler için de dahili destek sunarak, harici kütüphanelere olan ihtiyacı ortadan kaldırır.

Özellikle küçük ve performansın kritik olduğu projelerde, düşük bellek tüketimi ve hızlı çalışma süreleri sayesinde Svelte, dikkat çeken bir seçenek haline gelir. Ancak daha büyük projeler ve geniş ekosistem desteği gereken durumlarda React ve Vue gibi framework’ler hâlâ güçlü birer alternatif olabilir.

Svelte, hem yeni başlayanlar hem de deneyimli geliştiriciler için güçlü bir araç sunarken, performans ve basitlikten ödün vermeyen bir çözüm arayanların radarında olmayı hak ediyor. Gelin şimdi “Svelte’i nasıl daha derinlemesine öğrenebiliriz bir bakalım.”

Kaynaklar

Svelte’i öğrenmek için birçok ücretsiz ve kaliteli kaynak bulunuyor. Aşağıda benim de kaynak olarak aldığım hem videolar hem de yazılar ile Svelte’i derinlemesine öğrenebilirsiniz.

YouTube Videoları

1. Svelte Crash Course (Traversy Media)

• Svelte Crash Course
• Bu video, Svelte’in temellerini anlamak ve basit bir proje oluşturmak için mükemmel bir başlangıç noktası. React ve Vue gibi popüler framework’lere aşina olanlar için Svelte’in farklılıkları net bir şekilde açıklanıyor.

2. Learn Svelte in 5 Minutes (Web Dev Simplified)

• Learn Svelte in 5 Minutes
• Svelte’in temel yapısını hızlıca öğrenmek isteyenler için kısa ve etkili bir video.

3. SvelteKit Crash Course (Net Ninja)

• SvelteKit Crash Course
• Svelte’in modern web uygulamaları için geliştirilmiş framework’ü olan SvelteKit’i detaylıca incelemek ve ilk projeni geliştirmek için bu video rehber olacaktır.

Yazılı Kaynaklar ve Makaleler

1. Svelte Resmi Dokümantasyon

• Svelte Documentation
• Svelte’in dökümanyasyonu, framework’ün her yönünü detaylıca açıklayan, başlangıç seviyesinden ileri seviyeye kadar her geliştiriciye hitap eden kapsamlı bir kaynak. Dökümanyasyon okumayı seviyorsanız başka bir kaynağa ihtiyacınız kalacağını düşünmüyorum.

2. Svelte for Beginners: A Hands-On Guide (Smashing Magazine)

• Svelte for Beginners
• Smashing Magazine’in hazırladığı bu rehber, Svelte ile çalışmaya başlamak isteyenler için adım adım bir yol haritası sunuyor. Kesinlikle göz atmalısınız.

3. Understanding Svelte Reactivity (Dev.to)

• Understanding Svelte Reactivity
• Svelte’in reaktif yapısını derinlemesine anlamak isteyenler için harika bir makale. Reaktiviteyi diğer framework’lerle karşılaştırarak Svelte’in farkını anlatıyor.

4. Svelte vs React: What’s The Difference? (LogRocket Blog)

• Svelte vs React
• Svelte ve React arasındaki farkları daha ayrıntılı bir şekilde incelemek için bu makale, framework’lerin avantajlarını ve kullanım alanlarını karşılaştırıyor. Ben de bu yazıda ki karşılaştırmalarımda kaynak olarak burayı kullandım.

Online Kurslar

1. Svelte.js — The Complete Guide (Udemy)

• Svelte.js — The Complete Guide
• Udemy’de yer alan bu kapsamlı kurs, Svelte’in temellerini ve ileri düzey özelliklerini öğrenmek isteyen geliştiriciler için ideal.

2. Learn Svelte and Sapper from Scratch (Frontend Masters)

• Learn Svelte from Scratch
• Frontend Masters tarafından sunulan bu kurs, Svelte ve onun eski framework’ü olan Sapper üzerinde yoğunlaşarak modern uygulama geliştirmeye odaklanıyor. Bakmanızı tavsiye ederim.