Nihai JavaScript Çerçevelerinin Karşılaştırması: Angular ve React

Neredeyse her gün bana sorulan bir soru, ReactJS veya Angular ile başlamalı mıyım? Ancak, daha fazla ilerlemeden önce, size bir sorumluluk reddi vermeme izin verin.

Birini ya da diğerini ezeceğim ya da her zaman diğerini kullanman gerektiğini söyleyeceğim bir blog değil. Her geliştirici ve her proje tamamen farklıdır ve farklı gereksinimleri vardır, bu nedenle her zaman ReactJS kullanmanız gerektiğini veya her zaman Angular kullanmanız gerektiğini söylemek oldukça aptalcadır.

Mantıksal Argüman

Angular'ın bir çerçeve olduğunu ve React'in teknik olarak kendi başına bir kütüphane olduğunu iddia edebilirsiniz. Bu gerçeği inkar etmiyorum ama şu anda girmek istemediğim argüman bu. Angular ile doğrudan rekabet eden bir çerçeveye dönüştürecek React'e ekleyebileceğiniz paketler var. Tam kütüphane ile tam çerçeveyi değil, iki ekosistemi karşılaştırıyoruz.

Öğrenme Eğrisi

Angular ile başlayalım. Yine başka bir sorumluluk reddi: Angular dediğimde, AngularJS değil, Angular 4'ten bahsediyorum.

Angular, güçlü olduğu ve çok şey içerdiği anlamına gelen büyük bir çerçevedir. Öğrenecek çok şey var. Bağımlılık ekleme, yönerge dekoratörleri, borular, vb. gibi birçok yeni göz korkutucu kelime duyacaksınız. O zaman JavaScript olan TypeScript ve statik yazma dahil bir dizi başka özellik ile uğraşmanız gerekir.

Angular, React'ten daha fazla fikir sahibidir, bu bence avantajlardan biridir çünkü React ile aynı şeyi milyonlarca farklı şekilde yapabilirsiniz. Angular ile, belirli şeyleri yapmanın genellikle bir veya iki yolu vardır, bu da takip etmeyi kolaylaştırır, size ne yapmanız gerektiği konusunda çok daha net talimatlar verir.

Ama sonra tekrar, tercihe düşüyor. İşleri farklı şekillerde yapma esnekliğini beğenebilirsiniz. Bahsettiğim gibi, ReactJS bir kütüphanedir, eğer sadece çekirdek kütüphaneden bahsediyorsak, Angular çerçevesinden çok daha küçük ve öğrenmesi çok daha kolaydır. React'i daha kısa sürede öğreneceğinizi söyleyebilirsiniz. React harika bir görüntüleme kitaplığıdır ancak büyük uygulamalar için o kadar güçlü bile değildir. React'te yönlendirme, doğrulama, HTTP istekleri istiyorsanız, başka paketler kurmanız gerekecek ve bu da öğrenme eğrisine katkıda bulunuyor.

İki farklı geliştiricinin React koduna bakarsanız, HTTP İstekleri yapıyor veya Durum ve Özellikleri ele alıyor olsalar da muhtemelen tamamen farklı görüneceklerdir. Bütün bu şeyler çok farklı şekilde ele alınabilir ve çoğu zaman yanlış şekilde olabilir.

En iyi uygulamaları bulursunuz ve tüm sorunlar ortadan kalkar, ancak bu, öğrenme eğrisine katkıda bulunur.

Angular React'in aksine şablon kullanmaz. HTML'yi JavaScript'e yerleştirmemize izin veren JSX veya JavaScript uzantısı veya JavaScript sözdizimi uzantısı adlı bir şey kullanır. İlk başta bu biraz tuhaf görünebilir. Özellikle, muhtemelen işaretlemenizi ve JavaScript'inizi ayırmanız öğretildiğinde.

Bunu birkaç farklı değişiklikle JavaScript'in içine HTML koymak gibi düşünün: class niteliğini kullanamazsınız ve sınıf adını kullanmanız gerekir.

Son olarak, Redux'umuz var. React genellikle uygulama seviyeleri durum yöneticileri olan Redux veya Flux ile birlikte kullanılır. Benim düşünceme göre, Redux sadece onu kurmak ve onun kavramlarını öğrenmek zor.

Bence fazla kullanılmış. Pek çok geliştiricinin ihtiyaç duyulmayan yerlerde redux kullandığını düşünüyorum. Daha küçük uygulamalar için buna ihtiyacınız yok, ancak birçok geliştirici onu kullanmakta ısrar ediyor. Bu yine tercihe bağlı. Redux çok güçlü, onu elimden almak istemiyorum. Öğrenme eğrisinden bahsederken bunu kavramak çok zor.

Kazanan: Bu bir kravat

Verim

Angular ile React'in performansını doğrudan karşılaştırmak adil değil. Angular, yönlendirme, form araçları, HTTP kitaplığı, Reaktif uzantılar vb. içeren eksiksiz bir önden arkaya çerçevedir. Tüm bu özellikler çerçeveyi şişirir ve yavaşlatır. Ancak React tek başına çok daha küçük ve daha hızlı olan bir görünüm kitaplığıdır.

Yönlendirici, HTTP istemcisi veya React uygulamanıza ekleyeceğiniz her şey gibi paketleri eklemeye başladığınızda, Angular'ın olduğu yere biraz daha gelmeye başlar ve sonra bunları adil bir şekilde karşılaştırmaya başlayabilirsiniz, ancak bundan sonra bile React hala performans bölümünü kazanır. Genel olarak çok hızlı bir teknolojidir.

Kaputun altında Angular 2'den Angular 4'e geçiş, performansı artırmak için biraz yaptılar. Angular 4, Angular 2'den daha iyi performans gösteriyor. Bununla birlikte, React performans Departmanında hala kazanıyor.

Açısal ve Tepki. Kaynak: Academind.com

Kazanan: Tepki

Özellikler

Her iki çerçeve de aynı genel özelliklere ve avantajlara sahiptir: kodunuzu düzenlerler, bileşen tabanlıdırlar, dinamik işaretleme sunarlar, vb. Aynı şeylerin çoğunu yapmak için kullanılırlar ve ortak bir aynı özelliklerin çoğu.

Bazı bireysel özelliklere bakacağız. Angular, açıkçası, özünde React'ten çok daha fazla özelliğe sahiptir. Hatırlatmama izin verin, React ile birlikte kullanılan iki ekosistemden ve ortak paketlerden bahsediyoruz.

Angular, her şeyi içeren bir çerçevedir. Bileşen yönlendiricisi, gözlemlenebilirler için Reaktif uzantılar, bir HTTP istemcisi, bir formun doğrulama modülü ile birlikte gelir ve liste uzayıp gider. Ayrıca, başka hiçbir çerçevenin gerçekten yapmadığı şekilde iki yönlü veri bağlama sunar. Görünümden modele veri bağlamak, ng model yönergesini kullanarak son derece kolaydır.

Angular ayrıca MVC'yi (Model Görünümü denetleyicisi) veya bu tasarım deseninden en azından farklı yönleri destekler. ayrıca testleri kolayca uygulamanıza izin veren özelliklerle birlikte gelir: hem birim testi hem de uçtan uca test. Angular, kurumsal düzeyde ön uç uygulamalar oluşturmaya yönelik özelliklerle doludur. React ise özünde fazla bir şey içermiyor. Bununla birlikte, Angular'ın kullanıma hazır içerdiği özelliklerin yanı sıra bazı ek özellikleri vermek için şeyler eklenebilir.

React, çok güçlü bir sanal DOM kullanır. Gerçek Dom'un kendi hafif sürümünü oluşturur ve her şeyi yenilemek yerine yalnızca ihtiyaç duyulanları içerir ve günceller. Sanal DOM, React'in inanılmaz derecede hızlı olmasının önemli bir nedenidir.

React, standart şablonlardan daha güçlü olan JSX'i kullanır, çünkü içine istediğiniz herhangi bir JavaScript türünü kesinlikle koyabilirsiniz. JSX, React'i kullanmak için gerekli değildir, ancak işleri çok daha kolay hale getirir. JSX'i Angular ile de kullanmamanız için hiçbir neden düşünemiyorum. React ayrıca bileşen durumunu ve özelliklerini yönetme konusunda gerçekten iyi bir iş çıkarıyor. Verilerle çalışmayı ve bileşenler arasında geçişi gerçekten kolaylaştırır. Bileşenler arasında veri iletmek, Angular, React'te yapmaktan çok daha zordur.

Core React, uygulama düzeyinde durumu korumak zordur. Bileşen Durumu kolaydır, ancak gerçek uygulama düzeyinde durum yönetimi istiyorsanız, daha önce öğrenmenin oldukça kafa karıştırıcı olduğunu söylediğim Redux veya Flux'a ihtiyacınız olacak. Yeni React yönlendirici sürüm 4 gibi sıklıkla kullanılan harici paketleri kavramak biraz zordur, ancak çalıştırmayı ve kurmayı öğrendikten sonra da çok güçlüdür. Bunu kullanmanın da birçok farklı yolu var. React, Angular'ın yaptığı gibi bir çekirdek HTTP bileşenine sahip değildir, ancak harici bir HTTP istemcisi olan Fetch veya Axios'u kullanabilirsiniz ve ardından Enzyme, React'i doğrulamak için popülerdir. Gerçek kitaplığın parçası olmasalar da, React ile yaygın olarak kullanılan bazı farklı paketler vardır.

Her iki teknoloji de çok sayıda özelliği paylaşırken, yalnızca temel teknolojileri karşılaştırıyorsanız, kazanan Angular'dır.

Kazanan: Açısal

Takım

Angular ve React'in oldukça güzel komut satırı arayüzleri var. Angular CLI ve Create React App oldukça harika ve geliştirmeyi kolaylaştırmamıza gerçekten izin veriyorlar. Angular CLI biraz daha güçlü çünkü bileşenler ve hizmetler gibi şeyleri hızla üretebiliyoruz. Create React bunu yapamaz. Dosyalara ve temel yapıya kadar her şeyi kendiniz oluşturmalısınız. Her iki sistem de web paketini kullanır, kendi otomatik yükleme geliştirici sunucularına ve derleme ve oluşturma araçlarına sahiptir. Açıkçası, Angular'ın TypeScript'i aktarma ek görevi vardır. CLI, ng serve çalıştırdığımızda bunun için bir komut dosyasına sahiptir. Bütün bunlar perde arkasında yaşandı. Bunun için TSC veya TypeScript Compiler adlı bir şey kullanır ve her ikisinin de test araçları vardır. Create React App, test için Jest'i kullanır ve ardından bu araçların parçalarından biri, uygulamanızı üretime, bir sunucuya yükleyebileceğiniz veya arka uç istemci klasörünüze yerleştirebileceğiniz statik varlıklara dönüştürme yeteneğidir.

Tam bir yığın uygulamasıysa, bunlar gerçekten önemlidir. Onları kullanmanıza gerek yok. Web paketi ile sıfırdan bir React uygulaması oluşturabilirsiniz. Bunlar, yalnızca uygulamayı oluşturmayı değil, aynı zamanda derlemeyi ve üretim için oluşturmayı da çok daha kolaylaştırır.

O bölümde bile ikisi de güzel.

Kazanan: Açısal

Ekosistem

Dediğim gibi, bu teknolojilerin her ikisinin de artık web tarayıcısının çok ötesine yayılan kendi ekosistemleri var.

Ionic, mobil uygulamalar için yerel bir sarmalayıcı içinde çalışan bir Angular uygulaması olan popüler bir karma çerçevedir. Angular kullanarak mobil uygulamalar oluşturabilirsiniz. Hibrit uygulamalar, yerel uygulamalara kıyasla biraz hantal olabilir. Kullanıcı deneyimi bazen o kadar iyi olmayabilir - o kadar hızlı ve duyarlı olmayabilir. Çeşitli hibrit çerçeveler arasında Ionic 3 en iyisidir. Ayrıca, JavaScript'in yanı sıra Angular ile gerçek yerel uygulamalar iOS ve Android uygulamaları oluşturmamızı sağlayan NativeScript de var.

Yine de NativeScript, en azından bu noktada Facebook'un React Native'i kadar iyi görünmüyor. Materyal tasarımının hayranıysanız, Angular ayrıca bir malzeme tasarımı bileşen kitaplığına sahiptir. Angular Universal, sunucu tarafında Angular oluşturmak için kullanılabilecek bir tohum projesidir. Ayrıca, Reax redux'dan ilham alan bir devlet yönetim kütüphanesi olan NgRx mağazası da var. Akran azaltıcılar tarafından mutasyona uğratılan duruma dayanır. Ayrıca Reaktif uzantılarla entegrasyona sahiptir.

fark ederdin. Bir keresinde biri bir şeyi diğerinin kopyası farklı bir şekilde yapıyor. React ve Angular, JavaScript çerçevelerinin Microsoft ve Apple'ı haline geldi.

React oldukça ekosisteme sahip. Popüler olan React native'e sahiptir. Web teknolojileriyle mobil uygulamalar oluşturmanın en iyi yolu budur. React Native hızlıdır ve birçok uygulama doğru bir şekilde oluşturulmuşsa, Swift veya Java üzerine kurulmuş yerel uygulamalarla hemen oradadır. React, Angular'ın malzeme tasarımı bileşenine çok benzeyen ancak daha olgun olan Material-UI adlı bir malzeme tasarım kitaplığına sahiptir. JS, sunucu tarafı React uygulamalarını oluşturmak için bir çerçevedir. Bunu mümkün olan en basit şekilde yapmayı amaçlamaktadır, böylece bu, Angular Universal ile karşılaştırılabilir. MobX, durumu yönetmenin başka bir yoludur. Redux'un yaptığından biraz farklı çalışır. Gözlenebilirleri ve gözlemcileri tanımlamak için bir dizi dekoratör sağlar ve Durumunuza Reaktif mantığı tanıtır.

Storybook, React için bir geliştirme ortamıdır. Bir bileşen kitaplığına göz atmanıza, her bileşenin farklı durumlarını görüntülemenize ve bileşenleri etkileşimli olarak geliştirmenize ve test etmenize olanak tanır. Reaktif VR, React'i sanal gerçekliğe dönüştürüyor. React masaüstü, birçok macOS ve Windows 10 bileşeni içeren, web'e yerel bir masaüstü deneyimi getirdiği varsayılan Reacts kitaplığının üzerine kurulmuş bir JavaScript kitaplığıdır. React ekosistemi son derece geniş ve güçlüdür. React, teknolojinin her yönüne giriyor ve net bir kazanan.

Kazanan: Tepki

Takım elbiseli ve kravatlı insanlar Angular, kirli sakallı hipsterlar React kullanıyor.

Alt satır: Bu bir kravat

Bu çerçeveler arasında karar veriyorsanız, farklı kategorilere bakın ve sizi neyin ilgilendirdiğini görün. İkisini de deneyin ve hangisini daha hızlı aldığınızı görün. Bu blogdan biraz daha fazla araştırma yapın. İhtiyacınız olan tüm bilgileri asla tek bir blogdan alamayacaksınız, bu yüzden biraz daha okuyun.

Yerel mobil uygulama geliştirmeyi içeren daha büyük bir ekosisteme bakıyorsanız, iki kez düşünmeden React'i seçin. Özelliklerin peşindeyseniz, Angular çok büyük. İhtiyacınızdan daha fazla özellik var.