Web Template (Şablon) Sistemleri

Bu yazı altında, konuyu toparlamak adına şablon sistemlerini web bağlamında ele alacağım. Bu sayede, tema anlatımlarında hem bu ana başlığı, hem de ilgili template yapılarını benzerlikleri ve farklılıkları üzerinden güncel tutmak istiyorum. Konumuza giriş yapmadan önce, ilgili yazıları bir arada görebilmek adına aşağıda listeliyorum.

Yukarıdaki listeyi diğer popüler template sistemleri çerçevesinde çok daha detaylı anlatımlar ve örneklerle genişletmek mümkün. Fakat, ilgili başlıkları Grav, Ghost ve WordPress tema hazırlama süreçleriyle ilişkilendireceğim için sınırlı bir şekilde ele aldım. Bu vesileyle, Jade, Haml, Smarty gibi template (şablon) sistemleriyle ilgili yazılarınız var ise ayrıca bu yazı dahilinde referans olarak paylaşmaktan memnuniyet duyarım.

Web Template (Şablon) Sistemleri

Yazılım projelerinde (mobil uygulama, web sayfası, web uygulaması, masaüstü uygulaması…) yazılım ve tasarımın ayrı yapılar halinde yürütülmesi hem geliştirme sürecini, hem de ortaya çıkarılacak ürünü (product) daha etkili kılmaktadır. Yazılımcılar ve tasarımcılar arasındaki bağımsızlık ya da kontrollü ilişki iş süreçlerinin ve iş yapış biçimlerinin (MVC (Model View Controller) gibi yazılım geliştirme desenlerinden (pattern) ayrıca bahsedeceğim.) çakışmasını engellemektedir. Bu durum, ürün ortaya çıkartma ve geliştirme süreçleri için (style standardization ve reusability) çok büyük bir avantajdır.

Web templating (şablonlama) web sayfalarının sunumunu tasarım düzeni (layout) ve stilini (style) çeşitli fonksiyonlar / özellikler dahilinde yönetebilmeyi sağlayan bir teknik olarak ifade edilebilir¹. Temel olarak bu teknik çerçevesinde tasarım sürecinin daha işlevsel, etkili ve pratik hale getirilmesi amaçlanır. Template geliştirme sürecinde mümkün olduğu kadar yalın ve tekrarsız (DRY; Don’t Repeat Yourself / Kendini Tekrar Etme) bir yol izlenir. Oluşturulan yapılar (template dosyasıyla ilintili layout ve stiller) bir template engine (şablon motoru) tarafından dinamik olarak işlenir ve bir çıktı olarak sunulur.

Web template system (web şablon sistemi) ise birbirinden ayrı olarak tutulan veri/içerik (data/content) ile sunumun (HTML, XML ya da PDF dosyasının oluşturulması aşaması) bir araya getirilmesini sağlar. Bu sayede tasarımcılar ve geliştiriciler tarafından üretilen yapılar verinin sunumunu ortak bir zeminde uygulama içeriği olarak yansıtır.²

Günümüzde, template sistemleri HTML escaping, filters, logic şeklinde ifade edilen oldukça gelişmiş özellikler sunmaktadırlar. Bu özellikler, ihtiyaçlar çerçevesinde ortaya çıkan geliştirme ve görselleştirme yapılarıyla (kütüphaneler; paketler, eklenti ve geliştirmeler, JavaScript ve CSS frameworkler vb. Bkz. node.js, react, webpack, vue.js, angular…) ilişkili olarak değişiklikler gösterebilmekte ve hatta kendi standartlarını oluşturabilmekteler. Örneğin, Mustache bir JavaScript template engine olarak ortaya çıkmasına karşın bir dil standardı oluşturmuş ve sunucu tabanlı diller de dahil pek çok dil tarafından benimsenmiştir. Diğer yandan, Twig Symphony2 ile öne çıksa da pek çok farklı içerik sistemi ve framework ile ayrıca kullanılabilmektedir. Elbette her engine sunduğu odaklandığı noktalar üzerinden ayrışmaktadır; static site generators, server-side systems, edge-side systems, client-side systems, distributed systems.

Template Engine Çalışma Biçimi

Bir template içeriğinde önceden yazılmış yer tutucular ve bloklar barındırır. Bu işlem genellikle geliştiriciler tarafından gerçekleştirilir. Edinilen veri bu yer tutuculara ve/veya bloklara engine tarafından aktarılır³. Elbette bu süreç, engine’in kapsamına bağlı olarak şekillenebilmektedir. Bazı template enginler logic (active template engine) olarak ifade edilen işlem yeteneklerini ya hiç desteklemezler (passive template engine) ya da sınırlı bir şekilde (less-logic) sunarlar. Bu yetenekler çerçevesinde template sistemleri çıktı oluşturma sürecinde (bir HTML sayasının oluşturulması gibi) koşullar (conditionals) ve döngülerle (loops) içeriği manipüle edebilmektedir. Ayrıca, sözdizimi farklılıkları da söz konusudur. Jade, kapatma tagları yerine indentation (tab ve boşluklarla yapılan girintiler) kullanımını tercih ederken (ki bu seçeneklerden biri tercih edilir ve sürecin tamamında aynı şekilde ilerlenir) Handlebars tagleri benimser.

Wikipedia, Comparison of web template engines başlığı altında, sundukları özellikler bakımından çeşitli template engine karşılaştırmalarını görebilirsiniz⁴. Ayrıca, yazı içerisindeki ifadelere kaynaklık etmiş içeriklere de aşağıda yer verdim. Template engine konusuna dair daha detaylı bilgi edinmek için ilgili yazıları inceleyebilirsiniz.