Mike Cavaliere ile Çarpıcı Podcast 40. Bölüm: Tepki İçin Çakra Kullanıcı Arayüzü Nedir?

Bu bölüm, size web varlığınızı tam olarak istediğiniz şekilde oluşturma, tasarlama, yönetme ve geliştirme özgürlüğü verdiği bilinen Wix'teki sevgili arkadaşlarımız tarafından desteklendi. Teşekkür ederim!

Bu bölümde, Çakra Kullanıcı Arayüzü hakkında konuşuyoruz. Nedir ve React projelerinize nasıl yardımcı olabilir? Drew McLellan öğrenmek için uzman Mike Cavaliere ile görüşür.

Notları göster

• çakra kullanıcı arayüzü
• Twitter'da Mike
• Mike'ın kişisel web sitesi
• Jamstack kitabına kes

Haftalık güncelleme

• Kodla Tasarım: Tasarıma Modern Bir Yaklaşım
  Mikolaj Dobrucki tarafından yazıldı.
• Otomatik VO Kullanarak macOS'ta Ekran Okuyucu Testini Otomatikleştirme
  Cameron Cundiff'in yazdığı
• Bir Problem Çözme Stratejisi Olarak Tasarım Düşüncesinin Yükselişi
  Josh Singer'ın yazdığı
• Büyük Bir EdTech Platformu İçin Bir UX Denetimi Nasıl Çalıştırılır
  Mark Lankmilier tarafından yazıldı.
• Next.js ile Çok Yazarlı Bir Blog Oluşturma
  Dom Habersack'in yazdığı

Transcript

Drew McLellan: Echobind adlı bir ajans için Kıdemli Yazılım Mühendisi. Yirmi yıldır kod yazıyor ve sürekli JavaScript kullanıyor. Jamstack'i seviyor ve yeni kitabı Cut Into The Jamstack, okuyucuya sıfırdan bir hizmet uygulaması olarak bir yazılımın nasıl oluşturulacağını öğretiyor. Jamstack'i bildiğini biliyoruz, ama bir keresinde fıstık ezmesi reyonunda kaybolduğunu biliyor muydunuz? Ezici dostlarım, lütfen Mike Cavaliere'e hoş geldiniz. Merhaba Mike. Nasılsınız?

Mike Cavaliere: Bugün kesinlikle harikayım.

Drew: Bunu duymak güzel. Bugün sizinle Jamstack kitabınızda rastlayana kadar gerçekten duymadığım bir proje hakkında konuşmak istedim. Nasıl kaçırmışım bilmiyorum çünkü olgunlaşıyor, iyi belgelenmiş ve gerçek bir proje... Sadece harika bir proje. Bugün bunun hakkında konuşabileceğimizi ve baştan beri bilmem gereken şeyi öğrenmek için yetişebileceğimi umuyorum. Tabii ki Çakra kullanıcı arayüzünden bahsediyorum. Söyle bana, Çakra UI nedir? Hangi uzayda ve bizim için hangi sorunu çözüyor?

Mike: Chakra UI, React veya UI araç takımı için bir UI çerçevesidir, sanırım bunu şöyle ifade ediyorlar. Herhangi bir uygulama yığınında, günümüzde sıfırdan bir kullanıcı arayüzü icat etmek istemezsiniz. Biraz araç seti almak istiyorsun. Bir süredir durum böyle.

Mike: Chakra UI, React UI araç setinde harika bir yaklaşım. Bunun pek çok avantajı var, ama biri şu ki… Birincisi, sağlam. Bu, hayal edebileceğiniz tüm UI öğelerine sahip olduğu anlamına gelir. Anahtarları var. Izgaraların etrafında sarmalayıcılar var. Öğeleri oluşturan her türlü şeye sahiptir.

Mike: Çok uyumlu olacak şekilde yapıldı, böylece her şey stil sahne kullandı. Bileşenleriniz, kutudan çıkar çıkmaz harikalar. Onları bırakıp olduğu gibi kullanabilirsiniz. Ancak bir ince ayar yapmak istiyorsanız, bazı stil özelliklerini geçmek çok kolaydır. Tamamen erişilebilirler. Herkesin bahsettiği ama her zaman uygulamayı unuttuğu veya uygulamak için biraz çaba gerektiren erişilebilirlik, sizin için yerleşiktir.

Mike: Chakra UI ile bir şeyler bir araya getirip çok iyi bir Lighthouse puanı almam alışılmadık bir şey değil. Aslında bugün Cut Into The Jamstack web sitesini kontrol ediyordum ve erişilebilirlik puanı çok yüksek. Ayrıca tamamen temalı. Tema yapılandırmasını baştan ayarlayabilirsiniz. Sadece uzun bir avantaj listesi var.

Mike: Geliştirmeyi çok hızlı kılıyor, başlangıçta beni çeken de buydu. Echobind, dahili olarak kullanıyoruz. Ama benim için tasarım anlayışım yok. Biraz, ama hiçbir şekilde tasarımcı değilim. Çakradan bileşenleri alıp tutarlı hale getirmek için her şeyi çok az değiştirebilirim ve her şey kutudan çıktığı gibi iyi görünür. Hızlı gelişebilirsin. Geliştirici deneyimi harika. Pek çok düzeyde sadece harika.

Mike: Bu konuda saçmalamaya devam etmeden önce söyleyeceğim son şey. Ama aynı zamanda, kullandığınız bu öğelerle birlikte gelen çok yaygın işlevsellik şeyler için yardımcı olan birçok React Hook'u vardır. Örneğin, karanlık modda. Daha açık koyu modu kullanmak için, temanızdaki renkleri çok rahatsız edici bir şekilde değiştirmenize izin veren yerleşik kancalar vardır.

Mike: Modüller gibi şeyleri değiştirmek için kullanılan ifşaat için bir tane daha var. Her zaman açık, kapalı bir duruma ihtiyacınız olan. Ancak Hook, çerçevenin otomatik olarak çıkaramadığı şeylere odaklanabilmeniz için bunu daha da basitleştirir. Orada keseceğim, çünkü bu çok fazlaydı.

Drew: Bu gerçekten iyi. Anlayışım doğru olsun diye, her şeyden önce bu Çakra değil Shakra mı? Şakra mı?

Mike: Bu konuda uzman olmazdım. Sadece yoga için Shakra diyorum. Ancak kuruculardan iki kez kontrol etmelerini istememiz gerekecek.

Drew: Projeniz için kullanıcı arayüzünü oluşturmak için bırakabileceğiniz, kullanıma hazır bir tasarım sistemi.

Mike: Evet.

Drew: Özellikle React projeleri için.

Mike: Evet. Dışarıda bir Chakra Vue projesi var. Ben pek bir Vue insanı değilim ama var olduğunu biliyorum. Başka kareler için de olabilir, ama ben çok, çok React odaklıyım, bu yüzden Chakra varsayılan React one'ı kullanıyorum.

Duru: Evet. Geçmişte React'e aşinaydım. Netlify'da çalışırken React'i kullandım. Şimdi her şeyi Vue'da yapıyorum. İlk baktığım şeylerden biri buydu. Oh, bir Vue var mı? Bu iyi görünüyor. Vue versiyonu var mı? Bunun bir Vue versiyonunu buldum ve epey geride kalmış gibi görünüyor. Sanırım 1.6 ya da mevcut React sürümü ne olursa olsun yerine 0.9 ya da başka bir şey. Bunun ne kadar güncel olduğundan emin değilim.

Drew: Oldukça modası geçmiş çerçevelerimiz var. Foundation UI, Bootstrap, Bulma gibi şeyler. Uzun zamandır ortalıktalar ve önceki nesil bir çerçeveler, öyle görünüyor. O zaman daha modern yaklaşımlarımız var. Pek çok dinleyicinin Tailwind ve Tailwind UI projesine aşina olacağını düşünüyorum. Çakra UI bu manzara arasında nereye düşüyor? Tailwind'in yapabileceği bir şeye daha yakın… Arka rüzgarın alabileceği bir yaklaşım. Bu doğru mu?

Mike: Sanırım. Kuşkusuz, şu anda çok popüler olduğu için Tailwind'i gerçekten çok daha fazla kazmak istiyordum. Ama Tailwind'in ayrıntıları ve nasıl olduğu hakkında akıllıca konuşamam... Benim fikrim, Çakra ve Tailwind'in alternatif yaklaşımlar olduğu yönünde. Belli ki ikisini aynı anda değil, birini kapıyorsunuz.

Mike: Her ikisinin de artı ve eksilerinin ne olduğunu henüz bilmiyorum. Çakraya o kadar aşık oldum ki, onu varsayılan olarak kullanmaya devam ediyorum. Ben, “Tamam, bunu şimdi çok iyi biliyorum. Bayıldım. Diğerini daha sonra öğreneceğim.” Ama Tailwind açıkçası son derece popüler. Tailwind'in temel çerçevesini bir UI araç setinde olduğunu düşünüyorum. Adil mi?

Duru: Doğru. Evet.

Mike: Tamam. Bu, muhtemelen Tailwind'in UI araç takımıyla daha eşit olacaktır. Çakra ana sayfasında, neden birine veya diğerine ulaşmak isteyebileceğinize dair bir karşılaştırma var, ama ben bunu içselleştirmiş değilim.

Duru: Evet. Bu iyi. Bahsettiğimiz gibi, HTML'nize koymak için size bir sürü sınıf adı veren ve bazı HTML yapılarını kullanmanız gereken bu daha geleneksel tasarım sistemlerinden ziyade React projeleri ve kendini gösterme şekli için, doğru sınıfları yerleştirin. o. Projenizde ortaya çıkan kullanıcı arayüzünü bu şekilde elde edersiniz. Çakra ile, React'e dayandığı için, size bu elementlerin her biri için bir dolu bileşen verir. Sadece projenize aktarabilirsiniz. Bu bileşenler kendi biçimlendirmelerini ve stillerini kapsıyor, değil mi?

Mike: Evet. Aslında Çakra kullanarak bir sınıf yazmanız gerekmeyecek. yapmadım. Mümkün olup olmadığını bile bilmiyorum. Tüm React paradigması, bir bileşen bileşimi ve özellikleridir. Bileşenlerin kapsüllenmesi, belirli özellikleri bileşene ilettiğiniz anlamına gelir. Çakra'da, küresel bir paradigma olan bu tema kavramına sahipsiniz. Varsayılan bir tema vardır ve renk ve boşluk değerlerine ve tüm genel şeyler için belirli birimlere sahiptir.

Mike: Bu temayı özelleştirebilirsiniz. Global olarak özelleştiriyor. Bunu istediğiniz gibi artırabilirsiniz. Bileşenin kendisini çağırdığınızda, örneğin bir metin girişi. Bir giriş bileşeni. Bu, tema tarafından tanımlandığı gibi varsayılan renklere ve kenarlık yarıçapına ve dolgu ve kenar boşluğuna sahip olacak. Daha fazla stil vermek istediğinizde, global bazda yapmak istemiyorsanız, örneğin alt kenar boşluklarını belirttiğimde durum bazında yapıyorum. Bunu küresel düzeyde yapmıyorum çünkü bu bir felakete yol açabilir. Sadece bir bilgi istemi olarak iletin.

Mike: Kısayol komutları var. Bir girdi bileşenim varsa, sadece MB eşittir ve ardından bir değer derim ve bu, alt kenar boşluğunu uygular. Veya dikey ve yatay için MX ve MY'ye sahipler. Veya sadece M'yi belirtebilir ve marj CSS özelliğinde olduğu gibi dizeyi iletebilirsiniz. Sınıf isimleri yok. Sınıf adlarını dinamik olarak yapar ve bunu kullanıcıdan uzaklaştırır.

Duru: Evet. Tailwind ile karşılaştırmanın burada devreye girmesi gerektiğini düşünüyorum. Çünkü Tailwind'in çalışma şekli size bir sürü ders veriyor. Marjı artırmak istiyorsanız marjı artırmak için koyabileceğiniz bir sınıf var. Aslında aynı şeyi alıyormuşsunuz gibi geliyor… Bu farklı bir uygulama, ancak nasıl tasarlandığına aynı yaklaşım. Biz aslında aksesuarlar kullanıyoruz ve siz bunları ayarlamak için bir pervane veriyorsunuz.

Drew: Bir tasarımı özelleştirmek ne kadar kolay? Sadece renkleri, kenar boşluklarını ve dolguyu ince ayar yapabilmek ve biraz farklı görünmesini sağlayabilmek mi? Ya da gerçekten bir temayı Çakra ile markalaştırabilir misiniz?

Mike: Oh, ne istersen yapabilirsin. Bu harika. Bileşen düzeyinde veya tema düzeyinde stil verebilirsiniz. Sadece onunla ne kadar yaratıcı olmak istediğinize bağlı. Bazı bileşenleri almayı ve onlarla vahşi şeyler yapmayı başardım. Onu gerçekten stil sahibi yapan şeylerden biri, bu bileşenlerin oldukça atomik olmasıdır.

Mike: Metin kutusu örneğini tekrar kullanarak, bir metin kutusu istiyorsanız, bileşeniniz tam da budur. Etrafındaki her şeye stil verebilir veya metin kutusunun kendisine stil verebilirsiniz. Veya temayı değiştirebilirsiniz. Her şeyi global olarak yeniden markalamak için renkleri ayarlamak.

Mike: Aslında, Chakra UI'nin yaratıcısı Seg'e siteye bir galeri koymaları gerektiğini söyleyerek tweet attım çünkü gerçekten harika. Bununla güzel tasarımlar oluşturabilirsiniz. Çok çeşitlidirler ve orada yüzeyde bilmiyor olabilirsiniz. Chakra UI'nin siteniz için bir Chakra UI kullandığınızı açıkça gösteren herhangi bir açıklaması olup olmadığını bilmiyorum.

Mike: Onunla oldukça güzel şeyler gördüm. Ama onunla her şeyi yapabilirsiniz. Statik web siteleri yaptım. Jamstack ana sayfasına Cut ile yapılır. Sadece bir örnek olarak. Echobind'de bolca kullandık. Bunu echobind.com için kullanıp kullanmadığımızı hatırlayamıyorum. Ama kesinlikle müşterilerimizin sitelerinin çoğu. Sonra oluşturduğum uygulama, JamShots, bu bir uygulama. Henüz pazarlama sayfaları yok. Ama hepsi sadece kullanıcı arayüzü ve tüm bu kullanıcı arayüzü Çakra kullanılarak oluşturuldu.

Mike: Chakra'yı överken bir diğer şey de şu ki, son zamanlarda çok kullandığım ve kullandığım başka bir web sitesi var… Kitabı da tanıtacağım. Chakratemplates.net. Chakra-templates.net. Katkıda bulunan herkesin bir kahraman birimi veya bir fiyatlandırma birimi bulması yaygın bir tasarım modelidir. Sadece Çakra kodunu kopyalayıp yapıştırabilmeleri gerekiyor.

Mike: Bunu tamamen kitabın ana sayfası için kullanıyorum çünkü onu geliştirirken bana çok zaman kazandırdı. Sanki bir fiyatlandırma modeliniz var. Bunu kopyalayıp yapıştırayım. Sitemde her şeyin tutarlı olması için stil aksesuarlarını biraz ayarlamama izin verin. Bu kadar. Bu sadece Çakra'nın kendisinden ayrı olan başka bir şey, ama o çok zaman kazandırıyor çünkü bu şeylere pek çok web sitesinde ihtiyacınız var ve kim her seferinde tekerleği yeniden icat etmek istiyor.

Drew: Görünüşe göre, yalnızca bir şeyi hızlı bir şekilde ortaya koymak istediğiniz kişisel projeler için değil, aynı zamanda bir ajans bağlamında da gerçek bir zaman kazandırıcı olabilir.

Mike: Ah, evet. Kesinlikle.

Drew: Bu, pazarlama sitelerinin yanı sıra uygulama arayüzleri için de geçerli mi? Şu ya da bu şekilde mi eğiliyor yoksa inşa ettiğiniz her ne ise genel olarak faydalı mı?

Mike: İkisinin de olduğunu söyleyebilirim. Kesinlikle öyle. Her ikisi için de kullandım. Firmamız her ikisi için de kullanmıştır. İnşa ediyoruz, tam yığın uygulamalar ve mobil uygulamalar oluşturmaya ağırlık verdiğimizi söyleyebilirim. Kullanıcı arayüzüne kesinlikle pazarlamadan çok daha fazla ihtiyacımız var. Her ne kadar bazen onu da inşa etmemize rağmen. Her ikisi için de yararlıdır.

Mike: Sitede bahsettikleri bir şey var, mesela ne zaman Çakra'yı kullanmak istemezsin? Bu arayüzü CSS'yi basitleştirme şekli nedeniyle bunu söylüyorlar. Ekranda çok fazla veri olduğunda zorluklar olabilir. Tonlarca DOM öğesi oluşturuyorsanız ve çok sayıda gerçek zamanlı güncelleme yapıyorsanız, performans zorluklarıyla karşılaşabilir veya karşılaşmayabilirsiniz.

Mike: Şimdiye kadar bir performans sorunu görmedim. Ama aynı zamanda gerçek zamanlı olarak bu kadar veri yoğun bir şey inşa etmedim. Bu endişe. Böyle bir uygulama oluşturacak olsaydım, muhtemelen nasıl performans gösterdiklerini görmek için iki farklı yaklaşımı bir araya getirmek isterdim. Ama evet. Bu durumların her ikisi için de evrensel olarak yararlıdır.

Drew: Sanırım her zaman bir takas vardır, teknoloji seçenekleri arasında değil mi? Onu gerçekten çok basit yapan bir şey. Uygulaması gerçekten hızlı. Takas, 1.000 veri noktası veya bir sayfada herhangi bir şey oluşturduğunuzda olabilir, bu çalışma yöntemi iyi performans göstermeyecek ve sizi yavaşlatacaktır.

Duru: Evet. Bence bu adil. Teknoloji seçimlerinde bulma eğilimindeyim, en önemli şey sadece bilmek. Sadece takasların ne olduğunu ve sınırlamaların ne olduğunu bilmek için. Bunların hiçbiri iyi ya da kötü değil. Sadece kendi durumunuz için uygun bir denge bulmanız gerekiyor.

Drew: Bu tür bir tasarım sistemi bulmayı beklediğiniz gibi, tipografi için bileşenlerle birlikte gelir. Düzen için. Ardından, temel düzeyde düğmeler ve form öğelerine kadar iner ve bir simge kitaplığı bulunur. Bir tasarım sistemlerinin mutfak lavabosu sayfasında görmeyi beklediğiniz hemen hemen her şey var. Orada her şeye sahipsin. Hepsi bana oldukça modern geliyor. Yerleşim ızgarası bileşeninin aslında CSS ızgarasını kullandığını fark ettim, ki bu her zaman görülmesi güzel. Sadece esnek bir kutu vermiyor.

Mike: Ah, evet. Tamamen.

Drew: Birlikte çalışmak genellikle çok esnek mi? İhtiyacınız olan herhangi bir kullanıcı arayüzü türünü oluşturabileceğiniz mizanpaj öğelerini buluyor musunuz?

Mike: Evet. Evet. Kesinlikle. Bunun harika yanı, bazı durumlarda birden fazla soyutlama düzeyi sağlamalarıdır. CSS ızgarası durumunda, tamam gibi basit bir ızgaraları vardır. Onu bırakmak istiyorsun ve işte senin ızgaran. Sadece içine bir şeyler koyuyorsun ve belirliyorsun, sanırım sütun sayısı ya da onun gibi bir şey. O zaman bir ızgaranız var.

Mike: Ama eğer gridin davranışında biraz daha esnekliğe ihtiyacınız varsa, o zaman genel bir grid bileşeniniz olur, ki bu muhtemelen... Basit grid bileşeni muhtemelen diğer grid bileşenini sarar. Bu sadece kendi üzerinde başka bir cephe.

Mike: Bileşenlerin bileşimine yönelik bu yaklaşım, aynı sebepten dolayı React dünyasında değerli bir paradigmadır. Çok yönlü bir bileşeniniz varsa ve çok fazla desteği varsa, o zaman bileşeni tek bir şekilde oldukça yaygın olarak kullanmak istediğiniz bir dizi kullanım durumu olabilir. Daha sağlam bileşenler için statik veya önceden belirlenmiş aksesuarlara sahip başka bir bileşenle sarmanız yeterlidir.

Mike: Bu yaklaşımı Çakra'da gerçekten iyi kullanıyorlar. Henüz yapamayacağım bir şeyle karşılaşmadım. Eminim oralarda bir yerlerdedir. Ya da yapması biraz daha zahmetli bir şey. Ama genelde henüz olmadı. En azından düşünebildiğimden değil.

Drew: Pekala, görmekten gerçekten memnun olduğum şeylerden biri ve daha önce bahsettiğin bir şey, erişilebilirliğe oldukça güçlü bir şekilde odaklanılıyor gibi görünüyor.

Mike: Evet.

Drew: Kesinlikle tanıtım bilgilerinde. Bu kodun kendisinde mi doğuyor? Vaaz ettiklerini uyguluyorlar mı? Aslında yerleşik olarak iyi bir erişilebilirlik var mı?

Mike: Sanırım. Test etmeye en yakın yaptığım şey Lighthouse'ı buna karşı çalıştırmak. Erişilebilirlik için sürekli olarak yüksek puanlar sağlar. Genelde Chakra Next.js kullanacağım. Next.js, kutudaki performanstır. Sıklıkla yüksek puanlar ve her şeyi görürsünüz. Bugün, kitabın ana sayfasında dört Deniz Feneri puanından üçünün nasıl olduğu hakkında tweet attım. Erişilebilirlik, en iyi uygulamalar, performans ve dörtte bir var. Şu an düşünmüyorum.

Mike: Performans dışında her şey %100'e yakın çıktı. Sayfaya çok şey koyduğum ve henüz optimize etmediğim için performans kısmı benden. Bunu yapma eğilimindedir. Lighthouse'daki erişilebilirlik puanları, Chakra UI'yi her kullandığımda harika.

Drew: Bu harika. Sunucu tarafı oluşturma kullandıklarından bahsettiniz ve elinizde ne var. Next ve Gatsby gibi şeyler ve sende sahip olduğum şey kesinlikle sorun değil, değil mi? Çakra'yı bunlarla kullanmanın farkında olmak için herhangi bir engel yok mu?

Mike: Ah, hayır. Hiç de bile. Ben kullanmadım. Next.js'ye odaklanma eğilimindeyim. Gatsby'ye veya diğer SSR araçlarından herhangi birine bağlanmadım. Ancak çerçeve, onu bu şekilde kullanmaktan alıkoyacak hiçbir şeye sahip olmadığı sürece, sorun olmaz.

Mike: React için Chakra, bir bağlam API sağlayıcısı sağlar. Bir tema sağlayıcısı, böylece… Örneğin, Next.js uygulamalarımda bir… Next.js'nin uygulamadaki her sayfayı saran bir alt çizgi uygulaması JS veya TS dosyasına sahip olduğunuzda. Siz sadece tema sağlayıcısını oraya takın ve işin geri kalanını Çakra halleder ve o her yerde kullanılabilir hale gelir. Kesinlikle Next.js'ye eklemek için hiçbir engel yoktur. Ama ben de Çakra'yı hayal etmem.

Drew: Çakra TypeScript kullanıyor mu? Öyle olduğuna inanıyorum, değil mi?

Mike: Destekliyor. Evet.

Drew: Destekliyor . Bu, projelerinde zaten TypeScript kullanan insanlar için büyük bir artı. İnsanlar zaten TypeScript kullanmıyorsa bunun herhangi bir dezavantajı var mı?

Mike: Sanmıyorum. Tüm projelerimde varsayılan olarak TypeScript kullanıyorum ve Echobind de öyle. Ama kişisel düzeyde bir şeyler yaptığımda, şunu kullanırım… TypeScript serpin demeyi severim. TypeScript, statik türler oluşturarak hataları azaltmada son derece değerlidir. Bununla birlikte, bunun için bir taşıyıcı var, sizin bilginize bağlı olarak TypeScript gerçek bir engel olabilir.

Mike: Şunun için minimum eşiğim... Kullandığım TypeScript'in katılığı oldukça düşük çünkü basit yazımla TypeScript'ten çok fazla değer elde edebilirsiniz. Birçok yaygın aksiliği önleyecektir. Daha gelişmiş yazmaya başladığınızda, bu şeylerle çok rahat değilseniz, sizi gerçekten yavaşlatabilir ve hayal kırıklığına uğratabilir.

Mike: Bu sadece Chakra ve TypeScript için aynı şeyi söylemek için. En azından başlangıçta bir projeyi gerçekten şekillendirip stabilize edene kadar hafif miktarda TypeScript kullanma eğilimindeyim. Ancak TypeScript ile veya TypeScript olmadan Chakra'yı kullanma konusunda hiçbir zorluk çıkarmaz. İle harika. Onunla seviyorum, ama kesinlikle onsuz da kullanabilirsiniz.

Duru: Evet. TypeScript ile, söylediğiniz gibi, sadece birkaç türle, faydaların %80'ini elde ettiğinizi görüyorum. Tavşan deliğinden çok aşağı inerseniz, çoğunlukla TypeScript olan bir komut dosyası elde edersiniz. Sonra aşağıya biraz JavaScript.

Mike: Ya da bir şeyi yazmanın doğru yolunu bulmak için çok zaman harcıyorsun ve beynin patlıyor. Bu şekilde sadece herhangi bir veya bilinmeyen koydunuz. Kısayol yaparsın. Böyle durumlarda savunurum. Bir şeyi halletmek çok zaman alıyorsa, çekebileceğiniz bir kaldıraç vardır.

Drew: Çakra dokümantasyonu gerçekten iyi ayarlanmış görünüyor, diye düşündüm,... Her bir bileşene ilişkin bir genel bakışı var. Ardından, bu bileşeni uygularken yapılan tasarım değerlendirmeleri hakkında teknik notları gerçekten yararlı bir şekilde içerir. Ki, bir ön uç mühendisi olarak bunun harika olduğunu düşünüyorum. Benim dilimden konuşuyorlar. Anladım. Bileşenin kaputun altında biraz ne yaptığını biliyorum.

Drew: Bu sadece benim açımdan, üzerinde çalıştığım gerçek bir proje olmadan belgelere göz atmak. Gerçekten bir proje üzerinde çalışırken ve onun yabani otlarının derinliklerindeyken, sadece belgeler mi duruyor? Göründüğü kadar faydalı mı?

Mike: Ah evet. Kesinlikle. Benim bakış açım biraz farklı. Kaputun altında neler olup bittiğini her zaman bilmem gerekmiyor, ama genellikle çıkarım yapabileceğimi hissediyorum. Bir kutu bileşenine bakıyorsam, tazeleme için konuşurken şimdi sadece belgelere bakıyorum. Bir kutu bileşenine bakarsam, "Tamam. Bu muhtemelen varsayılan olarak bir div'dir. Her neyse, gradyan özelliklerinde geçtiğini görüyorum. ”

Mike: CSS çevirme sihirlerini tam olarak anlamadan, başlıkta neler olup bittiğine dair bir fikir edinebilirim. Sahne öğelerini CSS'ye çevirin. Ancak belgeler harika, çünkü çok lineer. Çok tutarlı. Her şeyi örneklerle listeliyor. Küçük bir kopyala ve yapıştır.

Mike: Sadece gerçekten iyi bir beyaz alan kullanıyor, bu yüzden sayfaya bakmak bunaltıcı görünmüyor. İhtiyacınız olanı kolayca bulabilirsiniz. Aramaları da harika. Aramaları yardımcı olur. Zamanın %90'ında, oraya bunun için gittiğimi düşünüyorum. Oraya gidip bir şey yapmak için bir bileşenin var olup olmadığını görmek olabilir. Genellikle öyle. Ve bilmediğim, yararlı olan başka bir şeye rastladım. Ya da sadece bazı ilkelerde kendimi yenilemek. İhtiyacım olanı her zaman burada bulabilirim.

Drew: Dokümanların etrafa bakınmasından hoşlanmadığım tek şey, üzerindeki reklamların sayısıydı. Chakra UI Pro'nun ticari teklifleri için her sayfada.

Mike: Onları görmemiştim. İlginç. Onu gördüm. Kesinlikle gördüm. Ama şu an göremiyorum. Ah evet. Peki. Chakra UI Pro var. Sanırım zihinsel olarak filtreledim. Seni duyuyorum. En azından çok büyük ve yüzünüzde değil.

Drew: Çok büyük değil. Sadece yanlış yerde. Sadece bilgiyi aradığınız yer burasıdır. Sanırım bu yüzden yaptılar. Ekosistemi ve projeyle ilgili her şeyi göz önünde bulundurarak bahsetmeye değer, profesyonel bir bileşen seti var ki… Sanırım bu, Tailwind UI'da bulunan bazı şeylere eşdeğer. Pazarlama sayfaları ve burada, sayfaların ve tüm sayfaların ve düzenlerin ve şeylerin oluşturduğu bu bölümlerin bileşenleri ve daha fazlası var. Siz, Çakra'nın yapımcılarından edinilebilir, ancak ticari bir teklif olarak.

Mike: Evet. Şimdi hızlıca bir göz atın. Bunlardan bazıları aslında mevcuttur. Veya bunların sürümleri, Çakra şablonları gibi ücretsiz olarak mevcuttur. Bu Chakra şablonları, sanırım, Chakra Pro veya açık kaynaklı rakip için açık kaynaklı çözüm. Bunun için ödeme yaparak bir ton kazanacağınıza eminim. Bunlar için ücretli bir profesyonel ihtiyacınız varsa, Chakra Pro son derece sağlam ve makul fiyatlı görünüyor. Projeniz için birkaç seçenek var, öyle görünüyor.

Duru: Evet. Etrafında oldukça büyük bir ekosistem inşa edilmiş gibi görünüyor. Projenin ne kadar süredir devam ettiğini ve sonrasında neler olduğunu biliyor musunuz? React topluluğunda yaygın olarak kullanılıyor mu?

Mike: Evet demek istiyorum. Ne dereceye kadar bilmiyorum. Bugünlerde Tailwind'in Chakra'ya karşı pazar payının ne olduğunu merak ediyorum. Chakra'nın nispeten yakın zamanda bir ödül aldığını biliyorum. Topluluk için en etkili proje için GitNation React Ödülü. Oldukça büyük ve oldukça iyi kucaklanmış olduğunu söyleyebilirim. İyi bir sebeple, ki bu harika. İnsanlar kesinlikle bundan zevk alıyor. Ben tek değilim.

Drew: Projenize bir bağımlılık getirirken her zaman düşünmeye değer bir şey, bu bağımlılığı güncellemeniz gerektiğinde ne olacağıdır.

Mike: Evet.

Drew: Çakranın sürekli iyileştirildiğini hayal ediyorum. Bir kez içe aktardıktan ve onunla inşa ettikten sonra, belirli bir sürümde kilitli bırakmanız mı gerekiyor? Yoksa güncel tutmak genellikle güvenli midir? Çakra güncellendikçe sitenizin tasarımı ve özellikleri açısından nispeten istikrarlı mı?

Mike: Şimdiye kadar oldu. Evet. Temelde, bunun gelişmenin ilerlemesi nedeniyle olduğunu söyleyebilirim. Şu anda 1.6.3 sürümündeler. Birkaç ay önce sıfırdan bire gittiler. Değişiklikleri bozdukları tek zaman buydu. O zamandan beri, sürekli olarak özellik yayınları ve hata düzeltmeleri yapıyorlar.

Mike: Son birkaç aydır her şey sadece eklemelerden ibaret. Eklemeler ve düzeltmeler. Herhangi bir kırılma değişikliği söz konusu değildir. Yol haritasının neye benzediğini bilmiyorum ama böyle olmaya devam edeceğini tahmin ediyorum. Bu küçük sürümlerden birini her yükselttiğimde sorun yok. Ondan bir şeyin koptuğunu hiç görmedim. Fakat 1.0 ile çıktıklarında bazı kırılma değişiklikleri oldu. Yine de felaket olduğunu hatırlamıyorum.

Drew: Paket boyutları ve Çakra'yı ağaç sallama yeteneği ile ilgili durumun ne olduğunu biliyor musunuz? Projenize çok mu ağırlık katıyor yoksa eşyalar sadece siz kullandıkça mı ithal ediliyor?

Mike: Dürüst olmak gerekirse, elden hatırlamıyorum. Muhtemelen bunu bilmeliyim. Fazla kilo aldığını fark etmedim. Temel olarak, bileşenleri tek tek içe aktardığınız için. Çakranın tamamını veya bunun gibi bir şeyi ithal etmemek. Ağaç sallama desteğine sahip olduğunu söyleyebilirim, ancak test etmedim. Şimdiye kadar, özellikle ondan gelen çok büyük bir ağırlığı olan şeyler olmadı.

Duru: Evet. Bu her zaman önemli bir husustur, değil mi?

Mike: Evet.

Drew: Hemen dalmadan ve bir projede kullanmadan önce Chakra UI hakkında bilmemiz gereken başka bir şey var mı?

Mike: Hayır. Harika. Oldukça aktif bir topluluk da var. Güncellemeleri sık sık görüyorum. Şimdi belgelere bakıyorum ve daha önce görmediğim bileşenleri görüyorum. Görüyorum ki çok fazla özellik ekleme oluyor. Bu harika.

Duru: Evet. Bu harika. Önizleme sürümü olan Cut Into The Jamstack adlı bir kitabınız var. Şu anda bir beta sürümü. Bunu kendi kendine yayınlıyorsun. Bu doğru mu?

Mike: Evet. Evet. Ben. İlk teknik kitap denememdi. Sadece resmi bir şey gibi bir taahhütte bulunmadan bunu ortaya çıkarmak istiyorum, sanırım. Ayrıca kayıt dışılığı seven biriyim, özellikle bir şeyler yaratırken. Böyle yaparak bana kendi yolumda yapma yeteneği veriyor.

Drew: Kitap, okuyucuyu bir hizmet uygulaması olarak bir yazılım oluşturma konusunda tam anlamıyla yönlendiriyor.

Mike: Evet.

Drew: Hepsi Jamstack'te. Neden bunu şimdi yazmaya ve kitapla bu yaklaşımı benimsemeye karar verdiniz?

Mike: Güzel soru. Yaklaşık 20 yıldır kod yazıyorum ve sanırım bir süre önce bir kitap yazmaya çalıştım ve pek şekillenmedi. Kariyerimde gerçekten daha fazla bilgi paylaşmak istediğim bir noktadayım. Uzun yıllardır kullanıyorum ve gerçekten daha fazlasını ortaya koymak ve başkalarına yardım etmek için kaşıntı hissediyorum.

Mike: Geçen yılın Ekim ayı civarında, bunu yaşadım… Ürün olan bir şey ortaya koymak istedim. Bir e-kitap, başlamak için gerçekten iyi bir yol gibi geldi. Next.js ve onunla yapabileceğiniz şeyler konusunda gerçekten tutkuluyum. Jamstack terimini kullanıyorum ve Next.js'yi Jamstack'in bir parçası olarak görüyorum çünkü varsayılan olarak statik bir site oluşturmaya sahip.

Mike: Ama bence yeterince konuşulmayan bir şey, bence ya da biraz daha açıklamaya ihtiyaç duyabilir, onunla bir hizmet uygulamaları olarak yazılım geliştirmek. Çünkü Jamstack sadece web siteleri için değildir. Statik, hızlı ve SEO dostu olması nedeniyle içerik odaklı web siteleri için gerçekten iyi çalışıyor.

Mike: Ama orada çok zengin işlevsellik var, özellikle de Vercel'in dün Next.js Konferansı'nı düzenlediği Next.js'de ve orada giderek daha şaşırtıcı özellikler yayınlıyorlar. Hizmet olarak yazılım geliştirme konusunda tutkuluyum. Yazılım web siteleri harikadır, ancak yazılım bir şeyler yapmak içindir.

Mike: Bana göre bu yığın, bir hizmet geliştirme olarak yazılımın geleceğidir. Bana Ruby on Rails çıktığında ne olduğunu hatırlattı. Bir bakıma bu bir gelişmeydi. Eskiden manuel olarak yapmak zorunda olduğunuz birçok şeyi otomatikleştirdi ve basitleştirdi. Gelişimin hızını artırdı ve kalitesini artırdı.

Mike: Next.js ve Jamstack ve Vercel ve Chakra UI, sizin için birçok şeyi basitleştiren şeyler üretiyorlar. Next.js, hızla ilgili birçok sorunu ve erişilebilirlikle ilgili sorunu basitleştirir. Instanalization. Hepsi bu, yönlendirme sizin için yapılır. İstemci tarafı veya hizmet tarafı yönlendirme konusunda endişelenmenize gerek yok. Otomatik. Chakra UI bunu erişilebilirlik ve tema ile yapar. Bu araçlar bir araya geldiğinde, sadece… Geliştirici deneyimi gerçekten harika oluyor ve her şey… Size gerçekten yazılım oluşturma özgürlüğü veriyor.

Mike: Sorunuza cevap vermek için. Şimdi bir kitap çıkarmamın nedeni, doğru zamanda gerçekten bir şeyler ortaya koymak istemem ve Jamstack ekosisteminin meyve vermeye ve büyümeye başlamasıdır. Ayrıca bana Jamstack'e daha fazla kod yazma şansı verdi, ki bunu seviyorum.

Drew: Bence, dediğin gibi, web siteleri ve tipik olarak hafif web siteleri hakkında düşündüğünüzde Jamstack fikrine katılmanın kolay olduğunu düşünüyorum. Ancak, tam bir web uygulaması oluşturmak için yaklaşımı nasıl kullanabileceğinizi düşünmek için bir sonraki adımı atmak çok daha zordur. Sunucu tarafı zihniyetinde düşünmeye alışkınsanız, bence üstesinden gelmek için daha büyük bir engel.

Mike: Evet.

Drew: Görmek için çok daha büyük bir sıçrama, tamam. Kimlik doğrulamamı bir servise verebilirim-

Mike: Evet.

Drew: … ve yapabilirim… Sanırım okuyucular için, okuyucunun kitabınıza bakış açısından, sadece bu örneği inceleyerek ve inşa ederek, sizinle birlikte bu engeli aşmanın harika bir yolu, sadece yardım etmek için muhtemelen zihniyetinizi nazikçe değiştirin, tamam. Bütün bunları bu şekilde yapabildim, ama Jamstack'te. Buna katılıyor musunuz?

Mike: Evet. Ben de bunu umuyorum. Bence öyle. Gerçekten amaçlanan bu. Geçenlerde bir konuşmaya imza atıyordum, bir konferans konuşmasına… Konuyla ilgili motivasyonumun bir kısmı ve bu kitapta öğretmeye karar vermemin bir kısmı, size bir programlama dili öğretebilmemdi. Bir çerçeve, ancak sizi yığınla uygulamalı bir şekilde tanıştırmak daha iyi geliyor çünkü çok fazla deneyime sahip her geliştirici, dokümantasyon ve Googling'e gitme ve yığın taşmasını kullanma konusunda iyidir. Bunu sana öğretmek için neden zamanını boşa harcayayım ki?

Mike: Size yığına ve onunla neler yapabileceğime hızlı ve derin bir dalış yapmak istiyorum. Bireysel parçaların her biri hakkında harika olanı seçeceksiniz. SonrakiOFF ve Prizma. Next.js ve Çakra. Sizi birkaç tıklamadan kurtarmak için sizi belgelere bağlayacağım. Ancak etkileşimli bir örnek üzerinden bu parçaların nasıl birbirine bağlandığını göreceksiniz. Ayrıca zor kısımları da anlayacaksınız.

Mike: Örneğin, derinlemesine inceleyeceğim bir şey, eşzamansız çoklu dosya yüklemesi için oluşturduğum bu özellik. Next.js'nin bir ön ucu ve bir arka ucu vardır. Ön ucun önünde ve ön ucun arkasında olmasına rağmen, bu benzetmeyi kullanırsanız, React katmanına sahipsiniz. Sonra düğüm katmanına sahipsiniz. Bu API yolları var.

Mike: Bununla çoklu dosya yükleme yapmak ve bir servis kullanmak istiyorsanız, kitapta Cloudinary kullanıyorum. Ancak resim ve medya yüklemeleriniz için kullanmanız gereken bir API hizmeti kullanıyorsanız, orada çok fazla hareketli parça var. Kullanıcının etkileşimde bulunduğu istemci tarafı vardır. Cloudinary'ye veya diğer sağlayıcıya API istekleri var. Ancak daha sonra verimli hale getirmek için birden fazla API isteği yapmanız gerekir. Bir API çağrısına ihtiyacınız olan Cloudinary'ye karşı bir miktar imzalama yapmanız gerekir.

Mike: Bu işareti almanız ve tarayıcıdan gidip API'nizi atlayıp doğrudan Cloudinary'ye giden yüklemeyi yapmanız gerekiyor. Ardından, bunu, ön ucun ön uç arka ucunu kullanan veritabanınıza kaydetmeniz gerekir. Birçok parça ve Next.js var… Next.js topluluğunda bunun için henüz bir açık kaynak eklentisi yok. Bunu şimdi oluşturmuş olan uygulamadan çıkarabilirim ve bir tanesine koyabilirim çünkü diğer insanlar buna sahip olacak.

Mike: Anyway, all that's just to say that, I think that's something really valuable to teach to people. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. Evet. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

Drew: Harika.

Mike: I've got another one coming up in probably a couple of weeks. Evet. Evet. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. Bu kadar.

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. Mike. Ayrılık sözleriniz oldu mu?

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.