---
title: "Svelte ile İlk Adımlar: React ve Vue’ya Karşı Hızlı mı?"
category: "General"
date: "2024-09-14"
readTime: "8 min read"
author: "Poyraz Avsever"
slug: "svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m"
excerpt: "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 …"
coverImage: "/blog/images/svelte-ile-i-lk-ad-mlar-react-ve-vueya-kar-h-zl-m-cover.jpg"
canonicalUrl: "https://medium.com/@poyrazavsever/svelte-ile-i%CC%87lk-ad%C4%B1mlar-react-ve-vueya-kar%C5%9F%C4%B1-h%C4%B1zl%C4%B1-m%C4%B1-c5ae640145c9"
---
# 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 (
Count: {count}
);
}
export default Counter;
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:
let count = 0;Count: {count}
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 ;
}
export default App;
// React'ta child bileşen
function Greeting({ name }) {
return
Hello, {name}!
;
}
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:
import Greeting from './Greeting.svelte'; export let name;Hello, {name}!
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 (
Input: {inputValue}
);
}
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:
let inputValue = '';Input: {inputValue}
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:
import { onMount } from 'svelte';
let data;
onMount(async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
data = await res.json();
});
{#if data}
{data.title}
{/if}
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:**
let count = 0;
let doubled;
// $: ifadesi, reaktif bir bloğu işaretler
$: doubled = count \* 2;Count: {count}Doubled: {doubled}