Jamstack
Kurcalamak istediğim ama bir türlü üzerinde çalışma fırsatı bulamadığım bir konu; GatsbyJS ve Netlify ikilisi. Bunları kurcalamaya başladığım dönemde bir de yeni bir mimari çıktı; JAMstack. Bu yazı dizimde kısaca bu konuları anlatacağım ve bu teknolojiler arasındaki entegrasyonları nasıl yapabileceğinizden bahsedeceğim.
İlk yazımda Jamstack nedir, ne amaçla kullanılır onlardan bahsedeyim.
JAMstack nedir?
JAMstack istemci taraflı Javascript kodu, yeniden kullanılabilir API’ler ve markup(işaretleme) içeriğine dayalı bulut tabanlı bir web geliştirme mimarisidir. Ana fikir; web sunucularını yönetme veya çalıştırma gereksinimini ortadan kaldırarak, önceden derlenmiş (pre-rendering) dosyalarla oluşturulan ve doğrudan CDN üzerinden direkt olarak sunulan hızlı ve güvenli siteler ve uygulamalar yaratmaktır.
Geleneksel iş akışı ile JAMstack’in iş akışı
Daha anlaşılır olabilmesi adına yukarıdaki iki farklı yöntemi de anlatan bir akış çizdim.
Geleneksel yol şu şekilde:
Bir kullanıcı gelsin ve sitenizdeki bir blog yazısını görmek istesin.
1- Diyelim ki elinizde React ile yazılmış bir kod var. Kodunuzu build edip kullanıma hazır hale getirirsiniz.
2- Kodu build ettikten sonra bunu bir sunucuya deploy edebilirsiniz. Verileriniz bir veritabanı üzerinde tutulur. Sunucu ve veritabanı yerine CMS’de kullanabilirsiniz tabi ki.
3- Sunucu, veritabanından aldığı veriyi kullanıcıya gösterir.
4- Yeni bir veri geldiği zaman bu veritabanına yazılır.
Buradaki en önemli nokta; kod build olurken veri kodun içerisinde değildir. Veri, kullanıcıdan gelen istek üzerine gidilip sunucu üzerinden veritabanına erişilerek alınır.
JAMstack ile bu geleneksel yol şu hale geliyor:
1- Diyelim ki elinizde React ile yazılmış bir kod var. Kodunuz build olma aşamasında gider CMS üzerinden gerekli verileri alır. Kodunuz gerekli veriler ile birlikte hazır hale gelir.
2- Kod build olduktan sonra CDN üzerine deploy edilir.
3- Kullanıcıya istediği veri CDN üzerinden alınır ve gösterilir.
4- Yeni bir veri geldiği zaman bu CMS üzerine yazılır.
Buradaki sorun; yeni bir veri geldiği zaman bunun kullanıcıya gösterilme kısmı. Veri build aşamasında alındığı için yeni verileri almak için tekrar build işlemi gerekiyor. Bu noktada bize sık aralıklarla build almamızı sağlayacak bir araç gerekiyor ya da bu işi kendimiz yapacağız. İşte bu noktada Netlify devreye giriyor. Her bir dakikada 3 build alıyor. Böylece yeni gelen bir veri varsa o hızlıca kullanıcılara gösterilmiş oluyor. (Netlify konusuna diğer yazılarımda daha ayrıntılı anlatacağım.)
Jamstack sayesinde veritabanı ile sürekli bir iletişim halinde olmadığımız için çok hızlı şekilde gelen isteklere cevap verebilir hale geliyoruz.
Jamstack 3 temel üzerine kurulmuştur:
1- Javascript
VanillaJS kullanabileceğiniz gibi güncel frameworklerden birini de tercih edebilirsiniz.
Kullanabileceğiniz örnek programlama dilleri: vanillaJS, React, Vue, AngularJS
2- API
Veritabanı ya da backend’e ihtiyaç duymadan backend’in fonksiyonelliğini kullanamak gerekiyor. Herhangi bir API kullanabilirsiniz, herkese açık ya da özel olarak yarattığınız API’ler de olabilir. Daha önce yarattığınız backend uygulamasını da kullanabileceğiniz gibi third-party denilen dışarıdan alıp kullanabileceğiniz API’ler de kullanılabilir.
Kullanabileceğiniz örnek teknolojiler: Contentful, netlify CMS, Siteleaf, ButterCMS, Forestry
3- Markup
Bu katman web sitemizin görsellik katmanıdır. Kendi HTML-CSS kodunuzu yazabilir ya da Hugo, Jekyll veya Gatsby gibi bir şablon kullanabilirsiniz. Hazır olan teknolojileri kullanarak şablon oluşturma süresini büyük ölçüde düşürebilirsiniz. Yeni teknoloji öğrenmek ilk başta çokca zaman alsa da sonrasında baya bir hızlanacaksınız.
Kullanabileceğiniz örnek teknolojiler: Gatsby, Hugo, NextJS, Jekyll vb.
Jamstack belirli teknolojilerle ilgili değildir. Daha iyi performans, daha yüksek güvenlik, daha düşük ölçekleme maliyeti ve daha iyi bir geliştirici deneyimi sunan web siteleri ve uygulamalar oluşturmanın yeni bir yoludur.
Peki neden JAMstack’e ihtiyaç duyarız?
Eğer karmaşık olmayan internet uygulaması tasarlayacaksanız, sadece statik bir web sitesi oluşturmak istiyorsanız JAMstack size göre.
Karmaşık olmayan ne demek?
Sadece verilerin listelenmesi, basit bir formun kaydedilmesi gibi aslında veritabanı ile fazla iletişime geçmemiz gereken durumların minimum olduğu demektir.
Peki bir sitenin dinamik ya da statik olması ne demektir?
Statik web siteleri genellikle belirli bir düzene sahip sabit sayıda sayfa ile gelir. Sayfa bir tarayıcıda çalıştığında, içerik tam anlamıyla statik olur. Siteniz her bir kullanıcı için aynı cevabı verir. Yani bir kullanıcı için şunu göster, diğeri için şunu göster diyemeyiz. Notepad gibi basit metin editörlerinde genellikle HTML ve CSS ile statik bir web sitesi oluşturabilirsiniz.
Dinamik bir web sitesi daha işlevseldir. Kullanıcıların sayfada listelenen bilgilerle etkileşime girmesini sağlar. Her bir kullanıcı için farklı yanıtlar dönebilirsiniz. Örneğin farklı kullanıcılar için verileri farklı göstermek sayılabilir. Tabii ki, dinamik websitesini yapmak için HTML kodundan daha fazlasını kullanmanız gerekir.
Şu noktayı da belirteyim; eğer Netlify kullanıyorsanız, sizin sitede/uygulamada yaptığınız herhangi bir değişiklik anında kullanıcılara gösterilecek demektir. Bu da aslında statik olan bir sitenin/uygulamanın sanki dinamikmiş gibi çalışmasını sağlayacaktır.
JAMstack’in farkları nelerdir?
Gördüğüm farkları az bir deneyimle şu şekilde sayabilirim:
- JAMstack önceden derlenmiş (pre-rendering) dosyaları/verileri kullanır. Bu sayede veritabanından, ‘git bana gerekli verileri getir’ demek için vakit kaybetmeden, zaten hali hazırda elinde olan veriler ile siteyi ayağa hızlıca kaldırır. En önemli fark budur bence.
- Frontend ve backend kısmını net bir şekilde ayırmanızı sağlar. Böylelikle aynı backend kullanılarak farklı frontend ile farklı uygulamalar geliştirebilmenize olanak sağlar. Bir örnek vereyim; daha önceki iş yerimde ‘white labeling’ projesi yapılmak istendi. Ancak backend ve frontend iç içe olduğu için bunun kolay bir şekilde yapılamadığını gördük.
Şunu da söylemekte yarar görüyorum; tabi ki paylaşımlarım yaşadığım kişisel tecrübelerime dayanıyor. Olabildiğince de yararlandığım dökümanları paylaşıyorum ki imkanı olan gidip oradan da okusun, bilgilensin.
Diğer yazılarımda görüşmek üzere :)
Kaynaklar:
