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

Bunun 2 önemli nedeni var. İlki, Mustache.js‘nin esasında dil bağımsız olarak kullanılan bir template çözümü olması. Diğeri ise, Handlebars.js‘in aslında Mustache şablon dilini benimsemesi. Bu nedenle çok az efor ile iki sistem arasında kolaylıkla geçiş yapabilmek mümkün. Elbette iki sistem arasında benzerlikler kadar farklılıklar da mevcut ¹ ², bu sebeple her iki sistemi de iyi bir şekilde değerlendirmiş olmak gerekiyor. Konumuza dönelim ve “Mustache template sistemi nedir ve nasıl kullanılır?” sorusunu cevaplandıralım.

Mustache.js

Yazının giriş paragrafında da belirttiğim üzere, Mustache dil bağımsız olarak kullanılabilen bir şablon (template) sistemi. İsmini {} karakterinden (tr: süslü parantez / en: braces, curly brackets) almaktadır. Mustache template sisteminde yer tutucular {{}} içerisinde tanımlanır. Örneğin, {{name}}. Örnek içerisinde yer alan name bir yer tutucu/değişkendir ve render sonucu kendisine atanan bir veriyi yansıtır. Atanan veriler JSON formatındaki basit JavaScript nesne (object) değerleridirler (value).

Mustache.js Kullanımı

Mustache.js olarak ifade edildiğinde elbette çoğu durumda karşılığı JavaScript dili ile oluşturulabilecek şablonlar olacaktır. Ancak, template sisteminin kaynak sayfasına göz attığımızda³ JavaScript⁴ dışında Python⁵, Go⁶, Lua⁷, R⁸, Rust⁹ gibi dillerde de kullanabildiğimizi görebilmekteyiz. Elbette bu kadar geniş bir yayılıma sahip olmasının altındaki etkenler, sözdizimi kurallarındaki sadelik ve logic-less yapısı olarak da özetlenebilir. Logic-less¹⁰, bir template (şablon) içeriğinin komplike işlemler yerine (örn. if-else gibi kontrol akışı ifadeleri) oldukça temel fonksiyonlarla / etiketlerle (tags) sağlanabiliyor oluşu (veri temelli kontroller) olarak özetlenebilir¹¹. Bazı etiketler değer alabilir, bazıları alamaz ve bazı etiketler ise biz dizi değeri kapsayabilir. Hemen basit bir örnek oluşturalım:

Merhaba {{name}},
{{#etiket}}
Örnek bir metin.
{{/etiket}}

İlk satırda {{name}} kendisine atanan bir veri ile yer değiştirecektir. {{#etiket}}...{{/etiket}} ise true/false değer almış (boolean) ise koşullu bir ifade (if-else), bir dizi almış ise döngü (foreach loop) olarak işlem gerçekleştirebilir. Şimdi de basit bir örnek uygulama yapalım.

<!DOCTYPE html>
<html>
 <head>
  <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
 </head>
 <body>
  <div>Hello! My name is <strong>{{name}} {{surname}}</strong>.</div>
  <script type="text/javascript">
  var template, data;
  data={
   name: "Hayden",
   surname: "Mcguire"
  };
  template = $('div').html();
  $('div').html(Mustache.to_html(template, data));
  </script>
 </body>
</html>

Yukarıdaki data içeriğine baktığımızda name ve surname ifadelerini ve bu ifadelere atanmış değerleri görmekteyiz. Mustache bu ifadeleri aldıkları değerlerle birlikte işleme alıp Mustache.to_html() ile ilgili yer tutuculara (div içerisinde {{}} ile tanımlanmış alanlar) aktarmaktadır ve sonuç olarak {{name}} {{surname}} alanı karşımıza Hayden Mcguire olarak çıkmaktadır. Handlebars yazısındaki örnek ile oldukça benzer, değil mi? Bir benzerlik daha! İlgili işlemi şimdide script etiketi içerisinde gerçekleştirelim.

 <div id="content"></div>
  <script id="template" type="text/x-mustache-template">
   Hello! My name is <strong>{{name}} {{surname}}</strong>.
  </script>
  <script type="text/javascript">
   var template, data;
   data={
    name: "Hayden",
    surname: "Mcguire"
   };
   template = $("#template").html();
   $('#content').html(Mustache.to_html(template, data));
  </script>

Bu defa sadece body içeriğini düzenledim. Kodu uyguladığınızda çıktının bir önceki örnekteki ile aynı olduğunu görebilirsiniz. script kullanımı özellikle şablonlar oluşturmak istediğimizde yanı işlemleri tekrarlamamak adına (bkz. DRY) tercih edilmektedir. 100 satırdan oluşan Handlebars örneğinin buraya tıklayarak Mustache üzerinden yeniden ele alınmış halini görüntüleyebilirsiniz.

Web template sistemlerine ayrıca değineceğim bir yazım olacak¹². Bu toparlayıcı yazı öncesinde ele alacağım ek birkaç template sistemi daha var. İlgili template sistemlerinin giriş yazılarının sonrasında, örnekler içerisinde çokça pratik imkanımız olacak. Ayrıca, aşağıda bazı yazı önlerileri listeledim. Ele alınan örneklerin ve açıklamaların oldukça fayda sağlayacağını tahmin ediyorum.