Başsız CMS: WordPress ile Gatsby JS

WordPress'in, İçerik Yönetim Sistemlerinde %50'den fazla pazar payı ile dünyanın en iyi 1 milyon web sitesinin yaklaşık üçte birini kapsadığı ortak bilgisi. WordPress, 2016 yılında, diğer uygulamaların WordPress veritabanındaki içeriğe gelişmiş erişimini sağlamak için bir REST API sunmaya karar verdi. Sonuç olarak, geliştiricilere WordPress'i başsız bir CMS olarak kullanma yeteneği sağlar.

Bu kaçınılmaz olarak, mühendislerin artık WordPress'in geleneksel sunum katmanını (ön uç) kullanmakla sınırlı kalmayacaklarını, ancak artık verilerini iletmek için herhangi bir ön uç uygulamasından yararlanabileceklerini ima etti. Bunun ışığında, bu blogun çoğunluğu, WordPress ve Gatsby.js'nin Headless CMS uygulamasına ilişkin ilişkisini keşfedecektir.

CMS'nin Kısa Tarihi

Headless CMS devrimini anlamak için bir adım geriye gittiğimizde, içerik yönetim sistemlerinin (CMS) tarihini özetlemenin kayda değer olduğunu düşünüyorum. Geleneksel olarak, 90'ların başında, statik web sayfaları, bir web yöneticisinin doğrudan HTML dosyalarını düzenleyeceği ve bunları FTP yoluyla bir sunucuya yükleyeceği web sitelerini yürütmenin ana yoluydu. Sonunda, 90'ların ortalarında, web teknolojisi gelişmeye başladı ve içerik daha dinamik hale geldi, bu da ilk monolitik içerik yönetim sistemlerinin ortaya çıkmasına yol açtı.

Esasen, bir Monolitik CMS, içeriği web'de düzenlemek ve yayınlamak için gereken her şeyi içeren bir yazılım uygulamasıdır. Bu tür sistemlerden ilki EpiServer gibi kuruluşlarla sınırlıydı, ancak daha sonra WordPress, Drupal ve Joomla gibi açık kaynaklı varyasyonlar ortaya çıktı. Gerisi, WordPress'in zaman içinde en fazla pazar payını kazanmasıyla tarih oldu.

Ancak daha sonra akıllı telefon devrimi sırasında, mobil cihazlar web içeriğinin nasıl tüketildiğini ve sunulduğunu etkilemeye başladı. Bu, dizüstü bilgisayarlar ve masaüstü bilgisayarlar için web içeriği sağlamak üzere tasarlanmış geleneksel monolitik CMS'ler için bir meydan okumaydı.

Bunu azaltmak için, ekran boyutuna uyarlanabilir web sitesi düzenleriyle sonuçlanan duyarlı tasarım doğdu. Sonuç olarak, bu aynı zamanda içerik yönetimini görüntüleme katmanından ayırma fırsatı da sağladı. Başsız CMS'lerimizin girdiği yer burasıdır.

Başsız CMS'ler

Daha önce de belirtildiği gibi, Headless CMS, sunum katmanı olmayan bir CMS'dir. Sonuç olarak, içerik bir API (RESTful veya GraphQL) aracılığıyla, onu sunan ayrı ön uç uygulamasına iletilir. API, daha yüksek düzeyde güvenlik ve ölçeklenebilirlik ile çeşitli araçlar ve programlama dilleri kullanarak içeriği herhangi bir kanal ve cihaz için kullanılabilir hale getirir.

Esasen, CMS ön uç endişelerinden ayrılmıştır ve bu da geliştiricilerin mevcut en iyi teknolojiyi kullanarak son kullanıcılar için zengin deneyimler oluşturmasını sağlar. Gatsby sitelerinin önünü açan çoğu CMS tarafından şu anda “başsız” veya “ayrışmış” bir mod desteklenmektedir.

Bu nedenle, başsız bir CMS'den yararlanmak için önce sitenizi veya uygulamanızı oluşturmanız, ardından içeriğinizi eklemek için CMS API'sini kullanmanız gerekir.

WordPress Başsız CMS yürütme

Yukarıda paylaşılan olayların kronolojisi ile ilgili olarak, WordPress'in nasıl bir Headless CMS'yi gerçekleştirdiğini gördük. WordPress, eklentilerle (esas olarak bir 'uygulama çerçevesi' olarak) genişletmenize izin veren bir API (Uygulama Programlama Arayüzü) içerir. Özellikle bu, daha sonra yapacağımız gibi REST API aracılığıyla sağlanır.

Ancak, WordPress API'sinin temel kavramlarından biri kancalardır. Temel olarak, kancalar, eklentilerin WordPress temel işlevlerini değiştirmesine izin verir. Pratik olarak, Kancalar, WordPress'te belirli bir olay meydana geldiğinde (örneğin, sayfa yükleme veya düzenleme sonrası), WordPress'in işlevi çalıştırmak için belirli bir kancayı çağırdığı şekilde çalışır.

Özellikle, kancalar 'Eylemler' ve 'Filtreler' olarak ayrılır. Belirli olaylarda belirli PHP işlevlerini çalıştırmak için eylemlerden yararlanılabilir, ancak işlevlerin hiçbir şey döndürmesi gerekmez. Filtreler, WordPress'in belirli olaylar sırasında veri aktardığı işlevleri çalıştırmak için kullanılabilirken, bu işlevler verileri parametre olarak alır ve verilerin değiştirilmiş bir sürümünü döndürür.

WordPress ve REST API

Temsili durum aktarımı (REST), HTTP protokolüne dayanır ve veri (CRUD) oluşturmak, okumak, güncellemek ve silmek için tek tip arayüz semantiği sağlar.

Genel olarak, WordPress'teki REST API yürütmesi, geliştiricilerin JSON (JavaScript Object Notation) nesneleri gönderip alarak bir WordPress veritabanındaki verilere uzaktan erişmesini sağlar. Sonuç olarak bu, geliştiricilere WordPress ile tasarlanmayan diğer uygulamalardan WordPress verilerini oluşturma, okuma, güncelleme ve silme fırsatı sunar. Örneğin, JavaScript Web Uygulamaları veya yerel mobil uygulamalar.

Bununla birlikte, Başsız WordPress CMS'nin REST API'leri ve Gatsby ile ilişkisini daha iyi anladığımızda, WordPress API'sinin birkaç temel kavramını not etmemiz gerekecek:

• Rotalar ve Uç Noktalar: Rotalar, HTTP çağrısı yoluyla erişebileceğiniz yollardır, bir uç nokta ise o rotaya eşlenmiş bir HTTP yöntemidir (al, gönder, koy veya sil gibi).
• İstek: Kayıtlı bir REST rotasına bir HTTP isteği başlattığınızda, WordPress otomatik olarak bir istek nesnesi oluşturur. Talepte belirtilen veriler, hangi cevabı geri alacağınızı belirleyecektir.
• Yanıt: Bir Yanıt nesnesi, bir istek yaptığınızda geri aldığınız verilerdir. İstenen verilerden veya hata mesajlarından oluşabilir.
• Şema: Şema , uç noktadaki veri yapısını ifade eder. Her uç nokta, döndürebileceği biraz veya önemli ölçüde farklı veri yapısına sahip olabilir. Buna göre, bir şema, bir uç noktanın döndürebileceği tüm olası özellikleri ve alabileceği tüm olası parametreleri belirleyecektir.
• Denetleyici Sınıfları: Denetleyici Sınıfları, geliştiricilerin uç noktaları ve yolları yönetmelerine ve kaydetmelerine olanak tanırken, aynı zamanda istekleri işlemelerine, şema kullanmalarına ve yanıtlar oluşturmalarına olanak tanır.

Tepki 'Çerçeve'

Artık Gatsby.js ve WordPress ilişkisinin özüne girerken, daha fazla bağlam için bu teknolojik manzarayı daha tarihsel temellerden deşifre etmemiz gerekiyor. React, en hızlı büyüyen JavaScript ön uç kitaplığı/çerçevesi olduğu için bu hikayenin anahtarıdır. Facebook (temel geliştiricileri) tarafından ünlü hale getirilen diğer büyük web siteleri, Airbnb, Netflix, Dropbox, BBC, PayPal, Reddit, Salesforce, Squarespace ve Tesla gibi ön uçları için React'i kullanıyor.

Sonuç olarak, React pratikte bir kütüphane olduğundan (hala tam teşekküllü bir çerçevenin dikkate değer özelliklerinden yoksun olduğundan), bu, diğer 'çerçevelerin' bunun üzerine tasarlanabileceği anlamına gelir. Sonuç olarak bunlardan biri de Gatsby.js.

Gatsby ile tanışın

Ana web sitesine göre Gatsby.js, geliştiricilerin hızlı web siteleri ve uygulamalar oluşturmasına yardımcı olan React tabanlı ücretsiz ve açık kaynaklı bir JavaScript çerçevesidir. Prensipte, Gatsby.js ilk yükleme için uygulamalardan statik HTML sayfaları oluşturur ve ardından tek sayfalık bir React uygulaması (SPA) olarak ilerler.

Gatsby.js Özellikleri

Bu koşullar altında Gatsby, yalnızca önce gerekli olan öğeleri getirmek için Aşamalı Web Uygulaması (PWA) ilkelerinden yararlanır ve ardından uygulamanın geri kalanını daha sonra bir arka planda yükler. Ayrıca, yalnızca gerekli verilerin yüklenmesini sağlamak için Gatsby, verileri kaynaktan yüklemek için GraphQL sorgu dilinden (Facebook tarafından da) yararlanır. Ayrıca olağanüstü görüntü optimizasyonu sağlar.

Birleştirilmiş tüm bu özellikler, yalnızca kritik HTML, CSS, veri ve JavaScript yüklediğinden, geliştiricilere mümkün olan en hızlı web sitelerini ve web uygulamalarını oluşturmak için gerekli araçları sağlar. Bu nedenle, bir sayfa yüklendikten sonra Gatsby, bağlantılı sayfalar için kaynakları önceden getirir ve bu nedenle sitede gezinmek oldukça hızlı hissettirir.

Ayrıca, sayfalar çevrimiçi yerleşimden önce derleme sırasında oluşturulduğundan, artık güçlü PHP sunucularına ihtiyacınız yoktur ve statik dosyalar (HTML, JS ve CSS, doğrudan kova deposundan) sunabilirsiniz. Ek olarak, Gatsby, React tarafından desteklendiğinden, her şeyi bileşenlerle güzel bir şekilde yapılandırabileceksiniz. Bu modüler özellik, geliştiricilerin bileşenleri kolayca yeniden kullanmalarını sağlar.

Kutudan çıkan diğer önemli Gatsby özellikleri şunları içerir:

• Statik site oluşturucu
• Çevrimdışı erişim
• Bağlantılı sayfaları önceden getirme
• Sayfa önbelleğe alma
• Yabancı kod getirme yok
• Kod olarak dışa aktar
• Sıcak yeniden yükleme içeriği
• Sıcak yeniden yükleme kodu
• bileşenleştirme
• Tek yönlü veri bağlama
• Bildirime dayalı API veri sorguları (GraphQL)
• bildirime dayalı kullanıcı arayüzü
• Aşamalı görüntü yükleme
• Duyarlı görüntü yükleme
• Kritik CSS'nin satır içine alınması
• Yazı tipi kendi kendine barındırma
• sunucusuz
• Varlık ardışık düzenleri
• CSS Uzantıları (SaSS)
• Gelişmiş JavaScript sözdizimi
• React bileşen ekosistemi

Gatsby Eklentileri

Esasen, Gatsby eklentileri temelde Gatsby API'sini kullanan Node.js paketleridir. Bu eklentiler veri kaynakları ekleyebilir, verileri diğer biçimlere dönüştürebilir ve üçüncü taraf hizmetleri ekleyebilir. Gatsby.org, çekirdek Gatsby ekibi veya üçüncü taraflarca yapılmış birçok halihazırda yapılmış eklentileri içeren bir eklenti kitaplığına sahip olsa da. İdeal olarak, bir Gatsby projesi için bir eklenti kurmak için geliştiriciler, UNIX terminallerinde düğüm paketi yöneticisini (NPM) kullanır ve npm install komutunu çalıştırır.

GraphQL Nasıl Geliyor, Gatsby ile ilişkilidir.

GraphQL, API'ye tam olarak istediğiniz verileri tam olarak tanımlayabileceğiniz fikri etrafında döner ve tam olarak bunu alırsınız. Sonuç olarak, REST'ten daha verimlidir. Bu amaçla Gatsby, Webpack ve GraphQL kullanır. Daha da önemlisi, sorgu dili olarak GraphQL ile, her şey istemcinin sorguyu yürüten tarafında tanımlanır ve istemci, uygulamanın eksik çalışmasından habersizdir.

Bu benzersiz uygulama, geliştiricilerin herhangi bir veri kaynağını Gatsby'ye bağlamasını sağlar. Örneğin, blog gönderileri Markdown dosyalarından, Google sayfalarından ve hatta başka bir WordPress web sitesinden gelebilir. Bu nedenle, içerik teslimi ile gelişmiş esneklik sağlar.

Gatsby-WordPress Mekanizması (Kaynak Eklentileri)

Bu ilişkiyi daha da açarken, kaynak eklentileri anlamamız gerekiyor. Kaynak eklentiler, Gatsby'nin veri sistemi içinde çalışan özel eklentilerdir. Adından da anlaşılacağı gibi, yerel veya uzak farklı konumlardan veri sağlarlar. Sonuç olarak, veriler daha sonra Gatsby'nin düğümler ve düğüm alanları olarak adlandırdığı şeye dönüştürülür. Temel olarak, düğüm alanları bir düğüm içindeki tek bir veri parçasını temsil eder ve nihayetinde bu düğümlere bir GraphQL sorgusu aracılığıyla erişilebilir.

Aynı genişlikte, kaynak eklentileri aracılığıyla Gatsby düzinelerce başsız CMS seçeneğini destekler, mühendislik ve içerik ekiplerine tercih edilen yönetici arayüzünün rahatlığını ve aşinalığını sunarken, gelişmiş geliştirici deneyimi ve Gatsby, GraphQL ve React kullanmanın performans avantajlarından yararlanır. başlangıç ​​aşaması.

'Gatsby-source-WordPress' eklentisi, Gatsby çekirdek ekibi tarafından oluşturulur ve korunur ve kendi kendine barındırılan WordPress sitelerinden veya WordPress.com'dan veri çeker. Ayrıca, Word-Press.com API için OAuth kimlik doğrulaması gerektirir ve ayrıca geliştiricilerin duyarlı görüntüleri sorgulamasına olanak tanır.

Esasen bu eklenti, yazılar, sayfalar, etiketler, kategoriler, medya, türler, kullanıcılar, durumlar, taksonomiler, site meta verileri ve özel gönderi türleri gibi WordPress REST API'sindeki tüm varlıkları destekler. Ayrıca, Gelişmiş Özel Alanlar (ACF) varlıkları ve Polylang ve WPML dil bilgileri, REST API'sine kayıtlı diğer gönderi metalarına ek olarak desteklenir.

Bu nedenle, bu eklenti ile geliştiriciler, varsayılan olarak tüm wpjson uç noktalarını getirse de, hangi rotaların getirileceğini seçebilir. Böylece geliştiriciler, yukarıdaki mekanizmayı kullanan GraphQL ile WordPress'ten veri alabilir.

Uygulamada, 'Gatsby-source-WordPress' aracı, tüm gönderiler ve diğer varlıklar için bir bilgi sağlar. Ve böylece, bir mühendisin tek yapması gereken, 'createPage' işlevini çağıran sayfa oluşturmaktır. Bu, Gatsby-node.js dosyasında, normalde önce veri kaynağı için sorgu çalıştırılarak ve ardından bulunan her düğüm için 'createPage' çağrılarak ve ardından bileşen olarak kullanılacak bir şablon dosyası ayarlanarak yürütülür.

CI/CD ve Uygulama Yayın Otomasyonu.

Gatsby ile başsız bir WordPress CMS uygularken, dağıtımın nasıl gerçekleştirildiği son derece önemlidir. Tipik olarak, bu tür yürütmeler, bir uygulamanın dağıtımının Uygulama Yayın Otomasyonu (ARA) kullanılarak otomatikleştirilmesini gerektirir.

Genel olarak, ARA birincil işlevleri içerir:

• Veri dağıtımı, uygulama kodu ve yapıtlar.
• Her ortam için belirli yapılandırmaların dağıtımı
• Görevleri ve dağıtım adımlarını otomatikleştirmek için süreç iş akışı tasarımı.
• Son olarak, ortam modelleme ve/veya ikili dosyalar sağlama

Gatsby statik siteler ürettiğinden, WordPress'te içerik güncellendiğinde, buna uygun olarak Gatsby sitesinde güncellenebilmesi için bir ARA ardışık düzeni kurmak zorunludur. Tipik olarak, sürekli dağıtım yalnızca kod değiştiğinde tetiklenir, ancak bu örnek için veri değiştiğinde tetiklenmesi istenir. Bunun için Netlify kullanmanızı öneririz. harika yerleşik sürekli dağıtım yeteneklerine sahip olduğundan ve kurulumu kullanıcı dostu olduğundan.

GraphQL ve gatsby-source-WordPress kullanarak WordPress'ten sorgulama

Bir örnek olarak, gatsby-source-WordPress, önce REST kullanarak uç noktanızdaki her şeyi getirecek şekilde çalışır. Ardından, bu verilere dayalı olarak dahili bir GraphQl API oluşturacaktır. Ardından, sorgularınızı gözden geçirecek ve bu dahili GraphQL API'sinden verileri toplayacaktır. Yani, temel olarak, derlemeniz yalnızca istediğiniz verilerle biter, başka bir şey değil.

Gatsby.js ile Headless WordPress geliştirmenin avantajları

Gatsby ile Headless WordPress geliştirmeye değindiğimiz için, artık bu tür teknik yaklaşımın artılarını sıralayabiliriz. Bu, esasen Gatsby'yi kabul edip etmeme konusundaki kararınızı yönlendirmelidir!

• İlk fayda, statik, önceden oluşturulmuş bir siteye sahip olma yeteneğidir. Bu, bir web sayfasını oluşturmanın en etkili yoludur ve Gatsby gereken minimum miktarda veriyi yürütmek için GraphQL kullandığından, bu, ilk yüklemeden sonraki süre için ekstra verimlilik sağlar.
• Geliştirilmiş SEO görünürlüğü: Her şey önceden oluşturulduğu ve dizine eklenebilir olduğundan, statik sayfaların arama motorları tarafından okunması kolaydır. Bu, JavaScript ile sayfa oluşturmanın arama motoru optimizasyonu (SEO) ile ilgili bir sorun olduğu diğer başsız mekanizmaların aksine olumludur.
• Nispeten hızlı geliştirme hızı: Diğer başsız yaklaşımlarla karşılaştırıldığında, Gatsby, kaynaktan bağımsız olarak verileri getirmenin birleşik, anlaşılması kolay bir yoluna sahiptir. Bu, gerçek sitenize odaklanabileceğiniz ve Gatsby'nin ağır işlerin çoğunu yapmasına izin verdiğiniz için geliştirmeyi oldukça basitleştirir.
• Daha Ucuz Barındırma: Gatsby uygulamanızı, yalnızca statik dosyalar sunduğu için her yerde barındırabilir, böylece barındırma masraflarını azaltabilirsiniz. Ek olarak, WordPress yalnızca oluşturma işlemi sırasında ve hiçbir zaman kullanıcı oturumu sırasında çağrılmadığı için uygun fiyatlı bir barındırma çözümünde de barındırılabilir.
• Gelişmiş Güvenlik: Genel olarak konuşursak, statik site oluşturucular, bir veritabanına, bağımlılıklara, kullanıcı verilerine veya diğer hassas bilgilere doğrudan bağlantı olmadığından son derece güvenlidir.
• Eklentisiz: Geliştirici olmayanların bakış açısından, mevcut eklentiler nedeniyle WordPress'in kullanımı oldukça kolaydır. Ancak bu, özel işlevlerin uygulanmasını kısıtlar. Ne yazık ki, çok fazla eklenti de bir siteyi ağırlaştırdığı ve işlenmesi zorlaştığı için yavaşlatabilir. Bir Gatsby yürütmesi, tüm bu darboğazları esasen atlatır.

Sizi Gatsby'yi WordPress ile düşünmeye motive edebilecek diğer özellikler:

• Kolay yönetilebilir WordPress yönetici paneli.
• Kullanıma hazır kullanıcı giriş sistemi ve yetkilendirme.
• Gatsby ve Gutenberg editörüyle, sürükle bırak Gatsby site oluşturucu oluşturabilirsiniz.

Gatsby.js ile Headless WordPress geliştirmenin dezavantajları

• Güncelleme sınırlamaları: İçerik sıfırdan değiştiğinde, sitenizin ne sıklıkta güncellenebileceğine ilişkin kısıtlamalar belirler. Ek olarak, siteniz çok fazla veri içeriyorsa, Gatsby derlemesini çalıştırmak 10 dakika kadar sürebilir ve bu, sık sık güncellenen siteler için bir sorun olabilir.
• Düzenli Güncellemeler Hustles: Ayrıca, Gatsby statik bir site oluşturucu olduğundan, küçük metin değişiklikleri bile yeni bir dağıtım gerektireceğinden, yalnızca "düzenlenemez". Bu nedenle, birçok dinamik günlük içerik değişikliği gerektiren bir sayfanız varsa, bu zaman alıcı ve yorucu olabilir.
• Gecikmeler: İçeriğinizdeki değişiklikleri canlı olarak görmek için genellikle birkaç dakika beklemeniz gerekir.
• Önizleme Eksikliği: Geleneksel WordPress uygulamalarından farklı olarak, Gatsby'de herhangi bir önizlemeniz yoktur. Ne yazık ki, içerik oluşturucuların Gatsby ile bulduğu en büyük sorun bu oldu. Her şeyi, muhtemelen web sitesini derleyen ve her şeyi çevrimiçi hale getiren Gitlab CI/CD ardışık düzenleriyle derlemeniz gerekecek.
• Hızlı Öğrenme eğrisi: Genel olarak, Gatsby ve WordPress ile aynı anda çalışmak istiyorsanız, hem PHP hem de JavaScript dillerine nispeten aşina olmanız gerekir. Gatsby, React ve GraphQL'yi birleştirdiğinden, bu birçokları için zorlu bir öğrenme eğrisi olabilir.

Son düşünceler.

Sonuç olarak, performansı ve iş avantajları sayesinde, daha fazla şirket Gatsby'yi teknoloji yığınının bir parçası olarak uyguluyor. Gatsby'yi WordPress ile birleştirerek WP'nin yalnızca arka uç haline geldiğini hatırlamak önemli olsa da, bu, bazı işlevselliklerini ve yeteneklerini kaybedeceğiniz anlamına gelir.

Ayrıca, WordPress geliştirme konusunda deneyimli geliştiriciler, modern performansı, ölçeklenebilirliği, güvenliği ve geliştirme hızı avantajlarıyla Gatsby'yi harika bir araç olarak göreceklerdir. Tüm bunlar, WordPress tarafından sunulan tanıdık içerik oluşturma kullanıcı arayüzünü korumalarına izin verirken.

Ancak, bu teknolojiyi başlatmadan önce, her zaman proje özelliklerini ve hedeflerini göz önünde bulundurmalıdır. Örneğin, vurgu ölçeklenebilirlik, performans, geliştirme hızı, uzun yaşam döngüsü ise, Gatsby yapacaktır. Ancak, programcı olmayan içerik oluşturucular için içeriğin saniye veya dakika bazında güncellendiği gelişmiş esnekliğe ve araçlara sahip olmak vurgulanıyorsa, alternatif bir yaklaşım düşünebilirsiniz.