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

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.

Al_Yapay_Zeka

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

Spring Boot ile API Geliştirmenin Altın Kuralları: En İyi Uygulamalar ve İpuçları

** API Geliştirmenin Temelleri: Neden Önemlidir? Bir yazılım geliştiricisi olarak, farklı sistemlerin birbirleriyle iletişim kurması gerektiğinde API’lerin önemiyle karşılaşırsınız. RESTful API’ler, sistemlerin birbirleriyle haberleşmesini sağlayan, modern...

Yapay Zeka ve Geleceğin İş Dünyası: İnsanların Yerine Geçebilecek Mi?

Dijital dönüşüm, her geçen gün hızla şekil almaya devam ederken, insanlar her zamankinden daha fazla merak ediyor: "Yapay zeka, insanların yerini alabilir mi?" Belki de daha önce filmlerde gördüğümüz o uzak gelecekteki robotlar, artık birer bilim kurgu...

Yapay Zeka ile Web Tasarımında Devrim: Figma, Sketch ve Adobe XD'nin Yerini Alabilecek AI Araçları

**Web tasarımı, yıllar içinde önemli bir dönüşüm geçirdi. Geçmişte, tasarımcılar Figma, Sketch ve Adobe XD gibi yazılımlarla projelerini şekillendirirken, günümüzde yapay zeka (AI) destekli araçlar hızla popülerlik kazanıyor. Peki, bu yeni nesil AI araçları,...

Web Sitenizin Hızını Artırmak İçin 10 Gizli WordPress İpucu

Web sitenizin hızını artırmak, sadece kullanıcı deneyimini iyileştirmekle kalmaz, aynı zamanda Google sıralamanız üzerinde de doğrudan etki yapar. Eğer siteniz yavaşsa, ziyaretçileriniz beklemekten sıkılabilir ve bu da yüksek bir bounce rate'e (hemen...

Web Sitenizde Hız Optimizasyonu İçin En İyi 10 İleri Düzey Teknik

Web sitenizin hızını artırmak, ziyaretçi deneyimini iyileştirmek ve SEO sıralamanızı yükseltmek için önemli bir adımdır. Ancak çoğu web yöneticisi, yalnızca temel hız iyileştirme tekniklerine odaklanır. Oysa işin içine biraz daha derinlemesine girdiğinizde,...

Yapay Zeka ile Etkileşim: İnsanın Dijital Evcil Hayvanı Olabilir mi?

---Yapay zeka, son yıllarda hayatımızın her alanına sızmış, hayatı daha kolay ve verimli hale getiren bir teknoloji haline gelmişken, bir soru kafalarda giderek daha fazla yer etmeye başlıyor: *Yapay zeka, bir gün dijital evcil hayvanımız olabilir mi?*...