Mina Markham ile Çarpıcı Podcast 18. Bölüm: React'i Nasıl Öğrenebilirim?

Smashing Podcast'in bu bölümünde, React'i öğrenmekten bahsediyoruz. React ile çalışmak nasıldır ve deneyimli geliştiriciler nasıl başlayabilir? Öğrenmek için Mina Markham ile konuştum.

Notları göster

• Twitter'da Mina Markham
• Mina'nın kişisel web sitesi

Haftalık güncelleme

• Bryan Robinson'dan FaunaDB ile Statik Sitelerden Son Kullanıcı JAMstack Uygulamalarına
• Web Siteniz Ziyaretçileri Strese mi Getiriyor? Suzanna Scacca tarafından
• Mirage JS Deep Dive: Zamanlama, Tepki ve Geçişi Anlamak (Bölüm 3) Kelvin Omereshone tarafından
• React ile Yüz Tanıma Web Uygulaması Oluşturma by Adeneye David Abiodun
• Timi Omoyeni'den Vue I18n Eklentisi ile Vue'da Uluslararasılaşma

Transcript

Drew McLellan: Ön uç mimar, konferans konuşmacısı ve organizatörü ve tasarım sistemleri aşığıdır. Hillary Clinton'ın Hillary for America başkanlık kampanyası için Pantsuit patent kitaplığı üzerindeki çalışması, endüstrideki tasarım sistemleri için bir dönüm noktası oldu ve Wired, Fast Company ve Communication Arts gibi yayınlarda yer aldı. Birçoğumuz gibi, o da şu anda Slack'te kıdemli mühendis olarak yaşamak için kod yazıyor. Yetenekli ve ileri görüşlü bir geliştirici olduğunu biliyoruz, ancak bir zamanlar Patrick Swayze ile karıştırıldığını biliyor muydunuz? Ezici dostlarım, lütfen Mina Markham'a hoş geldiniz. Merhaba Mina. Nasılsınız?

Mina Markham: Eziyorum.

Drew: Bunu duymak güzel. Şimdi, bazen Smashing Podcast'te insanlarla en iyi bilinen konu hakkında konuşuyoruz. Ve bazen sadece biraz teğet bir şey hakkında konuşmak eğlencelidir. Şimdi, sizinle tüm gün desen kitaplıkları, tasarım sistemleri, o belirli alanda yaptığınız harika işler hakkında sohbet edebilirim ve belki de konuştuğunuz konular, etkinlikler, örneğin Etkinlik gibi olaylar hakkında konuşabilirim. Bunun dışında sanat yönetmenliği gibi şeyler. Ve inekler eve gelene kadar açıkça CSS hakkında konuşabiliriz. Ama birkaç gün önce tweet attın ve aslında ikimizin de aynı gemide olduğunu fark ettim, ikimiz de deneyimli ön uç mühendisleriyiz ve ikimiz de yakın zamanda React ile çalışmaya başladık. React'in kendisine geçmeden önce, bu noktaya kadar nereye geliyordunuz? JavaScript geliştirme için başka kütüphaneler ve çerçevelerle çalışıyor muydunuz?

Mina: Hayır, aslında bir süredir çoğunlukla vanilya JavaScript'i yapıyorum. Ve ondan önce, tabii ki JavaScript'e girdim. Bunu yeniden ifade edeyim. Java betiği ile çalışmaya jQuery kullanarak başladım çünkü bana en mantıklısı buydu. Neler olduğunu anlamak için ayrıştırmam çok kolay olan bir şeydi. Ve sonra oradan sadece vanilya, sade JavaScript, ESX yapmaya geri döndüm ve çerçeve savaşlarına gerçekten çok fazla girmedim. Sevdiğim yokmuş gibi. Dövüşte köpeğim yoktu. Ben de "Senin için React, her neyse. Gerçekten umurumda değil." Ama zaman değişiyor.

Drew: Ve vanilya JavaScript ile bu tür bir çalışma yöntemiyle, çünkü ben de bunun çoğunu kendim yaptım. Çeşitli çerçevelerle çalıştım. Gün içinde jQuery ile çok şey yaptım. YUI, Yahoo Kullanıcı Arayüzü Kitaplığı ile çalıştım. React'in mimarisi gibi bir şeyin ele almaya çalıştığı acı noktaların çoğunu hissettiniz mi?

Mina: Hiç sahip olduğumu sanmıyorum. Kariyerimin çoğunu web siteleri yerine web uygulamaları ve bunun gibi şeyler yaparak geçirdim. Yani yaptığım her şey bir dereceye kadar oldukça statikti. Bu yüzden hiçbir zaman devlet yönetimiyle, bunun gibi şeylerle uğraşmak zorunda kalmadım. Dolayısıyla, React'in çözmeye çalıştığı acı noktaları, yaptığım iş türüne gerçekten hiç başvurmamıştım.

Drew: Genel olarak konuşursak, şu ana kadar React ile yaptığınız projelerin doğası nedir?

Mina: Aslında şu anda üzerinde çalıştığım tek projeydi ve çok fazla ayrıntı veremeyeceğim çünkü halka açık şirket ve tüm bu güzel şeyler.

Duru: Elbette.

Mina: Ama esasen yapmaya çalıştığım şey, React'i kullanmaya çalışıyorum, bu çok etkileşimli bir ürün türü, insanların belirli bir duruma girip veri kaydetmesine ve ardından onu manipüle etmesine ihtiyacım var. söz konusu verilerle başka bir şey üretin. Ve bu, o noktada basit DOM manipülasyonu olmayan bir şey. Gerçekten çok daha karmaşık, ön uç veri yönetimi ve söz konusu verilerin durumunu yönetme. Bu yüzden, bu sorunu çözmeye çalışan bir tür kütüphane kullanmaktan başka bir alternatif yoktu. Sadece düz JavaScript ile geçemeyeceğimi biliyordum. Belki sunucu tarafında bir şeyler ele almayı düşündüm, ancak yine, birlikte çalıştığım şeyin etkileşimli doğası nedeniyle, istemcide olması gerekiyor. Ve bu yüzden zaten React at Slack'i çeşitli başka şeyler için kullanıyoruz. Ben de "Tamam, o halde devam etmeli ve şirketlerin geri kalanının kullandığı ebeveynin aynısını benimsemeli ve oradan gitmeliyiz" dedim.

Drew: İnsanların React'i almasıyla ilgili her zaman bir acı noktası gibi göründüğüm şeylerden biri, işlerin yürümesi için gereken alet zincirini kavramaya başlamam, Webpack odadaki bariz bir fil. Takım arkadaşlarınızın sizin için yapması gibi bir lüksünüz varsa, alet zincirinin çok fazla konfigürasyonunu yapmak zorunda kaldınız mı ya da benim gibi mi?

Mina: Oh, Slack'teki altyapı ekibini verileri seviyorum. Slack'teki ön uç altyapı ekibi, bunların hepsini hallettiler. Bunu düşünmek zorunda değildim. Harikaydı. Çünkü daha önce React'i öğrenmeye çalıştım. Genellikle en iyi öğrenmemin yolu, gerçekten çalışmak ve bir şeyler üzerinde uygulamaktır. Ve 2016'da çok sayıda hillaryclinton.com oluşturmak için React'i kullanıyoruz. Yani onu kullanan insanlarla hiç çalışmadım. Sadece işim, karışmam için doğrudan bana ihtiyaç duymadı. Ancak bu kod tabanı çok karmaşık ve çok karmaşıktı ve o kadar çok şey oldu ki, React ve Redux'un nasıl çalıştığını ve tüm bunların nasıl çalıştığını bilmiyorsanız, orada herhangi bir şey öğrenmeye çalışmak için giriş yapmak için o kadar büyük bir engel var ki, ki ben yapmadı. Yani o ortamda öğrenmede pek etkili olamadım.

Mina: Neyse ki, burada karmaşık kısımlarından biraz daha fazlasını almayı seven insanlar var. Webpack yapılandırması hakkında hiç endişelenmeme gerek yok. Bu kuruldu. Bu denendi, test edildi ve kullanıma hazır. React'e ek olarak Redux kullandığımız benzer bir teknedeyim, bunun iki farklı şey olduğunu bilmiyordum. Hangi parçanın hangisini işlediğini bilmiyordum. Böyle bir kod tabanına girmek biraz kafamı karıştırdı çünkü hepsinin aynı şey olduğunu bilmiyordum. Tecrübeli React geliştiricileri olan ve bana "Ah, biz de Redux kullanıyoruz, bu da sıfırdan başlıyorsanız React'in neler yapabileceğini gerçekten öğrenmenizi biraz daha zorlaştırıyor" diyen insanlar vardı. Ve bununla ne demek istediklerini hiçbir zaman tam olarak anlamadım çünkü ne hakkında konuştuklarını bilmiyordum.

Mina: Asıl sorunuza cevap vermek gerekirse, giriş için hala biraz daha engelim var çünkü bu sadece React'i öğrenmek değil. React'i ve ayrıca Redux mağazasını nasıl kullanacağımı öğrenmek zorundayım. Yani bu iki şey aynı anda biraz fazla olabilir.

Drew: Evet, Redux kullanan ilk React projemle tam olarak aynı şeyin mevcut bir kod tabanına geldiğini buldum. Ve bence bu tür teknolojilerin herhangi birinin doğası gençken olduğu gibi, çok hızlı bir şekilde yineleniyorlar ve bir noktada en iyi uygulama olan 6 ay sonra değişti ve işleri yapmanın farklı bir yolu var. Ve uzun yıllara yayılan bir kod tabanınız olduğunda, bazen orada farklı uygulama stillerine sahip olabilirsiniz. Her zaman senkronizasyonu tutmaz. Ve elbette, bir öğreticiyi takip ediyorsanız veya öğreneceğiniz herhangi bir şey varsa, kitap okuyorsanız, kaynakları kullanıyorsunuz, bir şeylerin nasıl yapılacağına dair en modern versiyonda olacaklar. Ve bu, mevcut, olgun bir ürüne baktığınızda gördüğünüz şeyle mutlaka örtüşmez. Bu, daha önce deneyimlediğiniz bir şey mi, yoksa kod tabanınızı gerçekten güncel tutmayı başardınız mı?

Mina: Sanırım bu kesinlikle yaşadığım bir şey. React'i kendi başıma nasıl yapacağımı öğrenmeye çalıştığımda, çeşitli eğitimlere ve bunun gibi şeylere baktım. Ve fark ettim, ya da en azından, benimle çalışan ve benimle çalışan insanlar bana, yaptığımız bazı şeylerin ya da bir tür anti-kalıp ya da işlerin şu anda tam olarak nasıl çalıştığını söylemediğini söylediler, çünkü bu kod tabanı biraz, iyi Bizi akraba olgunlaştır, ama birkaç yaşında. Ve sanırım bazı şeyleri yapmanın şu anda yapmaktan daha kolay olduğunu düşündüğüm bazı yollar var çünkü bu yıllar önce yazılmıştı. Bu nedenle, bu biraz güncel zamana ayak uydurmaya çalışan ve işleri en iyi şekilde yapmak istediğimden emin olmaya çalışan bir koşu bandı ama aynı zamanda bazı şeylerle oynamak istediğim için yerleşik bir kod tabanını kırmak istemiyorum.

Drew: Açıkçası, sizin ve benim gibi insanların buna geliyor olması React ile ilgili şeylerden biri, JSX ile ilgili tüm bu şeyler biraz sarsıcı gelebilir. Projenizde JSX kullanıyor musunuz?

Mina: Biz. JSX kullanıyorum.

Drew: Bununla barıştın mı?

Mina: O dosyalardan birini her açtığımda küçük bir parçam ölüyormuş gibi düşüyorum. HTML'imi JavaScript dosyasına koymak hala saygısızlık gibi geliyor. Bunun devrim niteliğinde olduğunu biliyorum ve asıl mesele, ancak işaretlememi bir JavaScript dosyasına yazıyormuşum gibi geliyor. Onunla barıştım ama her yaptığımda, “…” gibiyim. Geri istiyorum, lütfen.

Drew: Bu geçerli bir nokta, değil mi? Arka planım JavaScript ile daha ciddi bir şekilde çalışmaya başladığımda ve bu muhtemelen Yahoo'ya döndüğümdeydi, işler sunucu tarafından oluşturulan HTML sayfalarının modelinde çok fazlaydı ve ardından geliştirmek için JavaScript'i üstte katmanlayarak aşamalı bir geliştirme yaklaşımı izliyordu. arayüz. Ve eğer arayüzdeki bir şeyin durumunun değişmesi gerekiyorsa, kodunuz arayüzün güncellemesi gereken tüm kısımlarını bilmek zorundaydı, bu da sizi açıkça, kodun yazıldığı bu büyük monolitik görünümlerle sıkı bir şekilde bağlantılı bir yaklaşıma yönlendiriyor. etrafındaki diğer tüm kodlar hakkında bilgi sahibi olması gerekir. Ve sanırım bu, bir kalıp kitaplığı veya bir tasarım sistemi ile çalışırken alacağınız bileşenleştirilmiş bir yaklaşıma pek uygun değil, ki bu daha çok sizin özel uzmanlık alanınızdır. Sanırım, React bu yaklaşıma daha çok uyuyor, değil mi?

Mina: Bence, özellikle çok özel CSS'yi bir JSX veya bir React bileşeniyle eşleştirebilmekle. Ve bu şekilde, kitaplık için ihtiyacınız olanı ayırmayı veya yalnızca kitaplık için ihtiyacınız olanı alıp gerisini bırakmayı çok daha kolay hale getirirken, yalnızca bir büyük stil CSS dosyası veya bunun gibi bir şeyle daha monolitik bir şey yapmaya çalışan bir desen kitaplığı veya tasarım sistemi , çok zorlaştırıyor. Ya hepsini ya da hiç almamalısın. Bu yüzden, sunum katmanımı ve içerik katmanımı etkileşim katmanımdan gerçekten ayırmamın bir yolu olmasını istesem bile, React'in daha bireyselleştirilmiş, daha bileşenli bir geliştirme yolu yapmamızı sağladığını takdir ediyorum. Ama belki de bu anlamda biraz eski kafalı olmam bundandır.

Drew: Kesinlikle oradaki acıyı hissediyorum. Fikir şu ki, yanılıyorsam gelin ve beni düzeltin, benim anlayışım teknolojileri, CSS'yi ve JavaScript'i ve HTML'yi ayırmak yerine, işlevselliği ayırmaktır. Yani tek bileşenli her şey bir arada var olur-

Mina: Evet.

Drew: … o bileşene artık ihtiyaç kalmadığında, sanırım bu yararlı olur. Sadece silebilirsiniz ve gitti ve uygulamanızın etrafında bir ayak izi bırakmaz. Yine de CSS ile durum her zaman böyle değildir. React ile CSS ile nasıl çalışıyorsunuz? Tarz bileşenleri gibi şeylere veya bunun gibi şeylere baktınız mı?

Mina: Hayır, yapmadık. Tarz bileşenlerini duydum, ancak tamamen dürüst olmak gerekirse, onları hiçbir zaman tam olarak araştırmadım. Dolayısıyla, React ile CSS ile çalışma şeklimiz, Less yazıyoruz ve o bileşene aktarılan her bir bileşene eklenmiş bir Less dosyamız var. Daha sonra Webpack aracılığıyla bağlanır ve müşteriye sunulur.

Drew: Ad alanını dönüştürmek için BEM gibi bir sistem mi kullanıyorsunuz?

Mina: Evet. Ad alanı için BEM kullanıyoruz, ancak buna bağlılık kimin ne yazdığına bağlı olarak değişiklik gösteriyor. Ancak, her bir sınıfın ve bileşenin amacının ne olduğunu biraz daha açık hale getirmek için bir BEM ad alanı deseni kullanmaya çalışıyoruz.

Drew: Peki bu senin için başarılı bir şekilde çalışıyor gibi mi?

Mina: Sanırım. Bazen aynı eski sorunu yaşıyor, bazen bir şeyi nasıl adlandıracağımı bilmiyorum. Bir süre sonra günlük şeyler usta için her zaman zor olmuştur ve olacaktır. Bu yüzden sahip olduğum tek sorun, bazen belirli bir bileşene ne demem gerektiğine dair hiçbir fikrim yok.

Duru: Kesinlikle. Bu sürekli bir savaş, değil mi, isimleri nasıl açıklayacağız?

Mina: Evet.

Drew: Her zaman yeni bir özellik ya da bunun gibi bir şey üzerinde çalışırken, bir bileşene ve tüm sınıflara ve o özelliğin şu anda sahip olduğu her şeye adını veriyorsunuz. Ve sonra, fırlatmaya geldiğiniz zaman, adı başka bir şey olarak değiştirildi. Yani koddaki eski isme referanslarınız var ve arayüz yeni isme sahip. Ve …

Mina: Ben her zaman biraz daha geçici olan şeylere karşı işlevine veya amacına göre adlandırmaya çalışırım, çünkü bu bileşenin asıl amacının değişmesi daha az olasıdır. Bahsetmeyi unuttum ama BEM kullanımına ek olarak, aşinaysanız BEMIT kullanıyoruz sanırım. Temelde her ikisi de Harry Roberts tarafından yaratılan ITCSS artı BEM'dir. Bu yüzden, bir şeyin bir bileşen olup olmadığını, bir düzen nesnesine karşı, birden çok bileşenden oluşan daha büyük bir model gibi olup olmadığını belirtmek için Macar notasyonunu kullanıyorum. Ve sonra, blok elemanı gibi belirtmek için BEM kuralını kullanırız.

Drew: Kod tabanınızdaki bileşenleri ve şeyleri çok fazla yeniden düzenleme ve silme işlemi yapmak zorunda kaldınız ve CSS'nin geride kalması sorunuyla uğraşmak zorunda kaldınız mı?

Mina: Evet. Yani işimin React olmayan kısmı, slack.com'u sürdürmek, bunların hepsi CSS için derlenen bir grup Less dosyasından ibaret. Ve sizi temin ederim ki, orada bir sürü zombi kodu var, çünkü orada bulunduğum süre boyunca kesinlikle bir çok şeyi tekrarlıyoruz. Ve bir sayfayı veya başka bir şeyi yeniden tasarladığımız zamana kıyasla her zaman geri dönüp temizlik yapacak zamanımız olmuyor. Yani bir denetim için gecikti, bunu söyleyeceğim.

Drew: Bu, CSS'ye nasıl yaklaştığımıza bakarak React projemizde incelediğimiz bir şey. Şu anda, uygulamanın tamamı için birkaç büyük, global CSS dosyamız var ve paket boyutumuzun sadece büyüdüğü, büyüdüğü ve büyüdüğü ve işler kötüye gitse bile asla küçülmediği bu durumu yaşıyoruz. kaldırıldı. Bu yüzden tarz bileşenleri gibi şeylere bakıyorduk, Tailwind de gerçekten ciddi olarak düşündüğümüz başka bir seçenek. Arka rüzgara çok baktınız mı?

Mina: Pek bakmadım. Bunu merak ediyordum, ama yine, kod tabanımıza getirmek istediğim bir şey olup olmadığını görmek için gerçekten kazmak için gerçekten zamanım olmadı.

Drew: Aslında oldukça şaşırdım çünkü senin gibi ben de bu şeylerin nasıl yapılacağı konusunda biraz eski kafalıyım. Endişelerin güzel ayrılmasını seviyorum. Ve CSS'imi CSS'de yazmayı seviyorum ve tabii ki Tailwind'deki yaklaşım, uyguladığınız satır içi stiller gibi hissettiren tüm bu sınıf adlarına sahip olmanızdır. Ve eğer kirli hissediyorsa.

Mina: Evet.

Drew: Ve ekip içinde gönüllü oldum, her birimiz sorunlarımıza uygun olup olmadığını araştırmak için bir teknoloji kullandık ve Tailwind'e bakmaya gönüllü oldum çünkü ondan nefret edeceğimden kesinlikle emindim.

Mina: Hayır, hayır.

Drew: Ama görünüşe göre bunun birçok sorunu çözdüğünü düşünüyorum. Oldukça etkilendim.

Mina: Evet. Ben de benzer bir düşünce tarzına rastladım, çünkü geçmişte bir sınıfın belirli bir bileşen için ihtiyaç duyduğum tüm stilleri içermesini ve Tailwind'in yaptığına inandığım gibi özellik başına bir sınıf yapmamayı tercih ederdim. ya da onun gibi diller. Benzer nedenlerle, "Şey, bu noktada sadece satır içi CSS çalıştırıyorum. Bunu neden yapayım?" Ancak, Slack tasarım sistemimizin içinde gitgide daha fazla geliştirdikçe, bir desenle biraz kenar boşluğu eklemek gibi şeyler yapan faydalı sınıflar dediğim bir sürü şey yarattım. Bileşen sınıflarına ek olarak bu sınıfları giderek daha fazla kullandığımı fark ettim. Ben de, "Tamam, belki de her seferinde bir bildirim olarak bir CSS yapmak için tüm bunları tekrar gözden geçirmeliyim." O kadar ileri gider miydim bilmiyorum ama kesinlikle düşünmeye değer.

Drew: İnce istemciler ve şişman istemci çözümleri arasındaki eğilimler açısından bilgi işlem, ters yüz gibi görünüyor. Terminalleri olan ana bilgisayarlar ile başladık ve ardından Windows, ofis ve tüm bu tür büyük uygulamalar ile PC çağı. Ve hepsi gerçekten yavaşlıyordu ve web ortaya çıktı ve bu sadece bir tarayıcıydı ve tüm iş sunucuda yapılıyordu. Ve her şey yine hızlı ve çabuk oldu. Ve şimdi, her şeyi JavaScript ile, React ve JAMstack yaklaşımı gibi şeylerle yapılan tüm bu işleri tarayıcıya geri koymaya geri döndük ve burada bir tür şişman istemciye geri döndük. Bazen tarayıcıdan çok fazla şey istediğimizden endişeleniyorum. Bu bir hata mı? Tüm bunları React'te yapmaya çalışan tarayıcıdan çok fazla şey mi istiyoruz?

Mina: Yine, bir uyarıyla evet demek istiyorum, deneyimlerim çoğunlukla statik web sitelerini içeriyor. Çok fazla ürün geliştirme yapmıyorum. Belki bu alanda, bu daha mantıklı. Ama benim bakış açıma göre, çoğu zaman bir tereyağı bıçağına ihtiyacımız olduğunda balta kullandığımızı hissediyorum. Tüm bunları tarayıcıya neden koymamız gerektiğini bilmiyorum, istemci üzerinde bu kadar çok iş ve bu kadar baskı. Bunu çok daha basit yapabileceğimizi hissediyorum. Beni React'i kullanmakta her zaman biraz tereddüt ettiren şeylerden biri, ya da tereddüt ediyorum, ama beni içten içe kızdırdığında ve aktif olarak karşı çıktığımda demek istediğim şey, bir web sitesine gittiğimde ve kelimenin tam anlamıyla hiçbir şey yapmayacağı zamandı çünkü orada bir hata falan mıydı, "Gerçekten mi? Bir işlev bozulduğu için tüm sayfa bozuldu mu?”

Mina: Çoğu zaman bunun ya hep ya hiç yaklaşımı olması beni biraz rahatsız etti. Geçmişte AEA'da ve geçmişte başka yerlerde verdiğim konuşmalardan biri, sadece gelişiminizi değil, aynı zamanda sitelerin sanat yönetimini ve tasarımını da içeren aşamalı geliştirmenin nasıl dahil edileceği hakkındaydı. Ve özellikle aşamalı geliştirme veya herhangi bir tür zarif bozulma yapmayan web sitelerinin örneklerini belirtmek isterim. Sanki tarayıcıda JavaScript çalışıyor ya da kesinlikle hiçbir şey alamıyor gibiydiniz. Ve aslında hakkında konuşulan sitelerden biri olan web tasarımının tarihi hakkında bilgi veren basit bir site gibi, 1990'dan bu yana web tasarımının tarihi gibi olurdu. Bir sürü zaman çizelgesi, bir şeylerin animasyonu olan güzel bir web sitesiydi. Ancak sadece bir liste ile statik olarak da oluşturulabilirdi. Hiçbir şey göstermemekle, şu anda modern web geliştirmeye yaklaşma şeklimiz nedeniyle kaybolduğunu düşündüğüm güzelce geliştirilmiş deneyimi göstermek arasında adımlar vardı.

Drew: Öyleyse, React gibi bir çözüme uyan ve gerçekten kullanılmaması gereken ve daha geleneksel yöntemler kullanmanız gereken bazı proje kategorileri olduğunu söyleyebilir misiniz?

Mina: Siteniz özellikle çoğunlukla statik ise, sadece bilgi sunuyorsa, sadece DOM manipülasyonunun ötesinde çok fazla etkileşimi olmayan bir şeyi oluşturmak için neden React gibi bir projeye ihtiyacınız olduğunu anlamıyorum. . Sanırım bundan ne fayda sağladığını göremiyorum. Yine, uygun projeler üzerinde çalışmıyor olabilirim. Bu kullanım örneğini görmemiş veya bulamamış olabilirim, ancak çoğunlukla statik bir site olup olmadığını, içerik sunup çok fazla etkileşim olmadığını, manipüle edilmiş DOM'nin ötesinde çok fazla etkileşim olmadığını ve animasyonlar yapıp yapmadığını görmekte zorlanıyorum. Bir React kitaplığına sahip olmanın bu hedefe ulaşmanıza nasıl yardımcı olduğunu anlamıyorum.

Drew: Bu ilginç çünkü kötü konuşmuyorum çünkü onu gerçekten kullanmadım ama bir çok Gatsby projesi ve Gatsby'nin içinde React ön uç kullanan statik bir site oluşturucu olduğunu görüyorum. Ve temaların tüm örneklerini ve sahip oldukları şeylerin hepsinin içerik tabanlı siteler veya bloglar ve bir tarif sitesi ve bir portföy ve bu tür şeyler olduğunu görüyorum. Ve aslında bunun React gibi bir şey için kesinlikle doğru olmadığını düşündüğüm bir şey var. Bu neden statik olarak oluşturulmuyor ve ardından aşamalı olarak geliştirilmiyor?

Mina: Evet.

Drew: Bu yazılım değil.

Mina: Evet. Aslında Gatsby'yi de kullanmadım. Bununla ilgili pek çok harika şey duydum, ancak muhtemelen bu, "Tamam, sanırım o aletin o işi yapmak için neden gerekli olduğunu anlamıyorum. ” Yine bilmiyorum. Belki de daha fazla insan yeni bir şey yazarken React'te rahat yazabildiğinden ve bu sadece insanlarla bulundukları yerde buluşan bir araç sağladığındandır. Onları kullanan ve onları seven insanlar için React kullanan statik site oluşturucular hakkında harika şeyler duydum, ancak bu, hemen "Ah, bu mantıklı" diyebileceğim bir kullanım durumu değil.

Drew: Görünüşe göre bizim web sitesi dediğimiz şey ile sizin web uygulaması diyebileceğiniz şey arasında her zaman bir savaş olmuş. Ve ikisi arasındaki uçurum gittikçe genişliyor ve genişliyor gibi görünüyor, ancak aşamalı bir geliştirme yaklaşımı, statik bir şey alarak ve JavaScript ekleyerek ve etkileşim ekleyerek boşluğu kapatmaya çalışıyor. React gibi şeyler, tarayıcıda çalıştırdığınız yazılımlar için ideal gibi görünüyor. Buna katılıyor musunuz?

Mina: Kesinlikle katılıyorum çünkü bu tür bir ortam için yapılmış gibi görünüyor; yazılımı çalıştırmak için inşa edilmiştir. Facebook için Facebook tarafından yapılmıştır. Yani bir ürün için üretildi. Tarayıcıda bir web uygulaması dediğiniz her şeyi çalıştırmak için oluşturuldu ve mutlaka bahsettiğim gibi, yapmaya alışkın olduğum iş türü için değil. Dolayısıyla, bu senaryolarda, bir tarayıcının içinde çalışması gereken daha karmaşık, daha karmaşık bir yazılım parçası oluşturuyorsanız, onu kullanmanın kesinlikle çok mantıklı olduğunu düşünüyorum. Ama eğer bir pazarlama sitesi ya da başka bir şey inşa ediyorsan, orada neden gerekli olacağını anlamakta güçlük çekerim sanırım.

Drew: Yani insanlara hala düzgün, statik olarak oluşturulmuş web siteleri oluşturma izni veriyor muyuz?

Mina: Bunun daha fazla olduğunu görmek isterim. Bu bir şekilde kaybolmuş gibi hissediyorum ve bir zamanlar havalı ya da her neyse, onu kaybetmiş gibi hissediyorum. Web geliştirmenin o kısmını kaybettiğimizi hissediyorum. Çok komik: ikimiz de eski kafalı olduğumuzu söyledik ve buna gülüyorum çünkü aslında altı yıldır web geliştirme yapıyorum? eski kafalı nasılım Benim için o kadar uzun sürmedi. Yine de bir şekilde yeni ve parlak şeyleri sevmeyen eski muhafızın bir parçasıyım. anlamıyorum.

Drew: Yani aslında React, sen bir web geliştiricisi olduğun süre boyunca var oldu.

Mina: Belki sadece yaşlı bir ruhum var. Bilmiyorum.

Drew: Sanırım durum bu. Kişisel olarak bakmadım, React uygulamalarıyla alabileceğiniz hizmet tarafı yaklaşımları var. Bunlardan herhangi birini yaşadınız mı?

Mina: Ben hiçbirini yaşamadım. Şu anda üzerinde çalışmakta olduğum proje için kısaca onlara baktım, çünkü operasyonun bir sunucuda istemcilere göre daha iyi çalışacak bölümleri olduğunu hissediyorum. Ama sanırım sınırlı bilgim ve kod tabanının anlayabileceğimden biraz daha karmaşık olması gerçeğinden dolayı, bu parçanın nasıl çalışacağını tam olarak çözemedim. Sonunda çözmeyi çok isterdim, ama bir günümü kazmakla geçirdim. Ben, "Biliyor musun? Olmam gereken şeyi yutmuyorum. O yüzden geri çekilip farklı bir yol izleyeceğim."

Duru: Evet. Sanırım hepimiz oradaydık.

Mina: Evet. bir yola girdim. Ben de, "Ah, bu karanlık ve korkutucu. Ters çevirelim. Dönelim.”

Drew: Koddan uzaklaş.

Mina: Evet.

Drew: Yani şimdiye kadar React konusunda çok diplomatik ve kibar davrandın. Yüzeyin altında biraz gerilim köpürdüğünü hissediyorum. Haydi. Bize gerçekten ne hissettiğini söyle.

Mina: Kibar ve diplomatik davrandım, çünkü çoğunlukla Reacts hayran kitlesi bazen biraz kaba olabiliyor ve benim için gelmelerini istemem. Lütfen, React harika. Bu harika. Ne için kullanmak istiyorsan onu kullan. Şaka yapıyorum, ama bu podcast'in başında bahsettiğin tweet bile, söylediğin şeyin ondan nefret etmediğimi düşünüyorum. Sevmiyorum ama nefret de etmiyorum. Bu ifade bile, insanları aldım, vitriol yoktu, ama daha çok savunmaya atlamaya ve “Eh, onu seviyorum çünkü X, Y, Z” demeye hazırdılar. Ben, “Kötü olduğunu söylemedim. Ben sadece her şey hakkında meh olduğumu söyledim. ” Ama görünüşe göre meh olmak iyi değil. Onu sevmek zorundayım.

Mina: Bu yüzden muhtemelen normalde olacağımdan biraz daha diplomatik oldum çünkü insanların kötü konuştuğumu düşünmesini istemiyorum çünkü değilim. Daha çok web geliştirmede yeri vardır. Bir işleve hizmet eder. İşini iyi yapıyor. İnsanlar onu seviyor. Şimdiye kadar sahip olduğum veya kullanmak istediğim bir araç değil.

Duru: Evet. İnsanlar şu ya da bu tarafı tutmak zorunda hissettiklerinden ve siz ya kesinlikle bir şeyden yanasınız ya da kesinlikle bir şeye karşı olduğunuz için, işler çok kabileselleşebilir, değil mi? Ve bunun iyi bir amaca hizmet ettiğinden emin değilim ve bunun bizi endüstri ve topluluk olarak gerçekten ileriye götürdüğünü düşünmüyorum.

Mina: Evet. Gerçekten garip. Sadece sosyolojik bir bakış açısıyla izlemek büyüleyici, ancak genellikle gözlemlemek gerçekten garip. Dediğim gibi, bazı şeyler hakkında tarafsız olmama izin yok gibi. Güçlü bir fikre sahip olmalıyım, ki bu sağlıklı düşünmüyorum. "Gevşek bir şekilde tutulan güçlü görüşler" terimi nedir? Ben bazı konularda böyle yürüyorum. Bazı şeyler hakkında güçlü hissediyorum, ama fikrimi değiştiremeyeceğin gibi değil. Bazı insanlar gibi hissettiğimde, kimlikleri belirli yönlerine sarılır, eğer kendilerini tanımlamayı seçtikleri şey için değilseniz, bu kişisel bir hafife karşı sadece, bu özel konuyu umursamıyorum, ya da alet ya da her neyse.

Duru: Evet. Hepimizin yığının belirli bölümlerinde çok daha fazla uzmanlaşma eğiliminde olmamız gerçeğiyle daha mı kötüleşti bilmiyorum. Ve React geliştiricileri olan insanlar olduğunu biliyorum. Kendilerine bir React geliştiricisi diyorlardı çünkü çalıştıkları şey buydu. Ve mutlaka herhangi bir vanilya Java betiği yazmazlardı ya da Vue ya da her neyse kullanmazlardı. React onların dünyası. Bu yüzden "React'i sevmiyorum" demek neredeyse tüm kariyerlerine bir saldırı gibi geliyor sanırım. Şey, gerçekten React'i ya da teknoloji ne olursa olsun sevmenizi sağlamak için yatırım yapıyorlar.

Mina: Geçmişte o insanlardan biri olduğumu kabul edeceğim. Aslında, muhtemelen çoğunlukla SASS ile ilgiliydi, inanıyorum. Önişlemci olarak SASS yapma ekibindeydim ve diğer tüm önişlemciler çöp. Onlar hakkında konuşmak istemiyorum. Onlarla uğraşmak istemiyorum. Ve bunun olaylara bakmanın çok dar bir yolu olduğunu fark ettim. İş için uygun aracı kullanın. Sizi daha üretken kılan şey, doğru araçtır. Ne olduğu gerçekten önemli değil.

Drew: Üzerinde çalıştığımız, bu tür kabile hissine sahip olmayan teknolojiler var mı? İnsanların kullanmaktan mutlu olduğu veya kullanmadığı bir şey var mı? Hiçbir şey düşünemiyorum.

Mina: Vay. Aslında işaretleme hakkında kimsenin fikri yok.

Duru: Hayır.

Mina: Kimsenin gerçek HTML gibi ve sadece işaretleme hakkında fikri yokmuş gibi hissediyorum, tıpkı "İşte orada" gibi. Onu kullanırlar. Ancak insanların CSS hakkında ve bunun ne kadar korkunç ya da harika olduğu ve artık pek fazla gerçekleşmeyen önişlemci savaşları ve ardından elbette çeşitli JavaScript kitaplıklarındaki tüm kabilecilik hakkında güçlü fikirleri var.

Drew: Yani React ile şimdiye kadarki yolculuğunuzun hala adil olduğunu söyleyebilirsiniz, “Bu bir araç. İşini yapıyor mu?”

Mina: Ne kadar yaygın olduğu ve ne kadar gereksiz olduğumu düşündüğüm için meraktan aktif ve içgüdüsel bir hoşnutsuzluğa dönüştü. Şimdi meh ile birlikteyim, bu yine ondan nefret ettiğim anlamına gelmiyor. Sadece şu anlama gelir…

Drew: Bence burası iyi bir yer. Belirli bir teknolojinin amacı için değerini anlarsak, muhtemelen teknoloji uzmanları olarak hepimiz daha güçlüyüz. Hangi durum için neyin iyi olduğunu değerlendirebilir ve iş için doğru aracı seçebiliriz.

Mina: Evet. Kariyerimde herhangi bir dile, teknolojiye ya da herhangi bir şeye gerçekten yatırım yapmadığım bu noktaya bir bakıma geldim, çünkü bu, "Sizin için en uygun araç hangisiyse o gibi. yapmaya çalışın, sonra bunu kullanın.” Her şeyin bir yeri olduğunu öğrendim; her şeyi yapmanın bir yeri ve zamanı vardır. Ve yakın zamana kadar, bu React kütüphanecisini kullanmam için gerçek bir zaman ya da yer yoktu ve şimdi var.

Drew: Bence burası iyi bir yer. Bu yüzden son zamanlarda senin günlük işinde olduğu gibi React hakkında her şeyi öğreniyorum. Son zamanlarda öğrendiğiniz başka bir şey var mı?

Mina: Aslında ironik bir şekilde öğrendim, ki bu bence Facebook'ta ortaya çıkan başka bir dil, çok fazla Hack geliştirme yapıyorum, çünkü çoğunlukla Slack'te, günlük işimde kullandığım şey bu. Hack'i öğrenmek, React'i daha rahat kullanmamın yolunu açtı çünkü çok benzer kalıpları izliyorlar, ancak biri sunucu tarafı, diğeri değil. Böylece, genel olarak, arka uç ve bunun çeşitli nedenlerle nasıl çalıştığı hakkında daha fazla şey öğreniyorum. Ve son birkaç yıldır kendimi esnetiyorum ve giderek daha fazla rahat bölgemin dışına çıkıyorum. Tasarım sistemleri, kütüphaneler, bu benim dünyam ve bu dünyada kendimi çok iyi ve rahat hissediyorum. Ama bunun dışına çıkıyorum ve çok daha fazla sunucu tarafı mantığı, API geliştirme ve veri modelleme ve bunların hepsini yapıyorum. Ben de son bir yıldır bununla ilgili çok şey yapıyorum.

Drew: Ön uçla ilgili konularda arka uçla ilgili tüm yığını ne kadar çok anlarsam, her birinin diğeri hakkındaki bilgilerime yardımcı olduğunu görüyorum. Arka uç kodu yazarak ve anlayarak daha iyi ön uç kodu yazdığımı görüyorum.

Mina: Evet. Sanırım ben de aynı şekilde hissediyorum. Artık daha iyi bir fikrim var, söylediğimiz gibi, verilerden son müşteriye nasıl ulaştığımızın tüm yığını. Hangi bölümde çalışırsam çalışayım tüm boru hattını düşündüğümü fark ettim. Bu API'yi yapılandırmanın en iyi yolunun ne olduğunu düşünüyorum, böylece şablona ulaştığımda, bunu yapmak zorunda kalmıyorum. bu ucunda aldığım verileri çok fazla manipüle ediyorum. Kesinlikle beni genel olarak daha iyi bir mühendis yaptı, öyle hissediyorum

Drew: If you, dear listener, would like to hear more from Mina, you can follow her on Twitter where she's @MinaMarkham and find her personal site at mina.codes. Thanks for joining us today, Mina. Do you have any parting words?

Mina: Have a smashing night?

Drew: Great.