Meteor.js Serisi : 2- Meteor platformuna (biraz) daha detaylı bakış.

Meteor js nedir ne değildir diye genel olarak mimari yapısını da katarak anlatmaya çalıştığımız bir önceki yazıdan sonra, şimdi meteor js in bize sunduğu bu imkanlara biraz daha detaylı bakarak devam edelim.

Bu kavramlar Meteor js  için çok önemli, meteor ile geliştireceğimiz uygulamalarda üretkenliği yakalayabilmek ve meteorun tüm nimetlerini aktif bir şekilde kullanabilmek adına daha detaylı bir bakışa ihtiyacımız olacak.

Sonraki yazılarla, daha gerçekçi bir örnekle bu kavramların pratikde kullanımınada bakmaya çalışacağız ama öncesinde ; meteor js in bel kemiğini oluşturan; ” Reactivity / reactive programming, Isomorphic yapı, data every where vs.  gibi konulara bakarak başlayalım.

1- Data on the Wire  – Sadece veriyi taşı

Meteor js ile, uygulamamız için sunucu tarafından istemciye sadece veriyi (JSON ve websocket ler üzerinden) taşıyarak, istemcinin bu veriyi istediği gibi işlemesine olanak sağlıyoruz.  Sunucu tarafından hazırlanmış/render edilmiş html i değil sadece gerekli veriyi taşıyoruz.

Böylelikle, Meteor js istemci tarafında bu veriyi istediğimiz gibi yansıtmamıza imkan vermekte. İster meteor un varsayılan html motorunu(Blaze) isterseniz angular yada react ı kullanabilirsiniz.

(meteor istemcileri sadece tarayıcılarla sınırlı değil tabiki ama konu dağılmasın diye şimdilik istemciden kasıt aksi belirtilmediği sürece web tarayıcılarımız olacak.)

2- One Language: JavaScript – Hem istemci hem sunucu tarafında tek dil “JavaScript”

Bu başlık sanırım kendini fazlasıyla açıklıyor. Bir kıyaslama ile devam edecek olursak, Örneğin ASP.NET MVC ile bir web uygulaması geliştirdiğinizi düşünün, sunucu tarafından muhtemelen C# yada .NET için de kullanabileceğiniz bir başka dili(VB.NET, F# i) kullanırız. İstemci tarafında ise mecburen JavaScript.

Meteor.js ile sunucumuz node.js olacağı için hem sunucu taraflı kodlarımızı hem istemci taraflı kodlarımızı JavaScript ile yazabilmekteyiz. Tek bir dil ve bu dilin hem istemci tarafında hem sunucu tarafında ortak olarak kullanabileceği bir API alt yapısı.

3- Database Everywhere – Hem istemci hem sunucu tarafından veriye erişim için tek ve ortak bir yol.

2. maddemizle birlikte (tek dil “JavaScript”)  3.maddemizi birlikte kullanarak; hem istemci tarafında hem sunucu tarafında aynı alt yapı (Transparent API) ile Isomorphic bir yapıyı sağlıyoruz.  Aşağıdaki kod a bakarak devam edelim;

Ogrenci= new Mongo.Collection("ogrenciler");

Yukarıdaki kod u hem istemci tarafında hem sunucu tarafında , veri tabanımız daki işlemler için / kayıtlarına ulaşmak için kullanabilmekteyiz. Ama bu yapının başka  önemli bir yardımı ise, istemciden sunucuya ulaşım/veri sorgulama için ekstra bir sürece ihtiyacın olmaması.

Yine bir kıyaslama ile devam edelim; İstemci tarafında Angular sunucu tarafında ASP.NET MVC kullanan bir yapıyı göz önüne alın. İstemci tarafında veriye erişim için;

  1. sunucumuza bir Ajax request göndermemiz gerekmekte
  2. sunucu isteği işleyip gerekli veriyi veri tabanından aldıktan sonra, istemciye geri gönderir
  3. istemci veriyi alır ve kullanır.

Bu liste de garip olan bir şey yok, sadece İstemci tarafında farklı bir kod yapısı(Angular ve javascript in http requestler için gerekli gördüğü kodu yazmak zorundayız ). Sunucu tarafında ise ayrı bir kod yapısını hayata geçirmek zoruyndayız.(C# ile veriye eriş ve istemciye yolla)

Ayrıca, Ajax request i ve sornasında gelen cevabı yani bu sürecin tamamını da yönetmek zorundayız. Meteor.js için ise istemci yada sunucu tarafında farklı süreçler sözkonusu değil;

var ismiHasanOlanOgrenciler = Ogrenci.find({'isim':'hasan'});

Yukarıdaki kod, Meteor.js ile hem istemci tarafında hem sunucu tarafında aynı işi yapacaktır(veri tabanından ismi hasan olan ögrencileri bulup getirecektir.). Başka bir değişle ,Meteor yukarıdaki kodu istemci de gördüğügü zaman; “Ha, sen sunucuya bir istek göndermek istiyorsun, bu isteklede bir veritabanı sorgusu yapıyorsun” diye durumu hemen anlayacaktır. Sunucu tarafında ise, “anladim kardes, veri tabanı sorgusuna ihtiyacın var” diyecektir.

Gördüğünüz gibi her hangi ekstra bir işlem gerektirmeden, Meteor bizim için istemcide de tıpkı sunucuda kullandığımız aynı sorgu altyapısını kullanımına izin vermekte ve iş yükünü ciddi oranda azaltmaktadır. Tek dil tek sorgu alt yapısı.

4- Latency Compensation – Gecikme Yönetimi.

Meteor “zero-latency / sıfır gecikme” diyebileceğimiz bir yapı ile ile istemcide nerdeyse 100% gerçek zamanlı bir izlenim oluşturmaktadır. Nerdeyse diyorum, çünkü verinin istemciden sunucuya sunucudan istemciye dolaşımında mutlaka bazı gecikmeler olacaktır. Meteor bunu kendi reactive yapısı ile kullanıcıya hissetirmemek için ciddi kolaylıklar sağlar. Böylece 100% gerçek zamanlı bir etkileşim etkisine sahip oluruz.

5- Full Stack Reactivity – Sistemin tüm parçalarında gerçek zamanlık

İstemciden sunucuya ordan veritabanına ve bu 3 parçanın arasındaki iletişimi sağlayan yapıya kadar her şeyin “gerçek zamanlı” olmasını sağlayan bir alt yapı sunmakta meteor js. Sadece kullanıcın tarayıcıda girdiği etkileşimden değil, sunucu tarafında ve veri tabanı kısmındada gerçek zamanlılık söz konusu. Bu kısım ı video da ele almaya çalıştım oradan daha rahat anlaşılacağını düşünüyorum.

Güncelleme:

Meteor son sürümünün yayınlanmasıyla (1.3) Full Stack Reactivity kavramında bazı değişiklikler yapıldı. Bundan önceki versiyonlarda bu yapıya direkt müdahale etme imkanımız yoktu. Yeni sürüm ile, bu yapıyı daha esnek bir şekilde yönetme imkanımız getirildi. Genel olarak örnekleyecek olursak; Reactive yapıya ihtiyacımızın olmadığını düşündüğünğüz kısımlarda, özellikle iş yükünü azaltmak ve performans artışı için Reactivity (özellikle puplications / yayınlar için)  devre dışı bırakabilmek imkanımız var.

Örneğin, web uygulamanızda bazı kesimler Reactivity /gerçek zamanlılık ihtiyacı olmayacaktır. Mesela, Sıkça Sorulan Sorular alanı gibi bir alan muhtemelen gerçek zamanlı bir takip ihtiyacı barındırmayacaktır, buna benzer Collection lar  için Reactivity i devre dışı bırakıp sunucun iş yükü azaltmak isteyebilirsiniz. 

6- Ecosystem  – Topluluk

Meteor.js çok aktif bir topluluğa sahip, hem bilgi paylaşımı hem platformiçin eklentiler / paketler bulmak adına zengin bir ekosisteme sahip Meteor js. Ayrıca ana yapısı node.js üzerine kurulu olduğu için node.js in devasa ekosistemini de unutmamak lazım.

Angular ve React topluluklarınıda buna katabiliriz, iki freamework de resmi olarak Meteor.js tarafında desteklendiği için bu iki kütüphaneyi kullandığınız da başka bir alt ekosistemede erişiminiz olmuş olacak.

atmospherejs.com meteor js in paket deposu bir çok eklenti ve driver a sahip.

Güncelleme:

Meteor un 1.3 sürümü ile node.js in paket yöneticisi npm ile artık direkt olarak uygulamamıza npm den paketler indirip kullanabileceğiz. Bundan önceki sürümlerde bu işlem biraz eksta emek istemekteydi ve her paketi kullanamamaktaydik. Meteor un 1.3 sürümü ile Javascript in yeni sürümünde gelen module import/export yapısıda resmi olarak desteklenmeye başladığı için, npm aracılığıyla indirdiğimiz modülleri/paketleri ister istemci tarafında ister sunucu tarafında kolaylıkla kullanabilme imkanı kazandık. 

Bu özellik çok ciddi kolaylıklar ve esneklikler getirmekte. Örneğin, npm aracılığıyla, tarih zaman işlemlerimizi kolay bir şekilde yapmak için kullanabileceğimiz moment.js kütüphanesini, uygulamamız içinde aşağıdakine benzer bir şekilde kullanabileceğiz.

npm install --save moment // moment.js i yükle

urunler.js

import Moment from 'moment';
var birHaftaOnce = Moment().subtract(7, 'days');

6- Built System – Dahili inşa araçları

Meteor dahili bir inşa aracıyla birlikte gelmekte. Böylece bazen karışık bir süreç gerektiren  bir çok ihtiyacı sizin için ekstra bir işeleme gerek bırakmadan yapmakta. Örneğin, uygulamanızda javascript in en eyni sürümünü kullanmak için sadece bir paket yüklemeniz yeterli.

Yada , html css ve javascript dosyalarınız dağıtım/production öncesinde minimize edilmesi, birleştirilmesi gibi bir çok işlem otomatik olarak meteorun inşa aracı tarafından bizim için yapılmakta.

7- Meteor Guide – Meteor Takımının Resmi Tavsiyler Sayfası [Güncelleme]

Meteor Guide ile meteor takımı genel olarak best practices  diye adlandırdığımız , uygulama geliştirme sürecinde kullanabileceğimiz tavsiyeler örnekler ve bir nevi “kaliteli meteor uygulaması geliştirme” yol haritası diyebileceğimiz bir sayfayı hayata geçirdiler.  Bir başvuru kayanağı olarak faydalı ve dolu bir içerik havuzu. 

 Meteor js kurulum ve proje oluşturma

Meteor js i https://www.meteor.com/install bu adresten indirip kurulumu tamamlayabilirsiniz. Kurulum gayet basit. Kurulumdan sonra, meteor ile bir proje oluşturmak için projeyi oluşturmak istediğiniz klasörde;

meteor create "proje_ismi"

komutu ile projeyi oluşturabilirsiniz.

Yukarıdaki başlıkların pratik de kullanımı ve yazıda değinemediğim taraflarını, küçük bir proje ile video ya bırakıyorum.

Bir sonraki yazıda, “Sipariş Sistemi” isimli pratikde meteoru daha iyi öğrenebileceğimiz örnek bir projeye geçeceğiz inşallah.

 

[fvplayer src=”https://s3.amazonaws.com/yazilimgunluguvideo/meteorGiris.mp4" url=””]

4 thoughts on “Meteor.js Serisi : 2- Meteor platformuna (biraz) daha detaylı bakış.

    1. Teşekkürler. Meteor serisine yeni sürümü beklediğimiz için ara vermiştik. Geçen hafta itibariyle yeni sürüm yayınlandı(1.3). bu sürüm çok önemli değişiklikler ve yenilikler içermekte. mevcut yazıyı güncelleyip , seriye bu hafta yeni yazılarla devam edeceğiz inş.

Leave a Reply

Your email address will not be published. Required fields are marked *