VUE.JS

Gridsome Nedir?

Güncelleme:
Daha önce, çoğunlukla başlangıç düzeyinde anlatımlarla temelini oluşturduğum yazıları örnek senaryolar üzerinden birleştirmeye başlayabiliriz. VueJS, API kullanımı, Headless CMS, JSON ve YAML, Markdown dosyalar ve ...
GÖRSEL

Daha önce, çoğunlukla başlangıç düzeyinde anlatımlarla temelini oluşturduğum yazıları örnek senaryolar üzerinden birleştirmeye başlayabiliriz. 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 Nasıl Çalışır?

Gridsome Nedir?

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 src/pages 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/ya 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/ya 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. Gridsome Nasıl Çalışır? 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. Gridsome Collections Ö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.
İleri Okumalar
Kaynakça
  1. Gridsome
  2. Gridsome: How it works
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.