Marcy Sutton ile Çarpıcı Podcast 20. Bölüm: Gatsby Nedir?

Bugün Gatsby'den bahsediyoruz. Nedir ve web geliştirme yığınınıza nasıl sığar? Drew McLellan öğrenmek için uzman Marcy Sutton ile görüşür.

Notları göster

• Gatsby
• Twitter'da Marcy
• Marcy'nin kişisel web sitesi

Haftalık güncelleme

• “Google'ın Yardımıyla Sitelerinizi Hızlı, Erişilebilir ve Güvenli Hale Getirin”
  tarafından Dion Almaer
• “Gatsby'de Eklenti Geliştirmeyi Anlamak”
  tarafından Aleem Isiaka
• “Tauri ve Vue.js ile Minik Masaüstü Uygulamaları Oluşturma”
  tarafından Kelvin Omereshone
• “E-Ticaret Gönderim ve Envanter Uyarılarından Paniği Kaldırma”
  Suzanne Scacca tarafından
• “Vuejs ve Nuxtjs'de CSS Geçişleri”
  Timi Omoyeni tarafından

Transcript

Drew McLellan: Gatsby'deki Geliştirici İlişkileri ekibinin baş mühendisidir. Daha önce, açık kaynaklı balta çekirdekli erişilebilirlik testi kitaplığı üzerinde çalıştı ve ayrıca Adobe'de erişilebilirlik mühendisi olarak çalıştı. Web'i engelli insanlar için geliştirme konusunda tutkulu ve konferanslarda sık sık bu konuda konuşuyor. 2016'da O'Reilly, erişilebilirlik alanındaki çalışmaları nedeniyle web platformu ödülünü verdi.

Drew: Aynı zamanda yerel bir bölgede Seattle ve NW Tech Kadın Buluşmaları'nın erişilebilirliğine de liderlik ediyor. Dolayısıyla onun yetenekli bir mühendis ve erişilebilirlik uzmanı olduğunu biliyoruz. Ama onu Angel Falls'a bir varil içinde göndermek istediğini biliyor muydun? Ezici dostlarım lütfen Marcy Sutton'a hoş geldiniz.

Marcy Sutton: Merhaba.

Duru: Merhaba. Marcy. Nasılsınız?

Marcy: Eziyorum. Nasılsınız?

Duru: Ben çok iyiyim. Teşekkür ederim. Bugün seninle Gatsby hakkında konuşmak istedim. Çünkü bir önceki bölümde Mina Markham ile React'i öğrenmekle ilgili yaptığım bir sohbette gündeme geldi. İnternetteki tipik bir erkeğin, doğrudan deneyimim olmayan bir şey hakkında fikir verme tehlikesiyle karşı karşıya olduğumu fark ettim. Yani Smashing'de işler böyle yapılmaz.

Drew: Ben de Gatsby'yi düzgün bir şekilde ele aldığımızdan emin olmak istiyorum. Ve bunu yapmanın içini dışını bilen biriyle konuşmaktan daha iyi bir yol var mı? Yani, belki de Gatsby adını duyduğumu varsayarsak. Ancak web sitesi oluştururken yığının neresine sığdığı hakkında hiçbir fikrim yok. Gatsby tam olarak nedir.

Marcy: Gatsby bir web sitesi oluşturucudur, şu anda React kullanıyor. Ancak sizin için statik bir web sitesi oluşturacak ve daha sonra tam bir React web uygulamasına dönüşecektir. Böylece, kullanıcılar için hızlı yüklenecek HTML dosyalarını derlediğiniz hızlı derlemelerle her iki dünyanın da en iyisini elde edersiniz. Ardından, gerçekten etkileşimli dinamik web uygulamaları oluşturmak için JavaScript ile tüm bu geliştirmeleri elde edersiniz.

Marcy: Yani, içinde olmak gerçekten heyecan verici bir yer. Ve belgelerle öğrenme tarafında çalışıyorum ve şimdi Devrel ekibinde, JavaScript ile erişilebilirlik zorluklarını bilerek, onu olabildiğince iyi hale getirmeye odaklandım. ve sadece içten dışa düzeltmeye çalışıyorum.

Drew: Birçoğumuz statik site oluşturucu kavramına aşina olacağız. Ve Gatsby bu role geniş ölçüde uyuyor gibi görünüyor. Ama bana göre çoğu SSG'nin yaptığından çok daha ileri gidiyor. Ve çoğu site oluşturucu, ön uç koddan bağımsızdır. Görünüşe göre Gatsby ile, sitenizin bir parçası olarak çalışan Gatsby koduyla sonuçlanıyorsunuz. Bu adil bir değerlendirme mi? Ve eğer öyleyse, Gatsby ön uçta gerçekte ne tür şeyler yapıyor?

Marcy: Evet, bunun en büyük parçasının istemci tarafı yönlendirme olduğunu söyleyebilirim. Yani, Gatsby şu anda kaputun altında erişim yönlendiricisini kullanıyor. Bir nevi kendi uygulamasını yapıyor. Ancak bu, statik sitenizi ilk kez yüklediğinizde, orada HTML dosyalarının olduğu parçadır. Bu nedenle, kullanıcı herhangi bir nedenle JavaScript'i kapatırsa, siteniz hala orada olmalı, yine de içeriğe sahip olmalıdır.

Marcy: Ama JavaScript etkinse, o zaman bu hidrasyon adımı gerçekleşir, burada, Gatsby sitenizdeki bağlantıları kullandığınızda, o sayfadan kaynakları önceden getirir, böylece daha hızlı yüklenir. Yani, tüm bunlar Gatsby'nin size sunduğu bu JavaScript katmanıyla mümkün. Ve bunun ötesinde, sitenizde ne kullandığınıza bağlı olarak JavaScript paketinde sonuçlanacaktır.

Marcy: Ama erişilebilir arayüzler gibi çok fazla etkileşim kullanan şeyler için orası iyi bir yer. Benim için, JavaScript'in her zaman elimde olması ve işaretlememin iyi bir noktada olması gerçekten hoşuma gidiyor. HTML'nizin, JavaScript'inizin ve CSS'nizin her türden düzgün bir şekilde birleştirilmesini isteyip istemediğinizin ve Gatsby'nin oluşturulmasında varyasyonlar için yer olup olmadığının bir tercih meselesi olduğunu biliyorum.

Marcy: Her zaman CSS ve JS gibi bir şey kullanmak zorunda değilsin. Ancak bu, web sitenizi yazarken size sunulan dinamik JavaScript katmanının gücünü elde etmekle ilgilidir. Ayrı bir dosyada bu eklenti gibi değil.

Drew: Statik bir site oluşturucunun genellikle nasıl çalıştığını düşündüğümde, belki de Markdown dosyalarındaki içeriği düşünüyorum. Oluşturucu bu içerik üzerinde çalışır ve onu şablonlarla birleştirir ve web sitenizin sayfaları olan 10'lar, yüzlerce, binlerce HTML dosyası oluşturur. Bir React sitesi veya uygulaması düşündüğümde, daha çok, arayüzlerin React tarafından anında oluşturulduğu tek sayfa deneyimi hakkında düşünüyorum. Yani Gatsby'nin ikisini de yaptığını mı söylüyorsunuz? Tüm sayfaları oluşturuyor ve ayrıca JavaScript ile geliştiriyor mu?

Marcy: Öyle, evet. Gatsby, Node.js'yi derleme zamanında kullanacak, React bileşenlerinizi gözden geçirecek ve bunları HTML dosyalarında derleyecektir. Dürüst olmak gerekirse, Gatsby'ye ilk baktığımda JavaScript'i kapatmazdım ve "Pekala, burada başka sayfalar var mı, bu nedir?" Ve Gatsby'nin varsayılan olarak bu şekilde çalışmasına çok sevindim. Tepki bileşenlerinizden yerleşik dosyalar oluşturacak, bu harika.

Marcy: JavaScript'te olduğundan daha ilerici geliştirme yaklaşımlarını araştırdım. Örneğin, kullanıcılar için aşamalı olarak geliştirilmiş bir şeyin çıktısını almak istiyorsanız, JavaScript kapalıysa, JavaScript'in orada olduğunu varsayan tüm bu bozuk kodu istemezsiniz. Yani onunla bazı tuhaflıklar var. Ancak, en azından birinin hala bir şeyler satın alabilmesini istediğiniz temel kullanıcı akışlarınız için bu tür bir şey üzerinde çalışabilirsiniz, bu tür kullanım durumları için biraz destek eklemeniz gerekebilir.

Marcy: Ama Gatsby'nin bunu varsayılan olarak yayma şekline hoş bir şekilde şaşırdım. Bu nedenle, siteleri bu şekilde inşa etmek için yaptıkları bir seçim ve biz bunu her zaman değerlendiriyoruz. Hala en iyi yol mu? Kullanıcılarımıza istediklerini vermek için ne yapmalıyız? Bu nedenle, Gatsby'nin bir web sitesi oluşturma konusunda elinden gelenin en iyisini yaptığından emin olmak için şirket içinde bazı keşifler yapıyoruz.

Marcy: Yani paket boyutlarını küçük tutmak ve söylediklerimiz için takas yapmak için önceden getirme ile performans kodu olduğundan emin olmak. Mesela, bunu destekleyecek verilere sahip miyiz? Bu, bir geliştirici savunucusu olarak benim çok ilgilendiğim türden bir şey, web sitelerinde paketlediğimiz ve paketlediğimiz şeyin gerçekten gerekli olduğundan ve gerçekten yapabileceği en iyi Gatsby sitesini oluşturacağından emin olmak.

Drew: Orada performanstan bahsettin ve performansa büyük bir odaklanma var. Kesinlikle Gatsby'nin kendini sunma şeklinden görünüyor. Bu Gatsby'nin gerçek bir özelliği mi yoksa JAMstack web sitelerinin doğası mı?

Marcy: Bunun JAMstack web sitelerinin bir özelliği olabileceğini düşünüyorum. Sonuçta, web sitenizde paketlediğiniz şeye inecek. Bu nedenle, hangi çerçeveyi veya aracı kullanırsanız kullanın, son kullanıcılar için bu paketlere ne koyduğumuz konusunda yine de dikkatli olmalıyız. Ancak Gatsby size gerçekten iyi varsayılanlar vermeyi amaçlıyor. Sadece performans için değil, erişilebilirlik için de.

Marcy: Ama bu her zaman değerlendirme gerektirir, her zaman bir şey eklediysek, bunun hala performans gösterdiğinden emin olmalıyız. Ama evet, ilk statik dosya yükünü alarak hızlı yüklenirler. Eskiden sahip olduğum klasik WordPress sitesinden çok daha hızlı. Ama sonra JavaScript ile geliştirmek. Orada kesinlikle bazı takaslar var.

Marcy: Ama gerçekten iyi çalışıyor, birçok insan Gatsby sitelerini gerçekten seviyor. Bu nedenle, tam zamanlı olarak üzerinde çalışmak ve Gatsby gibi bir JavaScript çerçevesinin içini ve dışını öğrenmek eğlenceliydi.

Drew: Sadece Gatsby sitelerinizi hızlandırmak için ne tür performans özelliklerini devreye soktu?

Marcy: Bağlantılar için önceden getirme ile, bu müşteri yönlendirme şeyler söyledi, bunun muhtemelen en büyüğü olduğunu söyleyebilirim. Aşamalı bir web uygulaması oluşturmayı gerçekten kolaylaştırıyor. Bu nedenle, bazı çevrimdışı yeteneklere sahip olarak, çevrimdışı ve PWA türü şeyler açısından istediğinizi seçebilir ve seçebilirsiniz. Ancak, başlangıç ​​deneyiminin bu kısmını gerçekten yapıyorlar, örneğin başlangıç ​​için kullanabileceğiniz birçok örnek sitede bir manifesto kullanma örnekleri ve web sitenizin bu modern versiyonunu oluşturma gibi.

Marcy: Gerçekten, ihtiyacın olmayan kodu göndermemek gibi. Bu büyük bir kısmı. Önbelleğe alma, bu gerçekten bağlantılar için önceden getirme. En büyük parçası bu diyebilirim.

Drew: Yani site aslında kullanıcının nereye gideceğini tahmin ediyor. Bu kadar akıllı mı yoksa sayfadaki her şeyi önceden mi getiriyor?

Marcy: Hayır, kullanıcı etkileşimine dayanıyor. Bu nedenle, kullanıcı Görünüm bağlantı noktasını aşağı kaydırırsa, orada bir ön getirme işlemi gerçekleşir. Bağlantıların üzerine gelirseniz, o sayfaya gitme şansınızın oldukça yüksek olduğunu tahmin eder. Sanırım, önceden getirmenin klavye odağında da gerçekleşip gerçekleşmeyeceğini açık kaynak olarak dahili olarak konuşuyorduk, bu nedenle erişilebilirlik ve performansın kesişimi çok ilginç.

Marcy: Fareyi kullanamayan ve gezinmek için her bağlantıda sekmeler yapan bir klavye kullanıcısı gibi bazı takaslar var, bu gerçekten bunların her biri için içerik getiriyorsa, bir fare kullanıcısı biraz daha seçici olabilir fare imlecini nereye koydukları hakkında. Bu yüzden, bu konuşmaları son derece büyüleyici buluyorum.

Marcy: Ve bu varsayımları doğrulamak için hangi verilere ihtiyacımız olduğunu düşünmeye çalışıyoruz. Yani evet, bu varsayılanlara bakmak çok ilginçti ve ne gibi iyileştirmeler yapabiliriz ve bunun ne kadar veri getirdiğini gerçekten kontrol edebiliriz? Bu gerçekten iyi bir şey mi? Biraz hızlandırmak için mi? Yoksa onsuz yeterince hızlı mı? Tüm bu ödünleşimleri değerlendirebilmek için bir çerçeve üzerinde çalışmanın eğlencesinin bir parçası olarak kullanabileceğimiz alternatif çözümler var mı?

Drew: Bu, kullanıcıların sitelerinde ücretsiz olarak edindiği bir şeyi önceden getiriyor. Peki bunu uygulamak için herhangi bir çalışma yapmak zorundalar mı?

Marcy: Gatsby bağlantısını kullanarak ücretsiz olarak alabilirsiniz. Bu, Gatsby ile birlikte gelen bir bileşendir ve bunu kullandığınızda bağlantı etiketleri çıkarır. Yani HTML'niz gerçek HTML'dir ve web platformundan bu şekilde yararlandınız. Ancak React bileşenlerinizde doğrudan Gatsby bağlantı bileşeniyle çalışıyorsunuz. Ve bunun için tüm bu mekanizmalara sahip… Gelecekte HREF'in ne olacağına, gitmek istediğin yerin o bağlantısına bakar ve o bağlantıdan kaynakları alır ve onları önceden yükler.

Marcy: Ve bu yalnızca sitenizin içindedir. Yani kapanmıyor ve diğer web sitelerinde bir şeyler getirmeye çalışmıyor. Ama oldukça iyi çalışıyor gibi görünüyor. Bazı kullanıcıların aktif olarak yollar aradığını biliyorum, sanki bu şeylerden bazılarını devre dışı bırakmanız gerekiyormuş gibi. En azından yönlendirme, önceden getirmeyi kullanma. Sadece normal bağlantı etiketleri kullanırsınız. Ve sonra bu işlevi gerçekten alamıyorsunuz. Başka bir şey kullanmak oldukça kolaydır. Ancak yaptığımız tartışmalardan bazıları, istemci tarafı yönlendirme ve bunun en iyi şekilde nasıl yapılacağı hakkında. Ve böylece, bu da gerçekten ilginç bir alan.

Drew: Kendi bağlantı bileşenime sahip olmak isteyip istemediğim konusunda Gatsby ekosisteminde ne kadar yakın çalışmanız gerekiyor? Böyle bir şey yapmak için Gatsby'ye karşı savaşıyor olmam tamamen iyi olur mu?

Marcy: Hayır, React çalışma zamanı ile çalıştıkları sürece, istediğiniz bileşenleri yerleştirebilirsiniz. Bu gerçekten onun güzelliği. Bir React uygulamasına koyabileceğiniz her şeyi bir Gatsby uygulamasına koyabilirsiniz. Pre-React eklentisi bile var. Dolayısıyla Gatsby ile çalışmanın bazı alternatifleri var. Ancak kullanmak veya kendinizinkini yazmak istediğiniz raf bileşenlerini nasıl çekebileceğinizi seviyorum.

Marcy: Ve bence esneklik, insanların gerçekten keyif aldığı şeydir. React çalışma zamanını kullandığına dair bir uyarı var. Bu nedenle, tepki kullanmakta veya bu Tepki öncesi eklentiyi kullanmakta sorun yaşamamalısınız. Ancak kişisel olarak, erişilebilirlik ve şablonlarla, özellikle React kancalarıyla çalışmak için tepki ve JSX'i gerçekten seviyorum. Bu yüzden, Gatsby sitemdeki kulübeyi kullanabilmek çok güzel. Gerçekten beğendim.

Drew: Ve muhtemelen başka herhangi bir statik site oluşturucuda yaptığınız gibi kurabileceğiniz ve bir derleme yapabileceğiniz bir düğüm modülü olan bir Gatsby sitesi oluşturma süreci nasıl?

Marcy: Evet. Global olarak yüklediğiniz bir CLI var. Ve sanırım küresel olarak kurmak isteyip istemediğiniz. Önerdiğimiz şey bu, çünkü o zaman bilgisayarınızdaki herhangi bir dizinden çalıştırabilirsiniz, ancak bir Gatsby sitesi oluşturmak için ihtiyacınız olan her şeyi indirecektir. Ardından, WordPress'i başsız bir CMS veya başka bir içerik kaynağı olarak kullanmak istediğinizi söyleyebilirsiniz.

Marcy: Bunun işe yaraması için paketler, eklentiler kurabilir ve ardından bunları sitenize entegre edebilirsiniz. Daha hızlı çalışmaya başlamak için kullanabileceğiniz bazı başlangıçlar ve temalar da var. Drupal veya prizmik veya herhangi bir CMS veya e-Ticaret çözümü veya kullanmak istediğim herhangi bir şey gibi belirli bir entegrasyon için bir şeyi test etmek veya bir siteyi hızlı bir şekilde başlatmak istersem bunları kullandım.

Marcy: Bir sürü örnek var. Yani her zaman bunu çözmeye çalışırken deneme yanılma ile uğraşmıyorsunuz, ancak bu, bir araya getirebileceğiniz ve oluşturabileceğiniz bir tür yapı taşları… İçerik ağı dediğimiz şey budur. Ve böylece, klasik bir WordPress sitem olsaydı, yazarlık deneyimi ve ekiplerle çalışmak gerçekten harika yerine, bir site oluşturmak için bu türdeki en iyi entegrasyonları kullanabilirsiniz.

Marcy: Ama ön uçta, bir mobil cihazda nasıl çalışacağı gibi eksiklikler vardı. Başka ne? Bir e-ticaret çözümü isteseydim? Bugünlerde yapılması daha kolay olan bazı şeyler olduğunu düşünüyorum, ancak kimlik doğrulama için istediğiniz en iyi çözümleri seçebilmek veya bu modern şey her neyse, “Keşke bunu kullanabilseydim. ” Gatsby ile, bunların birçoğunu bir araya getirebilir ve bu içeriği oldukça ferahlatıcı bir şekilde oluşturabilirsiniz.

Marcy: Özellikle WordPress gibi entegrasyonları hala kullanabiliyor ve ekiplerle çalışabiliyorsanız. Bu nedenle, beğendiğiniz veya ekibiniz için işe yarayan tüm teknolojileri seçebileceğiniz bu yeni çalışma yöntemi konusunda oldukça heyecanlıyız.

Drew: Gatsby'nin güçlü bir şekilde öne sürdüğü en büyük özelliklerden biri, çeşitli farklı kaynaklardan veri veya içerik çekme yeteneğidir. WordPress ve Drupal gibi şeylerden bahsettiniz ve elinizde ne var. Geleneksel olarak, Jekyll veya Eleventy gibi bir şey veya bunun gibi bir şey kullanıyor olsaydım, API'lerle etkileşim kurmak için bunu kendim bağlamam, belki de içeriği aşağı çekmem ve markdown dosyalarına veya JSON dosyalarına yazmam ve ardından jeneratörün çalışmasını sağlamam gerekirdi. bu dosyalarla.

Drew: Yani bu bir tür iki aşamalı süreç olacak, bir önceki bölümde ele aldığımız kaynak biti gibi bir şey kullanabilir mi? Gatsby'nin, diğer statik site oluşturucuların sahip olmadığı şekilde farklı kaynakları tüketmek için bu yerel yeteneğe sahip olduğunu doğru anlıyor muyum?

Marcy: Gatsby'yi bu alanda gerçekten güçlü yapan şeyin GraphQL veri katmanı ve eklenti ekosistemi olduğunu düşünüyorum. Bu nedenle, oluşturmak istediğiniz veri kaynağı ne olursa olsun, birileri zaten bir eklenti yazmış olabilir. Ve değilse, muhtemelen yakın bir şey var. Ancak GraphQL kullanmak, bunun bir nevi eksik çalışmasıdır. Tüm bu entegrasyonları mümkün kılan katman GraphQL kullanmaktır.

Marcy: Ve böylece, çekebileceğiniz birçok olasılık var ve eklenti yazmayı da kolaylaştırmaya çalışıyoruz. Bu nedenle, bir eklentinin nasıl yazılacağını ve oluşturduğu AST veya Soyut Sözdizimi Ağacını öğrenmek gerçekten güzel ve tüm bunların nasıl çalıştığını öğrenmek gerçekten harika oldu. Ama evet, diyebilirim ki, hepsini kendiniz yazmak zorunda kalmadan alabileceğiniz raftan birçok şey var, ki bu oldukça harika.

Marcy: Ayrıca indirim yapma esnekliğine sahip olmak güzel. Geliştiricilerinizin blog içerik işaretlemelerini yazmak istediğini, ancak pazarlama ekibinin bundan gerçekten memnun olmadığını, içerik kaynaklarını birleştirebilir ve bunları birden çok yerden temin edebilirsiniz. Diğer GitHub depolarından bir şeyler tedarik eden insanlar gördüm ve bu şekilde markdown içeriğini çekmek için bir get eklentisi kullanıyorlar. Çok fazla esneklik.

Drew: Ve sanırım özel bir veri kaynağından çekmek için kendi eklentilerinizi yazma seçeneğiniz var. Diyelim ki eski bir sisteminiz var ve önüne güzel, parlak yeni bir web sitesi koymak istiyorsunuz. Verileri gereken formatta çıkaracak ve çalışmaktan daha büyük bir şeye çevirecek bir eklenti yazabilir misiniz?

Marcy: Evet yapabilirsin. Ve böylece, eklentiler bunu sağlar. Bir de bunun üzerine Gatsby temaları dediğimiz bir soyutlama var. Ve bunlar sadece kullanıcı arayüzü kodu değil, aynı zamanda bir eklenti kuran konfigürasyonlar olan GraphQL sorguları da olabilirler, yani bu, birlikte paketlenmiş kullanım türlerine sahip bir eklenti gibidir. Ve bu temaları NPM'de dağıtabilirsiniz.

Marcy: Ve sonra, onların versiyonu ve onları içeri çekebilirsiniz. Ve tüm bu API, birden fazla deponuz olduğunu söyleyen ekipler için de gerçekten ilginç ve bunlara veri çekmek istiyorsunuz, aynı sorguları yapmak çok tekrarlayıcı olurdu. tüm bu depolarda aynı kodda. O yüzden işleri biraz kurutmak ve kendinizi çok fazla tekrar etmemek. Bu kaynak eklentiyi etkinleştirecek bu mantık veya kod etrafında dağıtmak için tema adı verilen bu soyutlamaları kullanabilirsiniz. Bunun üzerine inşa edebileceğiniz bu tür soyutlama katmanları var ki, takımların şu anda gerçekten çok şey elde ettiğini duyduk.

Drew: Yani Gatsby dünyasındaki bir tema, WordPress gibi CMS'de olduğu gibi bir görünüm ve his değildir.

Marcy: Evet, yani, olabilir ama hepsi bu kadar değil. Yani, bir şeyleri adlandırmak çok zor. Ancak, esneklik ve yapabilmek hakkında öğrenmekten gerçekten zevk aldığım temalar, evet, bazı kullanıcı arayüzü kodları ekleyebilirsiniz. Ancak oraya giden bazı sorgu dili kodları da olabilir. Ancak bir şekilde bir araya getirilmiş olması, dağıtımını kolaylaştırıyor. Evet, insanların ne inşa ettiğini ve hangi temaları gönderdiklerini ve tüm bunları görmenin harika olduğu gerçekten güzel bir soyutlama oldu.

Drew: Evet, bunun Gatsby'nin oldukça yenilikçi kullanımlarına yol açacağını hayal edebiliyorum. Müşterilerin bunu özellikle yaratıcı bir şekilde yaptığına dair özellikle gözünüze çarpan herhangi bir şey gördünüz mü?

Marcy: Evet. Şey, temalar açısından, yani, Gatsby blogunda bir vaka çalışması hakkında okuduğum ilk şeylerden biri, sanırım Apollo'dan. Ve Gatsby temalarını kullanan ve kaynak al eklentisi kullanan bir dokümantasyon sitesi yazdılar. Ve böylece, kaynak kullanımınızı ve içeriğinizi gerçekten ayrıştırır, böylece ekiplerin birden fazla depoda kullanmak üzere bir temayı çekmesini sağlar.

Marcy: Bunun benim için en ilginç olanı olduğunu söyleyebilirim, çünkü bunu mümkün kılacağını hayal edebiliyorum, geçmişteki ekipler içerik kaynağımız olduğu yerdeydim, o kadar sınırlıydık ve bu kodun nerede yaşayabileceği ve ne kadar tekrarlanabilir olduğu olabilir. Ve böylece, ekiplerin "Ah, bu harika çalışıyor" dediği bir çözüm görüyoruz. Ve bu geçen yazdı, ya da bir süre önce bir vaka çalışmasıydı.

Marcy: O zamandan beri API'ler gelişiyor ve Gatsby temaları üzerinde çalışan bir ekip var. Ve önümüzdeki birkaç hafta içinde bazı büyük iyileştirmeler yapacaklarını biliyorum. Bu yüzden onların gök gürültüsünü çalmak istemiyorum ama temalarla birlikte gelen bazı güzel şeyler var. Gatsby'den sunduğumuz temel temalar gibi bazı blog temalarını elden geçiriyorlar.

Marcy: Bunu, kendi ürün duyurularımızdan bazılarını veya önümüzdeki birkaç hafta içinde burada duyurulacak olan ürün iyileştirmelerini oluşturmak için dahili olarak kullandıklarını biliyorum. Yani, Gatsby temaları ve kendi temalarını ve başlangıçlarını satan insanlar ile ilgili çok güzel şeyler oluyor. Bence bu da gerçekten ilginç.

Drew: Gatsby'nin etrafında bir miktar pazar kuruluyor.

Marcy: Var, evet.

Drew: Herhangi bir çevrimiçi eğitim ve eğer biri isterse bu tür şeyler var mı… Biri gerçekten Gatsby'ye gireceğine karar verdiyse ve bunu bir an önce öğrenmesi gerekiyorsa? Bu tür bilgilerle gidebilecekleri koşu yerleri var mı?

Marcy: Bir ton mu? Evet. Gatsbyjs.org/doc's olan kesinlikle Gatsby Doc'un sitesi var. Eğitimlerimiz var ve neredeyse her hafta Gatsby ile ilgili şeyler için canlı yayınlar yapıyorum. YouTube'da ve çeşitli öğrenme platformlarında Gatsby materyallerine sahip bir sürü eğitimci var. Egghead, sanırım Gatsby'deki bazı takım arkadaşlarımın da yumurta kafalı videoları var.

Marcy: Yani, dışarıda bir sürü şey var. Bir şey bulursan tarihlerini kontrol et derim. Her bir öğrenme kaynağını güncelleme için izleyemediğimiz için, Gatsby Doc'ları, bazı eski üçüncü taraf videolarını ve olabilecek şeyleri her zaman aktif olarak güncelliyoruz. Kendi kadromuza yetişmek zor.

Marcy: Çünkü kaç tane içerik kaynak seçeneği ve kullanım senaryosu ile ilgili o kadar çok şey var ki. Çok geniş bir alan. Ama orada o kadar çok öğrenme materyali var ki, öğrenme yelpazenizde nerede olduğunuza bağlı olarak bir tür deneyip bulmaya çalışabileceğiniz bir sürü başlangıç ​​yolu var. Başlangıç ​​aşamasında mısınız, diğer teknolojilerden mi geliyorsunuz ve sadece bu React olayının ne olduğunu öğrenmeniz gerekiyor.

Marcy: Bulunduğunuz yere göre hangi malzemelerin işinize yarayacağını seçebilir ve seçebilirsiniz. Son zamanlarda, başlangıç ​​seviyesindeki HTML, CSS ve JavaScript'ten ilk Gatsby sitemizi oluşturmaya kadar gittiğimiz Gatsby Web Creators adlı canlı yayınlar aracılığıyla bir kurs yapıyorum. Bunu Cuma günü tamamladık. Ve böylece, en başa dönmek gerçekten çok hoştu.

Marcy: Ve Gatsby ile çok fazla malzeme olduğu için React kullanıyor. Yani, bununla başlamak için oldukça büyük bir sıçrama. Bu yüzden gerçekten geri dönüp React ve Gatsby ile bir şeyler inşa etmek için gerekli adımları atmak istedim. Yani bu gerçekten temizdi. Ve bu rotada devam edeceğim için heyecanlıyım, böylece daha yeni başlayanlar materyali ve insanların Gatsby ile nasıl bir site inşa edeceklerini anlamalarına yardımcı olacak daha fazla şey var çünkü bu becerilerin çoğu diğer çerçevelere taşınabilir.

Drew: Gatsby kullanarak bir tür müşteri proje siteleri oluşturmayı düşünen herkes için ortaya çıkacak büyük sorulardan biri, ortaya çıkacak büyük sorulardan biri, içeriği yönetmek ve müşterinin önüne bir şeyler koymakla ilgili. Gatsby'nin farklı içerik yönetim sistemlerine nasıl bağlanabileceğinden daha önce bahsetmiştiniz. Bu soruyla başa çıkmak için koyacağınız birincil yöntem bu mu? Yoksa Gatsby'nin ekosisteminde, insanların içeriği herhangi bir şekilde düzenlemesini sağlayacak herhangi bir şey var mı?

Marcy: Evet, bir CMS'ye veya buna benzer bir şeye sahip olmanın bu ekip ilişkilerinin çok daha iyi çalışmasını sağlayabileceğini söyleyebilirim. Geliştirici ekiplerin "Sadece HTML öğrenin" gibi kullanım durumlarında bulundum. Müşterinin "Hayır, az önce bunu söylediğine inanamıyorum." Bu nedenle, insanların en iyi işlerini kendilerine en uygun şekilde yapabilecekleri bir sisteme sahip olmak çok, çok önemlidir.

Marcy: Sanki pazarlamacı GitHub'la baş edemezsin ve her zaman olmasa da bazen çalışabilirsin. Ve böylece, bir önizleme ve yapı altyapısına sahip olmak bunu daha iyi hale getiriyor ve Gatsby bulut ürün alanı işte bu noktada devreye giriyor. Önizleme yapmanın yolları var. Ücretli bulut tarafı olmadan ve Gatsby bulutunun kişisel projeler için ücretsiz bir katmanı vardır, bu nedenle tamamı ücretli değildir.

Marcy: Ama biz buna sahibiz, açık kaynak ve ürün ekosistemi bir nevi bir araya geldi, böylece Gatsby bir kurucu kuruluş olarak, açık kaynak çerçevesini sürdürmek için yeterli para kazanabilir, bunu sağlıklı tutabilir ve topluluğumuzun bununla birlikte ilerlemesini sağlayabilir. . İşte bu açık kaynaklı ticari yönün bir araya geldiği ve ekiplerin ihtiyaç duyduğu bu iş akışlarından bazılarını gerçekten etkinleştirdiği yer burasıdır.

Marcy: Hızlı önizlemeler almak, binaları hızlı bir şekilde kurmak ve dağıtmak gibi bazı şeyler. Dolayısıyla, özellikle Gatsby bulut tarafında çözümler var ve Gatsby'nin bir önizleme sunucusu gibi çalışmasını sağlamak için açık kaynaklı bir yol olan her yerde, bunu belgelemeye ve topluluğumuzun neyin ne olduğunu ve nasıl yapılacağını bildiğinden emin olmaya çalışıyoruz. bu ekibin ihtiyaçlarına hizmet edin.

Marcy: Evet, diyebilirim ki, CMS değişikliklerinizi önizlemek için bir yola ihtiyacınız var çünkü bu anlık tatmin gibi. Bazı içerikleri görmek için bir derleme için bir saat beklemek istemezsiniz.

Drew: Yani bu ilginç. Gatsby bulut hizmeti size, yalnızca içerikle çalıştığınız, ancak sitenizde nasıl görüneceğine dair hiçbir görselleştirmeye sahip olmadığınız, başsız bir CMS hizmetini kullanma yeteneği sağlar. çalışacaktı. Bu doğru mu?

Marcy: Öyle, evet. Bu, WordPress gibi, sadece ön uca bakabilirdiniz, ancak biz ona yeni bir ön uç veriyoruz ve potansiyel olarak diğer kaynakları çekiyoruz. ve WordPress'in bilmediği diğer şeyler. Ve böylece, onu bu şekilde ayırmak mantıklı. Ama yine de bir ekip üyesi olarak işinizi hızla alıştığınız hızda yapabilmeniz gerekiyor.

Marcy: İşte tam da bu noktada Gatsby önizlemesi, Gatsby yapıları devreye girerek bu ön ucu ekiplere geri vererek işbirliği yapabilmelerini, karar verebilmelerini, bir şeyler göndermelerini sağlıyor. Bu, geçen yıl ortaya çıktı, her zaman daha fazla özellik ve iyileştirme aldı ve hız artışlarını gerçekten görmeye başlayan bazı ekiplerden duyduk.

Marcy: Ve anladığımız gibi, "Tamam, eğer bu yapı yavaş gidiyorsa, neden?" Bunun nedeni genellikle sitenin gerçekten çok büyük olmasıdır. Bu nedenle, büyük siteler için iyileştirmelere ve bu ekip, işbirlikçi iş akışlarını gerçekten iyileştirmeye odaklandık. Şu anda takımın büyük bir odak noktası.

Drew: Yani Gatsby bulutu, sanırım kalbinde bir barındırma hizmeti var. Gatsby sitelerinizi, çevresinde çok sayıda Gatsby'ye özgü işlevsellik ve özellik ile dağıtmak için bir CDN mi?

Marcy: Gerçek bir CDN olmadığı için daha çok sürekli teslimat ürünü diyebilirim. Fastly, Netlify gibi CDN'lerle entegre olur. Bağlayabileceğiniz birçok farklı sağlayıcı var ve bazıları ücretsiz. Ücretsiz olarak çok şey yapabilirsiniz, ki bu oldukça harika. Geçen gün Gatsby web yaratıcıları oturumumuzda yaptım, sitemizi oluşturmak için Gatsby bulutunu ve Netlify'ı kullanıyoruz.

Marcy: Ayrıca Gatsby sitelerini daha hızlı yapmanızı sağlıyor çünkü bu iyileştirmelere sahip. Yalnızca bir tür site oluşturması gerekir. Dolayısıyla, Gatsby bulutunun yapabileceği, başka hiçbir platformun yapamayacağı bazı iyileştirmeler var çünkü tüm bu farklı türdeki web sitelerini desteklemeye çalışıyorlar ve hepsini çok iyi yapıyorlar.

Marcy: Ama Gatsby için, inşa ettiğiniz tek şey buysa ve hepsi Gatsby'de olan birkaç ajans varsa ve bunu olabildiğince hızlı yapmak istiyorlarsa. Bu nedenle, Gatsby bulutunun özellikle Gatsby için bazı performans iyileştirmeleri yapabileceği yer burasıdır, çünkü diğer platformlar için endişelenmesi gerekmez.

Drew: Yani, Gatsby bulut sizin yapınızı yapacak ve daha sonra onu Netlify gibi bir şeye ya da muhtemelen bir dizi farklı yere yerleştirecek.

Marcy: Evet. Evet, olacak. Ve böylece, bu yerleşik paketleri yüklerken kullanacağı Netlify parçası. Yerleşik dosyalar. Yapılarını kullanmıyor, bu nedenle yapılar Gatsby bulut altyapısında gerçekleşiyor ve bu noktada çok fazla hız artışı gerçekleşebilir. Ve sonra, hangisini seçerseniz seçin, onu bir CDN'ye çıkarmak için hala o yükleme adımı var.

Marcy: Ama evet, görünüşe göre takımlar bu görme yeteneğine gerçekten bayılıyor. Demek istediğim, kaçırmış olabileceğiniz işlevsellik. Ve bu, tekrar eklemek için gerekli bir şey, bu ortak ön izlemeleri yapabilmek ve imzaları alabilmek ve tüm bunlar.

Drew: Yani, Gatsby bulutu şirketten Gatsby tarafından bir hizmet olarak sağlanıyor ve bir de açık kaynak projesi olan Gatsby var. Bu, açık kaynaklı bir ürün geliştiren ticari bir kuruluşunuz olduğu WordPress ve otomatik sahip olmak gibi benzer bir ilişki türü mü?

Marcy: Drupal gibi evet derdim. Teknolojide bu kurucu organizasyonlara sahip olmanın bir tür erdemli döngü olduğu bir emsal var. Ve şu anda, topluluğumuz için son derece net olduğundan, kararları nasıl aldığımızdan emin olmak için bazı yönetim belgeleri yayınlamak için çalışıyoruz. Ancak tüm amaç, Gatsby'yi sürdürülebilir kılmaktır, böylece insanların Gatsby bulutuna girmelerine rağmen onu kullanabilecekleri açık kaynaklı bir proje olmaya devam edebilir.

Marcy: İsterseniz onunla başka çözümler de kullanabilirsiniz. Bu yüzden, üzerinde çalışan insanlar gibi sürdürmek için yeterli işe ihtiyacımız var. Ve böylece, açık kaynak ve ticari taraf arasında yüzüyor ve bazı şeylere öncelik verdiğimizden emin olmaya çalışıyormuşum gibi, arada kaldım. Demek istediğim, tahmin edebileceğiniz gibi, pek çok şeyle boşlukların ne kadar geniş olduğu arasında hokkabazlık yapıyoruz, hepimizin sevdiğimiz, gerçekten güçlü hissettiğimiz, işimiz için yapmamız gereken niş kullanım durumlarımız var.

Marcy: Bu, pek çok niş kullanım örneği anlamına geliyor. Bu yüzden, şu anda neyin acıttığını, neyin acı verdiğini, neyin iyi gittiğini toplumumuzu gerçekten dinlemeye ve önceliklendirmeye ve gerçekten dinlemeye çalışıyoruz. Ve böylece, kişisel olarak devREL'e geri dönmem ve topluluğu gerçekten dinlemem için ilginç bir yolculuk oldu, kendimizi nasıl daha iyi hale getirebiliriz?

Drew: Ve Gatsby çevresinde onu kullanan çok sayıda insan var mı?

Marcy: Onu kullanan birçok insan var, birçok katkıda bulunanlar. Pek çok insan için, rıhtımlarımıza gelip Hacktoberfest ve benzeri şeyler için bize katılmak gibi açık kaynağa ilk kez katkıda bulunuyor olabilirler. Bu nedenle, Gatsby'nin özellikle erişilebilirlik ve çerçevelerin kutudan çıkardıkları her şeyi ücretsiz olarak yapmalarını sağlamaya çalışmak gibi büyük bir topluluğa sahip olduğunu görmek gerçekten güzeldi.

Marcy: Ve bir de şu var, bilmiyorum, erişilebilirlik ve Gatsby'nin alt kümesi veya kesişimi ve orası benim mutlu yerim. Ancak daha geniş toplulukta, birçok insan Gatsby aracılığıyla React'i öğreniyor veya web geliştirmeyi öğreniyor. Bu nedenle, topluluğumuzda bir ilerleme görmek gerçekten güzel ve umarım bu bir sorun ya da buna benzer bir şey olsa bile insanların katkıda bulunmasını sağlarız, "Hey, bu bağlantı koptu veya rıhtımın bu kısmı kafamı karıştırdı ya da modası geçmiş."

Marcy: Kullandığınız bir çerçeve veya projeye bir şeyin daha iyi olabileceğini söylemek bile katkıda bulunmanın harika bir yoludur, çünkü iyileştirmeyi kullanabilecek şeyler hakkında fikir edinmemize yardımcı olabilirsiniz. Bu, katkıda bulunmanın harika bir yolu.

Drew: Erişilebilirlikten bahsettiniz ve elbette insanlar sizi erişilebilirlik uzmanı olarak tanıyacak. And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.