Vite ve Kemal ile modern, hızlı ve dinamik web uygulamaları geliştirmeye hazır mısınız? Bu kapsamlı rehberle adım adım kurulumu, entegrasyonu ve en iyi uygulamaları keşfedin. Frontend ve backend güçlerini birleştirerek projelerinizi bir sonraki seviyeye taşıyın.

Günümüz web geliştirme dünyası, sürekli değişen teknolojiler ve artan kullanıcı beklentileri nedeniyle karmaşık bir hal almıştır. Geliştiriciler, hem hızlı prototipleme yapabilen hem de üretimde yüksek performans sunan araçlara ihtiyaç duymaktadır. Eski nesil bundler’lar ve sunucu framework’leri, genellikle yavaş derleme süreleri ve karmaşık yapılandırmalarla boğuşurken, yeni nesil araçlar bu zorluklara yenilikçi çözümler getiriyor. İşte bu noktada, frontend için Vite ve backend için Kemal, bu karmaşıklığı aşmak ve geliştirme deneyimini optimize etmek için harika bir ikili oluşturuyor.

Modern web uygulamaları, genellikle bir frontend (kullanıcının gördüğü arayüz) ve bir backend (veritabanı işlemleri, API’ler ve iş mantığı) olmak üzere iki ana bileşenden oluşur. Bu iki bileşenin sorunsuz bir şekilde entegre olması, hem geliştirme sürecinde verimlilik hem de son ürünün performansı açısından kritik öneme sahiptir. Vite, geliştirme hızını ve deneyimini ön planda tutan bir frontend build aracı iken, Kemal, Crystal programlama dilinin gücüyle yüksek performanslı ve hızlı backend hizmetleri sunan bir web framework’üdür. Bu makalede, bu iki teknolojiyi bir araya getirerek nasıl güçlü ve verimli web uygulamaları geliştirebileceğinizi adım adım inceleyeceğiz. Amaç, sıfırdan başlayan bir geliştiricinin bile bu entegrasyonu rahatlıkla yapabilmesini sağlamak ve daha deneyimli kullanıcılara ileri düzey ipuçları sunmaktır.

Frontend Dünyasında Vite Neden Öne Çıkıyor?

Vite, “Fransızca hızlı” anlamına gelen bir kelimedir ve adının hakkını fazlasıyla verir. Geleneksel bundler’lar (Webpack, Rollup gibi) genellikle tüm uygulamanızı derleyip tek bir paket haline getirirken, Vite tarayıcının yerel ES modül yeteneklerini kullanarak bu süreci tamamen değiştirir. Bu, özellikle geliştirme ortamında devasa bir hız farkı yaratır. Modül tabanlı geliştirme yaklaşımı sayesinde, sadece değişen modüller yeniden derlenir, bu da anında Hot Module Replacement (HMR) sağlaması anlamına gelir. Başka bir deyişle, kodunuzda yaptığınız değişiklikler neredeyse anında tarayıcıda yansır, bu da geliştirme akışını inanılmaz derecede hızlandırır.

Vite’ın öne çıkan bazı temel özellikleri şunlardır:

• Anında Sunucu Başlangıcı: Geliştirme sunucusunu milisaniyeler içinde başlatır. Büyük projelerde bile bekleme süresi neredeyse yoktur.
• Talep Üzerine Derleme: Yalnızca tarayıcı tarafından talep edilen modülleri derler, bu da başlangıç yükleme sürelerini önemli ölçüde azaltır.
• Hızlı Modül Değişimi (HMR): Uygulamanızın durumunu kaybetmeden kodunuzdaki değişiklikleri anında yansıtır. Bu, kullanıcı arayüzü geliştirirken paha biçilmez bir özelliktir.
• Esnek Yapılandırma: Çoğu senaryo için sıfır yapılandırma gerektirir, ancak ihtiyacınız olduğunda oldukça esnek bir API ile kolayca özelleştirilebilir.
• Modern Tarayıcı Desteği: En son JavaScript özelliklerini destekler ve üretim için Rollup tabanlı bir derleme süreci sunar, bu da optimize edilmiş ve hafif çıktılar sağlar.

Bu özellikler sayesinde Vite, React, Vue, Svelte gibi popüler frontend kütüphaneleri ve framework’leri ile kusursuz bir uyum içinde çalışır. Geliştiriciler, karmaşık yapılandırma dosyalarıyla uğraşmak yerine, projenin kendisini geliştirmeye odaklanabilirler. Bu da, modern web geliştirmenin karşılaştığı en büyük zorluklardan biri olan zaman kaybını minimuma indirir ve genel geliştirici deneyimini önemli ölçüde iyileştirir.

Backend Gücü: Crystal ve Kemal Framework’ü Nedir?

Backend tarafında ise, Crystal programlama dili ve onun üzerine inşa edilmiş Kemal web framework’ü, performansı ve geliştirici dostu yapısıyla dikkat çekiyor. Crystal, Ruby dilinin zarif sözdizimini, C dilinin hızıyla birleştirmeyi hedefleyen açık kaynaklı, statik olarak tipleştirilmiş, derlenmiş bir dildir. Bu kombinasyon, geliştiricilere Ruby benzeri bir üretkenlik sunarken, derlenmiş dil olmanın getirdiği üstün performans avantajlarından faydalanma imkanı sağlar.

Kemal, Crystal için hafif, hızlı ve esnek bir web framework’üdür. Sinatra veya Express.js gibi mikro framework’lere benzer bir yapıyı benimser ve API tabanlı uygulamalar veya küçük web servisleri geliştirmek için idealdir. Kemal’in temel özellikleri şunlardır:

• Yüksek Performans: Crystal’ın derlenmiş doğası sayesinde, Kemal uygulamaları inanılmaz derecede hızlı çalışır ve düşük bellek tüketimi sunar. Bu, yüksek trafikli uygulamalar için kritik bir avantajdır.
• Kolay Kullanım: Sezgisel ve minimalist bir API sunar. Rota tanımlamaları, request/response işlemleri oldukça basittir, bu da geliştirme sürecini hızlandırır.
• Genişletilebilirlik: Middleware’ler ve shard’lar (Crystal paketleri) aracılığıyla kolayca genişletilebilir. Bu sayede, uygulamanıza ihtiyaç duyduğunuz özellikleri kolayca entegre edebilirsiniz.
• Crystal Ekosistemi: Crystal’ın zengin kütüphane ekosisteminden (shard’lar) faydalanır. Veritabanı bağlantıları, ORM’ler, test araçları gibi birçok hazır çözüm mevcuttur.
• Güvenli ve Sağlam: Statik tipleme, derleme zamanında birçok hatanın yakalanmasını sağlayarak daha güvenli ve sağlam uygulamalar geliştirilmesine yardımcı olur.

Vite ile Kemal’i birleştirdiğimizde, frontend tarafında hızlı geliştirme ve HMR avantajlarını elde ederken, backend tarafında Crystal’ın ve Kemal’in getirdiği yüksek performans, güvenilirlik ve düşük kaynak tüketimi ile ölçeklenebilir bir yapıya kavuşuruz. Bu, hem geliştirme sürecini keyifli hale getirir hem de son kullanıcıya akıcı ve hızlı bir deneyim sunar. Bu güçlü kombinasyon, modern web projeleriniz için sağlam bir temel oluşturmanıza olanak tanır.

Sıfırdan Vite ve Kemal Projesi Nasıl Başlatılır?

Herhangi bir modern web uygulaması geliştirme sürecinde ilk adım, gerekli araçları kurmak ve projenin temel iskeletini oluşturmaktır. Vite ve Kemal entegrasyonu için de bu durum geçerlidir. Bu bölümde, hem frontend hem de backend geliştirme için ihtiyaç duyacağımız ortamları hazırlayacak ve temel proje yapılarını oluşturacağız. Bu adımları dikkatlice takip ederek, projenizin temelini sağlam bir şekilde atabilirsiniz.

Gerekli Ortam Kurulumları Nelerdir?

Vite ve Kemal ile çalışmaya başlamadan önce sisteminizde belirli yazılımların kurulu olması gerekmektedir. İşte adım adım kurulum rehberi:

1. Crystal Dili ve Shard Paket Yöneticisi Kurulumu:

   Crystal’ı kurmanın birkaç yolu vardır. Kullandığınız işletim sistemine göre en uygun yöntemi seçmelisiniz. Genellikle resmi dokümantasyonda önerilen yöntemleri takip etmek en iyisidir.

   • Linux (Ubuntu/Debian örneği):

     Öncelikle GPG anahtarını ve Crystal deposunu ekleyin:

     curl -fsSL https://crystal-lang.org/install.sh | sudo bash

     Veya:

     sudo apt-get update
     sudo apt-get install -y software-properties-common
     sudo apt-add-repository ppa:crystal-lang/ppa
     sudo apt-get update
     sudo apt-get install crystal

     Kurulumu kontrol edin:

     crystal -v

     Bu komut Crystal versiyonunu göstermelidir. Shard, Crystal ile birlikte gelir.

   • macOS (Homebrew ile):

     Homebrew yüklü değilse, Homebrew web sitesinden kurulumunu yapın. Ardından:

     brew install crystal-lang

     Kurulumu kontrol edin:

     crystal -v

   • Windows:

     Windows için Crystal kurulumu biraz daha karmaşık olabilir. Genellikle WSL (Windows Subsystem for Linux) kullanmak veya resmi web sitesindeki yönergeleri takip etmek en iyi yoldur. WSL ile yukarıdaki Linux adımlarını izleyebilirsiniz.

   Uzman İpucu: Crystal kurulumu sırasında bir sorun yaşarsanız, resmi Crystal dokümantasyonunu (crystal-lang.org) kontrol etmek en güncel ve doğru bilgiyi sağlayacaktır.
2. Node.js ve npm/yarn Kurulumu:

   Vite bir Node.js tabanlı bir araç olduğundan, Node.js ve npm (Node Package Manager) veya yarn'ın sisteminizde kurulu olması gerekir. Bunlar genellikle birlikte gelir.

   • Tüm İşletim Sistemleri:

     Node.js'in resmi web sitesinden (nodejs.org) LTS (Long Term Support) sürümünü indirip kurmanız önerilir. Bu, npm'i de otomatik olarak yükleyecektir.

     Kurulumu kontrol edin:

     node -v
     npm -v

     Dilerseniz Yarn paket yöneticisini de kurabilirsiniz (npm ile de kurabilirsiniz):

     npm install -g yarn

     Ardından:

     yarn -v

Bu temel kurulumları tamamladıktan sonra, hem backend (Kemal) hem de frontend (Vite) projelerinizi oluşturmaya hazırsınız demektir. Bu adımlar, geliştirme ortamınızın düzgün çalıştığından emin olmak için kritik öneme sahiptir.

Temel Kemal Projesi Oluşturma Adımları Nelerdir?

Gerekli ortam kurulumlarını tamamladıktan sonra, Kemal ile ilk backend projemizi oluşturalım. Kemal, projeleri hızlıca başlatmak için kemal init gibi özel bir komut sağlamaz; bunun yerine, manuel olarak bir shard.yml dosyası oluşturarak ve bağımlılıkları ekleyerek başlarız. Bu, size projenin yapısı üzerinde tam kontrol sağlar.

İlk olarak, projeniz için yeni bir dizin oluşturun ve içine girin:

mkdir my_kemal_app
cd my_kemal_app

Şimdi, Crystal projelerinin bağımlılıklarını ve temel bilgilerini tanımlayan shard.yml dosyasını oluşturalım. Bu dosya, projemizin Kemal'e bağımlı olduğunu belirtecektir:

# shard.yml
name: my_kemal_app
version: 0.1.0

targets:
  my_kemal_app:
    main: src/my_kemal_app.cr

dependencies:
  kemal:
    github: kemalcr/kemal
    version: ~> 1.0

Bu shard.yml dosyasını oluşturduktan sonra, bağımlılıkları yüklemek için Shard paket yöneticisini kullanın:

shards install

Bu komut, Kemal framework'ünü ve diğer gerekli bağımlılıkları lib dizinine indirip derleyecektir. Ardından, Kemal uygulamanızın ana kodunu içerecek src dizinini ve my_kemal_app.cr dosyasını oluşturalım:

mkdir src

Şimdi src/my_kemal_app.cr dosyasını oluşturun ve içine aşağıdaki kodu ekleyin:

require "kemal"

Kemal.run

Bu kod, Kemal uygulamasını başlatır ancak henüz hiçbir rota tanımlanmamıştır. Basit bir "Hello World" rotası ekleyelim:

require "kemal"

get "/" do
  "Merhaba, Vite & Kemal Dünyası!"
end

get "/api/hello" do
  content_type "application/json"
  { message: "API'den merhaba!" }.to_json
end

Kemal.run

Bu kodla, / adresine yapılan GET isteklerinde tarayıcıya "Merhaba, Vite & Kemal Dünyası!" mesajını gönderen basit bir ana sayfa ve /api/hello adresine yapılan GET isteklerinde JSON formatında bir mesaj döndüren bir API endpoint'i tanımlamış olduk. Artık Kemal uygulamanızı çalıştırabilirsiniz:

crystal run src/my_kemal_app.cr

Uygulama genellikle http://0.0.0.0:3000 adresinde başlayacaktır. Tarayıcınızdan bu adresi ziyaret ederek uygulamanızın çalıştığını doğrulayabilirsiniz. Bu adımlar, Kemal backend'inizin temelini atar ve frontend ile entegrasyon için bir başlangıç noktası sağlar. Ayrıca bir API endpoint'i tanımlayarak frontend'in bu backend ile nasıl iletişim kuracağına dair bir örnek sunmuş olduk.

Vite Frontend Projesi Nasıl Oluşturulur?

Kemal backend projemizi hazırladıktan sonra, sıra frontend kısmına, yani Vite projemizi oluşturmaya geldi. Vite, farklı frontend framework'leri için şablonlar sunar. Bu örnekte, basitliği nedeniyle Vanilla JavaScript'i (veya Vue'yu, tercihe göre) kullanarak bir Vite projesi oluşturacağız. Frontend projemizi genellikle backend projesinin dışında ayrı bir dizinde tutmak iyi bir uygulamadır, ancak daha sonra entegrasyonu kolaylaştırmak için ana projemizin içinde bir alt dizinde de tutabiliriz. Şimdilik my_kemal_app dizininin bir kardeş dizini olarak my_vite_app oluşturalım.

Ana projenizin kök dizinine geri dönün ve yeni bir Vite projesi oluşturun:

cd .. # Eğer my_kemal_app içindeysek bir üst dizine çık
npm create vite@latest my_vite_app -- --template vanilla # veya --template vue, react, svelte vb.
cd my_vite_app

Bu komut, my_vite_app adında yeni bir dizin oluşturacak ve içine temel bir Vite projesi kuracaktır. Komut çalıştırıldığında size bazı seçenekler sunabilir (örn. proje adı, framework seçimi). vanilla şablonunu seçerek devam edelim. Kurulum tamamlandıktan sonra, yeni oluşturulan proje dizinine geçin ve bağımlılıkları yükleyin:

npm install # veya yarn

Bağımlılıklar yüklendikten sonra, Vite geliştirme sunucusunu başlatabilirsiniz:

npm run dev # veya yarn dev

Vite, genellikle http://localhost:5173 gibi bir adreste geliştirme sunucusunu başlatacaktır. Tarayıcınızda bu adresi ziyaret ettiğinizde, temel Vite uygulamanızın çalıştığını görmelisiniz. Şimdi, my_vite_app/index.html dosyasını ve my_vite_app/main.js veya my_vite_app/src/main.js (şablona göre değişebilir) dosyasını inceleyelim. index.html temel HTML yapısını içerirken, main.js ise uygulamanın başlangıç noktasıdır.

Frontend uygulamamızın Kemal backend ile iletişim kurabilmesi için main.js içine basit bir API çağrısı ekleyelim:

// my_vite_app/main.js (veya src/main.js)
import './style.css'

document.querySelector('#app').innerHTML = 
Vite + Kemal Entegrasyonu
  API'den Veri Al
  


document.getElementById('fetchApiButton').addEventListener('click', async () => {
  try {
    const response = await fetch('http://localhost:3000/api/hello'); // Kemal backend API adresi
    const data = await response.json();
    document.getElementById('apiResponse').textContent = API Yanıtı: ${data.message};
  } catch (error) {
    console.error('API çağrısı sırasında bir hata oluştu:', error);
    document.getElementById('apiResponse').textContent = 'API çağrısı başarısız oldu.';
  }
});

Yukarıdaki kodda, bir düğmeye tıklandığında Kemal backend'imizdeki /api/hello endpoint'ine bir GET isteği gönderiyoruz. Bu kod parçacığı, frontend ve backend'in ayrı ayrı nasıl çalıştığını ve nasıl birbirleriyle iletişim kurmaya başlayacaklarını gösterir. Geliştirme sürecinde, hem Kemal sunucusunu hem de Vite geliştirme sunucusunu aynı anda çalıştırmanız gerekecektir. Bu temel kurulum, entegrasyonun bir sonraki adımları için sağlam bir temel oluşturur.

Vite ve Kemal Entegrasyonu Nasıl Yapılır?

Frontend (Vite) ve backend (Kemal) projelerimizi ayrı ayrı çalıştırıp test ettik. Şimdi bu iki dünyanın nasıl bir araya getirileceğini, yani entegrasyonu konuşacağız. Entegrasyonun ana hedefi, Kemal'in hem API isteklerini ele alması hem de Vite tarafından üretilen statik frontend dosyalarını sunmasıdır. Bu, uygulamanızın hem geliştirme hem de üretim ortamında tutarlı bir şekilde çalışmasını sağlar.

Kemal'in Statik Dosyaları Sunması İçin Neler Yapmalıyız?

Üretim ortamında, Vite tarafından derlenen tüm frontend dosyaları (HTML, CSS, JavaScript, resimler vb.) genellikle dist adında bir dizine yerleştirilir. Kemal'in bu dosyaları sunabilmesi için, uygulamanızda bu dist dizinini statik dosya kaynağı olarak belirtmeniz gerekir. Bu, Kemal'in gelen isteklere önce statik dosya olarak bakmasını, bulamazsa rotaları işlemesini sağlar.

Öncelikle, Vite projenizin package.json dosyasına bir build script'i eklediğinizden emin olun. Zaten varsayılan olarak olmalıdır:

// my_vite_app/package.json
{
  "name": "my_vite_app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build", // Bu komut dist dizinini oluşturacak
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.0.8"
  }
}

Vite projenizin kök dizininde npm run build komutunu çalıştırarak, /my_vite_app/dist dizininin oluşturulduğunu göreceksiniz. Bu dizin, üretim için optimize edilmiş frontend dosyalarını içerir.

Şimdi Kemal uygulamamızın src/my_kemal_app.cr dosyasını, bu dist dizinindeki dosyaları sunacak şekilde güncelleyelim. Kemal'in statik dosyaları sunabilmesi için Kemal::StaticFileHandler'ı kullanmalıyız. Önemli bir nokta, frontend projemizin my_kemal_app ile aynı kök dizinde olduğunu varsayarak dosya yolunu doğru ayarlamaktır. Eğer my_vite_app dizini my_kemal_app dizininin bir alt dizini olsaydı yol farklı olurdu. Bizim yapımızda şu anda my_kemal_app ve my_vite_app kardeş dizinler. Bu nedenle, my_kemal_app içinden ../my_vite_app/dist şeklinde bir yol kullanmalıyız.

require "kemal"

# Statik dosyaların bulunduğu dizin
# Frontend projemiz ana Kemal projemizin bir üst dizinindeki my_vite_app klasörünün içindeki dist klasörü
static_files_path = File.expand_path("../my_vite_app/dist", __DIR__)

# Statik dosyaları sunan middleware'i ekle
# Bu middleware, gelen isteklerin yolunu statik_files_path içinde arar.
# Eğer bir dosya bulursa, onu sunar ve isteği sonlandırır.
# Bulamazsa, isteği bir sonraki middleware'e veya rotaya devreder.
Kemal.config.add_handler Kemal::StaticFileHandler.new(static_files_path)

# Tüm diğer yollar (API yolları ve SPA fallback)
# Eğer bir statik dosya bulunamazsa ve rota tanımı da yoksa,
# genellikle ana index.html dosyasını döndürerek SPA yönlendirmesini sağlarız.
# Bu, tarayıcıda doğrudan bir URL girildiğinde veya sayfa yenilendiğinde
# frontend yönlendiricisinin devreye girmesi için önemlidir.
get "/*" do |env|
  file_path = File.join(static_files_path, "index.html")
  env.response.content_type = "text/html"
  File.read(file_path)
end

# API rotaları
get "/api/hello" do
  content_type "application/json"
  { message: "API'den merhaba!" }.to_json
end

Kemal.run

Bu kod parçası, my_kemal_app'i hem bir API sunucusu hem de statik dosya sunucusu olarak görev yapacak şekilde dönüştürür. get "/*" rotası, diğer rotalar veya statik dosyalar tarafından yakalanmayan tüm istekler için index.html dosyasını döndürerek, tek sayfa uygulamalarının (SPA) yönlendirme mekanizmasının çalışmasını sağlar. Artık Kemal uygulamanızı çalıştırıp http://localhost:3000 adresine gittiğinizde, Vite tarafından derlenmiş frontend uygulamanızı görmelisiniz. API çağrısı da sorunsuz bir şekilde çalışacaktır.

Geliştirme Ortamında Dinamik Entegrasyon Nasıl Sağlanır?

Üretim ortamında Kemal'in statik dosyaları sunması mantıklı olsa da, geliştirme sırasında her değişiklikte Vite projesini build etmek verimli değildir. Geliştirme ortamında, Vite kendi geliştirme sunucusunu (HMR ile) çalıştırırken, Kemal sadece API endpoint'lerini sunmalıdır. Frontend uygulamasının Kemal API'lerine ulaşabilmesi için genellikle bir proxy ayarı yapılır.

Vite, geliştirme sunucusunda proxy ayarlarına izin verir. Bu sayede, frontend uygulamanızda yapılan /api/* şeklindeki istekler, aslında Kemal backend sunucunuza yönlendirilir. Bu, hem CORS sorunlarını engeller hem de geliştirme sürecini basitleştirir.

Vite projenizin kök dizininde (my_vite_app) bir vite.config.js veya vite.config.ts dosyası oluşturun (eğer yoksa) veya mevcut olanı güncelleyin:

// my_vite_app/vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // Kemal backend sunucunuzun adresi
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api'), // Opsiyonel, path'i olduğu gibi bırakır
      },
      // Eğer başka API yollarınız varsa buraya ekleyebilirsiniz
    },
    port: 5173, // Vite dev server'ın çalışacağı port
  },
  build: {
    outDir: resolve(__dirname, '../my_kemal_app/my_vite_app_dist'), // Üretim build'ının çıkacağı dizin
    // Bu yolu, Kemal projenizin statik dosyaları sunacağı dizine göre ayarlayın.
    // Örneğin, Kemal projenizin kök dizininde 'public' diye bir klasör varsa burayı 'public' yapabilirsiniz.
    // Veya Kemal'in statik dosya yolunu '../my_vite_app/dist' olarak ayarlayabilirsiniz.
    // Makale başındaki örneğe sadık kalmak için, Kemal'in ../my_vite_app/dist yoluna bakacağını varsayalım.
    // Bu durumda burası dist olmalı.
  }
})

Yukarıdaki vite.config.js dosyasında, server.proxy altına /api önekiyle gelen tüm isteklerin http://localhost:3000 adresindeki Kemal sunucusuna yönlendirileceğini belirttik. Bu sayede, frontend kodunuzda fetch('/api/hello') şeklinde bir çağrı yaptığınızda, Vite geliştirme sunucusu bu isteği Kemal'e iletecek ve yanıtı size geri döndürecektir. Artık my_vite_app/main.js dosyasındaki API çağrısını doğrudan /api/hello olarak güncelleyebilirsiniz:

// my_vite_app/main.js
// ...
document.getElementById('fetchApiButton').addEventListener('click', async () => {
  try {
    const response = await fetch('/api/hello'); // Proxy sayesinde doğrudan /api adresini kullanabiliriz
    const data = await response.json();
    document.getElementById('apiResponse').textContent = API Yanıtı: ${data.message};
  } catch (error) {
    console.error('API çağrısı sırasında bir hata oluştu:', error);
    document.getElementById('apiResponse').textContent = 'API çağrısı başarısız oldu.';
  }
});
// ...

Geliştirme ortamında çalışırken yapmanız gerekenler:

1. Bir terminalde Kemal uygulamanızı başlatın:

   crystal run src/my_kemal_app.cr

2. Başka bir terminalde Vite geliştirme sunucunuzu başlatın (my_vite_app dizininde):

   npm run dev

Bu şekilde, Vite'ın hızlı HMR özelliklerinden faydalanırken, API istekleriniz için Kemal backend'inizi kullanmaya devam edebilirsiniz. Bu dinamik entegrasyon, geliştirme sürecinizi çok daha verimli ve keyifli hale getirecektir. Unutmayın, bu proxy ayarları sadece geliştirme ortamı için geçerlidir. Üretim ortamında, Kemal doğrudan Vite'ın dist klasöründeki statik dosyaları sunar ve API isteklerini kendi rotaları üzerinden ele alır.

Üretim Ortamı İçin Optimizasyon ve Dağıtım Stratejileri Nelerdir?

Uygulamanızı geliştirip test ettikten sonra sıra üretim ortamına dağıtmaya gelir. Üretim ortamı için temel farklılıklar, Vite'ın statik dosyaları derleyip optimize etmesi ve Kemal'in bu derlenmiş dosyaları hızlı ve güvenilir bir şekilde sunmasıdır. Ayrıca, performans ve güvenlik gibi konular da bu aşamada daha kritik hale gelir.

Vite Build Süreci ve Optimizasyon

Üretim için Vite projenizi derlemek oldukça basittir. Vite, Rollup'ı kullanarak statik dosyalarınızı optimize eder, sıkıştırır ve tarayıcı önbelleklemesini kolaylaştıracak şekilde isimlendirir.

Vite projenizin kök dizininde (my_vite_app) aşağıdaki komutu çalıştırın:

npm run build # veya yarn build

Bu komut, dist adında bir dizin oluşturacak ve içine HTML, CSS, JavaScript, resimler gibi tüm frontend kaynaklarınızı optimize edilmiş bir şekilde yerleştirecektir. Bu dosyalar, boyut olarak küçültülmüş, tarayıcı performansı için ayarlanmış ve üretimde kullanılmaya hazır hale getirilmiştir.

Kemal ile Üretim Dağıtımı ve Statik Dosyaları Sunma

Kemal tarafında ise, yukarıda bahsedilen statik dosya sunma mekanizması üretim için de geçerlidir. Kemal uygulamanızın src/my_kemal_app.cr dosyasındaki Kemal::StaticFileHandler ayarının doğru olduğundan emin olun. Özellikle static_files_path değişkeninin, Vite'ın derlediği dist dizinine işaret ettiğinden emin olun. Örneğin:

# src/my_kemal_app.cr
# ...
static_files_path = File.expand_path("../my_vite_app/dist", __DIR__)
Kemal.config.add_handler Kemal::StaticFileHandler.new(static_files_path)
# ...

Bu ayar sayesinde, Kemal gelen istekleri önce dist dizininde arayacak, bulamazsa rotaları işleyecektir. / veya diğer bilinmeyen yollara yapılan istekler için index.html'i döndürme mantığı da SPA'lar için kritik öneme sahiptir.

Kemal uygulamanızı üretim için derlemek, performansı daha da artıracaktır. Crystal derleyicisi, kodu makine koduna çevirerek maksimum hız ve düşük bellek tüketimi sağlar:

crystal build src/my_kemal_app.cr --release -o my_kemal_app_production

Bu komut, my_kemal_app_production adında optimize edilmiş bir ikili dosya oluşturur. Uygulamanızı çalıştırmak için sadece bu ikili dosyayı kullanın:

./my_kemal_app_production

Bu, bağımlılıkları derleme zamanında paketin içine dahil eder ve daha hafif, bağımsız bir dağıtım paketi oluşturur.

Vaka Analizi: Basit Bir ToDo Uygulaması

Gerçek dünya senaryosu olarak, bir ToDo listesi uygulamasını ele alalım. Frontend'i Vite ile, backend'i ise Kemal ile geliştirdik.

Geliştirme Aşaması:

1. Bir terminalde crystal run src/my_kemal_app.cr ile Kemal backend'i başlatırız. Kemal, /api/todos gibi endpoint'ler sunar.
2. Başka bir terminalde npm run dev ile Vite frontend'i başlatırız. Vite'ın vite.config.js dosyasındaki proxy ayarları sayesinde, frontend'deki fetch('/api/todos') istekleri otomatik olarak Kemal backend'e yönlendirilir.
3. Vite'ın HMR özelliği sayesinde, frontend'de yaptığımız herhangi bir stil veya mantık değişikliği anında tarayıcıda belirir.

Üretim Aşaması:

1. Önce my_vite_app dizininde npm run build komutunu çalıştırarak frontend dosyalarını my_vite_app/dist dizinine derleriz.
2. Ardından, my_kemal_app dizininde crystal build src/my_kemal_app.cr --release -o my_kemal_app_production komutuyla Kemal backend'i üretim için derleriz. Bu derleme, static_files_path'ın my_vite_app/dist'i gösterdiğinden emin olmalıdır.
3. ./my_kemal_app_production komutuyla Kemal sunucusunu başlatırız. Kemal, hem /api/todos isteklerini işler hem de my_vite_app/dist dizinindeki optimize edilmiş frontend dosyalarını sunar. Bu şekilde, tek bir sunucu süreci hem frontend hem de backend isteklerini ele alarak dağıtımı ve yönetimi basitleştirir.

Bu strateji, modern SPA (Single Page Application) mimarileri için oldukça yaygın ve etkilidir. Kemal ve Vite'ın bu entegrasyonu, geliştirme hızını ve son ürünün performansını optimize ederek tam teşekküllü ve verimli bir web uygulaması oluşturmanıza olanak tanır.

İleri Düzey İpuçları ve En İyi Uygulamalar Nelerdir?

Vite ve Kemal entegrasyonunun temelini attıktan sonra, projenizi daha da güçlendirecek ve geliştirme sürecinizi optimize edecek ileri düzey ipuçları ve en iyi uygulamalara değinelim. Bu bölümde, güvenlik, performans ve geliştirici deneyimini artıracak bazı önemli konuları ele alacağız.

API Entegrasyonunda Güvenlik ve Performans Nasıl Artırılır?

API'ler, uygulamanızın kalbidir ve bu nedenle güvenlikleri ve performansları kritik öneme sahiptir. Kemal tabanlı API'lerinizde bu konuları ele almak için birkaç strateji bulunmaktadır:

1. Kimlik Doğrulama ve Yetkilendirme (Authentication & Authorization):
   • JWT (JSON Web Tokens): Modern SPA'lar ve API tabanlı uygulamalar için popüler bir kimlik doğrulama yöntemidir. Kullanıcı giriş yaptığında Kemal, bir JWT oluşturur ve bunu frontend'e (Vite uygulamasına) gönderir. Frontend bu token'ı sonraki tüm API isteklerinde "Authorization" başlığında (Bearer token olarak) gönderir. Kemal, her isteği işlerken bu token'ı doğrulayarak kullanıcının kimliğini ve yetkilerini kontrol eder. Crystal için JWT kütüphaneleri (örneğin jwt shard'ı) mevcuttur.
   • Middleware Kullanımı: Kemal'de custom middleware'ler oluşturarak belirli API rotalarına erişimi kısıtlayabilirsiniz. Örneğin, her isteğin başında JWT'yi kontrol eden bir middleware yazarak yetkisiz erişimleri engelleyebilirsiniz.

   # Örnek JWT doğrulama middleware'ı
   require "kemal"
   require "json_web_token" # JWT shard'ı kullandığınızı varsayalım
   
   Kemal.before do |env|
     if env.request.path.starts_with?("/api/secure")
       auth_header = env.request.headers["Authorization"]
       if auth_header && auth_header.starts_with?("Bearer ")
         token = auth_header.split(" ").last
         begin
           # JWT doğrulama ve payload'ı decode etme
           payload = JSONWebToken.decode(token, ENV["JWT_SECRET_KEY"]) # Gizli anahtarınızı ENV'den alın
           env["current_user_id"] = payload["user_id"] # Kullanıcı bilgisini env'ye ekle
         rescue JSONWebToken::VerificationError, JSON::ParseException
           env.response.status_code = 401 # Yetkilendirme hatası
           env.halt
         end
       else
         env.response.status_code = 401 # Yetkilendirme başlığı eksik
         env.halt
       end
     end
   end
   
   get "/api/secure/data" do |env|
     user_id = env["current_user_id"]
     content_type "application/json"
     { message: "Gizli veriye eriştin, kullanıcı ID: #{user_id}" }.to_json
   end

2. CORS (Cross-Origin Resource Sharing):

   Geliştirme ortamında Vite proxy'si CORS sorunlarını çözse de, üretimde frontend ve backend farklı domainlerde (veya portlarda) çalışıyorsa CORS sorunları ortaya çıkabilir. Kemal tarafında uygun CORS başlıklarını (Origin, Methods, Headers) ayarlamanız gerekir. Kemal için hazır CORS middleware'leri (kemal-cors shard'ı gibi) kullanabilirsiniz.

   # Kemal CORS middleware örneği
   require "kemal"
   require "kemal-cors" # Kemal-CORS shard'ı kullandığınızı varsayalım
   
   # Kemal.config.add_handler Kemal::CORSHandler.new(origin: "*", methods: "GET, POST, PUT, DELETE, OPTIONS")
   # Veya daha spesifik:
   Kemal.config.add_handler Kemal::CORSHandler.new(
     origin: ["http://localhost:5173", "https://yourproductionfrontend.com"],
     methods: "GET, POST, PUT, DELETE",
     headers: "Content-Type, Authorization",
     max_age: 86400 # 24 saat
   )

3. Veritabanı Entegrasyonu ve Optimizasyonu:

   Kemal ile PostgreSQL, MySQL gibi veritabanlarına bağlanmak için Avram veya Granite gibi ORM'leri kullanabilirsiniz. Veritabanı sorgularını optimize etmek, indeksler kullanmak ve gereksiz veri çekiminden kaçınmak API performansını önemli ölçüde artıracaktır.

   Uzman İpucu: Veritabanı bağlantı havuzu kullanmak, her istek için yeni bir bağlantı oluşturmanın getirdiği maliyeti azaltarak API yanıt sürelerini hızlandırır.

Geliştirme Sürecini Hızlandıracak Otomatik Yenileme ve Hot Module Replacement (HMR) Nasıl Kullanılır?

Vite'ın en büyük avantajlarından biri, olağanüstü hızlı HMR yeteneğidir. HMR, kodunuzda değişiklik yaptığınızda sayfanın tamamını yeniden yüklemek yerine, sadece değişen modülleri günceller. Bu, özellikle karmaşık kullanıcı arayüzleri geliştirirken uygulamanın durumunu koruyarak zaman kazandırır.

• Vite Geliştirme Sunucusu: npm run dev komutuyla çalıştırdığınızda Vite zaten HMR'yi otomatik olarak etkinleştirir. Frontend kodunuzda (JavaScript, CSS, Vue/React bileşenleri) yaptığınız her değişiklik anında tarayıcıya yansır.
• Frontend Geliştirme Akışı:

  Frontend tarafında bileşenler geliştirirken, Vite'ın HMR'sinden maksimum fayda sağlamak için modüler bir yapı kullanın. Her bileşeni ayrı bir dosya olarak tutun. Bir bileşende değişiklik yaptığınızda, yalnızca o bileşen güncellenir, bu da uygulamanın geri kalanının durumunu bozmaz.

• Kemal Yeniden Başlatma:

  Kemal tarafında bir kod değişikliği yaptığınızda, maalesef Crystal derlenmiş bir dil olduğu için HMR gibi otomatik bir yeniden yükleme mekanizması yoktur. Değişikliklerinizin etkili olması için Kemal sunucusunu elle yeniden başlatmanız gerekir (CTRL+C yapıp tekrar crystal run src/my_kemal_app.cr çalıştırmak gibi). Geliştirme sürecini kolaylaştırmak için nodemon (Node.js tabanlı) veya watchexec (Rust tabanlı) gibi araçlar kullanarak Kemal uygulamanızın kaynak dosyalarını izleyebilir ve değişiklik algılandığında otomatik olarak yeniden başlatılmasını sağlayabilirsiniz.

  # Watchexec kurulumu (örneğin Homebrew ile)
  brew install watchexec
  
  # Kemal projenizi izleyip değişiklikte yeniden başlatma
  watchexec -r -e cr "crystal run src/my_kemal_app.cr"

  Bu, backend geliştirirken manuel yeniden başlatma ihtiyacını ortadan kaldırır ve frontend'deki HMR deneyimine benzer bir akıcılık sağlar.

Mobil Uyumlu Tasarım İçin Nelere Dikkat Etmeliyiz?

Modern web uygulamalarının vazgeçilmez bir özelliği mobil uyumlu (responsive) olmasıdır. Vite ve Kemal ile geliştirdiğiniz uygulamaların mobil cihazlarda da harika görünmesini ve çalışmasını sağlamak için bazı genel prensiplere dikkat etmelisiniz:

1. Meta Viewport Etiketi:

   Tüm HTML sayfalarınızda, etiketi içinde aşağıdaki meta viewport etiketinin bulunduğundan emin olun. Bu etiket, tarayıcılara sayfanın cihaz genişliğine göre ölçeklenmesi gerektiğini söyler:

   Vite'ın varsayılan şablonları genellikle bunu içerir, ancak kontrol etmekte fayda var.

2. Duyarlı CSS (Responsive CSS):

   Frontend uygulamanızın stilini oluştururken, CSS Media Query'leri, Flexbox ve CSS Grid gibi duyarlı tasarım tekniklerini aktif olarak kullanın. Bu sayede, uygulamanız farklı ekran boyutlarına ve yönlendirmelerine (portre/yatay) dinamik olarak uyum sağlayabilir.

   /* Örnek bir medya sorgusu */
   .container {
     width: 90%;
     margin: 0 auto;
   }
   
   @media (min-width: 768px) {
     .container {
       width: 70%;
     }
   }
   
   @media (min-width: 1200px) {
     .container {
       max-width: 1100px;
     }
   }

3. Görsel ve Medya Optimizasyonu:

   Resimler, videolar ve diğer medya dosyaları mobil cihazlarda sayfa yükleme hızını önemli ölçüde etkileyebilir. Responsive resimler (srcset, sizes nitelikleri), modern formatlar (WebP, AVIF) ve lazy loading teknikleri kullanarak performansı artırın. Vite, statik varlıkları optimize etme konusunda zaten bazı yeteneklere sahiptir.

4. Dokunmatik Odaklı Tasarım:

   Mobil kullanıcılar dokunmatik ekranları kullanır. Düğmelerin, bağlantıların ve diğer etkileşimli öğelerin yeterince büyük ve parmakla dokunulabilecek kadar aralıklı olduğundan emin olun. Fareyle üzerine gelme (hover) durumlarının mobil cihazlarda çalışmadığını unutmayın.

5. Performans:

   Mobil cihazlar genellikle daha sınırlı işlem gücüne ve ağ bağlantısına sahiptir. Hem frontend (Vite optimizasyonu) hem de backend (Kemal performansı) tarafında performansa öncelik verin. Minifikasyon, kod bölme (code splitting) ve sunucu tarafı önbellekleme gibi teknikler bu konuda size yardımcı olacaktır.

Bu ileri düzey ipuçları ve en iyi uygulamalar, Vite ve Kemal ile geliştirdiğiniz web uygulamalarını sadece işlevsel değil, aynı zamanda güvenli, performanslı ve kullanıcı dostu hale getirmenize yardımcı olacaktır.

Sonuç: Neden Vite ve Kemal Birlikte Güçlü Bir İkili?

Bu makalede, modern web geliştirme dünyasının hızla değişen taleplerine yanıt veren Vite ve Kemal ikilisinin nasıl kurulacağını ve entegre edileceğini ayrıntılı olarak inceledik. Gerekli ortam kurulumlarından başlayarak, temel frontend ve backend projelerinin oluşturulması, geliştirme ve üretim ortamlarındaki entegrasyon stratejileri ve son olarak ileri düzey ipuçları ve en iyi uygulamalara kadar her adımı ele aldık. Gördüğümüz gibi, bu iki teknoloji bir araya geldiğinde, geliştiricilere inanılmaz bir verimlilik ve son kullanıcılara üstün bir deneyim sunuyor.

Vite, modern JavaScript ekosistemindeki en hızlı ve en geliştirici dostu frontend build araçlarından biridir. Anında sunucu başlangıcı, talep üzerine derleme ve Hot Module Replacement (HMR) gibi özellikleri sayesinde frontend geliştirme süreçlerini radikal bir şekilde hızlandırır. Karmaşık yapılandırmalarla boğuşmak yerine, doğrudan uygulamanızın kullanıcı arayüzünü oluşturmaya odaklanmanızı sağlar.

Diğer yandan Kemal, Crystal programlama dilinin getirdiği performans avantajlarıyla öne çıkan hafif ve hızlı bir web framework'üdür. Ruby'nin zarafetini C'nin hızıyla birleştiren Crystal sayesinde, Kemal tabanlı backend API'leriniz yüksek trafikli senaryolarda bile mükemmel performans ve düşük kaynak tüketimi sunar. Statik tipleme, derleme zamanında birçok hatayı yakalayarak uygulamaların daha güvenilir olmasını sağlar.

Bu iki teknolojiyi birleştirmek, bir dizi avantajı beraberinde getirir:

• Geliştirici Deneyimi: Vite'ın HMR'si ve Kemal'in hızlı derleme yeteneği, geliştirme döngüsünü inanılmaz derecede hızlandırır.
• Performans: Vite'ın optimize edilmiş frontend derlemesi ve Kemal'in doğal olarak hızlı Crystal motoru, kullanıcılarınıza akıcı ve hızlı bir uygulama sunar.
• Ölçeklenebilirlik: Crystal'ın performansı ve düşük kaynak tüketimi, uygulamanızın yüksek yük altında bile etkili bir şekilde ölçeklenmesine yardımcı olur.
• Modern Çözüm: Hem frontend hem de backend için en güncel ve verimli teknolojileri kullanarak geleceğe yönelik, sürdürülebilir uygulamalar geliştirirsiniz.
• Net Ayırma: Frontend ve backend'in ayrı projelerde yönetilmesi, daha temiz bir mimari ve daha kolay ekip çalışması sağlar.

Özetle, Vite ve Kemal, modern, hızlı, ölçeklenebilir ve geliştirici dostu web uygulamaları oluşturmak isteyen her geliştirici için güçlü ve cazip bir kombinasyondur. Bu rehberin, kendi projelerinizde bu güçlü ikiliyi başarılı bir şekilde kullanmanız için size ilham verdiğini ve yol gösterdiğini umuyoruz.

Sıkça Sorulan Sorular (SSS)