Mustache.js kütüphanesi nedir? Nasıl kullanılır?

9 Kasım 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

Javascript’in günümüzde web ve mobil teknolojilerdeki popülerliği arttıkça, çok daha verimli kullanılmasını sağlayan pek çok kullanışlı kütüphane de yazılım geliştiricilerin beğenisine sunuluyor. Günümüzde oldukça fazla kullanılmaya başlanan şablon sistemleri de bunların başında geliyor. Bu yazı da Mustache.js kütüphanesinin ne olduğunu, nasıl kullanıldığını derinlemesine öğreneceğiz. Dolayısı ile bu yazı dizisinden sonra web ve mobil uygulamalarınızda Mustache.js kütüphanesini rahatlıkla kullanabilirsiniz.

Mustache.js nedir?

Kullandığınız yazılım diline bağlı olmaksızın istemci ve sunucu taraflı neredeyse tüm popüler diller ile kullanabileceğiniz kütüphane, aslında basit bir şablon sisteminden ibaret. Ancak basit kelimesine aldanmayın bir o kadar da faydalı ve kullanışlı bir araç. Dolayısıyla basitlik burada kötü bir anlam kesinlikle taşımıyor. Bunu unutmamak lazım.

Javascript kullanabildiğiniz tüm ortamlarda faydalanabileceğiniz bu kütüphanenin çalışma şekli için “logic-less“ terimi kullanılıyor. Bunun anlamı; döngü ya da if/else gibi koşullu ifadeler kullamaksızın, yalnızca etiketler aracılığı ile verilerinizi bir web şablonu içerisinde kolayca göstermesini sağlamasıdır. Bu anlamı ile “logic-less” ya da kötü bir çeviri ile “mantık-az” olarak ifade ediliyor.

MIT lisansı ile 2009 yılında duyurulan sistemi, Javascript kullanan ActionScript, C++, Clojure, CoffeeScript, ColdFusion, D, Erlang, Fantom, Go, Java, JavaScript, Lua, .NET, Objective-C, Perl, PHP, Python, Ruby, Scala ve XQuery gibi tüm diller ile sorunsuz kullanabilirsiniz.

Bu bilgiler ışığında Mustache.js’in en önemli özelliğinin uygulamanızdaki presentation/sunum ve logic/mantık birimlerini birbirinden ayırmasıdır diyebiliriz.

Şimdi nasıl kullanıldığına bakmak için mutfağa buyurun..

Mustache.js Nasıl Kullanılır?

Konuyu daha iyi anlamak adına adım adım gideceğiz ve tek bir sayfadaki en basit kullanımından, olması gereken sunum ve mantığın birbirinden ayrıldığı yapıya kadar örneklerle çalışmasını inceleyeceğiz.

Öncelikle mutfağımızda kullanacağımız malzemelerimize bir göz atalım.

1. Basit bir HTML sayfası. (HTML5 kod yapısına sahip sayfalar her zaman tercihimizdir!)
2. https://github.com/janl/mustache.js adresinden “mustache.js” kütüphanesi.
3. Artık olmazsa olmazlarımızdan minified bir JQuery kütüphanesi.
4. Keyifle kullanabileceğiniz bir web ya da metin editörü. (Ben Sublime Text ve WebStorm’u çok seviyorum.)

Mustache.js mimarisi temel olarak 3 ana yapıdan oluşuyor.

1. Veri kaynağı (JSON),
2. HTML şablonunuz (Bildiğiniz HTML!),
3. Veriyi gösterim alanınız (Herhangi bir HTML elementi).

Şimdi yukarıda saydığımız mimariyle eş değer, en basit haliyle çalışan ilk örneğimizi oluşturalım.

ÖRNEK-1:

$(document).ready(function() {
    // Veri Kaynağı
    var userData = {
        firstName : "Egemen",
        lastName : "Mede"
    }

    // HTML Şablonu
    var template = "<p>Merhaba {{firstName}} {{lastName}}</p>"

    // Abra-Kadabra!
    var htmlView = Mustache.to_html(template, userData);
    // Parametreler HTML Şablonu, Veri Kaynağı
    $("body").html(htmlView);
});

userData” isimiyle oluşturduğumuz JSON veri kaynağımızın içerisinde “firstName” ve “lastName” anahtarlarına sahip Ad ve Soyad verilerimizi oluşturduk. Bu bölüm sistemimizdeki “Veri Kaynağı” bölümünü oluşturuyor.

İkinci bölümde “template” değişkenimize veri kaynağımızdan aldığımız bilgileri göstereceğimiz HTML şablonumuzu oluşturuyoruz. Dikkat ettiyseniz “firstName” ve “lastName” anahtarlarını “{{firstName}}” ve “{{lastName}}” şeklinde gösteriyoruz. Bu yazım şekli Mustache.js’in bir özelliği ve bundan sonraki tüm uygulamalarımızda da bu şekilde yazmaya devam edeceğiz. “template” değişkenin içerisinde fark ettiğiniz üzere klasik HTML dışında hiç bir şey yok. Yani tam anlamı ile bir sunum katmanı.

Son bölümde ise Mustache.js gerçek anlamda ortaya ortaya çıkıyor. Bu bölüme kadar elde etmiş olduğumuz veri ve sunum katmanlarını Mustache.js kütüphanesinin sihirli ellerine (Tabiki öyle bir şey yok!) teslim ediyoruz. Mustache; “to_html” metoduna vermiş olduğunuz veri ve sunum bilgilerini HTML çıktısı haline dönüştürüp, HTML sayfamızın “body” alanına ekliyor. Bunun neticesinde uygulamamızın çıktısı da aşağıdaki gibi oluşuyor.

ÖRNEK-2:

İlk örneğimizde görüldüğü üzere veri kaynağımız ve HTML şablonumuz sunum katmanımızın içerisinde! En başta söylediğimizi gibi nihai amacımız bunları sunum katmanından ayırmak. İkinci örneğimizde ilk olarak veri kaynağımızı sayfamızdan ayırmak ile başlıyoruz.. Bunun için ilk örneğimizde kullandığımız aşağıdaki JSON yapısını alıp, “data.json” adı ile kaydediyoruz.

{
	firstName : "Egemen",
	lastName : "Mede"
}

Şimdi kodumuzu da aşağıdaki gibi revize edelim.

$(document).ready(function() {
    $.getJSON('data/data.json', function(data) {
        var template = "<p>Merhaba {{firstName}} {{lastName}}</p>";
        var htmlView = Mustache.to_html(template, data);
        $("body").html(htmlView);
    });
});

Kodumuzu çalıştırdığımızda göreceğiniz üzere sayfamızda hiç bir görüntülenme yok! Tabi bunu şu anda kullanmakta olduğum Google Chrome (sürüm 30.0.1599.101) tarayıcı ile söylüyorum. Aynı işlemi Firefox (sürüm 24.0) tarayıcım ile deniyorum sonuç aynı! İşte size ipucu!

İPUCU:

Google Chrome ve Firefox local JSON işlemlerini varsayılan olarak desteklemez. Yukarıdaki örneği çalıştırdığınızda tarayıcınızın consol bölümünden görebileceğiniz Google Chrome ile “Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.”, Firefox ile “iyi düzenlenmiş değil“ hatası alacaksınız. Bunun çözümü için ya JSON dosyanızı local ya da gerçek bir web sunucu üzerinde bulundurunuz. Aslında bu geçici bir çözümdür. Kullandığınız web yazılım dili içerisinde HTTP header’ına “Access-Control-Allow-Origin: *” değerini gönderirseniz sorun kalmayacaktır. PHP için bunu http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin, .NET için ise bunu http://cypressnorth.com/programming/cross-domain-ajax-request-with-json-response-for-iefirefoxchrome-safari-jquery/ kullanabilirsiniz.

Sorunu daha detaylı merak edenler buradaki Issue 40787’ye bakabilirler.

Peki bu durumda ne yapacağız?

Ben örneklerimize devam etmek adına online bir JSON kaynağı bularak, o kaynağa göre kodumu revize edeceğim.

{
	one: "two",
	key: "value"
}

Bu adreste yer alan http://echo.jsontest.com/key/value/one/two ve yukarıdaki gibi bir yapıya sahip bir JSON verisine göre de kodumu aşağıdaki gibi revize ediyorum.

$(document).ready(function() {
    $.getJSON('http://echo.jsontest.com/key/value/one/two', function(data) {
        var template = "<p>Merhaba {{one}} {{key}}</p>";
        var htmlView = Mustache.to_html(template, data);
        $("body").html(htmlView);
    });
});

İşte netice!

ÖRNEK-3:

JSON verimizi de sunum katmanımızdan ayırdığımıza göre sıra geldi HTML şablonumuzu ayırmaya. Bunun için ikinci örneğimizde kullandığımız aşağıdaki HTML yapısını alıp, “template.html” adı ile kaydediyoruz.

"<p>Merhaba {{one}} {{key}}</p>"

Kodumu da aşağıdaki gibi revize ediyorum.

$(document).ready(function() {
    $.getJSON('http://echo.jsontest.com/key/value/one/two', function(data) {
        $.get("templates/template.html", function(view) {
            var htmlView = Mustache.to_html(view, data);
            $("body").html(htmlView);
        });
    });
});

Kodumuzu çalıştırdığımızda göreceğiniz üzere sayfamızda “yine” hiç bir görüntülenme yok! Google Chrome (sürüm 30.0.1599.101) tarayıcımın konsolu ile kontrol ettiğimide “Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.” hatası aynen devam ediyor. Aynı işlemi Firefox (sürüm 24.0) tarayıcım ile kontrol ettiğimde ise “TypeError: this.tail.search is not a function – mustache.js:103” hatası alıyorum. Bu da nereden çıktı?!..

Hatayı “Mustache.js” üzerinden veriyor olması ilginç. Aklıma gelen tek şey JQuery’nin $.getJSON ve $.get metodları ile ilgili bir sıkıntıdan kaynaklandığı. Sistemi çalışır hale getirmek için bu metodları kullanmayı bırakıp, bu noktadan itibaren iki işlemi de “$.ajax” metodu ile yapmaya karar verdim. Buna göre kodumun yeni halini aşağıdaki gibi düzenledim.

$.ajax({
    url: "templates/template.html", dataType: "html",
    success: function(templateData) {
        $.ajax({
            url: "http://echo.jsontest.com/key/value/one/two", dataType: "json",
            success: function(jsonData) {
                $("body").html(Mustache.to_html(templateData, jsonData));
            }
        });
    }
});

İşte bu! Sorunsuz çalışıyor..

ÖRNEK-4:

Her ne kadar 3 numaralı örneğimizi çalışır duruma getirsekte, kodun büyümesi ve okumasının karmaşıklaşması pek hoşuma gitmedi. Tam da bu işlem için küçük bir kütüphane hazırladım. Kütüphaneyi https://github.com/egemenmede/MustacheUtility adresindeki GitHub adresimden indirebilir, örneği de inceleyebilirsiniz. Ben kütüphaneyi indirip, projeme dahil ediyorum.

Kodumu da aşağıdaki gibi düzenliyorum.

$(document).ready(function() {
	mt.view("templates/template.html", "http://echo.jsontest.com/key/value/one/two", "body");
});

Görüldüğü üzere kütüphane sayesinde hem kodumuz tek satıra indi hem de parametrik bir yapı ile tekrar tekrar yazma derdinden kurtulduk.

Mustache.js’in önemli bir bölümünü bu yazıda bitirmiş olduk. Yazı dizisinin ikinci bölümünde görüşmek üzere.

 

KAYNAKLAR
http://en.wikipedia.org/wiki/Mustache_(template_system)
https://github.com/janl/mustache.js

Benzer Yazılar


DeliPenguen'i Google+'da bulun



Henüz yorum yok.