Svelte ve Meteor Kullanarak Full Stack Reactive Web Uygulaması Oluşturmak
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.
Ş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.
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"})
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…