Angular vs React!

Bu makale AnatoliaCode blogunda
yayınlanmıştır.

Angular mı yoksa React mi seçmeliyim? Her çerçevenin sunacağı çok şey vardır ve aralarında seçim yapmak kolay değildir. Seviyeniz ne olursa olsun, bu konu hakkında eğitimli bir bakış açısına sahip olmanız gerekir.

Size biraz zaman kazandırmak için önceden söylemek istediğim bir şey var. Bu makale hangi çerçevenin daha iyi olduğu konusunda net bir cevap vermeyecektir. Çünkü bunun cevabı, kullanım durumunuz, amacınız vb. gibi çok çeşitli faktörlere bağlıdır.

Soruya doğrudan cevap veremeyeceğimiz için başka bir şey deneyeceğiz. Herhangi iki çerçeveyi yapısal bir şekilde karşılaştırma sorununa kendi başınıza nasıl yaklaşabileceğinizi ve ortamınıza göre nasıl uyarlayabileceğinizi göstermek için Angular ve React'i karşılaştıracağız. Şu "bir adama balık tutmayı öğret" yaklaşımını hepiniz duymuşsunuzdur. Karşılaştırmayı yaparken, bu motto ile hareket etmeye çalışacağım.

---

Nereden Başlamalı?

Herhangi bir aracı seçmeden önce, iki basit soruyu yanıtlamanız gerekir:

• "Bu kendi başına iyi bir araç mı?"
• "Kullanım durumum için iyi çalışacak mı?"

Bu soruların ikisi de kendi başına bir şey ifade etmez, bu yüzden her ikisini de aklınızda tutmanız gerekir. Her zaman sorular o kadar basit olmayabilir, bu yüzden onları daha küçük parçalara ayırmaya çalışacağız.

Kullanmak istediğimiz aracın kendisiyle ilgili sorular:

• Ne kadar eski bir teknoloji ve arkasında kim var?
• Ne tür özelliklere sahip?
• Hangi mimari, geliştirme algoritmaları ve kalıpları kullanıyor?
• Nasıl bir ekosistemi var?

Kendinize sormanız gereken sorular:

• Ben ve meslektaşlarım bu aracı kolaylıkla öğrenebilecek mi?
• Projeme uygun mu?
• Geliştirici deneyimi nasıl?

Bu soru dizisini kullanarak, herhangi bir araçla ilgili değerlendirmenize başlayabilirsiniz ve biz de React ve Angular karşılaştırmamızı bunlara dayandıracağız.

Dikkate almamız gereken başka bir şey var. Açıkçası, Angular'ı React ile karşılaştırmak tam olarak adil değildir, çünkü Angular tam gelişmiş, zengin özelliklere sahip bir çerçeve iken, React sadece bir UI bileşen kitaplığıdır. Olasılıkları bile olsa, React'ten bahsederken, onunla birlikte sıklıkla kullanılan bazı kütüphaneleri de konuşacağız.

---

Tecrübe Her İşte Önemli

Yetenekli bir geliştirici olmanın önemli bir parçası, yerleşik, zamanla kanıtlanmış yaklaşımlar ile yeni teknolojiyi değerlendirme arasındaki dengeyi koruyabilmektir. Genel bir kural olarak, belirli riskler nedeniyle henüz olgunlaşmamış araçları benimserken dikkatli olmalısınız:

• Kullandığınız araç hatalı ve dengesiz olabilir.
• Satıcı tarafından beklenmedik bir şekilde artık güncelleme gelmiyor ve desteklenmiyor olabilir.
• Yardıma ihtiyacınız olması durumunda kullanılabilecek geniş bir bilgi tabanı veya topluluk olmayabili

Ancak hem React hem de Angular iyi topluluklardan geliyor. Bu yüzden bu konuda kendimize güvenebiliriz gibi görünüyor.

React

React , Facebook tarafından geliştiriliyor. Instagram ve WhatsApp dahil olmak üzere çeşitli Facebook ürünlerinde kullanılıyor. 2013'ten beri piyasada yer alıyor. Bu yüzden tam olarak yeni sayılmaz. Ayrıca, GitHub'daki en popüler projelerden biri. Airbnb, Uber, Netflix, Dropbox ve Atlassian gibi çok büyük şirketler React kullanıyor.

Angular

Angular, 2016 yılında ilk sürümüyle aramıza katıldı. Yani React'e göre biraz daha genç bir arkadaşımız. Ancak aynı zamanda oyunun en tecrübesiz elemanı da değil. Proje Google tarafından sürdürülüp destekleniyor ve Igor Minar'ın da belirttiği gibi, 2018'de bile Google Firebase Console, Google Analytics, Google Express, Google Cloud Platform ve daha fazlası gibi 600 yüzden fazla uygulamada kullanıldı. Google'ın dışında Angular; Forbes, Upwork, VMWare vb bir çok büyük firma tarafından kullanılıyor.

Özellikleri

Angular, React'ten daha fazla özelliğe sahiptir. Nasıl baktığınıza bağlı olarak bu hem iyi hem de kötü bir şey olabilir.

Her iki çerçeve de ortak bazı temel özellikleri paylaşır: bileşenler, veri bağlama ve platformdan bağımsız oluşturma.

Angular

Angular, modern bir web uygulaması için gerekli birçok özelliği ile birlikte gelir. Standart özelliklerden bazıları şunlardır:

• bağımlılık ekleme
• HTML'nin genişletilmiş bir sürümüne dayalı şablonlar
• yaşam döngüsü kancalı sınıf tabanlı bileşenler
• @angular/router tarafından yönlendirme
• @angular/common/http kullanan Ajax istekleri
• @angular/forms yapı formları
• bileşen CSS kapsülleme
• XSS koruması
• kod bölme ve geç yükleme
• birim testi için test çalıştırıcısı, çerçeve ve yardımcı programlar.

Bu özelliklerden bazıları çerçevenin çekirdeğinde yerleşiktir ve bunları kullanmama seçeneğiniz yoktur. Bu, geliştiricilerin küçük bir Angular uygulaması oluşturmak için bağımlılık ekleme gibi özelliklere aşina olmasını gerektirir. HTTP istemcisi veya formlar gibi diğer özellikler tamamen isteğe bağlıdır ve gerektiğinde eklenebilir.

React

React ile daha minimalist bir yaklaşımla başlıyorsunuz. İşte elimizde olanlar:

• JavaScript üzerine oluşturulmuş XML benzeri bir dil olan JSX'e sahiptir.
• Yaşam döngüsü kancalarına veya daha basit işlevsel bileşenlere sahip sınıf tabanlı bileşenler
• setState ve hooks kullanarak durum yönetimi.
• XSS koruması
• kod bölme ve geç yükleme
• hata işleme sınırları
• bileşenlerin birim testi için yardımcı programlar

İhtiyaçlarınıza göre ekleyeceğiniz ek kütüphaneleri seçmeniz beklenir; bu, bu teknolojilerle ne kadar deneyimli olduğunuza bağlı olarak hem iyi hem de kötü olabilir. Genellikle React ile birlikte kullanılan popüler kütüphanelerden bazıları şunlardır:

• Yönlendirme için React-Router
• HTTP istekleri için axios
• CSS kapsülleme için çok çeşitli teknikler
• Ek birim test araçları için enzyme veya React Testing Library

Aslında tüm bu kütüphaneler bize yığınımızı her projenin belirli gereksinimlerine uyarlama yeteneği verir. Ayrıca yeni kütüphaneleri öğrenmekte zor değildir.

Diller, Paradigmalar ve Kalıplar

Her çerçevenin özelliklerinden bir adım geriye gidip, her iki çerçevede ne tür üst düzey kavramların popüler olduğunu görelim.

React

React hakkında düşünürken akla birkaç önemli şey gelir: JSX, bileşenler ve kancalar.

JSX

Çoğu çerçevenin aksine, React'in ayrı bir şablon dili yoktur. React, biçimlendirme ve mantığı ayırmaya yönelik klasik bir yaklaşımı izlemek yerine, bunları doğrudan JavaScript kodunuzda işaretleme yazmanıza olanak tanıyan XML benzeri bir dil olan JSX kullanır.

İşaretlemeyi JavaScript ile karıştırmanın yararları tartışmalı olsa da tartışılmaz bir faydası vardır: statik analiz. JSX işaretlemenizde bir hata yaparsanız, derleyici sessizliğe devam etmek yerine bir hata yayınlayacaktır. Bu, yazım hatalarını ve diğer saçma hataları anında yakalayarak yardımcı olur.

Bileşenler

React'te, fonksiyonları ve sınıfları kullanarak bileşenleri tanımlayabilirsiniz.

Sınıf bileşenleri, ES sınıflarını kullanarak kodunuzu yazmanıza ve bileşen mantığını yöntemlere göre yapılandırmanıza olanak tanır. Ayrıca, bir bileşende değişiklik meydana geldiğinde özel mantığı çalıştırmak için React'in geleneksel yaşam döngüsü yöntemlerini kullanmanıza izin verir. Bu gösterimi, OOP programlamaya aşina kişiler için anlamak daha kolay olsa da, JS'nin sahip olduğu tüm ince nüansların farkında olmanız gerekir.

OOP Programlama konusunda bilgi sahibi olmak isterseniz, Python 3 ile OOP Programlama makalesine buradan göz atabilirsiz.

Fonksiyonel bileşenler basit fonksiyonlar olarak tanımlanır. Genellikle saftırlar ve girdi props ile işlenmiş çıktı arasında net bir eşleme sağlarlar. İşlevsel kod genellikle daha az bağlıdır ve yeniden kullanımı ve test edilmesi daha kolaydır. Kancaların kullanılmaya başlanmasından önce, işlevsel bileşenler durum bilgisine sahip olamazdı ve yaşam döngüsü yöntemlerine bir alternatifi yoktu.

React geliştiricileri arasında, sınıf bileşenlerini daha basit işlevsel bileşenler lehine kullanma eğilimi vardır, ancak kancalar daha yeni bir özellik olduğundan, genellikle daha büyük React projelerinde her iki yaklaşımın bir karışımını görürsünüz.

Kancalar (Hooks)

Kancalar , işlevsel bileşenlerde bileşen durumunu ve yaşam döngüsü yöntemi özelliklerini sınıflandırmanıza izin veren işlevlerdir.

React tarafından sağlanan iki kanca vardır:

• useState: durumu yönetmek ve veri yüklemek
• useEffect: DOM'u manuel olarak düzenlemek vb.

İşlevsel bileşenleri daha basit ve daha düzenlenebilir hale getirmek için kancalar geliştirildi. Artık büyük işlevleri daha küçük atomik parçalara bölebilirsiniz; bu, ilgili işlevsellik parçalarını bölmenize olanak tanır.

React, çok sayıda karmaşık soyutlama katmanı içermeden uygulamanızı yapılandırmanın yollarını sağlar. İşlevsel bileşenleri kancalarla birlikte kullanmak, daha basit daha atomik ve yeniden kullanılabilir kod yazmanıza olanak tanır. Kodu ve şablonları birleştirme fikri tartışmalı görünse de, sunum ve uygulama mantığını farklı işlevlere ayırmak benzer sonuçlar elde etmenizi sağlar.

Angular

Angular, bileşenler, hizmetler ve modüller gibi temel soyutlamalardan TypeScript, RxJS, Angular Elements gibi birkaç ilginç şeye sahiptir.

Ana Kavramlar

Angular, React'ten daha yüksek bir soyutlama seviyesine sahiptir, bu nedenle aşina olmak için daha temel kavramlar sunar. Başlıcaları şunlardır:

• bileşenler : uygulama mantığını yürütmekten ve şablonu oluşturmaktan sorumlu, özel olarak dekore edilmiş ES sınıfları olarak tanımlanır
• hizmetler : bileşenler tarafından kullanılan, iş ve uygulama mantığının uygulanmasından sorumlu sınıflar
• modüller : esasen ilgili bileşenleri, hizmetleri ve diğer öğeleri birlikte kablolamak için DI kaplar

Angular, ön uç geliştirme dünyasında daha az popüler olan, ancak arka uç geliştirme deneyimi olan herkesin aşina olması gereken DI gibi kavramların yanı sıra sınıfları da yoğun bir şekilde kullanır.

TypeScript

TypeScript , JavaScript üzerine kurulmuş ve Microsoft tarafından geliştirilmiş yeni bir dildir. JavaScript ES2015'in bir üst kümesidir ve dilin daha yeni sürümlerinden özellikler içerir. Son teknoloji JavaScript yazmak için Babel yerine kullanabilirsiniz. Ayrıca, ek açıklamalar ve tür çıkarımlarının bir kombinasyonunu kullanarak kodunuzu statik olarak analiz edebilen son derece güçlü bir yazma sistemine sahiptir.

Benim bizzat sevdiğim bir faydası daha var. TypeScript, Java ve .NET'ten büyük ölçüde etkilenmiştir, bu nedenle geliştiricileriniz bu dillerden birinde bir geçmişe sahipse, TypeScript'i öğrenmeyi düz JavaScript'ten daha kolay bulabilirler. Angular, TypeScript'i aktif olarak benimseyen ilk ana çerçeve olmasına rağmen, şimdi Deno (TypeScript yerel çalışma zamanı), Puppeteer ve TypeORM gibi birçok başka projede de ilgi görüyor.

TypeScript'i React ile birlikte kullanmak da mümkündür. Hatta akıllıca bile olur.

RxJS

RxJS , eşzamansız işlemlerin ve olayların daha esnek şekilde işlenmesine izin veren reaktif bir programlama kitaplığıdır. İşlevsel programlama ile harmanlanmış Gözlemci ve Yineleyici modellerinin bir kombinasyonudur. RxJS, sürekli bir değer akışı gibi herhangi bir şeyi işlemenize ve üzerinde eşleme, filtreleme, bölme veya birleştirme gibi çeşitli işlemler gerçekleştirmenize olanak tanır.

Kütüphane, bazı dahili kullanım için olduğu gibi HTTP modülünde de Angular tarafından benimsenmiştir. Bir HTTP isteği gerçekleştirdiğinizde, normal Promise yerine bir Observable döndürür. Bu yaklaşım, bir isteği iptal etme, birden çok kez yeniden deneme veya WebSockets gibi sürekli veri akışlarıyla çalışma gibi ilginç olasılıkların kapısını açar. RxJS'de ustalaşmak için, farklı gözlemlenebilir öğeler, konular ve ayrıca yaklaşık yüz yöntem ve operatöre karşı yolunuzu bilmeniz gerekir.

Durum Yönetimi

React'e benzer şekilde, Angular bileşenler bir bileşen durumu kavramına sahiptir. Bileşenler, verileri sınıf özelliklerinde depolayabilir ve değerleri şablonlarına bağlayabilir. Durumu uygulama genelinde paylaşmak istiyorsanız, daha sonra bileşenlere eklenebilecek durum bilgisi olan bir hizmete taşıyabilirsiniz. Reaktif programlama ve RxJS, Angular'da birinci sınıf bir vatandaş olduğundan, bazı girdilere dayalı olarak durumun bölümlerini yeniden hesaplamak için gözlemlenebilirlerden yararlanmak yaygındır. Ancak bu, bazı değişkenlerin değiştirilmesi, takip edilmesi zor olan çok yönlü bir güncelleme dizisini tetikleyebileceğinden, daha büyük uygulamalarda zor olabilir. Durum yönetimini geniş ölçekte basitleştirmenize olanak tanıyan Angular kitaplıkları vardır. Bu kitaplıklara daha sonra değineceğim.

Angular Elemanları

Angular Elemanları (Öğeleri), Angular bileşenleri özel öğeler olarak paketlemenin bir yolunu sağlar. Web bileşenleri olarak da bilinen özel öğeler, JavaScript kodunuz tarafından kontrol edilen özel HTML öğeleri oluşturmanın çerçeveden bağımsız standartlaştırılmış bir yoludur. Böyle bir öğeyi tanımlayıp tarayıcı kayıt defterine ekledikten sonra, HTML'de başvurulduğu her yerde otomatik olarak işlenecektir. Angular öğeleri, özel bileşen API'sini uygulamak ve bunun Angular'ın değişiklik algılama mekanizmasıyla çalışmasını sağlamak için gerekli sarmalayıcıyı oluşturan bir API sağlar. Bu mekanizma, potansiyel olarak farklı bir geliştirme döngüsüyle farklı bir çerçevede yazılan diğer bileşenleri veya tüm Angular uygulamaları ana bilgisayar uygulamanıza gömmek için kullanılabilir.

TypeScript'in, özellikle büyük bir kod tabanı veya karmaşık etki alanı/iş mantığı olan projelerimizin sürdürülebilirliğini iyileştirmek için harika bir araç olduğunu gördük. TypeScript ile yazılan kod daha açıklayıcıdır ve takip edilmesi ve yeniden düzenlenmesi daha kolaydır. Angular ile gitmiyor olsanız bile, bir sonraki JavaScript projeniz için bunu düşünmenizi öneririm. RxJS, projenizde veri akışını yönetmenin yeni yollarını sunar, ancak konuyu iyi kavramanızı gerektirir. Aksi takdirde, projenize istenmeyen karmaşıklık getirebilir.

Ekosistem

Açık kaynak çerçeveleriyle ilgili harika olan şey, etraflarında oluşturulan araçların sayısıdır. Bazen bu araçlar, çerçevenin kendisinden bile daha yararlıdır. Her çerçeveyle ilişkili en popüler araçlardan ve kitaplıklardan bazılarına bir göz atalım.

Angular

Angular CLI

Modern çerçevelerdeki popüler bir eğilim, yapıyı kendiniz yapılandırmanıza gerek kalmadan projenizi önyüklemenize yardımcı olan bir CLI aracına sahip olmaktır. Angular, bunun için Angular CLI'ye sahiptir. Sadece birkaç komutla bir proje oluşturmanıza ve çalıştırmanıza izin verir. Uygulamanın oluşturulmasından, bir geliştirme sunucusunun başlatılmasından ve testlerin çalıştırılmasından sorumlu tüm komut dosyaları sizden uzakta node_modules'de gizlenir. Ayrıca, geliştirme ve yükleme bağımlılıkları sırasında yeni kod oluşturmak için de kullanabilirsiniz.

Angular, projenize bağımlılıkları yönetmenin ilginç ve yeni bir yolunu sunar. ng add eklentisini kullanırken, bir bağımlılık kurabilirsiniz ve bu, kullanım için otomatik olarak yapılandırılır. Örneğin, ng add @angular/material'ı çalıştırdığınızda, Angular CLI, Angular Material'ı npm kayıt defterinden indirir ve uygulamanızı Angular Material'i kullanacak şekilde otomatik olarak yapılandıran yükleme komut dosyasını çalıştırır. Bu, Angular şemalar kullanılarak yapılır. Şema, kitaplıkların kod tabanınızda değişiklikler yapmasına olanak tanıyan bir iş akışı aracıdır. Bu, kütüphane yazarlarının yeni bir sürümü kurarken karşılaşabileceğiniz geriye dönük uyumsuz sorunları otomatik olarak çözebilecekleri anlamına gelir.

Bileşen Kitaplıkları

Herhangi bir JavaScript çerçevesini kullanırken önemli bir şey, her şeyi sıfırdan oluşturmak zorunda kalmamak için bunları seçtiğiniz bir bileşen kitaplığıyla entegre edebilmektir. Angular, popüler bileşen kitaplıklarının çoğuyla ve kendi yerel kitaplıklarıyla entegrasyonlar sunar. Örneğin:

• Bootstrap widget'larını kullanmak için ng-bootstrap
• Google'ın Materyal Tasarım bileşenleri için Materyal Kullanıcı Arayüzü
• NG-ZORRO, Ant Design spesifikasyonunu uygulayan bir bileşen kitaplığı
• Mobil uygulamalar için bileşen kitaplığı olan Angular için Onsen UI
• PrimeNG , zengin Angular bileşenlerden oluşan bir koleksiyon

Durum Yönetimi Kitaplıkları

Yerel durum yönetimi yetenekleri sizin için yeterli değilse, bu alanda kullanılabilen birkaç popüler üçüncü taraf kitaplık vardır.

En popüler olanı NgRx'tir. React'in Redux'undan ilham alıyor, ancak aynı zamanda verileri izlemek ve yeniden hesaplamak için RxJS'den yararlanıyor. NgRx'i kullanmak , anlaşılır tek yönlü bir veri akışı sağlamanıza ve kodunuzdaki eşleşmeyi azaltmanıza yardımcı olabilir.

NGXS, Redux'tan esinlenen başka bir durum yönetimi kitaplığıdır. NgRx'in aksine, NGXS, modern TypeScript özelliklerini kullanarak ve öğrenme eğrisini ve genel geliştirme deneyimini iyileştirerek standart kodu azaltmaya çalışır.

Ionic

Ionic, hibrit mobil uygulamalar geliştirmek için popüler bir çerçevedir. Angular ile güzel bir şekilde entegre edilmiş bir Cordova konteyneri ve güzel bir malzeme bileşeni kitaplığı sağlar. Bunu kullanarak bir mobil uygulamayı kolayca kurabilir ve oluşturabilirsiniz. Yerel bir uygulamaya göre hibrit bir uygulamayı tercih ediyorsanız, bu iyi bir seçimdir.

Angular Universal

Angular Universal, Angular uygulamaları için sunucu tarafında oluşturmayı etkinleştirmek üzere farklı araçları bir araya getiren bir projedir. Angular CLI ile entegredir. Express ve Hapi gibi birkaç Node.js çerçevesinin yanı sıra .NET çekirdeğini destekler.

Augury

Augury, geliştirme modunda çalışan Angular uygulamalarında hata ayıklamaya yardımcı olan, Chrome ve Firefox için bir tarayıcı uzantısıdır. Bileşen ağacınızı keşfetmek, değişiklik algılamayı izlemek ve performans sorunlarını optimize etmek için kullanabilirsiniz.

Compodoc

Compodoc, Angular için statik bir dokümantasyon oluşturucusudur. Diğer belge oluşturuculara benzer şekilde, kodunuzdaki TSDoc yorumlarına dayalı olarak statik HTML belgeleri oluşturabilir. Compodoc, modül yapınıza, rotalarınıza göz atmak, sınıfları bileşenler, hizmetler vb. olarak sınıflandırmak gibi, özellikle Angular için kullanışlı özelliklerle birlikte gelir.

Ngx-admin

Ngx-admin, Angular ile özel panolar oluşturmak ve bileşen kitaplıkları olarak Nebular veya Angular Material kullanmak için popüler bir çerçevedir.

---

Awesome Angular listesinde birçok başka kitaplık ve araç bulunmaktadır. İncelemenizi tavsiye ederim.

---

React

React Uygulaması Oluşturun

Create React App, React'in yeni projeleri hızla kurması için bir CLI yardımcı programıdır. Angular CLI'ye benzer şekilde, yeni bir proje oluşturmanıza, uygulamayı geliştirme modunda çalıştırmanıza veya bir üretim paketi oluşturmanıza olanak tanır. Birim testi için Jest kullanır, ortam değişkenlerini kullanarak uygulama profili oluşturmayı, yerel geliştirme için arka uç proxy'leri, TypeScript, Sass, PostCSS ve diğer birçok özelliği destekler.

Bileşen Kitaplıkları

Angular'a benzer şekilde React, aralarından seçim yapabileceğiniz çok çeşitli bileşen kitaplıklarına sahiptir:

• ant-design
• Material UI
• react-bootstrap
• Semantic UI
• Onsen UI, optimize mobil uygulamalar için
• Blueprint, masaüstü uygulamaları için

Durum Yönetimi Kitaplıkları

Kancaların tanıtılması, React'te durum yönetimini kesinlikle sarsmıştır. Bir üçüncü taraf yönetimi kitaplığına ihtiyaç duyulduğunda bile devam eden tartışmalar var. Kancalar, durumla acil çalışma ihtiyacını karşılasa da, diğer kütüphaneler zamanla test edilmiş uygulama kalıplarını, birçok ek kitaplığı ve geliştirme araçlarını kullanmamıza izin vererek bunu daha da ileriye taşıyabilir.

Redux, Flux'tan esinlenen, ancak bazı basitleştirmeler içeren bir durum yönetimi kitaplığıdır. Redux'un temel fikri, uygulamanın tüm durumunun, indirgeyici adı verilen işlevler tarafından değiştirilen tek bir nesne tarafından temsil edilmesidir. Redüktörlerin kendileri saf fonksiyonlardır ve bileşenlerden ayrı olarak uygulanır. Bu, endişelerin ve test edilebilirliğin daha iyi ayrılmasını sağlar.

MobX, bir uygulamanın durumunu yönetmek için alternatif bir kitaplıktır. Redux'un yaptığı gibi, durumu tek bir değişmez mağazada tutmak yerine, sizi yalnızca gereken minimum durumu depolamaya teşvik eder ve geri kalanını ondan alır.

Kitaplıkların Stilini Ayarlama

Angular'dan farklı olarak React, yerel CSS kapsülleme yetenekleri sağlamaz, bu nedenle üçüncü taraf çözümleri aramanız gerekir. Aralarında net bir lider olmayan bu sorunun sayısız çözümü var. Popüler olanlardan bazıları:

• Styled Components, stil uygulayarak React bileşenleri oluşturmanıza ve bileşenlerinizin stilini belirlemenize olanak tanır
• CSS Modules, dosyalarını içe aktarmanıza ve stillere referans vermek için benzersiz izole sınıf adları oluşturmanıza olanak tanır
• Emotion, Tarz Bileşenlerin ve CSS Modüllerinin yaklaşımlarını tek bir kitaplıkta birleştirir

PropTypes

PropTypes, bileşen çalışma zamanı prop doğrulamasını sunmanıza izin veren isteğe bağlı bir React özelliğidir. TypeScript ile statik tip kontrolünün kullanılmasının aksine, PropTypes, uygulamanız gerçekten çalışırken tip kontrolleri gerçekleştirecektir. Bu, özellikle istemcilerinizin TypeScript kullandığından emin olamadığınızda, kitaplıklar geliştirirken kullanışlıdır. React 15.5'ten bu yana, destek türleri ayrı bir kitaplığa taşındı ve artık tamamen isteğe bağlı. Faydalarını göz önünde bulundurarak, uygulamanızın güvenilirliğini artırmak için kullanmanızı tavsiye edebilirim.

React Native

React Native, Facebook tarafından React kullanarak yerel mobil uygulamalar oluşturmak için geliştirilmiş bir platformdur. Karma bir uygulama üreten Ionic'in aksine, React Native gerçek anlamda yerel bir UI üretir. Yerel emsallerine bağlı bir dizi standart React bileşeni sağlar. Ayrıca bileşenlerinizi oluşturmanıza ve bunları Objective-C, Java veya Swift ile yazılmış yerel koda bağlamanıza olanak tanır.

Next.js

Next.js, React uygulamalarının sunucu tarafında oluşturulması için bir çerçevedir. Uygulamanızı sunucuda tamamen veya kısmen oluşturmanın, sonucu istemciye döndürmenin ve tarayıcıda devam etmenin esnek bir yolunu sağlar. Evrensel uygulamalar oluşturmanın karmaşık görevini kolaylaştırmaya çalışır, bu nedenle kurulum, projenizin yapısı için minimum miktarda yeni ilkel ve gereksinimlerle olabildiğince basit olacak şekilde tasarlanmıştır.

react-admin

react-admin, mevcut REST veya GraphQL API'lerinin üzerine CRUD tarzı SPA uygulamaları oluşturmak için bir çerçevedir. Materyal tasarım, uluslararasılaştırma, tema oluşturma, veri doğrulama ve daha fazlasıyla oluşturulmuş bir kullanıcı arabirimi gibi kullanışlı özelliklerle birlikte gelir.

UI Geliştirme Ortamları

Ön uç geliştirmede son birkaç yıldır önemli bir eğilim, bileşeninizi etkileşimli ve uygulamadan ayrı olarak geliştirmenize, test etmenize ve belgelemenize olanak tanıyan geliştirme araçlarının patlaması olmuştur. Storybook, hem React hem de Angular desteğiyle bu alandaki liderlerden biri haline geldi. Bununla birlikte, React için başka alternatifler de var.

React Styleguidist, Storybook'a benzer şekilde, bileşenlerinizin etkileşimli dokümantasyonunu oluşturmanıza olanak tanır. Storybook'un aksine, oluşturulan kullanıcı arayüzü, ayrı bir hikaye dizisinden çok etkileşimli bir benioku'ya benziyor. Storybook bir geliştirme ortamı olarak parlarken, Styleguidist daha çok bir dokümantasyon aracıdır.

Test Yardımcıları

Kullanıcı arabirimi bileşenlerini test etmek genellikle onları bir korumalı alan ortamında oluşturmayı, kullanıcı etkileşimini simüle etmeyi ve çıktı sonuçlarını doğrulamayı içerir. Bu rutin görevler, uygun test yardımcıları kullanılarak basitleştirilebilir. Angular için bu yerleşik TestBed'dir. React için iki popüler aday vardır: Enzyme ve Testing Library.

Enzyme, bileşenlerinizi tam veya sığ bir DOM'a dönüştürmenize ve işlenen bileşenle etkileşime girmenize olanak tanır. Çoğunlukla, testlerinizin alt bileşenleri, aksesuarları veya durumu gibi bileşenin bazı iç bileşenlerine referans verebileceği bir beyaz kutu test yaklaşımı izler.

Testing Library, farklı bir yaklaşım izler ve sizi, teknik uygulamayı bilmeden bileşenlerinizle bir kullanıcı gibi etkileşime girmeye zorlar. Bu şekilde oluşturulan testler genellikle daha az kırılgandır ve bakımı daha kolaydır. React ile daha popüler olmasına rağmen, Testing Library Angular için de mevcuttur.

Gatsby

Gatsby, React.js kullanan statik bir web sitesi üreticisidir. Markdown, YAML, JSON, harici API'ler ve popüler içerik yönetim sistemlerinde tanımlanan web sitelerinizin verilerini sorgulamak için GraphQL kullanmanıza olanak tanır.

React 360

React 360, tarayıcılar için sanal gerçeklik uygulamaları oluşturmaya yarayan bir kitaplıktır. WebGL ve WebVR tarayıcı API'lerinin üzerine inşa edilen bildirim temelli bir React API'si sağlayarak 360 VR deneyimleri oluşturmayı kolaylaştırır.

React Developer Tools

React Dev Tools, React bileşen ağacında gezinmenize ve bunların sahne ve durumlarını görmenize olanak tanıyan, React uygulamalarında hata ayıklamak için kullanılan bir Chrome tarayıcı uzantısıdır.

Benimseme, Öğrenme Eğrisi ve Gelişim Deneyimi

Yeni bir teknoloji seçmek için önemli bir kriter, öğrenmenin ne kadar kolay olduğudur. Elbette cevap, önceki deneyiminiz ve ilgili kavramlar ve kalıplara genel bir aşinalık gibi çok çeşitli faktörlere bağlıdır. Bununla birlikte, belirli bir çerçeveye başlamak için öğrenmeniz gereken yeni şeylerin sayısını değerlendirmeye çalışabiliriz. Şimdi, ES6+ 'yı zaten bildiğinizi varsayarsak, anlamanız gerekenlerin ne olduğunu görelim.

React

React kullanırken, karşılaşacağınız ilk şey JSX olacaktır. Bazı geliştiriciler için JSX yazmak garip görünüyor. Ancak, bu kadar karmaşıklık yok. Sadece JavaScript ifadeleri ve özel bir takım HTML benzeri sözdizimi kullanılıyor. Ayrıca, bileşenlerin nasıl yazılacağını, yapılandırma için pro'ların nasıl kullanılacağını ve dahili durumu nasıl yöneteceğinizi öğrenmeniz gerekir. Bunların tümü düz JavaScript olduğundan, yeni bir şablon sözdizimi öğrenmenize gerek yoktur. React, sınıf tabanlı bileşenleri desteklerken, kancaların tanıtılmasıyla fonksiyonel geliştirme daha popüler hale geldi. Bu, bazı temel işlevsel geliştirme modellerini anlamanızı gerektirecektir.

React Tutorial, React öğrenmeye başlamak için mükemmel bir yerdir. React Tutorial ile yönlendiriciye aşina olabilirsiniz. React Router biraz karmaşık ve alışılmadık olabilir ama endişelenecek bir şey yok. Projenizin boyutuna, karmaşıklığına ve gereksinimlerine bağlı olarak, bazı ek kitaplıklar bulmanız ve öğrenmeniz gerekecek ve bu işin zor kısmı olabilir. Ama ondan sonra her şey sorunsuz bir şekilde hareket edecektir.

React'i kullanmaya başlamanın kolay olduğu konusunda bana güvenebilirsiniz. Arka uç ve ön uç geliştirmede sınırlı deneyime sahip kişiler bile hızlı bir şekilde giriş yapabiliyorlar. Yol boyunca karşılaşabileceğiniz hata mesajları genellikle belli başlı şeyler olacaktır ve temelde yatan sorunun nasıl çözüleceğine dair açıklamalar bulmanız kolaylaşacaktır.

Olumsuz tarafı, geliştirme faaliyetlerinizi desteklemek için kitaplıkları seçmek biraz zaman alabilir. Kaç tane kitaplık olduğu göz önüne alındığında, bu bir zorluk oluşturabilir. Ancak bu, çerçevenin kendisine alıştıktan sonra geliştirme faaliyetlerinizle birlikte yapılabilecek bir konu.

React için TypeScript gerekli olmasa da, onu değerlendirmenizi ve
projelerinizde benimsemenizi şiddetle tavsiye edebilirim.

Angular

Angular'ı öğrenmek sizi React'ten daha fazla yeni kavramla tanıştıracak. Her şeyden önce, TypeScript kullanabileceksiniz. Java veya .NET gibi statik olarak yazılmış dillerde deneyimi olan geliştiriciler için bunu anlamak, JavaScript'ten daha kolay olabilir, ancak saf JavaScript geliştiricileri için bu biraz çaba gerektirebilir. Yolculuğunuza başlamak için, Tour of Heroes eğitimini önerebilirim.

Çerçevenin kendisi, modüller, bağımlılık ekleme, dekoratörler, bileşenler, hizmetler, şablonlar ve yönergeler gibi temel konulardan değişiklik algılama, bölgeler, AoT derlemesi ve Rx gibi daha gelişmiş konulara kadar öğrenilecek konular açısından zengindir. Bunların tümü belgelerde kapsanmaktadır. Rx.js başlı başına ağır bir konudur ve resmi web sitesinde çok ayrıntılı olarak açıklanmıştır. Temel düzeyde kullanımı nispeten kolay olsa da, ileri konulara geçildiğinde daha karmaşık hale geliyor.

Sonuç olarak, Angular'ın giriş bariyerinin React'ten daha yüksek olduğunu söyleyebilirim. Çok sayıda yeni kavram, yeni gelenler için çok zor olabilir. Ve başladıktan sonra bile, Rx.js abonelik yönetimi, değişiklik algılama performansı gibi şeyleri aklınızda tutmanız gerektiğinden deneyim biraz zor olabilir. Sık sık anlaşılamayacak kadar şifreli hata mesajlarıyla karşılaşabilirsiniz, bu yüzden onları Google'da arayıp tam bir eşleşme için dua etmeniz gerekebilir.

Görünüşe göre burada React'i desteklediğimi söylemem gerekiyor. Şimdiye kadar ki projelerin çoğunda React, daha sorunsuz bir kullanım ortamı oluşturmamızı sağladı. Ancak, daha önce de söylediğim gibi, bu çok çeşitli faktörlere bağlıdır ve sizin için farklı şekilde çalışabilir.

Popülerlik ve Topluluk Geri Bildirimi

Her iki çerçeve de oldukça popülerdir. Ayrıca, bu teknolojileri kullanmanızı öneren, çok sayıda makale bulabilirsiniz. Bakalım her projenin popülaritesini ve geliştirici memnuniyetini temsil etmenin daha objektif bir yolunu bulabilecek miyiz?

Npm indirme istatistikleri ile iki teknolojinin indirilme sayılarını karşılaştırabilirsiniz. Google eğilimleri ise dünya genelinde daha fazla React araması bildiriyor.

2019 JavaScript Raporu'na göre katılımcıların %71'i React'i kullandıklarını ve tekrar kullanacaklarını söyledi. Sadece katılımcıların %21'i Angular hakkında aynı ifade de bulundu.

Stack Overflow, jQuery'den sonra en popüler ikinci çerçeve olarak React'i listeledi. Angular üçüncü sırada listelendi.

Jet Brains tarafından hazırlanan Geliştirici Ekosisteminin Durumu 2020 raporu, React'in en popüler ön uç çerçevesi olduğunu doğruluyor.

Peki Neye Karar Vereceğiz?

Her çerçevenin hem iyi hem de kötü yanlarıyla birlikte kendi yetenekleri olduğunu zaten fark etmiş olabilirsiniz. Ancak bu analiz belirli bir bağlamın dışında yapılmıştır ve bu nedenle hangi çerçeveyi seçmeniz gerektiğine dair bir cevap sağlamaz. Buna karar vermek için, projenizin perspektifinden incelemeniz gerekir. Bu, kendi başınıza yapmanız gereken bir şey.

Başlamak için, projenizle ilgili bu soruları yanıtlamayı deneyin ve bunu yaptığınızda, yanıtları iki çerçeve hakkında öğrendiklerinizle eşleştirin. Bu liste tam olmayabilir, ancak başlamanız için yeterli olmalıdır:

• Proje ne kadar büyük?
• Ne kadar süre korunacak?
• Tüm işlevler önceden açıkça tanımlanmış mı yoksa esnek olmanız mı bekleniyor?
• Tüm özellikler zaten tanımlanmışsa, hangi yeteneklere ihtiyacınız var?
• Etki alanı modeli ve iş mantığı karmaşık mı?
• Hangi platformları hedefliyorsunuz? Web, mobil, masaüstü?
• Sunucu tarafı görüntülemeye ihtiyacınız var mı? SEO önemli mi?
• Çok sayıda gerçek zamanlı olay akışını yönetecek misiniz?
• Ekibiniz ne kadar büyük?
• Geliştiricileriniz ne kadar deneyimli ve onların geçmişi nedir?
• Kullanmak istediğiniz hazır bileşen kitaplıkları var mı?

Büyük bir projeye başlıyorsanız ve kötü bir seçim yapma riskini en aza indirmek istiyorsanız, önce konsept kanıtı bir ürün oluşturmayı düşünün. Projelerin bazı temel özelliklerini seçin ve bunları çerçevelerden birini kullanarak basit bir şekilde uygulamaya çalışın. PoC'lerin oluşturulması genellikle çok zaman almaz, ancak size çerçeve ile çalışma konusunda bazı değerli kişisel deneyimler sunacak ve temel teknik gereksinimleri doğrulamanıza izin vereceklerdir. Sonuçlardan memnunsanız, tam kapsamlı geliştirmeye devam edebilirsiniz. Değilseniz, hızlı başarısızlık, uzun vadede sizi birçok baş ağrısından kurtaracaktır.

Tek Çerçeve ile Her Şeyi Yönetmek

Bir proje için bir çerçeve seçtikten sonra, gelecek projeleriniz için aynı teknoloji yığınını kullanmak isteyeceksiniz. Bunu yapmamalısınız. Teknoloji yığınınızı tutarlı tutmak iyi bir fikir olsa da, her seferinde aynı yaklaşımı körü körüne kullanmayın. Her projeye başlamadan önce, aynı soruları bir kez daha cevaplamak için bir dakikanızı ayırın. Belki bir sonraki proje için cevaplar farklı olacak veya manzara değişecek. Ayrıca, tanıdık olmayan bir teknoloji yığınıyla küçük bir proje yapma lüksüne sahipseniz, bunu elbette deneyebilirsiniz. Bu tür deneyler size paha biçilmez bir deneyim sağlayacaktır. Zihninizi açık tutun ve hatalarınızdan ders alın. AnatoliaCode'u okumaya devam etmeyi unutmayın.

---

Kendinize çok iyi bakın.

Mutlu Kodlamalar.