Svelte ve Meteor Kullanarak Full Stack Reactive Web Uygulaması Oluşturmak

Published in

SabancıDx

4 min readJun 10, 2020

Svelte ve meteor hızla genişleyen javascript framework ailesinin birer üyesi. Kullanım alanlarını kabaca ifade etmek gerekirse svelte frontend tarafında meteor ise full stack olarak kullanılıyor diyebiliriz. Bu iki framework’le ilgili detaylardan, artıları ve eksilerinden, diğer framework’lerle kıyaslamalarından bahseden onlarca makale mevcut. Ancak biz bu yazıda bu iki teknolojiyi kullanarak nasıl kolayca gerçek zamanlı web uygulası yazabiliriz konusunu ele alacağız.

Editör Önerisi: Henüz bu teknolojilerle ilgili bilgi sahibi değilsen ve detayları öğrenmek itiyorsan bu yazıya daha sonra dönmek üzere park edebilirsin.

Hadi başlıyoruz..

Meteor

İlk olarak meteor kurulumunu yapalım;

Linux:

curl https://install.meteor.com/ | sh

Windows (öncesinde Chocolatey kurmanız gerekli):

choco install meteor

Sonra hemen meteor komutunu kullanarak bir proje oluşturalım

meteor create svelte-meteor-demo

Bu komut bize meteor şablonu ile bir proje oluşturmamızı sağlamış oldu. Akabinde proje klasörümüzün bulunduğu dizine geçerek çalıştıracağımız komut ile meteor’un ihtiyacı olan paket kurulumlarını ve çalışması için gerekli diğer işlemleri yapmasını sağlayacağız.

cd svelte-meteor-demo
meteor

Bu noktada http://localhost:3000 adresinden uygulamamız ayağa kalkmış oldu bile.

Svelte

Meteor kurulumunu tamamladığımıza göre yazının diğer aktörü svelte kurulumunu da yapalım.

meteor npm install --save svelte

Şimdi ise meteorun svelte ile çalışabilmesi için gerekli paketleri kuralım.

meteor add svelte:compiler rdb:svelte-meteor-data static-html

Bu komutta ifade edilen svelte:compiler adından da anlaşılacağı üzere svelte dosyalarının compile edilmesini sağlıyor, rdb:svelte-meteor-data ise svelte şablonu aracılığıyla meteor’un reactivity özelliğini kullanmamızı sağlayan paket, son olarak static-html ise uygulamamızı html dosyası içinde render edebilmek için ihtiyacımız olan paket.

Bu noktada meteor’un sağladığı blaze template’ini kullanmak istemediğimiz için bununla ilgili paketi siliyoruz. Bu işlemi yapmazsak paketler birbirinin ayağına basacak ve soruna neden olacak.

meteor remove blaze-html-templates

Proje Yapısı

Kurulumlarımızı tamamladığımıza göre proje yapımıza bir göz atalım.

Meteor elemanlarının bulunduğu bir klasörün yanı sıra client ve server klasörleri oluşmuş. Bu klasörlerin barındırdığı dosyalarda şimdilik blaze temasına ait template kodlar var. Bu hazır kodları temizleyip yerine kendi kodlarımızı yazmaya başlayalım.

Svelte dosyaları bu statik html dosyasında yer alan app id’li div elementi içerisinde render edilecek

Şimdi ana dizinde imports adında bir klasör açıp altına ui ve api adında iki klasör daha oluşturalım. UI klasörü içerisine ilk svelte dosyamızı oluşturalım App.svelte

Client klasörü altında yer alan main.js dosyasındaki hazır kodları da kaldırarak kendi kodlarımızı yazalım.

client/main.js içerisine meteor paketi ve App.svelte dosyasını dahil edelim.

Meteor startup’ı içinde yazdığımız kod bir svelte bloğu ve uygulamanın statik html dosyasında belirttiğimiz “app” id’li element’de render edileceğine işaret ediyor.

DB Collection

Sıra geldi database üzerinde bir collection oluşturmaya; meteor by default mongoDB ile çalışıyor, yukarıdaki adımları uyguladıysanız ekstra birşey yapmaya gerek kalmadan mongo collection’ları ile çalışabilirsiniz.

Bunun için; api klasörü altında records.js adında bir dosya açarak içerisine mongo paketini dahil ediyoruz. Bu paket vasıtasıyla records collection’ını oluşturuyoruz.

Oluşturduğumuz bu collection js dosyasını server klasörü altındaki main.js dosyasına meteor paketiyle birlikte dahil ediyoruz.

UI

Bu kısma kadar dosya(imports/ui/App.svelte) açmak haricinde svelte adına pek bir şey yapmadık. Şimdi bu dosya içeriğini kodlayıp ön yüz geliştirmesini de yaparak uygulamayı tamamlayalım.

App.svelte dosyasına records api’ı ve daha önce projeye eklediğimiz rdb:svelte-meteor-data paketinin useTracker özelliğini dahil ediyoruz.

useTracker, records collection’ında meydana gelen değişiklikleri yakalamamızı sağlıyor. Reactivity olayını burada tek satır kodla halletmiş oluyoruz.

Show Time

Kodla işimiz bu kadardı. Şimdi meteor mongo komutuyla local’imizdeki mongoDB’ye bağlanalım ve records collection’ına bir satır insert edip web arayüzünde nasıl bir etki yarattığına bakalım.

meteor mongo
db.records.insert({title:"This is a reactive record"})

Records collection’ı boş durumdayken eklenen ilk satırla birlikte browser’da listelenmeye başlıyor

Ta daa! Sizi bilmem ama uzun yıllar backend development ile uğraşan biri olarak bu kadar az kodla database’e kayıt düşer düşmez browser’da etkisini görmek benim için epey etkileyici olmuştu.

Bu yazıda bahsedilen teknolojilerle yazılmış örnek uygulamaya https://scrumoz.com adresinden ulaşabilirsiniz.

Ayrıca örnek proje koduna https://github.com/bugraoguzhanyildiz/svelte-meteor-demo adresinden ulaşabilirsiniz.

Bir başka yazıda görüşmek üzere…