Porównanie najlepszych frameworków JavaScript: Angular vs React

Pytanie, które słyszę prawie codziennie, brzmi: czy powinienem zacząć od ReactJS czy Angular? Zanim jednak przejdę dalej, pozwolę sobie na zastrzeżenie.

To nie jest blog, na którym będę atakować jednego lub drugiego albo mówić, że zawsze powinieneś używać jednego zamiast drugiego. Każdy programista i każdy projekt są zupełnie inni i mają inny zestaw wymagań, więc mówienie, że zawsze powinieneś używać ReactJS lub zawsze używać Angular, jest cholernie głupie.

Argument logiczny

Możesz argumentować, że Angular jest frameworkiem, a React jest technicznie biblioteką samą w sobie. Nie zaprzeczam temu faktowi, ale jest to argument, w który nie chcę teraz wchodzić. Istnieją pakiety, które możesz dodać do React, które zmienią go w framework bezpośrednio konkurujący z Angular. Porównujemy dwa ekosystemy, a nie dokładną platformę i dokładną bibliotekę.

Krzywa uczenia się

Zacznijmy od Angulara. Jeszcze jedno zastrzeżenie: kiedy mówię Angular, mówię o Angular 4, a nie AngularJS.

Angular to duży framework, co oznacza, że ​​jest potężny i zawiera wiele. Jest dużo do nauczenia się. Usłyszysz wiele nowych zastraszających słów, takich jak wstrzykiwanie zależności, dekoratory dyrektyw, potoki itp. Następnie będziesz musiał poradzić sobie z TypeScript, czyli JavaScriptem oraz wieloma innymi funkcjami, w tym pisaniem statycznym.

Angular jest bardziej uparty niż React, co moim zdaniem jest jedną z zalet, ponieważ dzięki React możesz zrobić to samo na milion różnych sposobów. W przypadku Angular istnieje zazwyczaj jeden lub dwa sposoby wykonywania pewnych czynności, co ułatwia ich przestrzeganie i zapewnia znacznie bardziej jasne instrukcje dotyczące tego, co należy zrobić.

Ale znowu sprowadza się to do preferencji. Możesz polubić elastyczność robienia rzeczy na różne sposoby. Jak wspomniałem, ReactJS jest biblioteką, jeśli mówimy tylko o bibliotece podstawowej, jest znacznie mniejsza i łatwiejsza do nauczenia się niż framework Angular. Możesz powiedzieć, że nauczysz się React w krótszym czasie. React sam w sobie jest świetną biblioteką widoków, ale nie jest nawet w przybliżeniu tak potężny dla dużych aplikacji. Jeśli chcesz routingu, sprawdzania poprawności, żądań HTTP w React, będziesz musiał zainstalować inne pakiety, a to zwiększy krzywą uczenia się.

Jeśli spojrzysz na kod React od dwóch różnych programistów, prawdopodobnie będą wyglądać zupełnie inaczej, niezależnie od tego, czy wykonują żądania HTTP, czy obsługują stan i właściwości. Wszystkie te rzeczy można traktować bardzo różnie i wiele razy może to być w niewłaściwy sposób.

Znajdujesz najlepsze praktyki i wszystkie problemy znikają, ale to zwiększa krzywą uczenia się.

W przeciwieństwie do Angular React nie używa szablonów. Używa czegoś, co nazywa się rozszerzeniem JSX lub JavaScript lub rozszerzeniem składni JavaScript, co pozwala nam osadzić HTML w JavaScript. Na początku może się to wydawać trochę dziwaczne. Zwłaszcza, gdy prawdopodobnie nauczono Cię oddzielać znaczniki i JavaScript.

Pomyśl o tym jak o umieszczeniu HTML w JavaScript z kilkoma różnymi zmianami: nie możesz użyć atrybutu class i musisz użyć nazwy klasy.

Wreszcie mamy Redux. React jest często używany z Redux lub Flux, które są menedżerami stanu na poziomie aplikacji. Moim zdaniem Redux jest cholernie trudny, samo skonfigurowanie go i nauczenie się jego koncepcji jest trudne.

Myślę, że jest nadużywany. Myślę, że wielu programistów używa redux tam, gdzie nie jest to potrzebne. Nie potrzebujesz go do mniejszych aplikacji, ale wielu programistów nalega na jego użycie. To znowu sprowadza się do preferencji. Redux jest bardzo potężny, nie chcę tego odbierać. Kiedy mówimy o krzywej uczenia się, jest to cholernie trudne do uchwycenia.

Cechy	Reagować	Kątowy
Język programowania	JavaScript	Maszynopis
Struktura kodu	Uparty	Elastyczny
Biblioteka podstawowa	Mały	Bardzo duży
Szablonowanie	JSX	HTML
Kompetencja	Małe aplikacje	Aplikacje na dużą skalę

Zwycięzca: Jest remis

Występ

Bezpośrednie porównywanie wydajności Angulara z Reactem jest niesprawiedliwe. Angular to kompletna platforma od przodu do tyłu, która obejmuje routing, narzędzia formularzy, bibliotekę HTTP, rozszerzenia reaktywne itp. Wszystkie te funkcje rozrastają platformę i spowalniają ją. React jednak samo w sobie jest tylko biblioteką widoków, która jest znacznie mniejsza i szybsza.

Gdy zaczniesz dodawać pakiety, takie jak router, klient HTTP lub cokolwiek, co zamierzasz dodać do swojej aplikacji React, zaczyna się to zbliżać do miejsca, w którym znajduje się Angular, a następnie możesz zacząć uczciwie je porównywać, ale nawet po tym Reaguj nadal wygrywa dział wydajności. Jest to ogólnie bardzo szybka technologia.

Zmiana z Angular 2 na Angular 4 pod maską zrobiła sporo, aby zwiększyć wydajność. Angular 4 działa lepiej niż Angular 2. Mimo to React wciąż wygrywa w dziale wydajności.

Angular kontra reakcja. Źródło: Academind.com

Zwycięzca: Reaguj

Cechy

Oba frameworki mają wiele takich samych cech ogólnych i zalet: organizują kod, są oparte na komponentach, oferują dynamiczne znaczniki itp. Są używane do robienia wielu tych samych rzeczy i dzielą dużo tych samych funkcji.

Cechy	AngularJS	Reagować
Data uruchomienia	2009	2013
Język	TypeScript, JavaScript	JavaScript
Udział w rynku	0,3%
Model	tak	Nie
Pogląd	tak	tak
Kontroler	tak	Nie
Krzywa uczenia się	Kompleks	Łatwy
Szablonowanie	tak	Nie
Niepowodzenie	Czas działania	Czas kompilacji
Renderowanie po stronie serwisu	Nie	tak
DOM	tak	Wirtualny
Wsparcie mobilne	tak	tak
Renderowanie po stronie serwisu	Nie	tak

Przyjrzymy się niektórym indywidualnym funkcjom. Angular ma oczywiście o wiele więcej funkcji niż React. Przypomnę, mówimy o dwóch ekosystemach i wspólnych pakietach, które są używane z Reactem.

Angular to wszechstronna platforma. Jest wyposażony w router komponentowy, reaktywne rozszerzenia dla obiektów obserwowalnych, klienta HTTP, moduł formularza do sprawdzania poprawności i lista jest długa. Co więcej, oferuje dwukierunkowe wiązanie danych w sposób, jakiego nie oferuje żaden inny framework. Wiązanie danych z widoku z modelem jest niezwykle proste przy użyciu dyrektywy ng model.

Angular obsługuje również MVC (kontroler widoku modelu) lub przynajmniej inne aspekty tego wzorca projektowego. zawiera również funkcje, które pozwalają łatwo wdrożyć testy: zarówno testy jednostkowe, jak i testy kompleksowe. Angular jest wyposażony w funkcje do tworzenia aplikacji front-end na poziomie przedsiębiorstwa. React z drugiej strony nie zawiera wiele w swoim rdzeniu. Można jednak dodać rzeczy, aby nadać mu funkcje, które Angular zawiera od razu po wyjęciu z pudełka, a także kilka dodatkowych.

React używa wirtualnego DOM, który jest bardzo potężny. Tworzy własną, lekką wersję rzeczywistego Domu i zawiera i aktualizuje tylko to, co jest potrzebne, zamiast odświeżać całość. Wirtualny DOM to główny powód, dla którego React jest niesamowicie szybki.

React używa JSX, który jest potężniejszy niż standardowe szablony, ponieważ możesz umieścić w nim absolutnie dowolny typ JavaScript, jaki chcesz. JSX nie jest wymagany do korzystania z React, ale znacznie ułatwia sprawę. Nie mogę wymyślić żadnego powodu, dla którego nie miałbyś używać JSX również z Angular. React radzi sobie również naprawdę dobrze z zarządzaniem stanem i właściwościami komponentów. Sprawia, że ​​praca z danymi i przekazywanie ich między komponentami jest naprawdę łatwe. Przekazywanie danych między komponentami w Angularze jest znacznie trudniejsze niż robienie tego w React.

Core React jest trudny do utrzymania na poziomie aplikacji. Stan komponentu jest łatwy, ale jeśli chcesz prawdziwego zarządzania stanem na poziomie aplikacji, będziesz potrzebować Redux lub Flux, co, jak powiedziałem wcześniej, jest cholernie mylące. Zewnętrzne pakiety, które są często używane, takie jak nowy router React w wersji 4, są nieco trudne do zrozumienia, ale są również bardzo wydajne, gdy nauczysz się je uruchamiać i konfigurować. Istnieje również wiele różnych sposobów jego wykorzystania. React nie ma podstawowego komponentu HTTP, takiego jak Angular, ale możesz użyć Fetch lub Axios, który jest zewnętrznym klientem HTTP, a następnie Enzyme jest popularny do poświadczania React. Istnieje kilka różnych pakietów, które są powszechnie używane z Reactem, mimo że nie są częścią rzeczywistej biblioteki.

Chociaż obie technologie mają wiele wspólnych funkcji, jeśli porównujesz tylko podstawowe technologie, to Angular jest zwycięzcą.

Zwycięzca: Angular

Obróbka

Angular i React mają całkiem niezłe interfejsy wiersza poleceń. Angular CLI i Create React App są świetne i naprawdę pozwalają nam usprawnić programowanie. Angular CLI jest nieco potężniejszy, ponieważ możemy szybko generować komponenty i usługi. Create React nie może tego zrobić. Musisz stworzyć wszystko sam, jeśli chodzi o pliki i podstawową strukturę. Oba systemy korzystają z pakietu internetowego, mają własne serwery deweloperskie z automatycznym ładowaniem oraz narzędzia do kompilacji i budowania. Oczywiście Angular ma dodatkowe zadanie polegające na transponowaniu maszynopisu. CLI ma skrypt do tego, kiedy uruchamiamy ng serve. Wszystko to działo się za kulisami. Używa do tego czegoś, co nazywa się TSC lub TypeScript Compiler i oba mają również narzędzia testowe.

Cechy	Kątowy	Reagować
Interfejs linii komend	Kątowy interfejs wiersza polecenia	Stwórz Reaguj
Dodatkowe zadania	Transpilowanie maszynopisu	Nic
Testowanie	Jaśmin i Karma	Jest

Jeśli jest to aplikacja z pełnym stosem, są one naprawdę ważne. Nie musisz ich używać. Możesz zbudować aplikację React od podstaw za pomocą pakietu webowego. Ułatwiają one nie tylko tworzenie aplikacji, ale także kompilowanie i tworzenie jej na potrzeby produkcji.

Obie są ładne nawet w tym dziale.

Zwycięzca: Angular

ekosystem

Jak powiedziałem, obie te technologie mają swoje własne ekosystemy, które obecnie rozprzestrzeniają się daleko poza przeglądarkę internetową.

Ionic to popularna platforma hybrydowa, która jest aplikacją Angular działającą w natywnym opakowaniu dla aplikacji mobilnych. Możesz tworzyć aplikacje mobilne za pomocą Angular. Aplikacje hybrydowe mogą być nieco toporne w porównaniu z aplikacjami natywnymi. Doświadczenie użytkownika może czasami nie być tak wspaniałe – nie tak szybkie i responsywne. Wśród różnych frameworków hybrydowych Ionic 3 jest najlepszy. Istnieje również NativeScript, który pozwala nam tworzyć prawdziwie natywne aplikacje iOS i Android z Angular i JavaScript.

Cechy	Kątowy	Reagować
Tworzenie aplikacji hybrydowych	joński	*Nie wymagane
Rozwój aplikacji natywnych	Skrypt natywny	Reaguj natywnie
Renderowanie po stronie serwera	Kątowy uniwersalny	ŻE
Biblioteka Zarządzania Państwem	Sklep NgRx	Reax Redux, MobX
Biblioteka interfejsu użytkownika materiałów	Materiał kątowy	Materiał-UI
Wirtualna rzeczywistość	Reaktywna rzeczywistość wirtualna	ŻE

Niemniej jednak NativeScript nie wydaje się być tak dobry jak React Native Facebooka, przynajmniej w tym momencie. Angular ma również bibliotekę komponentów projektowania materiałów, jeśli jesteś fanem projektowania materiałów. Angular Universal to projekt źródłowy, którego można użyć do renderowania Angular po stronie serwera. Jest też sklep NgRx, który jest biblioteką zarządzania stanem inspirowaną Reax redux. Opiera się na stanie zmutowanym przez reduktory równorzędne. Posiada również integrację z rozszerzeniami Reactive.

Zauważyłbyś. Pewnego razu jeden z nich robi coś, a drugi kopiuje w inny sposób. React i Angular stały się frameworkami JavaScript firmy Microsoft i Apple.

React ma całkiem niezły ekosystem. Ma React natywny, który jest popularny. To najlepszy sposób na tworzenie aplikacji mobilnych przy użyciu technologii internetowych. React Native jest szybki, a wiele aplikacji, jeśli jest poprawnie zbudowanych, dorównuje aplikacjom natywnym, które są zbudowane na Swift lub Javie. React ma bibliotekę projektowania materiałów o nazwie Material-UI, która bardzo przypomina komponent projektowania materiałów Angulara, ale jest bardziej dojrzała. JS to framework do renderowania aplikacji React po stronie serwera. Ma na celu zrobienie tego w najprostszy możliwy sposób, więc można to porównać do Angular Universal. MobX to kolejny sposób zarządzania stanem. Działa to trochę inaczej niż redux. Zapewnia zestaw dekoratorów do definiowania obserwowalnych i obserwatorów oraz wprowadza logikę reaktywną do twojego stanu.

Storybook to środowisko programistyczne dla React. Pozwala przeglądać bibliotekę komponentów, wyświetlać różne stany każdego komponentu oraz interaktywnie opracowywać i testować komponenty. Reactive VR wprowadza React do wirtualnej rzeczywistości. React desktop to biblioteka JavaScript zbudowana na bazie biblioteki Reacts, która rzekomo zapewnia natywną obsługę pulpitu w Internecie, zawierającą wiele komponentów systemu macOS i Windows 10. Ekosystem React jest niezwykle duży i potężny. React wkracza w każdy aspekt technologii i jest wyraźnym zwycięzcą.

Zwycięzca: Reaguj

Ludzie w garniturach i krawatach używają Angulara, a hipsterzy z niechlujnymi brodami używają Reacta.

	AngularJS	Reagować
Główni programiści	Google	Facebook+Instagram
Wiek	6 lat	2 lata
Rozciągliwość	tak	tak
Prędkość*	1,35 sekundy	310 milisekund
DOM	Przeglądarka	Wirtualny; tylko ponownie renderuje zmienione dane z mechanizmem łatania
Architektura	Pełny framework MVC	Tylko komponent widoku
Krzywa uczenia się	Na początku trudne; wymaga znajomości konkretnych pojęć, takich jak dyrektywy DOM, filtry i fabryki.	Łatwiejszy start; zawiera uproszczony interfejs API i składnię
Struktura i komponenty	HTML, JS i CSS	Podobnie; ale może zintegrować HTML z JS, używając JSX

Konkluzja: Jest remis

Jeśli decydujesz między tymi frameworkami, spójrz na różne kategorie i zobacz, co Cię interesuje. Wypróbuj oba i zobacz, który wybierzesz szybciej. Zrób więcej badań niż ten blog. Nigdy nie uzyskasz wszystkich potrzebnych informacji z jednego bloga, więc poczytaj trochę więcej.

Jeśli szukasz większego ekosystemu, który obejmuje tworzenie natywnych aplikacji mobilnych, wybierz React bez zastanowienia. Jeśli szukasz funkcji, Angular jest ogromny. Jest więcej funkcji niż potrzebujesz.