Angular vs. React Web Fronted Geliştirmek için Hangisi Daha İyi?

Üzeyir AYDIN

02 Dec

Paylaş :

Web geliştirme için React veya Angular'ın daha iyi bir seçim olup olmadığını tartışan sayısız makale var. Bir tane daha ihtiyacımız var mı?

Bu makaleyi yazmamın nedeni, daha önce yayınlanmış makalelerin hiçbirinin - büyük içgörüler içermelerine rağmen - pratik bir ön uç geliştiricinin hangisinin ihtiyaçlarına uygun olduğuna karar vermesi için yeterince derin olmamasıdır.

Bu makalede, Angular ve React'in çok farklı felsefelere sahip olsa da benzer ön uç sorunları nasıl çözmeyi amaçladığını ve birini mi yoksa diğerini mi seçmenin yalnızca kişisel bir tercih meselesi olduğunu öğreneceksiniz. Bunları karşılaştırmak için aynı uygulamayı bir kez Angular ve ardından tekrar React ile olmak üzere iki kez oluşturacağız.

Angular'ın Zamansız Duyurusu

İki yıl önce React Ecosystem hakkında bir makale yazmıştım . Makale, diğer noktaların yanı sıra, Angular'ın “ön duyuru ile ölüm” kurbanı olduğunu savundu. O zamanlar, Angular ile hemen hemen her şey arasındaki seçim, projelerinin eski bir çerçeve üzerinde çalışmasını istemeyen herkes için kolaydı. Angular 1 eskiydi ve Angular 2 alfa sürümünde bile mevcut değildi.

Geriye dönüp bakıldığında, korkular aşağı yukarı haklı çıktı. Angular 2 çarpıcı biçimde değişti ve hatta son sürümden hemen önce büyük bir yeniden yazma sürecinden geçti.

İki yıl sonra, şu andan itibaren göreceli istikrar vaadiyle Angular 4'e sahibiz.

Şimdi ne olacak?

Angular ve React: Elmaları ve Portakalları Karşılaştırma

Bazı insanlar React ve Angular'ı karşılaştırmanın elmaları portakallarla karşılaştırmak gibi olduğunu söylüyor. Biri görünümlerle ilgilenen bir kütüphane iken, diğeri tam teşekküllü bir çerçevedir.

Elbette çoğu React geliştiricisi , onu eksiksiz bir çerçeveye dönüştürmek için React'e birkaç kitaplık ekleyecektir. Sonra tekrar, bu yığının ortaya çıkan iş akışı genellikle Angular'dan çok farklıdır, bu nedenle karşılaştırılabilirlik hala sınırlıdır.

En büyük fark devlet yönetiminde yatmaktadır. Angular, veri bağlama ile birlikte gelir, oysa React bugün tek yönlü veri akışı sağlamak ve değişmez verilerle çalışmak için genellikle Redux tarafından artırılır. Bunlar kendi başlarına karşıt yaklaşımlardır ve şimdi değiştirilebilir/veri bağlamanın değişmez/tek yönlü olmaktan daha iyi mi yoksa daha kötü mü olduğu konusunda sayısız tartışma devam etmektedir.

Bir Seviye Oyun Alanı

React'in hacklenmesi daha kolay olduğu için, bu karşılaştırmanın amacı için, kod parçacıklarının yan yana karşılaştırılmasına izin vermek için Angular'ı makul ölçüde yakından yansıtan bir React kurulumu oluşturmaya karar verdim.

Öne çıkan ancak varsayılan olarak React'te olmayan belirli Açısal özellikler şunlardır:

Özellik — Açısal paket — React kitaplığı

Veri bağlama, bağımlılık ekleme (DI) — @angular/core — MobX

Hesaplanan özellikler — rxjs — MobX

Bileşen tabanlı yönlendirme — @angular/router — React Router v4

Materyal tasarım bileşenleri — @angular/material — React Toolbox

Kapsamlı CSS bileşenleri — @angular/core — CSS modülleri

Form doğrulamaları — @angular/forms — FormState

Proje oluşturucu — @angular/cli — React Scripts TS

Bağlanma verileri

Veri bağlama, tek yönlü yaklaşımdan başlamak için tartışmasız daha kolaydır. Tabii ki, tamamen zıt yönde gitmek ve React ile Redux veya mobx-durum ağacını ve Angular ile ngrx kullanmak mümkün olacaktır . Ama bu başka bir yazının konusu olacak.

Hesaplanan Özellikler

Performans söz konusu olsa da, Angular'daki düz alıcılar, her işlemede çağrıldıkları için söz konusu değildir. İşi yapan RsJS'den BehaviorSubject kullanmak mümkündür .

Tepki ile, kullanmak mümkündür @computed tartışmalı biraz daha güzel API ile aynı amaç elde MOBX gelen.

Bağımlılık Enjeksiyonu

Bağımlılık enjeksiyonu biraz tartışmalı çünkü mevcut React işlevsel programlama ve değişmezlik paradigmasına aykırı. Görünüşe göre, ayrı bir veri katmanı mimarisinin olmadığı durumlarda ayrıştırmaya (ve dolayısıyla alay etmeye ve test etmeye) yardımcı olduğu için, veri bağlama ortamlarında bir tür bağımlılık enjeksiyonu neredeyse vazgeçilmezdir.

DI'nin bir diğer avantajı (Angular'da desteklenir), farklı mağazaların farklı yaşam döngülerine sahip olma yeteneğidir. Mevcut React paradigmalarının çoğu, farklı bileşenlerle eşleşen bir tür küresel uygulama durumu kullanır, ancak deneyimlerime göre, bileşen bağlantısının kaldırılmasında genel durumu temizlerken hataların ortaya çıkması çok kolaydır.

Bileşen montajında ​​oluşturulan bir mağazaya sahip olmak (ve bu bileşenin çocukları için sorunsuz bir şekilde kullanılabilir olmak) gerçekten yararlı ve genellikle gözden kaçan bir kavram gibi görünüyor.

Angular'da kullanıma hazır, ancak MobX ile de kolayca yeniden üretilebilir.

yönlendirme

Bileşen tabanlı yönlendirme, bileşenlerin tek bir büyük küresel yönlendirici yapılandırmasına sahip olmak yerine kendi alt rotalarını yönetmelerine olanak tanır. Bu yaklaşım nihayet react-routersürüm 4'e ulaştı.

Malzeme Tasarımı

Bazı üst düzey bileşenlerle başlamak her zaman iyidir ve malzeme tasarımı, Google dışı projelerde bile evrensel olarak kabul edilen bir varsayılan seçenek haline gelmiştir.

React Toolbox'ı genellikle önerilen Material UI yerine kasıtlı olarak seçtim , çünkü Material UI, bir sonraki sürümde çözmeyi planladıkları satır içi-CSS yaklaşımlarında ciddi performans sorunları olduğunu itiraf ediyor .

Ayrıca React Toolbox'ta kullanılan PostCSS/cssnext zaten Sass/ LESS'in yerini almaya başlıyor.

Kapsamlı CSS

CSS sınıfları, global değişkenler gibi bir şeydir. Çatışmaları önlemek için CSS'yi düzenlemeye yönelik sayısız yaklaşım vardır ( BEM dahil ), ancak bir ön uç geliştiricinin ayrıntılı CSS adlandırma sistemleri tasarlamasına gerek kalmadan bu çakışmaları önlemek için CSS'yi işlemeye yardımcı olan kitaplıkları kullanma konusunda net bir güncel eğilim vardır .

Form Doğrulama

Form doğrulamaları önemsiz olmayan ve çok yaygın olarak kullanılan bir özelliktir. Kod tekrarını ve hataları önlemek için bunların bir kütüphane kapsamında olması güzel.

Proje Üreticisi

Bir proje için bir CLI oluşturucuya sahip olmak, GitHub'dan kazan plakalarını klonlamaktan biraz daha uygundur.

Aynı Uygulama, İki Kez Oluşturuldu

Yani aynı uygulamayı React ve Angular'da oluşturacağız. Muhteşem bir şey değil, sadece herkesin ortak bir sayfaya mesaj göndermesine izin veren bir Shoutboard.