Gridsome Nedir?

VueJS, API kullanımı, Headless CMS, JSON ve YAML, Markdown dosyalar ve son olarak da -en azından bu yazı bağlamında WordPress şu an için bize yeterli bir çözüm sağlayacaktır. Ancak, uygulama senaryolarından önce bizim için orkestrasyonu sürecini yürütecek ve işlerimizi daha pratik bir şekilde çözmemize olanak sağlayacak olan yapı iskeletine (framework) değinmemiz gerekiyor.

Gridsome

Gridsome, geliştiriciler için modern web siteleri ve web uygulamaları geliştirme imkanı sunan, açık kaynak bir Vue.js geliştirme iskeletidir. React¹ temelinde geliştirilen GatsbyJS² ile benzer bir işleyişe sahiptir. Node.js (v8.3+) aracılığıyla işlemlerini yürütür. Bu nedenle, geliştirme ortamında Node.js bulunması gerekmektedir. Paket/modül yönetimi için Gridsome Yarn kullanımını tavsiye etmektedir. Ben de örneklerde Yarn üzerinden ilerleyeceğim.

Gridsome bir şu imkanları sunar:

Front-end çözümünü Vue.js ile çözer,
Local geliştirme sürecini efektif hale getiren ve dosya değişikliklerinin hemen yansımasını sağlayan anlık güncelleme çözümü sunar.
Statik ve dinamik URI eşleştirme
- Dosya temelli statik URI eşleştirme ile srcpages altında oluşturulan her *.vue dosyasına URI karşılığı oluşturur.
- Yine sec/pages altında [param].vue şeklinde dinamik URI karşılığı oluşturma imkanı da mevcuttur.
Statik dosya oluşturma ile üretilen çıktılar herhangi bir CDN ve/veya Netlify gibi statik dosya barındırma servisinde barındırılabilir.
Veri kaynağı olarak Headless CMS’ler, API’ler ve Markdown dosyaları kullanılabilir.
Verilerin yönetiminde katman olarak GraphQL kullanılır.
Her sayfada etkin şekilde kod ayırma işlemi uygulanır.
Zengin bir eklenti ekosistemi sunar.

Özetle, Gridsome yardımıyla kolaylıkla Vue temelli statik ve/veya dinamik web siteleri ve modern uygulamalar hazırlayabilirsiniz. Ancak, bu işlemler için temel düzeyde HTML, CSS ve Vue.js bilgisi germekmekte. Diğer yandan, işlemlerin çoğu terminal aracılığı ile gerçekleştirildiği için en azından klasörler arasında gezinim ve komutların uygulanması gibi konularda da bilgi sahibi olmanız avantajınıza olacaktır. GraphQL ise bir zorunluluk değil. Fakat ileri düzey işlemlerde, özellikle uygulama geliştirme sürecinde fayda sağlayacaktır.

[resimage src=gridsome-nasil-calisir" uri="gridsome-nedir" alt="Gridsome Nasıl Çalışır?" class="mb-3"]

Gridsome build edildiğinde (bkz. gruesome build) her *.html dosyası için bir *.json dosyası daha oluşturur ve ilk sayfa yüklendiğinde sonraki yükleme ve veri getirme talepleri işlemler için sadece JSON dosyasını kullanmaya başlar. Aynı şekilde, kod bölme amacıyla ihtiyaç olan her sayfalar için bir *.js dosyası oluşturur. Daha detaylı bilgi için How it works³ sayfasına göz atabilirsiniz.

Gridsome Çözümleri

Gridsome ve benzeri uygulamaların odaklandığı konu verinin (bu bir içerik de olabilir API aracılığıyla bir veri yığını da) hızlı ve amaca yönelik olarak statik veya dinamik olarak sayfa veya uygulama olarak erişilebilir hale getirilmesidir. Bu maksatla Gridsome Pages, Collections, Templates, Layouts, Images, Linking konseptlerini sunmaktadır.

Sayfalar (Pages)

Sayfalar, Vue bileşenlerinin src/pages klasörüne eklenmesiyle oluşturulmaktadır. Bu yapı dosya temelli URI eşleştirme özelliğini kullanır. Örneğin, src/pages/About.vue dosyası alanadi.com/about yolu üzerinden erişilebilir hale gelecektir. Gridsome sayfalar konsepti basit sayfalar ve blog gibi listelemeler için kullanılabilir. Dosya temelli, programatik sayfalar ve dinamik URI eşleştirme gibi konular hakkında daha detaylı bilgi için Gridsome: Pages sayfasını inceletebilirsiniz.

Koleksiyonlar (Collections)

Blog içerikleri, etiketler, ürünler gibi içerikler ve Headless CMS, API erişimleri veya Markdown içerikleri için koleksiyonlar konseptinden faydalanılabilir. Bu işlemler için Data Store API⁴ ve eklentileri inceleyebilirsiniz⁵.

Örneğin, veri kaynağı olarak WordPress, Drupal, Shopify, Airtable, Ghost, Craft CMS gibi içerik yönetim sistemleri ve Strapi gibi servislerle kolay bir şekilde entegrasyon sağlanarak içeriklerin hızlı bir şekilde Gridsome aracılığı ile oluşturulması sağlanabilir. Bu amaçla oluşturulmuş olan Gridsome Startes⁶ bölümünü inceleyerek hızlı başlangıç şablonlarından faydalanabilirsiniz.

Şablonlar (Templates)

Şablonlar sayfaların (node) gösteriminden sorumlu koleksiyonlardır. Genellikle src/templates altında bulunurlar. Gridsome şablonların yapılandırmasında eğer herhangi bir bileşen belirtilmemişse, koleksiyon ile aynı ada sahip bir dosyayı bulmaya çalışır.

Düzenler (Layouts)

Düzenler sayfa ve şablonların içerisinde bulunan ve içeriği kapsayan Vue bileşenleridir.

Görseller (Images)

Gridsome görsel işlemlerinde ön tanımlı olarak <g-image> bileşenini kullanır. Bu bileşen aracılığı ile görselleri optimize edebilir, boyutlandırabilir ve kırpabiliriz. Ek olarak lazy load özelliği de sunar.

Bağlayıcılar (Linking)

Gridsome görseller gibi bağlantılar için de ön tanımlı bileşene sahiptir. <g-link> bileşeni IntersectionObserver⁷ ile bağlantı halindeki sayfaları önceden getirir. Bu sayede tıklanan sayfa çok hızlı bir şekilde görüntülenmektedir. Yukarıdaki temel özellikler başta olmak üzere Gridsome aracılığı ile kullanılabilecek diğer tüm özellikleri Fast by Default⁸ bölümü altında görebilirsiniz. Gridsome ile ilgili temel bilgilerin sonrasında, bir sonraki yazıda kurulum ve temel kullanımlara değineceğim.