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.
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, 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:
src/pagesaltında oluşturulan her
*.vuedosyasına URI karşılığı oluşturur.
gruesome build) her
*.htmldosyası için bir
*.jsondosyası 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
*.jsdosyası oluşturur. Daha detaylı bilgi için How it works sayfasına göz atabilirsiniz.
src/pagesklasörüne eklenmesiyle oluşturulmaktadır. Bu yapı dosya temelli URI eşleştirme özelliğini kullanır. Örneğin,
src/pages/About.vuedosyası
alanadi.com/aboutyolu ü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.
<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.
<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.