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

Pytanie, które zadaje mi się prawie codziennie, to czy powinienem zacząć od ReactJS czy Angulara? Zanim jednak przejdę dalej, pozwolę sobie przedstawić zastrzeżenie.

To nie jest blog, na którym będę walić jednym lub drugim albo mówić, że zawsze powinieneś używać jednego z drugim. Każdy programista i każdy projekt jest zupełnie inny i ma inny zestaw wymagań, więc powiedzenie, że zawsze powinieneś używać ReactJS lub zawsze używać Angulara, jest cholernie głupie.

Argument logiczny

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

Krzywa uczenia się

Zacznijmy od Angulara. Jeszcze jedno zastrzeżenie: kiedy mówię Angular, mam na myśli Angular 4, a nie AngularJS.

Angular to duży framework, co oznacza, że ​​jest potężny i zawiera wiele. Jest wiele do nauczenia się. Usłyszysz wiele nowego onieśmielającego słownictwa, takiego jak wstrzykiwanie zależności, dekoratory dyrektyw, potoki itp. Następnie będziesz miał do czynienia z Typescript, czyli JavaScriptem i kilkoma innymi funkcjami, w tym pisaniem statycznym.

Angular jest bardziej uparty niż React, co moim zdaniem jest jedną z zalet, ponieważ z Reactem można zrobić to samo na milion różnych sposobów. W przypadku Angulara istnieje na ogół jeden lub dwa sposoby wykonywania pewnych rzeczy, co ułatwia śledzenie, daje o wiele bardziej jasne instrukcje dotyczące tego, co należy zrobić.

Ale z drugiej strony sprowadza się to do preferencji. Może spodobać Ci się elastyczność w robieniu 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 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 tak potężny w przypadku dużych aplikacji. Jeśli chcesz routingu, walidacji, żądań HTTP w React, będziesz musiał zainstalować inne pakiety, a to zwiększa krzywą uczenia się.

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

Odnajdujesz 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 od kodu 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 ustawienie go i uczenie się jego koncepcji jest trudne.

Myślę, że jest nadużywany. Myślę, że wielu programistów używa reduxa tam, gdzie nie jest to potrzebne. Nie potrzebujesz go do mniejszych aplikacji, ale wielu programistów nalega na jego używanie. To znowu sprowadza się do preferencji. Redux jest bardzo potężny, nie chcę tego odbierać. Mówiąc o krzywej uczenia się, jest to cholernie trudne do zrozumienia.

Zwycięzca: to remis

Wydajność

Bezpośrednie porównywanie wydajności Angulara z React nie jest uczciwe. Angular jest kompletnym frameworkiem od przodu do tyłu, który zawiera routing, narzędzia formularzy, bibliotekę HTTP, rozszerzenia reaktywne itp. Wszystkie te funkcje zwiększają szybkość działania frameworka i spowalniają go. Jednak sam React 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 trochę bardziej zbliżać do miejsca, w którym znajduje się Angular, a następnie możesz zacząć je uczciwie porównywać, ale nawet po tym React nadal wygrywa dział wydajności. Ogólnie jest to bardzo szybka technologia.

Zmiana z Angular 2 na Angular 4pod maską zrobili sporo, aby zwiększyć wydajność. Angular 4 wypada lepiej niż Angular 2. Niemniej jednak w dziale wydajności wciąż wygrywa React.

Angular vs React. Źródło: Academind.com

Zwycięzca: Reaguj

Cechy

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

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

Angular to kompletny framework. Jest dostarczany z routerem komponentów, rozszerzeniami reaktywnymi dla obiektów obserwowalnych, klientem HTTP, modułem formularza do walidacji, a lista jest długa. Co więcej, oferuje dwukierunkowe wiązanie danych w sposób, którego tak naprawdę nie oferuje żadna inna platforma. Powią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ć testowanie: zarówno testowanie jednostkowe, jak i testowanie end-to-end. Angular jest wyposażony w funkcje do tworzenia aplikacji front-end na poziomie korporacyjnym. Z drugiej strony React nie zawiera wiele w swoim rdzeniu. Można jednak dodać rzeczy, które nadadzą mu funkcje, które Angular zawiera gotowe do użycia oraz kilka dodatkowych.

React używa wirtualnego DOM, który jest bardzo wydajny. Tworzy własną, lekką wersję rzeczywistego Dom 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 w nim umieścić absolutnie dowolny rodzaj JavaScript. JSX nie jest wymagany do korzystania z Reacta, ale to znacznie ułatwia sprawę. Nie mogę wymyślić żadnego powodu, dla którego nie miałbyś używać JSX z Angularem. React radzi sobie również naprawdę dobrze z zarządzaniem stanem i właściwościami komponentów. Ułatwia to pracę z danymi i przekazywanie ich między komponentami. Przekazywanie danych między komponentami Angular jest znacznie trudniejsze niż robienie tego w React.

Core React jest trudny do utrzymania stanu na poziomie aplikacji. Component State jest łatwe, ale jeśli chcesz prawdziwego zarządzania stanem na poziomie aplikacji, będziesz potrzebować Redux lub Flux, o których powiedziałem wcześniej, że jest cholernie zagmatwany w nauce. 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ę go uruchamiać i konfigurować. Istnieje 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 w React, mimo że nie są częścią rzeczywistej biblioteki.

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

Zwycięzca: Angular

Obróbka

Angular i React mają całkiem niezłe interfejsy wiersza poleceń. Zarówno Angular CLI, jak i aplikacja Create React są całkiem świetne i naprawdę pozwalają nam usprawnić rozwój. Angular CLI jest nieco potężniejszy, ponieważ możemy szybko generować elementy, takie jak komponenty i usługi. Create React nie może tego zrobić. Musisz sam stworzyć wszystko, jeśli chodzi o pliki i podstawową strukturę. Oba systemy używają pakietu webowego, mają własne serwery programistyczne z automatycznym ładowaniem oraz narzędzia do kompilacji i budowania. Oczywiście Angular ma dodatkowo zadanie transpilacji maszynopisu. CLI ma do tego skrypt, gdy uruchamiamy ng serv. Wszystko to wydarzyło się za kulisami. Używa do tego czegoś, co nazywa się TSC lub Typescript Compiler i oba mają również narzędzia testowe. Create React App używa Jest do testowania, a następnie jedną z części tych narzędzi jest możliwość wbudowania aplikacji w produkcyjne zasoby statyczne, które można po prostu przesłać na serwer lub umieścić w folderze klienta zaplecza.

Jeśli jest to aplikacja z pełnym stosem, to są one naprawdę ważne. Nie musisz ich używać. Możesz zbudować aplikację React od podstaw za pomocą pakietu webowego. To znacznie ułatwia nie tylko budowanie aplikacji, ale także kompilację i kompilację do produkcji.

Oboje są ładni 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, która działa w natywnym opakowaniu dla aplikacji mobilnych. Możesz tworzyć aplikacje mobilne za pomocą Angulara. Aplikacje hybrydowe mogą być nieco niezgrabne w porównaniu z aplikacjami natywnymi. Doświadczenie użytkownika może czasami nie być tak wspaniałe – nie tak szybkie i responsywne. Spośród różnych frameworków hybrydowych, Ionic 3 jest najlepszy. Istnieje również NativeScript, który pozwala nam budować prawdziwe aplikacje natywne Aplikacje na iOS i Androida z Angularem i JavaScriptem.

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

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

React ma całkiem ekosystem. Ma natywny React, który jest popularny. To najlepszy sposób na tworzenie aplikacji mobilnych z wykorzystaniem technologii internetowych. React Native jest szybki, a wiele aplikacji, jeśli są poprawnie zbudowane, są dostępne dzięki natywnym aplikacjom opartym na Swift lub Javie. React ma bibliotekę do projektowania materiałów o nazwie Material-UI, która bardzo przypomina komponent projektowania materiałów w Angular, ale jest bardziej dojrzała. JS to framework do renderowania aplikacji React po stronie serwera. Ma to na celu zrobienie tego w najprostszy możliwy sposób, aby można to było porównać do Angular Universal. MobX to kolejny sposób na zarządzanie stanem. Działa 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 Reacta. Umożliwia przeglądanie biblioteki komponentów, przeglądanie różnych stanów każdego komponentu oraz interaktywne opracowywanie i testowanie komponentów. Reactive VR przenosi Reacta do wirtualnej rzeczywistości. React Desktop to biblioteka JavaScript zbudowana na bazie biblioteki Reacts, która podobno zapewnia natywne środowisko pulpitu w Internecie, oferując wiele komponentów dla systemów 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.

Konkluzja: To jest remis

Jeśli decydujesz się między tymi ramami, spójrz na różne kategorie i zobacz, co Cię interesuje. Wypróbuj je oba i zobacz, który wybierzesz szybciej. Zrób więcej badań niż ten blog. Nigdy nie dostaniesz wszystkich potrzebnych informacji z jednego bloga, więc przeczytaj 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.