{"id":35106,"date":"2025-11-25T17:41:05","date_gmt":"2025-11-25T14:41:05","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35106"},"modified":"2025-11-25T17:41:05","modified_gmt":"2025-11-25T14:41:05","slug":"svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/","title":{"rendered":"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m"},"content":{"rendered":"<p><body><\/p>\n<h2>Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m<\/h2>\n<p>Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evriliyor ve her ge\u00e7en g\u00fcn yeni ara\u00e7lar, k\u00fct\u00fcphaneler ve \u00e7er\u00e7eveler ortaya \u00e7\u0131k\u0131yor. Bu dinamik ortamda, geli\u015ftiricilere daha iyi performans, daha k\u00fc\u00e7\u00fck kod boyutlar\u0131 ve daha keyifli bir geli\u015ftirme deneyimi sunmay\u0131 hedefleyen Svelte, son y\u0131llar\u0131n en dikkat \u00e7ekici yeniliklerinden biri haline geldi. Geleneksel \u00e7er\u00e7evelerin aksine &#8220;derleyici&#8221; (compiler) yakla\u015f\u0131m\u0131n\u0131 benimseyen Svelte, web uygulamalar\u0131n\u0131 geli\u015ftirme ve da\u011f\u0131tma \u015feklimizi temelden de\u011fi\u015ftirmeyi vaat ediyor.<\/p>\n<p>Bu kapsaml\u0131 makalede, Svelte&#8217;in ne oldu\u011funu, neden bu kadar \u00f6zel oldu\u011funu, bir Svelte projesine nas\u0131l ba\u015flayaca\u011f\u0131n\u0131z\u0131 ve temel kavramlar\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Svelte&#8217;in benzersiz felsefesinden bile\u015fen yap\u0131s\u0131na, reaktivite modelinden veri y\u00f6netimine kadar bir\u00e7ok konuyu ele alacak, b\u00f6ylece Svelte ile kendi web uygulamalar\u0131n\u0131z\u0131 geli\u015ftirmeye ba\u015flamak i\u00e7in sa\u011flam bir temel olu\u015fturacaks\u0131n\u0131z.<\/p>\n<h2>Svelte Nedir ve Neden Farkl\u0131d\u0131r?<\/h2>\n<p>Svelte, web uygulamalar\u0131 olu\u015fturmak i\u00e7in kullan\u0131lan \u00fccretsiz ve a\u00e7\u0131k kaynakl\u0131 bir JavaScript \u00e7er\u00e7evesidir (daha do\u011frusu bir derleyicidir). React, Vue veya Angular gibi pop\u00fcler \u00e7er\u00e7evelerin aksine, Svelte \u00e7al\u0131\u015fma zaman\u0131nda (runtime) bir \u00e7er\u00e7eve kodu \u00e7al\u0131\u015ft\u0131rmaz. Bunun yerine, siz uygulaman\u0131z\u0131 derledi\u011finizde, Svelte kodunuzu do\u011frudan DOM&#8217;u g\u00fcncelleyen k\u00fc\u00e7\u00fck, h\u0131zl\u0131 ve optimize edilmi\u015f vanilla JavaScript&#8217;e d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u0130\u015fte bu &#8220;derleyici&#8221; yakla\u015f\u0131m\u0131, Svelte&#8217;i rakiplerinden ay\u0131ran temel \u00f6zelliktir.<\/p>\n<h3>Svelte&#8217;in Temel Felsefesi: Derleyici Yakla\u015f\u0131m\u0131<\/h3>\n<p>\u00c7o\u011fu modern JavaScript \u00e7er\u00e7evesi, uygulaman\u0131z\u0131 taray\u0131c\u0131da \u00e7al\u0131\u015ft\u0131ran bir &#8220;\u00e7al\u0131\u015fma zaman\u0131&#8221; (runtime) kodu i\u00e7erir. Bu \u00e7al\u0131\u015fma zaman\u0131, bile\u015fenleri y\u00f6netmek, sanal DOM&#8217;u kar\u015f\u0131la\u015ft\u0131rmak (virtual DOM diffing) ve de\u011fi\u015fiklikleri ger\u00e7ek DOM&#8217;a uygulamak gibi g\u00f6revleri \u00fcstlenir. Bu durum, uygulaman\u0131z\u0131n taray\u0131c\u0131da \u00e7al\u0131\u015f\u0131rken belirli bir ek y\u00fck ile gelmesine neden olur.<\/p>\n<p>Svelte ise bu paradigmaya meydan okur. Uygulaman\u0131z\u0131 geli\u015ftirirken yazd\u0131\u011f\u0131n\u0131z Svelte kodunu, da\u011f\u0131t\u0131ma haz\u0131r hale getirirken (build time) saf JavaScript&#8217;e derler. Bu derleme i\u015flemi sonucunda ortaya \u00e7\u0131kan JavaScript kodu, taray\u0131c\u0131da \u00e7al\u0131\u015ft\u0131r\u0131lmak \u00fczere minimal ve son derece optimize edilmi\u015f bir pakettir. Svelte, bile\u015fenlerinizi olu\u015ftururken, bu bile\u015fenlerin durumlar\u0131 de\u011fi\u015fti\u011finde DOM&#8217;u do\u011frudan ve verimli bir \u015fekilde nas\u0131l g\u00fcncelleyeceklerini bilen kodlar \u00fcretir.<\/p>\n<p>Bu yakla\u015f\u0131m\u0131n getirdi\u011fi ba\u015fl\u0131ca avantajlar \u015funlard\u0131r:<\/p>\n<p>*   <strong>Daha K\u00fc\u00e7\u00fck Paket Boyutlar\u0131:<\/strong> \u00c7al\u0131\u015fma zaman\u0131 \u00e7er\u00e7eve kodu olmad\u0131\u011f\u0131 i\u00e7in, Svelte uygulamalar\u0131n\u0131n nihai paket boyutlar\u0131 genellikle React veya Vue uygulamalar\u0131ndan \u00e7ok daha k\u00fc\u00e7\u00fckt\u00fcr. Bu, daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve daha iyi kullan\u0131c\u0131 deneyimi anlam\u0131na gelir.<br \/>\n*   <strong>Daha Y\u00fcksek Performans:<\/strong> Svelte, sanal DOM diffing mekanizmalar\u0131na ihtiya\u00e7 duymaz. De\u011fi\u015fiklikler do\u011frudan ve cerrahi bir hassasiyetle DOM&#8217;a uygulan\u0131r. Bu durum, \u00f6zellikle yo\u011fun etkile\u015fimli uygulamalarda ve d\u00fc\u015f\u00fck g\u00fc\u00e7l\u00fc cihazlarda belirgin performans avantajlar\u0131 sa\u011flar.<br \/>\n*   <strong>Geli\u015ftirici Deneyimi:<\/strong> Svelte, reaktiviteyi basit ve sezgisel bir \u015fekilde ele al\u0131r. De\u011fi\u015fken atamalar\u0131 do\u011frudan reaktif hale gelir, bu da daha az karma\u015f\u0131k kod ve daha h\u0131zl\u0131 geli\u015ftirme d\u00f6ng\u00fcleri demektir. Svelte bile\u015fenleri, tek bir <code>.svelte<\/code> dosyas\u0131nda HTML, CSS ve JavaScript&#8217;i bir araya getirerek okunabilirli\u011fi ve bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<br \/>\n*   <strong>Ger\u00e7ek Vanilla JavaScript:<\/strong> Ortaya \u00e7\u0131kan kod, Svelte&#8217;e \u00f6zel bir \u00e7al\u0131\u015fma zaman\u0131 ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olmadan saf JavaScript&#8217;tir. Bu, uygulaman\u0131z\u0131n gelecekteki JavaScript standartlar\u0131na ve taray\u0131c\u0131 teknolojilerine daha dayan\u0131kl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/p>\n<h2>Svelte Geli\u015ftirme Ortam\u0131n\u0131n Kurulumu<\/h2>\n<p>Svelte ile bir projeye ba\u015flamak olduk\u00e7a basittir. \u0130\u015fte ad\u0131m ad\u0131m kurulum s\u00fcreci:<\/p>\n<h3>\u00d6nko\u015fullar<\/h3>\n<p>Svelte projeleri olu\u015fturmak ve \u00e7al\u0131\u015ft\u0131rmak i\u00e7in sisteminizde Node.js ve npm (veya yarn\/pnpm) y\u00fckl\u00fc olmas\u0131 gerekir. Node.js&#8217;i resmi web sitesinden indirip kurabilirsiniz. Kurulumdan sonra terminalinizde a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131rarak Node.js ve npm&#8217;in do\u011fru bir \u015fekilde y\u00fcklendi\u011finden emin olun:<\/p>\n<pre><code class=\"language-bash\">node -v\nnpm -v<\/code><\/pre>\n<h3>Yeni Bir Svelte Projesi Olu\u015fturma<\/h3>\n<p>Svelte, projelerinizi ba\u015flatmak i\u00e7in resmi bir CLI arac\u0131 sunar. SvelteKit (Svelte i\u00e7in tam te\u015fekk\u00fcll\u00fc bir meta-\u00e7er\u00e7eve) ile ba\u015flamak en yayg\u0131n ve \u00f6nerilen yoldur, \u00e7\u00fcnk\u00fc SvelteKit, y\u00f6nlendirme, sunucu taraf\u0131 olu\u015fturma (SSR), statik site olu\u015fturma (SSG) ve API u\u00e7 noktalar\u0131 gibi modern web uygulamalar\u0131n\u0131n ihtiya\u00e7 duydu\u011fu bir\u00e7ok \u00f6zelli\u011fi kutudan \u00e7\u0131kar \u00e7\u0131kmaz sunar.<\/p>\n<p>Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak yeni bir SvelteKit projesi olu\u015fturabilirsiniz:<\/p>\n<pre><code class=\"language-bash\">npm create svelte@latest my-svelte-app<\/code><\/pre>\n<p>Bu komut size birka\u00e7 soru soracakt\u0131r:<\/p>\n<p>1.  <strong>Which Svelte app template?<\/strong> (<code>SvelteKit project<\/code>)<br \/>\n2.  <strong>Which SvelteKit features do you want to enable?<\/strong> (Genellikle <code>TypeScript<\/code>, <code>ESLint<\/code>, <code>Prettier<\/code> se\u00e7mek iyi bir ba\u015flang\u0131\u00e7t\u0131r.)<br \/>\n3.  <strong>Would you like to add Playwright for browser testing?<\/strong> (\u0130ste\u011fe ba\u011fl\u0131)<\/p>\n<p>Se\u00e7imlerinizi yapt\u0131ktan sonra, komut gerekli dosyalar\u0131 olu\u015fturacak ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecektir. Proje klas\u00f6r\u00fcne gidin ve geli\u015ftirme sunucusunu ba\u015flat\u0131n:<\/p>\n<pre><code class=\"language-bash\">cd my-svelte-app\nnpm install # E\u011fer kurulum s\u0131ras\u0131nda otomatik yap\u0131lmad\u0131ysa\nnpm run dev<\/code><\/pre>\n<p>Taray\u0131c\u0131n\u0131zda <code>http:\/\/localhost:5173<\/code> (veya terminalde belirtilen ba\u015fka bir port) adresine giderek \u00e7al\u0131\u015fan Svelte uygulaman\u0131z\u0131 g\u00f6rebilirsiniz.<\/p>\n<h3>Proje Yap\u0131s\u0131<\/h3>\n<p>Bir SvelteKit projesinin temel yap\u0131s\u0131 \u015funa benzer:<\/p>\n<pre><code class=\"language-\">my-svelte-app\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 app.html         # Ana HTML \u015fablonu\n\u2502   \u251c\u2500\u2500 app.css          # Global stiller\n\u2502   \u251c\u2500\u2500 routes\/          # Uygulaman\u0131z\u0131n sayfalar\u0131 ve API u\u00e7 noktalar\u0131\n\u2502   \u2502   \u251c\u2500\u2500 +layout.svelte # T\u00fcm rotalar i\u00e7in ortak d\u00fczen\n\u2502   \u2502   \u251c\u2500\u2500 +page.svelte   # Ana sayfa\n\u2502   \u2502   \u2514\u2500\u2500 about\/\n\u2502   \u2502       \u2514\u2500\u2500 +page.svelte # Hakk\u0131nda sayfas\u0131\n\u2502   \u2514\u2500\u2500 lib\/             # Yeniden kullan\u0131labilir bile\u015fenler ve yard\u0131mc\u0131lar\n\u251c\u2500\u2500 static\/              # Statik dosyalar (resimler, fontlar vb.)\n\u251c\u2500\u2500 svelte.config.js     # Svelte ve SvelteKit yap\u0131land\u0131rmas\u0131\n\u251c\u2500\u2500 package.json         # Proje ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve betikleri\n\u251c\u2500\u2500 tsconfig.json        # TypeScript yap\u0131land\u0131rmas\u0131\n\u251c\u2500\u2500 .gitignore\n\u2514\u2500\u2500 ...<\/code><\/pre>\n<p>*   <strong><code>src\/routes<\/code><\/strong>: Bu dizin, SvelteKit&#8217;in dosya tabanl\u0131 y\u00f6nlendirme sisteminin kalbidir. Her klas\u00f6r bir rotay\u0131, her <code>+page.svelte<\/code> dosyas\u0131 bir sayfay\u0131 ve her <code>+layout.svelte<\/code> dosyas\u0131 ise bir d\u00fczeni temsil eder.<br \/>\n*   <strong><code>src\/lib<\/code><\/strong>: Uygulaman\u0131zdaki yeniden kullan\u0131labilir Svelte bile\u015fenlerini, JavaScript mod\u00fcllerini ve di\u011fer yard\u0131mc\u0131 dosyalar\u0131 burada saklayabilirsiniz.<br \/>\n*   <strong><code>static<\/code><\/strong>: Bu dizin, do\u011frudan sunulacak olan statik varl\u0131klar\u0131 (resimler, ikonlar vb.) i\u00e7erir.<\/p>\n<h3>VS Code Eklentileri<\/h3>\n<p>VS Code kullan\u0131yorsan\u0131z, Svelte geli\u015ftirme deneyiminizi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirecek resmi Svelte eklentisini kurman\u0131z \u015fiddetle tavsiye edilir:<\/p>\n<p>*   <strong>Svelte for VS Code<\/strong>: S\u00f6zdizimi vurgulama, IntelliSense, formatlama ve di\u011fer dil \u00f6zelliklerini sa\u011flar.<\/p>\n<h2>Svelte Bile\u015fenlerinin Yap\u0131s\u0131<\/h2>\n<p>Svelte&#8217;de her \u015fey bir bile\u015fendir. Bir Svelte bile\u015feni, <code>.svelte<\/code> uzant\u0131l\u0131 tek bir dosyada HTML, CSS ve JavaScript kodunu bir araya getirir. Bu, bile\u015fenlerinizi daha mod\u00fcler, okunabilir ve y\u00f6netilebilir hale getirir.<\/p>\n<p>Bir \u00f6rnekle ba\u015flayal\u0131m:<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/routes\/+page.svelte -->\n<script>\n  let name = 'D\u00fcnya';\n\n  function handleClick() {\n    name = 'Svelte';\n  }\n<\/script>\n\n<main>\n  \n  <button on:click={handleClick}>Ad\u0131 De\u011fi\u015ftir<\/button>\n<\/main>\n\n<style>\n  main {\n    text-align: center;\n    padding: 1em;\n    max-width: 240px;\n    margin: 0 auto;\n  }\n  h1 {\n    color: #ff3e00;\n    text-transform: uppercase;\n    font-size: 4em;\n    font-weight: 100;\n  }\n<\/style><\/code><\/pre>\n<p>Bu \u00f6rnekte, bir Svelte bile\u015feninin \u00fc\u00e7 ana b\u00f6l\u00fcm\u00fcn\u00fc g\u00f6r\u00fcyoruz: <code><script><\/code>, <code><main><\/code> (HTML) ve <code><\/p>\n<style><\/code>.<\/p>\n<h3>Script B\u00f6l\u00fcm\u00fc (<code><script><\/code>)<\/h3>\n<p><code><script><\/code> etiketi, bile\u015fenin JavaScript mant\u0131\u011f\u0131n\u0131 i\u00e7erir. Burada de\u011fi\u015fkenler tan\u0131mlayabilir, fonksiyonlar yazabilir, ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131 kullanabilir ve props'lar\u0131 (\u00f6zellikleri) bildirebilirsiniz.<\/p>\n<h4>Reaktif De\u011fi\u015fkenler ve Atamalar<\/h4>\n<p>Svelte'in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, reaktivite modelidir. Bir de\u011fi\u015fkenin de\u011feri de\u011fi\u015fti\u011finde, Svelte otomatik olarak DOM'u g\u00fcncelleyecek kodu \u00fcretir. Di\u011fer \u00e7er\u00e7evelerde genellikle \u00f6zel metodlar (<code>setState<\/code>, <code>ref.value<\/code>) veya kancalar (<code>useState<\/code>) gerekirken, Svelte'de basit bir atama (<code>=<\/code>) yeterlidir.<\/p>\n<pre><code class=\"language-svelte\"><script>\n  let count = 0; \/\/ Bu bir reaktif de\u011fi\u015fkendir\n\n  function increment() {\n    count = count + 1; \/\/ Atama operat\u00f6r\u00fc ile reaktivite tetiklenir\n  }\n<\/script>\n\n<button on:click={increment}>Saya\u00e7: {count}<\/button><\/code><\/pre>\n<p><strong>\u00d6nemli Not:<\/strong> Svelte, atama operat\u00f6r\u00fcn\u00fc (<code>=<\/code>) kullanarak reaktiviteyi izler. Bir diziye veya nesneye do\u011frudan eleman eklemek veya \u00e7\u0131karmak, Svelte'in de\u011fi\u015fikli\u011fi alg\u0131lamas\u0131na neden olmaz. Bu durumlarda, dizinin veya nesnenin kendisini yeniden ataman\u0131z gerekir:<\/p>\n<pre><code class=\"language-svelte\"><script>\n  let items = ['Elma', 'Armut'];\n\n  function addItem() {\n    items = [...items, 'Muz']; \/\/ Yeni bir dizi olu\u015fturup atama\n  }\n\n  function removeItem(index) {\n    items = items.filter((_, i) => i !== index); \/\/ Yeni bir dizi olu\u015fturup atama\n  }\n<\/script>\n\n<ul>\n  {#each items as item}\n    <li>{item}<\/li>\n  {\/each}\n<\/ul>\n<button on:click={addItem}>\u00d6\u011fe Ekle<\/button><\/code><\/pre>\n<h4>Props Tan\u0131mlama (<code>export let<\/code>)<\/h4>\n<p>Bile\u015fenler aras\u0131 veri aktar\u0131m\u0131nda, \u00fcst bile\u015fenden alt bile\u015fene veri g\u00f6ndermek i\u00e7in \"props\" kullan\u0131l\u0131r. Svelte'de bir prop tan\u0131mlamak i\u00e7in de\u011fi\u015fkenin ba\u015f\u0131na <code>export<\/code> anahtar kelimesini eklersiniz:<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/lib\/Greeting.svelte -->\n<script>\n  export let name; \/\/ name ad\u0131nda bir prop tan\u0131mland\u0131\n  export let greeting = 'Merhaba'; \/\/ Varsay\u0131lan de\u011feri olan bir prop\n<\/script>\n\n<p>{greeting}, {name}!<\/p><\/code><\/pre>\n<p>Bu bile\u015feni ba\u015fka bir yerde kullan\u0131rken:<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/routes\/+page.svelte -->\n<script>\n  import Greeting from '$lib\/Greeting.svelte';\n  let userName = 'Ali';\n<\/script>\n\n<Greeting name={userName} \/>\n<Greeting name=\"Ay\u015fe\" greeting=\"Selam\" \/><\/code><\/pre>\n<h4>Reaktif Bildirimler (<code>$:<\/code>)<\/h4>\n<p>Bazen bir de\u011fi\u015fkenin de\u011feri, ba\u015fka bir de\u011fi\u015fkenin de\u011ferine ba\u011fl\u0131d\u0131r ve bu ba\u011f\u0131ml\u0131 de\u011fi\u015fkenin de reaktif olmas\u0131n\u0131 istersiniz. Svelte, bu durumu <code>$:<\/code> etiketi ile ele al\u0131r. Bu etiket, bir de\u011fi\u015fkenin veya ifadenin ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-svelte\"><script>\n  let firstName = 'Can';\n  let lastName = 'Y\u0131lmaz';\n\n  \/\/ firstName veya lastName de\u011fi\u015fti\u011finde fullName otomatik olarak g\u00fcncellenir\n  $: fullName = <code>${firstName} ${lastName}<\/code>;\n\n  \/\/ fullName de\u011fi\u015fti\u011finde bu konsol \u00e7\u0131kt\u0131s\u0131 tekrar \u00e7al\u0131\u015f\u0131r\n  $: console.log('Ad Soyad:', fullName);\n\n  \/\/ Bir fonksiyonu reaktif olarak \u00e7al\u0131\u015ft\u0131rmak i\u00e7in\n  $: if (fullName.length > 10) {\n    console.log('Ad Soyad uzun.');\n  }\n<\/script>\n\n<input bind:value={firstName} placeholder=\"Ad\" \/>\n<input bind:value={lastName} placeholder=\"Soyad\" \/>\n<p>Tam Ad: {fullName}<\/p><\/code><\/pre>\n<h4>Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131<\/h4>\n<p>Svelte, bile\u015fenlerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn belirli anlar\u0131nda kod \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131yan bir dizi fonksiyon sunar. Bunlar <code>svelte<\/code> mod\u00fcl\u00fcnden i\u00e7e aktar\u0131l\u0131r:<\/p>\n<p>*   <strong><code>onMount(callback)<\/code><\/strong>: Bile\u015fen DOM'a ilk kez ba\u011fland\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r. Genellikle veri \u00e7ekme (fetch data) i\u015flemleri veya DOM'a do\u011frudan eri\u015fim gerektiren \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerin ba\u015flat\u0131lmas\u0131 i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong><code>onDestroy(callback)<\/code><\/strong>: Bile\u015fen DOM'dan kald\u0131r\u0131lmadan hemen \u00f6nce \u00e7al\u0131\u015f\u0131r. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in olay dinleyicilerini temizlemek veya zamanlay\u0131c\u0131lar\u0131 durdurmak i\u00e7in idealdir.<br \/>\n*   <strong><code>beforeUpdate(callback)<\/code><\/strong>: Bile\u015fen g\u00fcncellenmeden hemen \u00f6nce, ancak DOM hen\u00fcz yans\u0131t\u0131lmadan \u00f6nce \u00e7al\u0131\u015f\u0131r.<br \/>\n*   <strong><code>afterUpdate(callback)<\/code><\/strong>: Bile\u015fen g\u00fcncellendikten ve DOM'a yans\u0131t\u0131ld\u0131ktan sonra \u00e7al\u0131\u015f\u0131r.<br \/>\n*   <strong><code>tick()<\/code><\/strong>: Bir s\u00f6zle\u015fme (Promise) d\u00f6nd\u00fcr\u00fcr ve bir sonraki DOM g\u00fcncellemesinden sonra \u00e7\u00f6z\u00fcl\u00fcr. Bir DOM g\u00fcncellemesini beklemek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<pre><code class=\"language-svelte\"><script>\n  import { onMount, onDestroy } from 'svelte';\n\n  let count = 0;\n  let interval;\n\n  onMount(() => {\n    console.log('Bile\u015fen y\u00fcklendi!');\n    interval = setInterval(() => {\n      count++;\n    }, 1000);\n\n    \/\/ Temizleme fonksiyonu d\u00f6nd\u00fcr\u00fclerek onDestroy'da \u00e7al\u0131\u015facak kod tan\u0131mlan\u0131r\n    return () => {\n      console.log('Bile\u015fen kald\u0131r\u0131l\u0131yor, interval temizleniyor.');\n      clearInterval(interval);\n    };\n  });\n\n  onDestroy(() => {\n    console.log('Bile\u015fen kald\u0131r\u0131ld\u0131!');\n  });\n<\/script>\n\n<p>Saya\u00e7: {count}<\/p><\/code><\/pre>\n<h3>HTML B\u00f6l\u00fcm\u00fc<\/h3>\n<p><code><script><\/code> ve <code><\/p>\n<style><\/code> etiketlerinin d\u0131\u015f\u0131nda kalan her \u015fey, bile\u015fenin \u015fablonunu olu\u015fturan HTML i\u00e7eri\u011fidir. Svelte, bu b\u00f6l\u00fcmde \u00f6zel \u015fablon s\u00f6zdizimleri ve direktifler sunar.<\/p>\n<h4>Interpolasyon (<code>{variable}<\/code>)<\/h4>\n<p>JavaScript de\u011fi\u015fkenlerini veya ifadelerini do\u011frudan HTML i\u00e7ine g\u00f6mmek i\u00e7in s\u00fcsl\u00fc parantezler (<code>{}<\/code>) kullan\u0131l\u0131r:<\/p>\n<pre><code class=\"language-svelte\"><script>\n  let user = { name: 'Ahmet', age: 30 };\n  let isActive = true;\n<\/script>\n\n<p>Kullan\u0131c\u0131 Ad\u0131: {user.name}<\/p>\n<p>Ya\u015f: {user.age * 2}<\/p>\n<p>Durum: {isActive ? 'Aktif' : 'Pasif'}<\/p><\/code><\/pre>\n<h4>Ko\u015fullu Renderlama (<code>{#if ...}{\/if}<\/code>)<\/h4>\n<p>Belirli ko\u015fullara ba\u011fl\u0131 olarak HTML bloklar\u0131n\u0131 g\u00f6stermek veya gizlemek i\u00e7in <code>{#if}<\/code> blo\u011fu kullan\u0131l\u0131r:<\/p>\n<pre><code class=\"language-svelte\"><script>\n  let loggedIn = true;\n  let isAdmin = false;\n<\/script>\n\n{#if loggedIn}\n  <p>Ho\u015f geldiniz, kullan\u0131c\u0131!<\/p>\n  {#if isAdmin}\n    <p>Y\u00f6netici Paneli<\/p>\n  {\/if}\n{:else if !loggedIn}\n  <p>L\u00fctfen giri\u015f yap\u0131n.<\/p>\n{:else}\n  <p>Bilinmeyen durum.<\/p>\n{\/if}<\/code><\/pre>\n<h4>Listeleri Renderlama (<code>{#each ... as item, index (key)}{\/each}<\/code>)<\/h4>\n<p>Bir dizi veya iterable \u00fczerinde d\u00f6ng\u00fc yaparak elemanlar\u0131 renderlamak i\u00e7in <code>{#each}<\/code> blo\u011fu kullan\u0131l\u0131r:<\/p>\n<pre><code class=\"language-svelte\"><script>\n  let fruits = ['Elma', 'Armut', '\u00c7ilek'];\n<\/script>\n\n<ul>\n  {#each fruits as fruit, i (fruit)}\n    <li>{i + 1}. {fruit}<\/li>\n  {\/each}\n<\/ul><\/code><\/pre>\n<p><code>key<\/code> (anahtar) de\u011feri sa\u011flamak (\u00f6rne\u011fin <code>(fruit)<\/code> veya <code>(item.id)<\/code>), Svelte'in listelerdeki \u00f6\u011feleri daha verimli bir \u015fekilde izlemesine ve g\u00fcncellemesine yard\u0131mc\u0131 olur.<\/p>\n<h4>Olay \u0130\u015fleyiciler (<code>on:event<\/code>)<\/h4>\n<p>DOM olaylar\u0131n\u0131 dinlemek i\u00e7in <code>on:<\/code> direktifi kullan\u0131l\u0131r:<\/p>\n<pre><code class=\"language-svelte\"><script>\n  function handleClick() {\n    alert('Butona t\u0131kland\u0131!');\n  }\n\n  function handleInput(event) {\n    console.log('Input de\u011feri:', event.target.value);\n  }\n<\/script>\n\n<button on:click={handleClick}>T\u0131kla<\/button>\n<input type=\"text\" on:input={handleInput} \/><\/code><\/pre>\n<p>Olay de\u011fi\u015ftiriciler (event modifiers) de kullan\u0131labilir: <code>on:click|once<\/code>, <code>on:click|preventDefault<\/code>, <code>on:keydown|enter<\/code>.<\/p>\n<h4>\u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama (<code>bind:value<\/code>)<\/h4>\n<p>Form elemanlar\u0131 ile bile\u015fen durumu aras\u0131nda iki y\u00f6nl\u00fc veri ba\u011flama sa\u011flamak i\u00e7in <code>bind:<\/code> direktifi kullan\u0131l\u0131r:<\/p>\n<pre><code class=\"language-svelte\"><script>\n  let textValue = 'Merhaba Svelte';\n  let isChecked = false;\n  let selectedOption = 'optionA';\n<\/script>\n\n<input type=\"text\" bind:value={textValue} \/>\n<p>Giri\u015f: {textValue}<\/p>\n\n<input type=\"checkbox\" bind:checked={isChecked} \/>\n<p>Durum: {isChecked ? 'Se\u00e7ili' : 'Se\u00e7ili De\u011fil'}<\/p>\n\n<select bind:value={selectedOption}>\n  <option value=\"optionA\">Se\u00e7enek A<\/option>\n  <option value=\"optionB\">Se\u00e7enek B<\/option>\n<\/select>\n<p>Se\u00e7ilen: {selectedOption}<\/p><\/code><\/pre>\n<p><code>bind:<\/code> sadece form elemanlar\u0131 i\u00e7in de\u011fil, bile\u015fen props'lar\u0131 i\u00e7in de kullan\u0131labilir: <code>bind:propName={variable}<\/code>.<\/p>\n<h4>Slotlar (<code><slot><\/code>)<\/h4>\n<p>Bile\u015fenlerinize esneklik kazand\u0131rmak ve i\u00e7eri\u011fi d\u0131\u015far\u0131dan enjekte etmelerini sa\u011flamak i\u00e7in slotlar kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/lib\/Card.svelte -->\n<div class=\"card\">\n  <slot><\/slot> <!-- Varsay\u0131lan slot -->\n<\/div>\n\n<!-- src\/routes\/+page.svelte -->\n<Card>\n  <h2>Bu bir kart ba\u015fl\u0131\u011f\u0131d\u0131r<\/h2>\n  <p>Bu da kart\u0131n i\u00e7eri\u011fi.<\/p>\n<\/Card><\/code><\/pre>\n<p>Adland\u0131r\u0131lm\u0131\u015f slotlar da mevcuttur:<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/lib\/Layout.svelte -->\n<header>\n  <slot name=\"header\"><\/slot>\n<\/header>\n<main>\n  <slot><\/slot> <!-- Varsay\u0131lan slot -->\n<\/main>\n<footer>\n  <slot name=\"footer\"><\/slot>\n<\/footer>\n\n<!-- src\/routes\/+page.svelte -->\n<Layout>\n  \n  <p>Uygulama i\u00e7eri\u011fi burada.<\/p>\n  <p slot=\"footer\">Telif Hakk\u0131 &copy; 2023<\/p>\n<\/Layout><\/code><\/pre>\n<h4><code>await<\/code> Bloklar\u0131 (<code>{#await promise}<\/code> <code>{:then value}<\/code> <code>{:catch error}<\/code>)<\/h4>\n<p>Asenkron i\u015flemleri (\u00f6rne\u011fin API \u00e7a\u011fr\u0131lar\u0131) UI'da y\u00f6netmek i\u00e7in <code>await<\/code> blo\u011fu kullan\u0131l\u0131r. Bu blok, promise'in farkl\u0131 durumlar\u0131na (beklemede, ba\u015far\u0131l\u0131, ba\u015far\u0131s\u0131z) g\u00f6re farkl\u0131 i\u00e7erikler renderlaman\u0131za olanak tan\u0131r.<\/p>\n<pre><code class=\"language-svelte\"><script>\n  async function fetchData() {\n    const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1');\n    const data = await response.json();\n    return data;\n  }\n\n  let promise = fetchData();\n<\/script>\n\n{#await promise}\n  <p>Veriler y\u00fckleniyor...<\/p>\n{:then todo}\n  <h2>Yap\u0131lacak: {todo.title}<\/h2>\n  <p>Tamamland\u0131 m\u0131? {todo.completed ? 'Evet' : 'Hay\u0131r'}<\/p>\n{:catch error}\n  <p style=\"color: red;\">Hata: {error.message}<\/p>\n{\/await}\n\n<button on:click={() => (promise = fetchData())}>Tekrar Y\u00fckle<\/button><\/code><\/pre>\n<h3>Stil B\u00f6l\u00fcm\u00fc (<code><\/p>\n<style><\/code>)<\/h3>\n<p><code><\/p>\n<style><\/code> etiketi, bile\u015feninize \u00f6zel CSS kurallar\u0131n\u0131 i\u00e7erir. Svelte, varsay\u0131lan olarak bu stilleri bile\u015fene \u00f6zel (scoped) hale getirir. Bu, bir bile\u015fende tan\u0131mlad\u0131\u011f\u0131n\u0131z stillerin di\u011fer bile\u015fenleri etkilememesini sa\u011flar, b\u00f6ylece stil \u00e7ak\u0131\u015fmalar\u0131 \u00f6nlenir.<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/lib\/Button.svelte -->\n<button>\n  <slot><\/slot>\n<\/button>\n\n<style>\n  \/<em> Bu stil sadece bu bile\u015fendeki button elementini etkiler <\/em>\/\n  button {\n    background-color: #ff3e00;\n    color: white;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n<\/style><\/code><\/pre>\n<h4>Global Stiller (<code>:global()<\/code>)<\/h4>\n<p>Bazen bir stilin global olmas\u0131n\u0131 veya bir bile\u015fenin d\u0131\u015f\u0131ndaki DOM elemanlar\u0131n\u0131 etkilemesini isteyebilirsiniz. Bu durumda <code>:global()<\/code> de\u011fi\u015ftiricisini kullanabilirsiniz:<\/p>\n<pre><code class=\"language-svelte\"><style>\n  \/<em> Bu stil sadece bu bile\u015fendeki p elementini etkiler <\/em>\/\n  p {\n    font-family: sans-serif;\n  }\n\n  \/<em> Bu stil, uygulaman\u0131n herhangi bir yerindeki h1 elementini etkiler <\/em>\/\n  :global(h1) {\n    color: darkblue;\n  }\n<\/style><\/code><\/pre>\n<h4>Preprocessors (Sass, Less, PostCSS)<\/h4>\n<p>Svelte, CSS preprocessor'lar\u0131n\u0131 (Sass, Less, Stylus) veya PostCSS gibi ara\u00e7lar\u0131 kullanman\u0131za olanak tan\u0131r. Bunlar\u0131 kullanmak i\u00e7in ilgili paketi kurman\u0131z ve <code>svelte.config.js<\/code> dosyas\u0131nda yap\u0131land\u0131rman\u0131z gerekir.<\/p>\n<p>\u00d6rne\u011fin, Sass kullanmak i\u00e7in:<\/p>\n<pre><code class=\"language-bash\">npm install -D sass<\/code><\/pre>\n<p>Ve <code>svelte.config.js<\/code> dosyan\u0131zda:<\/p>\n<pre><code class=\"language-javascript\">\/\/ svelte.config.js\nimport adapter from '@sveltejs\/adapter-auto';\nimport { vitePreprocess } from '@sveltejs\/kit\/vite';\n\n\/<em><\/em> @type {import('@sveltejs\/kit').Config} *\/\nconst config = {\n  preprocess: vitePreprocess(), \/\/ Bu sat\u0131r Sass deste\u011fi sa\u011flar\n  kit: {\n    adapter: adapter()\n  }\n};\n\nexport default config;<\/code><\/pre>\n<p>Art\u0131k <code><\/p>\n<style lang=\"scss\"><\/code> veya <code><\/p>\n<style type=\"text\/scss\"><\/code> kullanarak Sass yazabilirsiniz.<\/p>\n<h2>Svelte'de Veri Y\u00f6netimi<\/h2>\n<p>Uygulamalar b\u00fcy\u00fcd\u00fck\u00e7e, verilerin bile\u015fenler aras\u0131nda nas\u0131l aktar\u0131ld\u0131\u011f\u0131 ve payla\u015f\u0131ld\u0131\u011f\u0131 kritik hale gelir. Svelte, bu ihtiyac\u0131 kar\u015f\u0131lamak i\u00e7in \u00e7e\u015fitli mekanizmalar sunar.<\/p>\n<h3>Bile\u015fen \u0130\u00e7i Veri Y\u00f6netimi<\/h3>\n<p>Daha \u00f6nce de bahsetti\u011fimiz gibi, bile\u015fen i\u00e7indeki de\u011fi\u015fkenler basit atamalarla reaktif hale gelir. Bu, \u00e7o\u011fu k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli bile\u015fen i\u00e7in yeterlidir.<\/p>\n<h3>Bile\u015fenler Aras\u0131 \u0130leti\u015fim<\/h3>\n<h4>Props ile \u00dcstten Alta Veri Aktar\u0131m\u0131<\/h4>\n<p>\u00dcst bile\u015fenden alt bile\u015fene veri g\u00f6ndermek i\u00e7in <code>export let<\/code> ile tan\u0131mlanan props'lar kullan\u0131l\u0131r. Bu, tek y\u00f6nl\u00fc bir veri ak\u0131\u015f\u0131d\u0131r (\u00fcstten alta).<\/p>\n<h4>Olaylar (<code>createEventDispatcher<\/code>) ile Alttan \u00dcste Veri Aktar\u0131m\u0131<\/h4>\n<p>Alt bile\u015fenden \u00fcst bile\u015fene veri g\u00f6ndermek veya bir olay\u0131 bildirmek i\u00e7in <code>createEventDispatcher<\/code> kullan\u0131l\u0131r. Bu, alt bile\u015fenin bir olay\u0131 tetiklemesini ve \u00fcst bile\u015fenin bu olay\u0131 dinlemesini sa\u011flar.<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/lib\/Child.svelte -->\n<script>\n  import { createEventDispatcher } from 'svelte';\n\n  const dispatch = createEventDispatcher();\n\n  function sendMessage() {\n    dispatch('message', { text: 'Merhaba \u00fcst bile\u015fen!' });\n  }\n<\/script>\n\n<button on:click={sendMessage}>\u00dcst Bile\u015fene Mesaj G\u00f6nder<\/button><\/code><\/pre>\n<pre><code class=\"language-svelte\"><!-- src\/routes\/+page.svelte -->\n<script>\n  import Child from '$lib\/Child.svelte';\n\n  function handleMessage(event) {\n    console.log('Alt bile\u015fenden gelen mesaj:', event.detail.text);\n  }\n<\/script>\n\n<Child on:message={handleMessage} \/><\/code><\/pre>\n<h4>Context API (<code>getContext<\/code>, <code>setContext<\/code>)<\/h4>\n<p>Derin bile\u015fen a\u011fa\u00e7lar\u0131nda props'lar\u0131 her seviyeden ge\u00e7irme (prop drilling) sorununu \u00f6nlemek i\u00e7in Context API kullan\u0131l\u0131r. Bir \u00fcst bile\u015fen bir ba\u011flam (context) sa\u011flayabilir ve bu ba\u011flam, alt\u0131ndaki herhangi bir bile\u015fen taraf\u0131ndan, ka\u00e7 seviye derinde olursa olsun, al\u0131nabilir.<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/routes\/+layout.svelte (veya herhangi bir \u00fcst bile\u015fen) -->\n<script>\n  import { setContext } from 'svelte';\n\n  const user = { name: 'Gizem', role: 'Admin' };\n  setContext('userContext', user); \/\/ 'userContext' anahtar\u0131yla ba\u011flam sa\u011fland\u0131\n<\/script>\n\n<slot><\/slot><\/code><\/pre>\n<pre><code class=\"language-svelte\"><!-- src\/lib\/DeeplyNestedComponent.svelte (herhangi bir alt bile\u015fen) -->\n<script>\n  import { getContext } from 'svelte';\n\n  const user = getContext('userContext'); \/\/ Ba\u011flam al\u0131nd\u0131\n<\/script>\n\n{#if user}\n  <p>Kullan\u0131c\u0131: {user.name} ({user.role})<\/p>\n{:else}\n  <p>Kullan\u0131c\u0131 bilgisi bulunamad\u0131.<\/p>\n{\/if}<\/code><\/pre>\n<h3>Ma\u011fazalar (Stores)<\/h3>\n<p>Uygulaman\u0131z\u0131n global durumunu y\u00f6netmek i\u00e7in Svelte'in yerle\u015fik \"ma\u011fazalar\" (stores) mekanizmas\u0131 kullan\u0131l\u0131r. Ma\u011fazalar, birden fazla bile\u015fen aras\u0131nda payla\u015f\u0131lan reaktif verileri tutmak i\u00e7in basit ama g\u00fc\u00e7l\u00fc bir yol sunar.<\/p>\n<p>Svelte \u00fc\u00e7 t\u00fcr ma\u011faza sunar: <code>writable<\/code>, <code>readable<\/code> ve <code>derived<\/code>.<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/stores.js -->\nimport { writable, readable, derived } from 'svelte\/store';\n\n\/\/ Writable Store: Hem okunabilir hem de yaz\u0131labilir\nexport const count = writable(0);\n\n\/\/ Readable Store: Sadece okunabilir (genellikle d\u0131\u015far\u0131dan veri \u00e7ekmek i\u00e7in kullan\u0131l\u0131r)\nexport const time = readable(new Date(), function start(set) {\n  const interval = setInterval(() => {\n    set(new Date());\n  }, 1000);\n\n  return function stop() {\n    clearInterval(interval);\n  };\n});\n\n\/\/ Derived Store: Bir veya daha fazla ma\u011fazan\u0131n de\u011ferine ba\u011fl\u0131d\u0131r\nexport const doubledCount = derived(count, ($count) => $count * 2);<\/code><\/pre>\n<p>Ma\u011fazalar\u0131 bile\u015fenlerde kullanmak:<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/routes\/+page.svelte -->\n<script>\n  import { count, time, doubledCount } from '$lib\/stores.js';\n\n  \/\/ Otomatik abonelik i\u00e7in \"$\" \u00f6neki kullan\u0131l\u0131r\n  \/\/ Bu, bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda otomatik olarak abonelikten \u00e7\u0131kar\n  function increment() {\n    $count++; \/\/ count.update(n => n + 1) ile ayn\u0131\n  }\n<\/script>\n\n<p>Saya\u00e7: {$count}<\/p>\n<p>Zaman: {$time.toLocaleTimeString()}<\/p>\n<p>\u0130ki Kat\u0131 Saya\u00e7: {$doubledCount}<\/p>\n\n<button on:click={increment}>Artt\u0131r<\/button>\n<button on:click={() => $count--}>Azalt<\/button>\n<button on:click={() => ($count = 0)}>S\u0131f\u0131rla<\/button><\/code><\/pre>\n<p><code>$<\/code> \u00f6neki, Svelte'in \u00f6zel bir s\u00f6zdizimidir ve <code>$store<\/code> yazd\u0131\u011f\u0131n\u0131zda Svelte bunu otomatik olarak <code>store.subscribe(...)<\/code> ve <code>store.set(...)<\/code> \u00e7a\u011fr\u0131lar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu, ma\u011fazalarla \u00e7al\u0131\u015fmay\u0131 son derece kolay ve sezgisel hale getirir.<\/p>\n<h2>Svelte'de Geli\u015fmi\u015f Konulara Giri\u015f<\/h2>\n<p>Svelte'in temel \u00f6zelliklerini anlad\u0131ktan sonra, daha karma\u015f\u0131k etkile\u015fimler ve g\u00f6rsel efektler olu\u015fturman\u0131za yard\u0131mc\u0131 olacak baz\u0131 geli\u015fmi\u015f konulara g\u00f6z atal\u0131m.<\/p>\n<h3>Eylemler (Actions)<\/h3>\n<p>Eylemler, bir DOM eleman\u0131na ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 eklemenin veya \u00f6zel davran\u0131\u015flar tan\u0131mlaman\u0131n bir yoludur. Bir HTML eleman\u0131na <code>use:<\/code> direktifi ile ba\u011flan\u0131rlar.<\/p>\n<pre><code class=\"language-svelte\"><!-- src\/lib\/clickOutside.js -->\nexport function clickOutside(node, callback) {\n  const handleClick = (event) => {\n    if (!node.contains(event.target)) {\n      callback();\n    }\n  };\n\n  document.addEventListener('click', handleClick, true);\n\n  return {\n    destroy() {\n      document.removeEventListener('click', handleClick, true);\n    }\n  };\n}<\/code><\/pre>\n<pre><code class=\"language-svelte\"><!-- src\/routes\/+page.svelte -->\n<script>\n  import { clickOutside } from '$lib\/clickOutside.js';\n  let showMenu = false;\n\n  function closeMenu() {\n    showMenu = false;\n  }\n<\/script>\n\n<button on:click={() => (showMenu = !showMenu)}>Men\u00fcy\u00fc A\u00e7\/Kapat<\/button>\n\n{#if showMenu}\n  <div class=\"menu\" use:clickOutside={closeMenu}>\n    <ul>\n      <li>\u00d6\u011fe 1<\/li>\n      <li>\u00d6\u011fe 2<\/li>\n    <\/ul>\n  <\/div>\n{\/if}\n\n<style>\n  .menu {\n    border: 1px solid #ccc;\n    padding: 10px;\n    background-color: white;\n    position: absolute;\n  }\n<\/style><\/code><\/pre>\n<h3>Ge\u00e7i\u015fler (Transitions) ve Animasyonlar<\/h3>\n<p>Svelte, DOM elemanlar\u0131n\u0131n eklenmesi ve kald\u0131r\u0131lmas\u0131 s\u0131ras\u0131nda g\u00fczel ge\u00e7i\u015fler ve animasyonlar olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc yerle\u015fik ara\u00e7lar sunar.<\/p>\n<h4>Ge\u00e7i\u015fler (<code>transition:<\/code>)<\/h4>\n<p>Bir eleman\u0131n DOM'a girip \u00e7\u0131karken nas\u0131l g\u00f6r\u00fcnece\u011fini kontrol eder.<\/p>\n<pre><code class=\"language-svelte\"><script>\n  import { fade, slide } from 'svelte\/transition';\n  let showDetails = false;\n<\/script>\n\n<button on:click={() => (showDetails = !showDetails)}>Detaylar\u0131 G\u00f6ster\/Gizle<\/button>\n\n{#if showDetails}\n  <div transition:fade={{ duration: 500 }}>\n    <p>Bu detaylar yava\u015f\u00e7a belirir ve kaybolur.<\/p>\n  <\/div>\n  <div transition:slide>\n    <p>Bu detaylar yukar\u0131dan kayarak gelir ve a\u015fa\u011f\u0131 kayarak gider.<\/p>\n  <\/div>\n{\/if}<\/code><\/pre>\n<p>Svelte, <code>fade<\/code>, <code>slide<\/code>, <code>blur<\/code>, <code>fly<\/code>, <code>draw<\/code>, <code>scale<\/code> gibi bir\u00e7ok haz\u0131r ge\u00e7i\u015f fonksiyonu sa\u011flar. Kendi \u00f6zel ge\u00e7i\u015flerinizi de yazabilirsiniz.<\/p>\n<h4>Animasyonlar (<code>animate:<\/code>)<\/h4>\n<p>Listelerdeki \u00f6\u011felerin s\u0131ras\u0131 de\u011fi\u015fti\u011finde animasyonlar olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-svelte\"><script>\n  import { flip } from 'svelte\/animate';\n  let items = ['A', 'B', 'C'];\n\n  function shuffle() {\n    items = items.sort(() => Math.random() - 0.5);\n  }\n<\/script>\n\n<button on:click={shuffle}>Kar\u0131\u015ft\u0131r<\/button>\n\n{#each items as item (item)}\n  <div animate:flip={{ duration: 500 }}>{item}<\/div>\n{\/each}<\/code><\/pre>\n<h2>SvelteKit'e K\u0131sa Bir Bak\u0131\u015f<\/h2>\n<p>Makalenin ba\u015f\u0131nda bahsetti\u011fimiz gibi, SvelteKit, Svelte \u00fczerine kurulu, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in tasarlanm\u0131\u015f bir meta-\u00e7er\u00e7evedir. Next.js (React i\u00e7in) veya Nuxt.js (Vue i\u00e7in) gibi \u00e7er\u00e7evelere benzer \u015fekilde, SvelteKit bir\u00e7ok \u00f6zelli\u011fi kutudan \u00e7\u0131kar \u00e7\u0131kmaz sunarak geli\u015ftirme s\u00fcrecini basitle\u015ftirir.<\/p>\n<h3>SvelteKit Nedir ve Neden \u00d6nemlidir?<\/h3>\n<p>SvelteKit, Svelte uygulamalar\u0131n\u0131 sunucu taraf\u0131nda olu\u015fturma (SSR), statik site olu\u015fturma (SSG), API u\u00e7 noktalar\u0131 olu\u015fturma ve dosya tabanl\u0131 y\u00f6nlendirme gibi \u00f6zelliklerle zenginle\u015ftirir. Bu, Svelte'in performans ve geli\u015ftirici deneyimi avantajlar\u0131n\u0131 korurken, SEO dostu, daha h\u0131zl\u0131 y\u00fcklenen ve daha g\u00fc\u00e7l\u00fc uygulamalar olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n<p>Temel \u00d6zellikleri:<\/p>\n<p>*   <strong>Dosya Tabanl\u0131 Y\u00f6nlendirme:<\/strong> <code>src\/routes<\/code> dizinindeki dosya ve klas\u00f6r yap\u0131n\u0131z otomatik olarak uygulaman\u0131z\u0131n rotalar\u0131n\u0131 belirler.<br \/>\n*   <strong>Sunucu Taraf\u0131 Olu\u015fturma (SSR):<\/strong> Sayfalar, taray\u0131c\u0131ya g\u00f6nderilmeden \u00f6nce sunucuda olu\u015fturulur, bu da daha h\u0131zl\u0131 ilk y\u00fckleme s\u00fcreleri ve daha iyi SEO sa\u011flar.<br \/>\n*   <strong>Statik Site Olu\u015fturma (SSG):<\/strong> Uygulaman\u0131z\u0131 derleme zaman\u0131nda tamamen statik HTML, CSS ve JavaScript dosyalar\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<br \/>\n*   <strong>API U\u00e7 Noktalar\u0131:<\/strong> <code>+server.js<\/code> veya <code>+server.ts<\/code> dosyalar\u0131 olu\u015fturarak do\u011frudan uygulaman\u0131z i\u00e7inde API u\u00e7 noktalar\u0131 tan\u0131mlayabilirsiniz.<br \/>\n*   <strong>Veri Y\u00fckleme (<code>+page.server.js<\/code> veya <code>+page.js<\/code>):<\/strong> Sayfa bile\u015fenleri i\u00e7in veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 ayr\u0131 dosyalarda tan\u0131mlayarak sunucu veya istemci taraf\u0131nda veri y\u00fcklemeyi kolayla\u015ft\u0131r\u0131r.<br \/>\n*   <strong>Adapt\u00f6rler:<\/strong> Uygulaman\u0131z\u0131 Vercel, Netlify, Cloudflare Workers gibi \u00e7e\u015fitli platformlara da\u011f\u0131tmay\u0131 kolayla\u015ft\u0131ran adapt\u00f6rler sunar.<\/p>\n<h3>SvelteKit ile Proje Olu\u015fturma ve Temel Yap\u0131<\/h3>\n<p>Zaten <code>npm create svelte@latest<\/code> komutuyla bir SvelteKit projesi olu\u015fturmu\u015ftuk. Temel proje yap\u0131s\u0131 \u015f\u00f6yledir:<\/p>\n<p>*   <strong><code>src\/routes\/+page.svelte<\/code><\/strong>: Ana sayfa bile\u015feni.<br \/>\n*   <strong><code>src\/routes\/+layout.svelte<\/code><\/strong>: T\u00fcm sayfalarda veya belirli bir rota grubunda payla\u015f\u0131lan d\u00fczen bile\u015feni.<br \/>\n*   <strong><code>src\/routes\/blog\/[slug]\/+page.svelte<\/code><\/strong>: Dinamik bir rota \u00f6rne\u011fi. <code>[slug]<\/code> k\u0131sm\u0131, URL'deki dinamik bir parametreyi yakalar.<br \/>\n*   <strong><code>src\/routes\/api\/data\/+server.js<\/code><\/strong>: <code>\/api\/data<\/code> adresinde eri\u015filebilen bir API u\u00e7 noktas\u0131. \u0130\u00e7inde <code>GET<\/code>, <code>POST<\/code> gibi HTTP metodlar\u0131n\u0131 d\u0131\u015fa aktarabilirsiniz.<\/p>\n<p>SvelteKit, Svelte geli\u015ftirmenin gelece\u011fi olarak kabul edilir ve yeni projeler i\u00e7in varsay\u0131lan \u00f6neridir.<\/p>\n<h2>Svelte ile Performans Optimizasyonu<\/h2>\n<p>Svelte, do\u011fas\u0131 gere\u011fi olduk\u00e7a performansl\u0131d\u0131r \u00e7\u00fcnk\u00fc derleyici yakla\u015f\u0131m\u0131 sayesinde minimal ve optimize edilmi\u015f kod \u00fcretir. Ancak, her uygulamada oldu\u011fu gibi, Svelte uygulamalar\u0131nda da dikkate al\u0131nmas\u0131 gereken baz\u0131 optimizasyon noktalar\u0131 vard\u0131r:<\/p>\n<p>*   <strong>Gereksiz Hesaplamalardan Ka\u00e7\u0131nma:<\/strong> Reaktif bildirimleri (<code>$:<\/code>) kullan\u0131rken, ba\u011f\u0131ml\u0131l\u0131klar\u0131n ger\u00e7ekten de\u011fi\u015fti\u011finden emin olun. Karma\u015f\u0131k hesaplamalar\u0131 yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda \u00e7al\u0131\u015facak \u015fekilde optimize edin.<br \/>\n*   <strong><code>{#key ...}<\/code> Blo\u011fu:<\/strong> Listeleri renderlarken <code>{#each ... as item (item.id)}<\/code> \u015feklinde benzersiz bir anahtar (key) sa\u011flamak, Svelte'in DOM'daki \u00f6\u011feleri daha verimli bir \u015fekilde izlemesine ve g\u00fcncellemesine yard\u0131mc\u0131 olur. Bu, \u00f6zellikle liste elemanlar\u0131n\u0131n s\u0131raland\u0131\u011f\u0131, eklendi\u011fi veya \u00e7\u0131kar\u0131ld\u0131\u011f\u0131 durumlarda \u00f6nemlidir.<br \/>\n*   <strong>Lazy Loading (Tembel Y\u00fckleme):<\/strong> SvelteKit, route tabanl\u0131 kod b\u00f6lme (code splitting) \u00f6zelli\u011fini otomatik olarak sunar. Bu, kullan\u0131c\u0131n\u0131n yaln\u0131zca o anda ihtiya\u00e7 duydu\u011fu kodun y\u00fcklenmesini sa\u011flar. B\u00fcy\u00fck bile\u015fenleri veya mod\u00fclleri dinamik olarak i\u00e7e aktararak (<code>import(...)<\/code>) manuel olarak da tembel y\u00fckleme yapabilirsiniz.<br \/>\n*   <strong>G\u00f6rsel Optimizasyonlar:<\/strong> Resimlerinizi ve di\u011fer medya dosyalar\u0131n\u0131z\u0131 optimize edin. Do\u011fru boyutland\u0131rma ve formatlar\u0131 (WebP, AVIF) kullan\u0131n.<br \/>\n*   <strong>Minimal JavaScript:<\/strong> Svelte, zaten minimal JS \u00fcretir, ancak \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneler kullan\u0131rken boyutlar\u0131na dikkat edin ve yaln\u0131zca ihtiyac\u0131n\u0131z olan k\u0131s\u0131mlar\u0131 i\u00e7e aktarmaya \u00e7al\u0131\u015f\u0131n.<\/p>\n<h2>Sonu\u00e7 ve \u0130leri Ad\u0131mlar<\/h2>\n<p>Svelte, modern web geli\u015ftirme d\u00fcnyas\u0131na taze ve yenilik\u00e7i bir bak\u0131\u015f a\u00e7\u0131s\u0131 getiriyor. Derleyici tabanl\u0131 yakla\u015f\u0131m\u0131 sayesinde, di\u011fer pop\u00fcler \u00e7er\u00e7evelerin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 baz\u0131 performans ve paket boyutu zorluklar\u0131n\u0131 a\u015farak geli\u015ftiricilere daha h\u0131zl\u0131, daha k\u00fc\u00e7\u00fck ve daha keyifli uygulamalar olu\u015fturma imkan\u0131 sunuyor. Reaktivite modelinin basitli\u011fi ve tek dosyal\u0131 bile\u015fen yap\u0131s\u0131, \u00f6\u011frenme e\u011frisini k\u0131salt\u0131rken geli\u015ftirici verimlili\u011fini art\u0131r\u0131yor.<\/p>\n<p>E\u011fer daha \u00f6nce React, Vue veya Angular gibi \u00e7er\u00e7evelerle \u00e7al\u0131\u015ft\u0131ysan\u0131z, Svelte'in farkl\u0131 felsefesine al\u0131\u015fman\u0131z biraz zaman alabilir. Ancak, temel kavramlar\u0131 kavrad\u0131\u011f\u0131n\u0131zda, Svelte'in ne kadar g\u00fc\u00e7l\u00fc ve e\u011flenceli oldu\u011funu g\u00f6receksiniz. \u00d6zellikle SvelteKit ile birle\u015fti\u011finde, tam te\u015fekk\u00fcll\u00fc, performansl\u0131 ve SEO dostu web uygulamalar\u0131 geli\u015ftirmek i\u00e7in eksiksiz bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n<p>Svelte ile yolculu\u011funuza devam etmek i\u00e7in atabilece\u011finiz baz\u0131 ileri ad\u0131mlar:<\/p>\n<p>*   <strong>SvelteKit'e Derinlemesine Dal\u0131n:<\/strong> SvelteKit'in resmi dok\u00fcmantasyonu, SSR, SSG, API rotalar\u0131, veri y\u00fckleme ve da\u011f\u0131t\u0131m gibi konular\u0131 ayr\u0131nt\u0131l\u0131 olarak ele al\u0131r. Ger\u00e7ek d\u00fcnya uygulamalar\u0131 geli\u015ftirmek i\u00e7in SvelteKit'i \u00f6\u011frenmek vazge\u00e7ilmezdir.<br \/>\n*   <strong>Resmi Dok\u00fcmantasyonu \u0130nceleyin:<\/strong> Svelte ve SvelteKit'in resmi dok\u00fcmantasyonlar\u0131 son derece kapsaml\u0131, g\u00fcncel ve anla\u015f\u0131l\u0131rd\u0131r. Herhangi bir sorunuz oldu\u011funda ba\u015fvuraca\u011f\u0131n\u0131z ilk kaynak buras\u0131 olmal\u0131d\u0131r.<br \/>\n*   <strong>Toplulu\u011fa Kat\u0131l\u0131n:<\/strong> Svelte toplulu\u011fu olduk\u00e7a aktif ve yard\u0131mseverdir. Discord sunucular\u0131na, forumlara veya Stack Overflow'a kat\u0131larak sorular\u0131n\u0131z\u0131 sorabilir, ba\u015fkalar\u0131na yard\u0131mc\u0131 olabilir ve en son geli\u015fmeleri takip edebilirsiniz.<br \/>\n*   <strong>K\u00fc\u00e7\u00fck Projeler Geli\u015ftirin:<\/strong> \u00d6\u011frenmenin en iyi yolu, bildiklerinizi uygulamakt\u0131r. Basit bir yap\u0131lacaklar listesi, bir hava durumu uygulamas\u0131 veya bir blog gibi k\u00fc\u00e7\u00fck projeler geli\u015ftirerek Svelte bilginizi peki\u015ftirebilirsiniz.<br \/>\n*   <strong>A\u00e7\u0131k Kaynak Projeleri \u0130nceleyin:<\/strong> GitHub'da Svelte ile geli\u015ftirilmi\u015f a\u00e7\u0131k kaynak projelere g\u00f6z atarak, di\u011fer geli\u015ftiricilerin Svelte'i nas\u0131l kulland\u0131\u011f\u0131n\u0131 ve en iyi uygulamalar\u0131 nas\u0131l uygulad\u0131\u011f\u0131n\u0131 g\u00f6rebilirsiniz.<\/p>\n<p>Svelte, web geli\u015ftirme alan\u0131nda kesinlikle izlenmesi gereken bir teknoloji. Sundu\u011fu benzersiz avantajlar ve h\u0131zla b\u00fcy\u00fcyen ekosistemi ile gelecekte daha da pop\u00fcler hale gelece\u011fi tahmin ediliyor. Bu makale, Svelte d\u00fcnyas\u0131na ilk ad\u0131m\u0131n\u0131z\u0131 atman\u0131z i\u00e7in sa\u011flam bir ba\u015flang\u0131\u00e7 noktas\u0131 sunmu\u015f olmay\u0131 umuyor. Ba\u015far\u0131lar dileriz!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m\nWeb geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evriliyor ve her ge\u00e7en g\u00fcn yeni ara\u00e7lar,","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-35106","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m\" \/>\n<meta property=\"og:description\" content=\"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evriliyor ve her ge\u00e7en g\u00fcn yeni ara\u00e7lar,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-25T14:41:05+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m\",\"datePublished\":\"2025-11-25T14:41:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/\"},\"wordCount\":3339,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/\",\"name\":\"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-25T14:41:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/","og_locale":"tr_TR","og_type":"article","og_title":"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m","og_description":"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evriliyor ve her ge\u00e7en g\u00fcn yeni ara\u00e7lar,","og_url":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-25T14:41:05+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m","datePublished":"2025-11-25T14:41:05+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/"},"wordCount":3339,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/","url":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/","name":"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-25T14:41:05+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svelte-ile-baslangic-modern-web-gelistirmede-yeni-bir-yaklasim\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Svelte ile Ba\u015flang\u0131\u00e7: Modern Web Geli\u015ftirmede Yeni Bir Yakla\u015f\u0131m"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35106"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35106\/revisions"}],"predecessor-version":[{"id":35107,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35106\/revisions\/35107"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}