GatsbyJS Harika !

Öncelikle GatsbyJS’e neden ihtiyaç duydum ondan bahsedeyim. Kişisel web sitem ve bir kaç uğraştığım teknolojiler ile ilgili haberler paylaşacağım bir platform (reacturkey) kurmak istiyordum ve açıkcası işlerden dolayı bunları güzelce oluşturmak için zamanım yoktu ve bir gün net üzerinde Reactiflux adında bir slack grubunda GatsbyJS ve Contentful ile ilgili bir konuşmaya dahil oldum ve orada öğrendim. Sitesine girdiğimde çok çekici geldi ve biraz uğraşayım dedim şuan bu yazıyı GatsbyJS ile geliştirmiş olduğum yerden yazıyorum. :)

GatsbyJS Nedir?

Gatsby; React tabanlı, GraphQL destekli statik web site oluşturucusudur.

Peki bu ne demek ?

Yani, React, Webpack, React-Router, GraphQL ile basit bir içerik oluşturmak için bile saatlerinizi alan implementasyonları kolaylaştırarak, geliştiricilerin daha sancısız ve eğlenceli işler yapmasına olanak sağlıyor. Tabi statik kelimesine çok takılmayın aslında gatsby basit bir statik oluşturucudan çok daha fazlasını sunuyor.

Çılgınlar gibi yüklenen web sayfaları, service worker’lar, SSR, code splitting, akıllı görüntü yükleme ve optimizasyonu bunlardan bazıları. Ben denedikten sonra bu hıza gerçekten inanamadım :)

Siz sadece siteyi geliştiriyorsunuz ve Gatsby bunu tek bir HTML ve statik verilere çeviriyor. Bu klasörü ftp’ye yükledikten sonra herşey hazır :)

Ne var bu kadar abartılacak?

Ne gerek var bunlara zaten kendi web pack yapım hazır onu kullanırım birde bunu mu öğreneceğim diyebilirsiniz veya create-react-app yaparım komple sıfırdan takılırım da diyebilirsiniz. Ama ben bunlara ayıracak zaman bulamadığım için işin kolaylığına kaçmak istedim ama yine de gatsbyjs’i diğerlerinden ayıran ve dünya üzerinde de freelance developerlar arasında bu kadar popüler olmasını sağlayan özel yanlarından bahsedeceğim.

İlk olarak Gatsby veri katmanı oluşturmak için GraphQL kullanıyor yani bu demek oluyor ki siz verilerinizi heryerden alabilirsiniz: MD dosyalarından, JSON, CMS, 3RD Api’ler, istediğiniz heryerden. Ve build ettiğiniz anda çekilen bu veriler iç tarafta bulunan GraphQL sunucusunu oluşturuyor. Böylece, react komponentlerinde de tüm data querylerden geçiriliyor aynı anda yani oluşturma zamanında da sorgulardan geçirilmiş ve istediğiniz datayı ve alanları basmış oluyorsunuz.

İkinci olarak, ekosistem çok geniş topluluklar fazla insanlar, ajans şirketleri, freelancer developerlar, remote developerlar çok fazla kullananlar var ve insanlardan bu yapıdan memnun çünkü hızlı ve güçlü bir yapı. Gatsby’nin çok uzun bir geçmişi yok ama dökümantasyonu gerçekten çok güzel, hızlı ve pratik. Ve başlangıç setleriyle hızlıca site yayınlayabiliyorsunuz.

GraphQL’i yapılandırma olayı gözünüzü korkutmasın GatsbyJS sitesinde ve pluginlerinde bunu iyi dökümente etmiş bir kaç satır kod ile kolaylıkla yapabiliyorsunuz.

Son olarak ise performans gerçekten çok iyi. Performansı ve erişebilirliği adamlar ön planda tuttuklarından ürün bittiğinde hızı da göründe “abi bune çok iyi ya” hissiyatını veriyor adama. Normal bir boilerplate veya generatör değil toplu bir çözüm yapmış adamlar sevdim.

React ve GraphQL bilmek zorunda mıyım ?

Bu çok tartışılan bir konu kimisi diyor gerek çok fazla az bişey bilseniz yeter kimisi diyor olduğu yerde sayarsınız çok basit şeyler çıkarırsınız. Bu sorunun cevabı bana göre “Evet” ama bilmiyorsanız’da react ve grapql’i öğrenmeye başlamak için gatsbyjs’i kullanabilirsiniz. Bilmiyorum, mutlu ediyor adamı. :)

Nerden başlamalıyım?

Eğer bir bakayım neyin nesiymiş diyorsanız, daha önce de bahsettiğim gibi GatsbyJS’in kendi sitesinde çok iyi dökümantasyonu ve eğitimleri var bu yüzden sitesine gidip dökümantasyonu okuduktan sonra, CLI’i kuruyorsunuz, “new” komutuyla yeni sitenizi oluşturuyorsunuz dizine gidiyorsunuz “gatsby develop” diyerek localhost linkinizi alıp başlıyorsunuz.

Ve Gatsby sitemiz çalışıyor. Bunu production için derlemek için, ‘develop’ durdurup, ‘gatsby build’ çalıştırıyoruz ve build klasörünü nerde host etmek istiyorsanız oraya yüklüyorsunuz bu kadar.

Başlangıç setlerini es geçmeyin derim çünkü bunlar gatsby için boilerplate gibi bir şey. Eğer verileri nerden çekeceğinize karar verdiyseniz her şey belliyse bunlara özel başlangıç setleri var mutlaka bakın derim. Çünkü bunlarda özel configler ile kolayca entegre olabilir hızlıca sitenizi yayına alabilirsiniz.

Eğer “yok abi noob işi” diyorsanız default starter’ı kullanarak sıfırdan başlayabilirsiniz.

İyi yere gider mi nolur bu işin sonu?

Valla aslında şu hali bile yetiyor da zaten çok uzun zaman olmamış release olalı v1 Temmuz 2017’de çıkmış ve baya değişmiş resmen angular 1 misali çöpe atıp v2 yapıp Haziran 2018 de piyasaya çıkmışlar. Bir kaç değişiklik olacak diyorlar ama bunlar artı yönde direk ters köşe eden şeyler olmayacağını söylüyorlar. Genelde olması gerekenleri yapmışlar.

Mesela v1’de web pack 1 kullanırken (neden 1 bilmiyorum ilginç olmuş) v2’de web pack 4’e yükseltmişler. E tabi React’te şimdi v16’da Context,Fragments, Hook gibi şeyler getirdi onlar GatsbyJS tarafına da yarayacaktır.

Bu arada Reacturkey.com React ile ilgili türkçe içerikleri ve deneyimlerimi paylaşacağım bir platformuda hazırlıyorum.

Bildiklerimi, deneyimlediklerimi, anladıklarımı paylaşmaya çalıştım. Okuduğunuz için teşekkür ederim, sağlıcakla kalın :)

Ozan Manav

Yayın Tarihi 12 Ara 2018

Full Stack Yazılım Mühendisi
Ozan Manav on Linkedin