Node.js, Sails.js ve Dust.js ile Tek Sayfa Uygulamaları (SPA) Geliştirme Rehberi (Ubuntu 14.04)
Tek Sayfa Uygulamaları (Single Page Applications – SPA), modern web geliştirmenin temel taşlarından biridir. Geleneksel çok sayfalı uygulamaların aksine, SPA’lar tüm gerekli kaynakları ilk yüklemede getirerek veya dinamik olarak yükleyerek kullanıcıya kesintisiz ve hızlı bir deneyim sunar. Bu rehberde, NodeJS ekosisteminin güçlü bir parçası olan Sails.js framework’ünü ve istemci tarafı şablonlama için Dust.js’i kullanarak Ubuntu 14.04 üzerinde nasıl SPA geliştireceğinizi adım adım öğreneceksiniz. Ubuntu 14.04 her ne kadar eski bir sürüm olsa da, temel prensipler ve kurulum adımları daha yeni sürümler için de benzerlik gösterir.
1. Ortam Kurulumu
SPA geliştirmeye başlamadan önce, gerekli araçları Ubuntu 14.04 sisteminize kurmanız gerekmektedir.
1.1 Node.js ve npm Kurulumu
Node.js, sunucu tarafı JavaScript çalışma zamanı ortamıdır ve npm (Node Package Manager) ile birlikte gelir. Sails.js ve Dust.js gibi paketleri kurmak için npm’e ihtiyacımız var. Ubuntu 14.04 için Node.js’in daha güncel bir sürümünü kurmak için NVM (Node Version Manager) kullanmak en iyi yöntemdir.
NVM'i indirin ve kurun
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Terminali yeniden başlatın veya aşağıdaki komutu çalıştırın
source ~/.bashrc
Node.js'in en son LTS (Uzun Süreli Destek) sürümünü kurun
nvm install --lts
Varsayılan olarak kullanmak için ayarlayın
nvm use --lts
Kurulumu doğrulayın
node -v
npm -v
Bu adımlar, Node.js ve npm’in en güncel ve kararlı sürümünü sisteminize kurmanızı sağlayacaktır.
1.2 Sails.js CLI Kurulumu
Sails.js, web uygulamalarını hızla geliştirmek için tasarlanmış bir MVC framework’üdür. Komut satırı arayüzü (CLI) ile proje oluşturma, modelleri ve controller’ları yönetme gibi işlemleri kolayca yapabilirsiniz.
Sails.js CLI'ı global olarak kurun
npm install -g sails@1.x.x # En son 1.x.x sürümünü kullanın, örneğin 1.5.0
Kurulumdan sonra sails -v komutu ile Sails.js sürümünü kontrol edebilirsiniz.
1.3 MongoDB Kurulumu (İsteğe Bağlı ama Önerilir)
Çoğu SPA, veri kalıcılığı için bir veritabanına ihtiyaç duyar. Sails.js, çeşitli veritabanlarını destekler, ancak MongoDB, Node.js ekosistemiyle iyi entegre olan popüler bir NoSQL veritabanıdır.
MongoDB public key'ini ekleyin
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
MongoDB depolarını ekleyin (Ubuntu 14.04 için)
echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list
Paket listelerini güncelleyin
sudo apt-get update
MongoDB'yi kurun
sudo apt-get install -y mongodb-org
MongoDB servisini başlatın
sudo service mongod start
Servisin çalıştığını doğrulayın
sudo service mongod status
Bu adımlar, MongoDB 3.0 sürümünü Ubuntu 14.04’e kuracaktır. Daha yeni MongoDB sürümleri için farklı depo konfigürasyonları gerekebilir.
2. Sails.js Projesi Oluşturma ve Temel Yapılandırma
Şimdi Sails.js projemizi oluşturabilir ve Dust.js’i view engine olarak yapılandırabiliriz.
2.1 Yeni Sails.js Projesi Oluşturma
Terminalinizde projenizi oluşturmak istediğiniz dizine gidin ve aşağıdaki komutu çalıştırın:
sails new my-spa-app --no-frontend
cd my-spa-app
--no-frontend bayrağı, Sails.js’in varsayılan olarak gelen önyüz şablonlarını (örn. EJS, Grunt/Gulp) kurmasını engeller. Çünkü biz Dust.js ve kendi ön yüz yaklaşımımızı kullanacağız.
2.2 Dust.js’i View Engine Olarak Ayarlama
Sails.js, varsayılan olarak EJS’i view engine olarak kullanır. Dust.js’i kullanmak için önce paketi kurmalı ve ardından config/views.js dosyasını düzenlemeliyiz.
npm install consolidate dustjs-linkedin dustjs-helpers --save
Şimdi config/views.js dosyasını açın ve içeriğini aşağıdaki gibi güncelleyin:
// config/views.js
module.exports.views = {
engine: require('consolidate').dust,
layout: 'layouts/layout', // Tüm sayfalar için ana layout dosyası
extension: 'dust',
partials: require('path').resolve(__dirname, '..', 'views', 'partials')
};
Bu yapılandırma, Sails.js’e .dust uzantılı dosyaları Dust.js ile derlemesini ve views/layouts/layout.dust dosyasını ana şablon olarak kullanmasını söyler. partials ayarı, Dust.js’in parçalı şablonları nerede arayacağını belirtir.
2.3 Temel Rota ve Controller Oluşturma
SPA’lar genellikle tek bir ana giriş noktasına sahiptir. Bu giriş noktası, uygulamanın kabuğunu (shell) ve ilk görünümü yükler.
config/routes.js dosyasını açın ve basit bir ana sayfa rotası tanımlayın:
// config/routes.js
module.exports.routes = {
'/': {
view: 'pages/homepage' // Bu, views/pages/homepage.dust dosyasını çağıracak
},
// API rotalarınız buraya gelecek
'GET /api/products': 'ProductController.find',
'POST /api/products': 'ProductController.create'
};
Şimdi views/pages/ dizini altında homepage.dust adında bir dosya oluşturalım:
Hoş Geldiniz!
Bu sizin Tek Sayfa Uygulamanızın ana sayfasıdır.
Ve bir ana layout dosyası oluşturalım: views/layouts/layout.dust.
My Sails.js SPA
{+body /}
Uygulamanızı başlatmak için sails lift komutunu kullanın. Tarayıcınızda http://localhost:1337 adresine giderek ana sayfanızı görebilirsiniz.
3. Dust.js ile SPA Şablonları Oluşturma
Dust.js, hızlı ve esnek bir istemci tarafı şablonlama motorudur. Sunucu tarafında ilk yüklemeyi yaparken ve daha sonra istemci tarafında AJAX ile çekilen verileri dinamik olarak render etmek için kullanışlıdır.
3.1 Dust.js Temel Sözdizimi
Dust.js’in temel yapı taşları şunlardır:
* {key}: Veri nesnesindeki bir anahtarın değerini gösterir.
* {#section} ... {/section}: Bir dizi veya nesne üzerinde döngü yapar veya bir değerin varlığını kontrol eder.
* {^section} ... {/section}: {#section}‘ın tersi, değer yoksa çalışır.
* {>partial}: Başka bir Dust şablonunu (parçalı) dahil eder.
* {?helper args /}: Yardımcı fonksiyonları çağırır.
3.2 İstemci Tarafı Render Etme
SPA’ların gücü, sayfanın tamamını yeniden yüklemeden içeriği dinamik olarak güncelleyebilmesidir. Bunu Dust.js ile yapmak için:
1. Dust Şablonlarını Ön Derleme (Pre-compilation): Dust şablonlarınızı sunucu tarafında JavaScript fonksiyonlarına derleyip istemciye göndermek en performanslı yöntemdir. Bunun için bir build aracı (Webpack, Gulp) kullanabilirsiniz.
2. AJAX ile Veri Çekme: İstemci tarafında JavaScript kullanarak Sails.js API endpoint’lerinizden veri çekin.
3. Dust ile Render Etme: Çekilen veriyi önceden derlenmiş Dust şablonunuzla birleştirerek HTML oluşturun ve DOM’a ekleyin.
Basit bir örnek için, assets/js/main.js dosyasını oluşturalım:
// assets/js/main.js
// Dust şablonlarını client-side kullanmak için Dust.js kütüphanesini dahil etmeniz gerekir.
// Örneğin, ile layout.dust içinde ekleyebilirsiniz.
document.addEventListener('DOMContentLoaded', function() {
const appRoot = document.getElementById('app-root');
function loadProducts() {
fetch('/api/products') // API'den ürün verilerini çek
.then(response => response.json())
.then(products => {
// Ürün listesi için bir Dust şablonu oluşturalım (örneğin, views/partials/product-list.dust)
// Bu şablonun client-side'da derlenmiş olması veya Dust.load() ile yüklenmesi gerekir.
// Basit bir örnek için şablonu doğrudan string olarak tanımlayalım.
// Gerçek projede bir build adımıyla ön derlenmiş şablonları kullanırdınız.
const productListTemplate =
Ürün Listesi
{#products}
{name}
Fiyat: {price} TL
{/products}
{^products}
Henüz ürün bulunmamaktadır.
{/products}
;
// Dust şablonunu derle ve render et
// Normalde bu adımı bir build süreci yapar ve Dust.render(templateName, data, callback) çağırırsınız.
// Basitlik adına, direkt string şablonu derleyip render edelim.
dust.loadSource(dust.compile(productListTemplate, 'product-list'));
dust.render('product-list', { products: products }, function(err, out) {
if (err) {
console.error('Dust rendering error:', err);
return;
}
appRoot.innerHTML = out; // Yeni içeriği sayfaya ekle
});
})
.catch(error => console.error('Error fetching products:', error));
}
// Uygulama yüklendiğinde ürünleri getir
loadProducts();
// Yönlendirme (Routing) Mantığı:
// SPA'lar genellikle tarayıcı geçmişi API'sini (pushState) kullanarak URL'yi değiştirir
// ve ilgili bileşenleri yükler. Basitlik adına bu örnekte sadece AJAX ile veri çekme gösterilmiştir.
// Gerçek bir SPA'da bir client-side router (örn. Page.js, Vue Router, React Router) kullanırsınız.
});
Bu main.js dosyasının çalışabilmesi için Dust.js kütüphanesini layout.dust içinde HTML’inize dahil etmeniz gerekir:
...
...
dust-full.min.js dosyasını assets/js/dependencies/ klasörüne kopyalamanız gerekecektir.
4. API Geliştirme ve Veri Yönetimi
SPA’lar, backend’den veri almak ve göndermek için RESTful API’lere güvenir. Sails.js, model ve controller katmanları ile güçlü bir API geliştirme yeteneği sunar.
4.1 Sails.js Modelleri
Sails.js modelleri, veritabanı tablolarınıza veya koleksiyonlarınıza karşılık gelir.
sails generate model Product name:string price:number description:string
Bu komut api/models/Product.js dosyasını oluşturacaktır:
// api/models/Product.js
module.exports = {
attributes: {
name: { type: 'string', required: true },
price: { type: 'number', defaultsTo: 0 },
description: { type: 'string' }
},
// Veritabanı bağlantısı için config/datastores.js'i kontrol edin
// Varsayılan olarak development ortamında diskdb (file-based) kullanır.
// MongoDB için config/datastores.js'te bir 'mongo' bağlantısı tanımlamanız gerekir.
// Örneğin:
// mongo: {
// adapter: 'sails-mongo',
// url: 'mongodb://localhost:27017/my-spa-db'
// }
};
config/datastores.js dosyasını açarak MongoDB bağlantısını yapılandırabilirsiniz. npm install sails-mongo --save komutu ile MongoDB adaptörünü kurmayı unutmayın.
4.2 Sails.js Controller’ları ve API Endpoint’leri
Controller’lar, gelen HTTP isteklerini işler ve model ile etkileşime girerek veritabanı işlemlerini yapar.
sails generate controller Product find create update delete
Bu komut api/controllers/ProductController.js dosyasını oluşturur. İçeriğini aşağıdaki gibi güncelleyelim:
// api/controllers/ProductController.js
module.exports = {
// Tüm ürünleri listele
find: async function (req, res) {
try {
const products = await Product.find();
return res.json(products);
} catch (err) {
return res.serverError(err);
}
},
// Yeni ürün oluştur
create: async function (req, res) {
try {
const newProduct = await Product.create(req.body).fetch();
return res.status(201).json(newProduct);
} catch (err) {
return res.serverError(err);
}
},
// Ürün güncelle
update: async function (req, res) {
try {
const updatedProduct = await Product.updateOne({ id: req.params.id }).set(req.body);
if (!updatedProduct) {
return res.notFound('Ürün bulunamadı.');
}
return res.json(updatedProduct);
} catch (err) {
return res.serverError(err);
}
},
// Ürün sil
delete: async function (req, res) {
try {
const deletedProduct = await Product.destroyOne({ id: req.params.id });
if (!deletedProduct) {
return res.notFound('Ürün bulunamadı.');
}
return res.ok('Ürün başarıyla silindi.');
} catch (err) {
return res.serverError(err);
}
}
};
config/routes.js içinde API rotalarını tanımladığımızdan emin olun:
// config/routes.js
module.exports.routes = {
// ... diğer rotalar
'GET /api/products': 'ProductController.find',
'POST /api/products': 'ProductController.create',
'PUT /api/products/:id': 'ProductController.update',
'DELETE /api/products/:id': 'ProductController.delete'
};
Artık istemci tarafında (örneğin assets/js/main.js içinde) bu API endpoint’lerini kullanarak ürün verilerini çekebilir, gönderebilir ve güncelleyebilirsiniz.
Sonuç ve Sıkça Sorulan Sorular (SSS)
Bu rehberde, Ubuntu 14.04 üzerinde Node.js, Sails.js ve Dust.js kullanarak temel bir Tek Sayfa Uygulaması (SPA) geliştirme adımlarını öğrendiniz. Ortam kurulumundan, Sails.js proje yapısına, Dust.js ile şablonlamaya ve API geliştirmeye kadar birçok konuya değindik. Bu temel bilgilerle kendi karmaşık SPA’larınızı inşa etmeye başlayabilirsiniz.
Sıkça Sorulan Sorular (SSS)
1. Neden Dust.js? Alternatifleri nelerdir?
Dust.js, hızlı, hafif ve hem sunucu hem de istemci tarafında çalışabilen bir şablonlama motorudur. Özellikle büyük uygulamalarda performans avantajı sağlayabilir. Alternatif olarak EJS, Handlebars, Pug (eski adıyla Jade) veya React, Vue, Angular gibi modern frontend framework’lerinin kendi bileşen tabanlı yaklaşımları kullanılabilir. Dust.js, daha “geleneksel” bir şablonlama motoru arayanlar için iyi bir seçenektir.
2. Sails.js’in avantajları nelerdir?
Sails.js, Ruby on Rails’den esinlenmiş, hızlı geliştirme için tasarlanmış bir MVC framework’üdür. Otomatik API oluşturma (blueprint API’ler), güçlü ORM (Waterline), gerçek zamanlı WebSockets entegrasyonu, dosya tabanlı yapılandırma ve genişletilebilir yapısı gibi avantajları vardır. Özellikle RESTful API’ler ve gerçek zamanlı uygulamalar geliştirmek için idealdir.
3. SPA’da SEO nasıl yapılır?
SPA’ların geleneksel web sitelerine göre SEO konusunda bazı zorlukları vardır çünkü içerik genellikle JavaScript ile dinamik olarak yüklenir ve arama motoru botları bunu her zaman doğru bir şekilde indeksleyemeyebilir. Çözümler arasında sunucu tarafı render (SSR), ön render (prerendering) veya dinamik render (dynamic rendering) gibi teknikler bulunur. Sails.js ile SSR yapmak, Dust.js şablonlarını sunucuda derleyip direkt HTML olarak göndermekle mümkündür.
4. Ubuntu 14.04 yerine daha yeni bir sürüm kullanabilir miyim?
Kesinlikle evet. Ubuntu 14.04 artık uzun süreli destek almamaktadır ve güvenlik riskleri taşıyabilir. Bu rehberdeki temel prensipler ve komutlar, Ubuntu 16.04, 18.04, 20.04 veya 22.04 gibi daha yeni sürümlerde de geçerlidir. Sadece Node.js ve MongoDB kurulum adımları, işletim sistemi sürümüne göre küçük farklılıklar gösterebilir.
5. Projeyi dağıtmak (deployment) için ne yapmalıyım?
Sails.js projenizi dağıtmak için genellikle bir VPS (Virtual Private Server) veya bir PaaS (Platform as a Service) sağlayıcısı (örn. Heroku, DigitalOcean App Platform) kullanırsınız. Dağıtım adımları şunları içerir:
* Sunucunuza Node.js ve npm kurmak.
* Proje dosyalarınızı sunucuya aktarmak (git clone veya SFTP).
* npm install ile bağımlılıkları yüklemek.
* NODE_ENV=production sails lift komutuyla uygulamayı üretim modunda başlatmak.
* PM2 gibi bir süreç yöneticisi kullanarak uygulamanın sürekli çalışmasını sağlamak.
* Nginx veya Apache gibi bir ters proxy (reverse proxy) kullanarak gelen istekleri Sails.js uygulamanıza yönlendirmek.