Yazılım Mimarileri ve Tasarım Desenleri Üzerine

Node.js (Express) – Pug Nedir? Genel Bakış

Gençay
Pug

Merhaba,

Dünya değişiyor, iyi kötü bir hale bürünüyor. Her geçen gün bir öncekinden ya nesnel değişiklikle farkını ortaya koyuyor ya da bambaşka bir renk ile yeni hayata kaldığı noktadan devam ediyor. Tabiatın fıtratında bir matematik varken insanı hesaba katınca kompleks ve öngörülemez bir vaziyet ortaya çıkıyor. İnsan hayatı “bugün < yarın” bağıntısıyla yorumlamakta ve dünlere, yarınlara nazaran beyhude bir anlam katıyor. Dünyanın girmiş olduğu bu anlamsız maratondan mesleklerde nasibini alıyor. Hangisi olursa olsun icrasında dünde kalan sanatçı çok geçmeden bu günden antika muamelesi görüyor.

Velhasıl, bizler kendi icra ettiğimiz yazılım sanatında dünü geçebilmek ve bu güne bir nebze eşlik edebilmek için bu çabayı göze almış ve mesleğimizin bir parçası olarak başından beri kabul etmiş bulunmaktayız. Şimdi bu içeriğimizde zamanla HTML yapısındaki devrimsel gelişimin neticesi olan Node.js’de ki Express.js modülünün Pug yapısı üzerine konuşuyor olacağız.

Pug Nedir?

HTML mimarisel olarak etiket aç/kapat mantığında çalışan bir yapısal özelliğe sahiptir.
Örneğin aşağıdaki kod bloğunu incelersek;

<html>
<head>
    <title>Örnek HTML</title>
</head>

<body>
    <p>Merhaba</p>
</body>
</html>

şeklinde oluşturulan html yapısı biz yazılımcılar için aç/kapat işleminde zaman maliyetini getirmektedir.

Pug ise bu maliyeti oldukça düşürmekte ve html’e nazaran daha kolay bir yaklaşım sergilememizi sağlamaktadır.
Yukarıdaki örneği Pug ile gerçekleştirirsek eğer;

html
    head
        title Örnek HTML
    body
        p Merhaba

şeklinde çalışmamız yeterlidir. Bu görmüş olduğunuz yapı aslında yukarıdaki ile birebir aynı özelliği sergilemektedir.

Tabi ki de Pug yapısının, yapısal ve işlevsel kritik noktalarını makalemizin devamında gerektiği noktada konuşacağız lakin şimdilik Pug’ı tanımlamaya devam edelim.

Pug’ın genel özellikleri;

Pug Entegrasyonu

Pug’ı kullanabilmek için projenize aşağıdaki kodlarla entegrasyonu sağlayabilirsiniz.

npm install pug --save

Pug Yapısal Kriterleri ve Özellikleri

Pug yapısını oluştururken dikkat edilmesi gereken özelliklere ve kurallara göz atarsak eğer;

Pug Dosyasını Render Etmek

Bir önceki Node.js – Express Nedir? başlıklı makalemde Node.js’de Express.js’in ne olduğundan ve express.js ile sunucu oluşturmaktan bahsetmiştik. İşte bizler Pug dosyalarını ilgili makaledeki yapıyı kullanarak render edeceğiz.

Tabi öncelikle projemizin ana dizininde “views” adında bir klasör oluşturalım ve ardından içerisine herhangi bir isimde “.pug” uzantılı dosyamızı ekleyelim. Örneğin “pug2.pug”

html
    head
        title Örnek HTML
    body
        | Merhaba

Ardından “.js” uzantılı çalıştığımız dosyamızda aşağıdaki çalışmaları gerçekleştirelim;

const express = require("express");
const app = express();
//İlgili uygulamaya pug mtooru belirtilmektedir.
app.set("view engine", "pug");
app.get("/", (request, response) => {
    //pug dosyası response ile render edilmektedir.
    response.render("pug2");
});
app.listen(5000, () => {
    console.log("Yayın başladı...");
});

Gördüğünüz gibi “app.set” fonksiyonuyla ilgili route’a pug motoru tanımlanmakta ve “response.render” fonksiyonu ile “pug2” isimli pug dosyamız render edilmektedir. “Peki hoca sistem “pug2” dosyasının views klasörü altında olduğunu nereden biliyor?” diye sorma ihtimalinize nazaran pug’un varsayılan olarak view nesnelerini ana dizindeki “views” klasörü altında aramakta olduğunu söylemekte fayda var.

Bu işlem neticesinde ilgili pug dosyamız render edilmiş olacaktır ve belirtilen portta belirtilen route adresinde çalıştırılacaktır.

Pug Programatik Özellikleri

Pug yapısında html’de olmayan programatik yapıları kullanabilmekteyiz. Şimdi sırasıyla bu yapıları inceleyelim;

Evet, bu içeriğimiz ile Pug yapısı üzerine güzel bir giriş yaptığımızı ve olaya tam teferruatlı sağlam temeller attığımızı düşünüyorum. İçeriğimizde genel olarak bilinmesi gerekenleri sunduğumuzdan dolayı bundan sonraki Pug ile ilgili kalan diğer konuları kendilerine has içeriklerde ele almayı tercih ediyorum.

O halde sonraki yazılarımda görüşmek üzere diyelim…
İyi çalışmalar…

Mobil sürümden çık