Svelte ile İlk Adım: Nasıl Kurulur ve İlk Uygulama Nasıl Yazılır?

Svelte ile web geliştirme dünyasında ilk adımlarınızı atmak isteyenler için kapsamlı bir rehber. Bu yazı, Svelte'in nasıl kurulacağı ve ilk basit uygulamanın nasıl yazılacağına dair adım adım bilgiler sunuyor.

BFS

Web dünyasında her geçen gün yeni bir teknoloji doğuyor ve geliştiriciler olarak bizler, hangi teknolojiyi kullanmamız gerektiğini belirlerken sürekli bir seçim yapmak zorunda kalıyoruz. Ancak bazen, bir teknoloji o kadar sade ve kullanımı o kadar eğlenceli oluyor ki, onu denemeye başladığınızda neden daha önce keşfetmediğinize şaşırıyorsunuz. İşte Svelte, böyle bir teknoloji. JavaScript dünyasında oldukça popüler olmaya başlayan Svelte, frontend geliştirmeyi yepyeni bir seviyeye taşıyor.

Svelte, geleneksel frontend framework'lerine kıyasla çok farklı bir yaklaşım sergiliyor. Bu yazıda, Svelte'in ne olduğunu, nasıl kurulduğunu ve ilk basit uygulamanızı nasıl yazacağınızı adım adım keşfedeceğiz. Hazırsanız, bu keyifli yolculuğa başlayalım!

Svelte Nedir ve Neden Kullanmalı?



Svelte, temelde bir JavaScript framework'ü olsa da, en büyük farkı *run-time* yani çalışma zamanında değil, *build-time* yani derleme zamanında çalışmasıdır. Bu, Svelte uygulamalarının daha hızlı çalışmasını ve daha az kaynak tüketmesini sağlar. Geleneksel framework'ler, uygulamanın tarayıcıda çalışması sırasında büyük miktarda kod ve bileşen yüklerken, Svelte bu kodları derleme sırasında optimize eder ve yalnızca gerekeni kullanır. Bu nedenle Svelte ile yapılan projeler genellikle daha hızlıdır.

Svelte Nasıl Kurulur?



Şimdi, Svelte'i bilgisayarınıza nasıl kuracağınızı adım adım inceleyelim.

Adım 1: Node.js ve NPM'i Kurun

Svelte, Node.js ile çalışır. Bu nedenle, ilk olarak bilgisayarınızda Node.js'in kurulu olması gerekiyor. Node.js'i indirip kurmak için [Node.js'in resmi web sitesine](https://nodejs.org) gidin ve en son sürümü indirin.

Kurulum tamamlandığında, terminal veya komut istemcisini açarak şu komutla Node.js ve NPM'in doğru şekilde yüklendiğini kontrol edebilirsiniz:


node -v
npm -v


Adım 2: Svelte Projesi Oluşturun

Node.js ve NPM yüklendikten sonra, bir terminal penceresi açarak aşağıdaki komutla Svelte projesi oluşturabilirsiniz:


npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install


Burada `npx degit sveltejs/template my-svelte-app` komutu, Svelte'in şablon dosyalarını indirerek yeni bir proje oluşturur. `cd my-svelte-app` komutuyla proje klasörüne geçer ve `npm install` komutuyla gerekli tüm bağımlılıkları yükler.

Adım 3: Geliştirme Sunucusunu Başlatın

Proje kurulumunu tamamladıktan sonra, yerel geliştirme sunucusunu başlatabilirsiniz. Şu komutla bunu yapabilirsiniz:


npm run dev


Bu komut, Svelte projenizi geliştirme ortamında çalıştıracaktır. Tarayıcınızda [http://localhost:5000](http://localhost:5000) adresine giderek, uygulamanızın nasıl göründüğünü görebilirsiniz.

İlk Svelte Uygulamanızı Yazalım



Artık Svelte'in temellerini öğrendiğimize göre, gelin ilk uygulamamızı yazmaya başlayalım! Bu uygulama, basit bir "Merhaba Dünya" uygulaması olacak.

Adım 1: Ana Bileşeni Düzenleyin

Svelte, her şeyi bileşenler halinde düzenler. Projenizdeki `src/App.svelte` dosyasını açın. Bu dosya, uygulamanızın ana bileşenidir. İçeriğini şu şekilde değiştirebilirsiniz:




Merhaba {name}!



Adım 2: Uygulamayı Çalıştırın

Yukarıdaki kodu yazdıktan sonra, terminalde hala `npm run dev` komutunu çalıştırarak geliştirme sunucusunu başlatabilirsiniz. Şimdi tarayıcınızda tekrar [http://localhost:5000](http://localhost:5000) adresine gidin ve "Merhaba Dünya" yazısını görebilirsiniz. "Svelte ile Tanış" butonuna tıkladığınızda ise isminiz "Svelte" olarak değişecektir. Ne kadar basit, değil mi?

Sonuç



Svelte, minimalizm ve hız arayan geliştiriciler için harika bir tercih. Kendi başına oldukça basit bir yapıya sahip olmasına rağmen, güçlü özellikleri sayesinde oldukça geniş ve kapsamlı uygulamalar geliştirebilirsiniz. Ayrıca, geliştirici deneyimini kolaylaştıran yapısı sayesinde, hızlıca öğrenebilir ve projelerinizi rahatça geliştirebilirsiniz.

Svelte ile ilk uygulamanızı yazmak gerçekten eğlenceliydi, değil mi? Şimdi, farklı özellikler ekleyerek uygulamanızı daha da geliştirebilir ve Svelte'in sunduğu olanaklardan faydalanabilirsiniz.

İpucu: Svelte, sadece frontend tarafında değil, aynı zamanda sunucu tarafında da kullanılabilir. Eğer Svelte ile daha derinlemesine çalışmak isterseniz, SvelteKit'i incelemenizi öneririm.

İlgili Yazılar

Benzer konularda diğer yazılarımız

NetBeans Debugging Başlatılmıyor – Çözüm Adımları ile Sorunu Gidermek

Her programcı, özellikle de yeni başlayanlar, zaman zaman NetBeans gibi popüler bir IDE kullanırken sorunlarla karşılaşabilirler. Bu sorunlar arasında en sinir bozucusu, şüphesiz "Debugging Başlatılmıyor" hatasıdır. Ancak merak etmeyin, bu hata tek bir...

ASP.NET Core ile Mobil Uygulama Geliştirme: Cross-Platform Web ve Mobil Uygulama Birleştirme

Günümüzde mobil uygulamalar hayatımızın ayrılmaz bir parçası haline geldi. Akıllı telefonlarımızda geçirdiğimiz zamanın büyük bir kısmını mobil uygulamalar sayesinde geçiriyoruz. Peki, bir mobil uygulama geliştirirken karşılaştığımız zorlukları nasıl...

Yapay Zeka ile Veri Gizliliği: Yeni Nesil Şifreleme Yöntemleri ve Geleceği

** Veri gizliliği, dijital çağın en önemli konularından biri haline geldi. Günümüz dünyasında her an bir dijital iz bırakıyoruz: sosyal medya paylaşımlarından, online alışverişlere kadar. Bu dijital ayak izlerinin korunması, hem bireysel hem de kurumsal...