JAMstack Nedir?

Netlarus¹ ve Blogger² üzerine deneyimlerimi aktarmakla ile başladığım blog serüveni WordPress’in de dahil olmasıyla çok başka bir nokta evrildi. Bu süreçte elbette daha pek çok yeni teknoloji hem araçların özelliklerinde hem de kullanıcıların davranışlarında yer etti. Günümüzde pek çok farklı ortamda sürekli veri üretir hale geldik. Biz arayüzler vasıtasıyla hareket ederken perdenin arkasında milyonlarca servis birbirleri ile çeşitli protokoller, diller, mimariler aracılığı ile iletişim kurar oldu. Daha hızlı, daha kararlı, daha esnek… yapılar üzerine inşaa edilen yeni yaklaşımların adı değişse de amacı aynı kaldı; veriye ulaşmak. JAMstack bu yeni yaklaşımlardan sadece bir tanesi ve uzun bir süre üzerine konuşacağız gibi görünüyor.

JAMstack

Javascript, API ve son olarak Markup baş harflerinin -ve elbette bu yapıların- bir araya gelmesi ile ortaya çıkan, temelinde daha iyi performans, daha yüksek güvenlik, daha düşük ölçekleme maliyeti ve daha iyi bir geliştirici deneyimi sunan bir web sitesi ve web uygulamalar yaklaşımı diyebiliriz. Zaten göz önünde olan teknolojilerin bir araya gelmesi üzerine kurulu bu yaklaşım şu anki hali ile son kullanıcılardan ziyade geliştiriciler bağlamında çözümler sunmakta. API-first bir temel üzerine inşaa edildiği için amaca yönelik bir aksiyon planı üzerine ilerlenmesi gerekiyor. Nedenlerine değinmeden önce, biraz daha geçmişe ve JAMstack’in ilk adımlarına dönelim³.

2008-2010 yılları arasında, JavaScript tarafındaki önemli gelişmeler (V8 JavaScript motoru, 2009 ECMAScript 5’in sürülmesi)⁴ ve sunucu tarafında da Node.js⁵ ile (2009 yılı) JavaScript’in gücünden ve pratikliğinden faydalanılabilmesi günümüzde üzerine konuştuğumuz pek çok yaklaşımın da zeminini oluşturuyor. JAMstack de bunlardan biri; ilk paragrafta da dediğim gibi, malzemeler ortadaydı, sadece bir amaç doğrultusunda bir araya getirilmesi gerekiyordu.

WordPress ve benzeri içerik yönetim sistemlerinin temel aldığı LAMP, MEAN ve MERN gibi geleneksel diyebileceğimiz, bir web sitesinin ve/veya uygulamanın sunumunu sağlayan yığın uygulamaları ile çalışan geliştiricilerin içerisinde bulunduğu daha hızlı, daha esnek, daha güvenli ve daha geliştirici dostu çözüm arayışı da çok geçmeden Netlify⁶ şirketinin ortaya çıkışını (2013) sağlıyor. Netlify bu arayışa 2 önemli ürünle katkı sağlıyor; Netlify CMS ve JAMstack web geliştirme mimarisi. Mimari, 2016 yılı itibariyle de artık adı anılan, örnekleri ortaya çıkan bir mimari olarak yerini alıyor⁷.

Evet, JAMstack öncülüğü Netlify tarafından yapılan, istemci tarafında JavaScript kodu, bilgi alışverişi için API’lar ve içerik sunumu için markup dillerini barındıran bulut tabanlı bir modern web geliştirme mimarisi. Bu mimari, bir web sitesinin ve/veya uygulamasının sahip olduğu içeriklerin ve kodların önceden oluşturulması ve bu çıktının CDN veya dağıtık barındırma alanları üzerinden statik sayfalar olarak sunulabilmesi esasına dayanmakta. JAMstack.org bu mimarinin geniş kitlelere ulaştırılması amacıyla yayın yapan ve pek çok pratik bilgiyi barındıran mimarinin resmi web sitesi. StaticGen⁸ ise JAMstack siteleri için kullanılabilecek Next.js, Gatsby, Hugo, Nuxt, VuePress, Jekyll, Gridsome, GitBook, R Markdown gibi daha pek çok statik site üreticininaracın yer aldığı bir kaynakça⁹.

JAMstack mimarisinin iki önemli iki aracı; React temelli GatsbyJS¹⁰ ve Vue temelli Gridsome. Ben ilerleyen yazılarda ve örneklerde Gridsome üzerinden ilerleyeceğim. Ancak, yazının son bölümünde yer alan Örnek Uygulamalar ve İleri Okumalar başlığı altında pek çok alternatife yer verdim, göz önünde bulundurmanızı öneririm.

JAMstack Çalışma Mantığı

JAMstack web geliştirme mimarisi her şeyin kullanıcıya servis edilmeden önce gerçekleştirilmesini sağlar. Önceden oluşturulan bu çıktılar dağıtık bir ağ üzerinde tutulur ve kullanıcının isteğine kendisine en yakın sunucu cevap verir¹¹. WordPress ve benzeri içerik yönetim sistemi ve/veya uygulamalarda sorgular işlenir, belleğe alınır ve ardından kullanıcının isteğine cevap olarak iletilir. Bu süreci JAMstack uygulamaları farklı ele alsalar da şu başlıklar üzerinden bir genel gruplandırma yapılabilir:

Bileşenler: JAMstack yapı iskeletlerinin (Gatsby, Gridsome vb.) önemli yapı biçimleridirler. Vue aşinalığınız var ise bileşenlere aşinasınız. Değilseniz, bileşenleri iç içe geçebilen ve yeniden kullanılabilir arayüz öğeleri olarak değerlendirebilirsiniz.

Düzenler: Bileşenlerin bir araya gelmesi ile oluşturulan ilişkiler bütünüdür. Veriler bu düzenler içerisinde yer alırlar.

Sayfalar: Bağımsız düzenlerdir. Anasayfa, ürün sayfası, blog içeriği, iletişim sayfası vb. yapılar düzenler üzerine inşa edilmiş ancak en temelde düzenli bir şekilde bir araya getirilmiş bileşenlere sahip yapılardır. Her biri kendine has genel bir biçim oluştururlar.

Eklentiler: Farklı görevlerin gerçekleştirilmesi için kullanılan, web sitesine ve/veya uygulamaya işlevsellik katmak amacıyla çalışmanıza entegre edebileceğiniz geliştirme parçacıklarıdırlar.

Konfigürasyon: Her yapı iskeleti amaca yönelik oluşturulmuş ve/veya düzenlenmiş bir tanımlar ve ayarlar bütününe ihtiyaç duymaktadır. Bu dosya en yalın haliyle site adı, eklentiler, ilişki tanımlarını barındırır.

Bileşenler, düzenler, sayfalar ve eklentileri istediğiniz ölçüde yapılandırabilirsiniz. Elbette ne kadar çok ve iç içe ise yönetimi de o ölçüde karmaşık olacaktır. Dolayısıyla kontrollü gitmekte fayda var; KISS.

JAMstack: İlk Adımlar

Kullandığınız yapı iskeletine bağlı olarak işlemlerde bir dizi komuttan faydalanırız ki genelde aynı komutlar karşınıza çıkacaktır; dev ve build.

dev komutunu yerel geliştirme ortamında, build koutunu ise sitenin yayına hazırlanması aşamasında kullanırız.

dev komutu aracılığıyla kod değişiklikleri, içerikler ve tasarım düzenlemeleri hızlı bir şekilde uygulanır. İşlemler geliştirme amacına yönelik olarak gerçekleştirilir. build komutu kullanımında ise çıktılar bir dizin içerisinde (genelde ./dist) statik olarak toplanır. Bu komutlarla ilgili uygulamalara Gridsome kurulum ve temel bazı örnek işlemler üzerinden detaylıca değineceğim.

JAMstack: Dezavantajlar / Sınırlar

Her şeyin bir bedeli var elbette ve JAMstack kusursuz bir geliştirme mimarisi değil. Öncelikle, avantaj olan aynı zamanda bir dezavantaj -en azından şimdilik- diye bu başlığı özetleyebiliriz. Çünkü, sunulan hizmet(ler) bağlamında;

Fiyatlandırma oldukça değişkendir.
Bazı içerik yönetim sistemleri sizi kendi barındırma ve CDN hizmetlerini kullanmaya zorlayabilir ya da bu imkanları çeşitli sınırlandırmalar bağlamında sunabilir.

Tercih edilen içerik yönetim sistemi ve yapı iskeleti bağlamında;

Kullanıcı arayüzleri belirli sınırlar dahilinde özelleştirilebilirler ve bazı duyarlılık / mobil uyumluluk problemleri yaşanması olasıdır.
Kullanılan içerik yönetim sistemine (tercih dahilinde) bağlı olarak görseller üzerinde düzenlemeler yapılsa da yalın halinde JAMstack görseller üzerinde dinamik işlemler gerçekleştirme olanağı sunmaz.
Kullanıcılara roller atama ve/veya erişim kısıtlamaları gibi gibi özellikler çoğu zaman mevcut değildir.
Site içerik ilişkilerini (kategori ilişkileri vb.) görüntülemek mümkün olmayabilir.
Çok dilli ve coğrafi yerelleştirme nadiren sunulmaktadır.
Form kayıt işlemleri, oturum açma ve benzeri dinamik özellikler çoğu zaman seçenekler arasında yer almaz.

JAMstack: En İyi Uygulamalar

JAMstack sayfası üzerinden pek çok bilgiye¹² ve örnek uygulamaya¹³ ulaşmak mümkün. Ayrıca aşağıda çeşitli başlıklar altında işe yarayacağını düşündüğüm bazı kaynakları listeledim. JAMstack ile ilgili bir sonraki yazıda Gridsome temelinde konulara değineceğim. İlerleyen süreç içerisinde de bir WordPress web sayfasının nasıl statik olarak sunulabileceği üzerine fikir pratiğin, uygulama sürecini ve sonuçlarını doğrudan paylaşmayı amaçlıyorum.

JAMstack Nedir?

JAMstack

JAMstack Çalışma Mantığı

JAMstack: İlk Adımlar

JAMstack: Dezavantajlar / Sınırlar

JAMstack: En İyi Uygulamalar

Takip Edilebilecek Podcast Yayınları

Takip Edilebilecek Etkinlikler

Takip Edilebilecek Websiteleri

Takip Edilebilecek Youtube Kanalları / Videoları

Örnek Uygulamalar

İleri Okumalar