Internet, Programowanie, Technologie internetowe

Angular vs React: Który wybrać dla swojej aplikacji

Dokładne, bezpośrednie porównanie ogólnych i technicznych aspektów Angular i React

Jest tak wiele artykułów zatytułowanych „Angular vs React”, „React vs Angular”, „Angular or React” – to cud, że otworzyłeś ten! Brakuje jednak w tych artykułach dokładnego porównania między Angular i React.Oto, co zamierzam zrobić w tym poście na blogu: umieścić 

React i Angular w bezpośrednim zestawieniu. Zamierzamy przejrzeć i porównać dwa frameworki JavaScript i przyjrzeć się każdej możliwej charakterystyce, aby upewnić się, że nie przegapimy ani jednej części danych.

Ostatecznie nie powiem ci, którą technologię wybrać. Ale dam ci wystarczająco dużo do myślenia, abyś wybrał technologię, która najlepiej pasuje do ciebie i twojego projektu.

1. Krótki przegląd

React

React to biblioteka JavaScript do tworzenia interfejsu użytkownika. Jest zarządzany przez Facebooka i społeczność programistów open source.

Ramy zostały wprowadzone w maju 2013 roku.

Najnowsze aktualizacje zostały wydane 8 sierpnia 2019 roku – nieco ponad miesiąc temu.

Angular 

Angular to platforma JavaScript o otwartym kodzie źródłowym przeznaczona do tworzenia aplikacji internetowych i mobilnych. Jest oparty na języku TypeScript i zarządzany przez zespół Google Angular i społeczność programistów Angular.

Uruchomiony we wrześniu 2016 r. Angular (znany również jako Angular 2.0) to kompletna przeróbka AngularJS (Angular 1.0), która została wprowadzona w 2010 r.

Było już sześć wersji Angulara, a ostatnie wydanie miało miejsce 28 sierpnia 2019 roku – prawie trzy tygodnie temu.

2. Uniwersalność

React

React to framework używany zarówno w programowaniu internetowym, jak i mobilnym. Jednak w przypadku programowania mobilnego należy go zintegrować z Cordova. Co więcej, do tworzenia aplikacji mobilnych dostępny jest dodatkowy framework – React Native.

React może być używany do tworzenia zarówno jednostronicowych, jak i wielostronicowych aplikacji internetowych.

Angular 

Angular jest odpowiedni zarówno do tworzenia aplikacji internetowych, jak i mobilnych. Jednak w programowaniu mobilnym dużą część pracy wykonuje Ionic. Ponadto, podobnie jak React, Angular ma dodatkową platformę programistyczną dla urządzeń mobilnych. Odpowiednikiem React Native jest NativeScript.

Angular może być również używany zarówno do jedno-, jak i wielostronicowych aplikacji internetowych.

3. Samowystarczalność

React

React to framework do tworzenia interfejsu użytkownika, więc aplikacje napisane w React potrzebują dodatkowych bibliotek do użycia. Na przykład Redux, React Router lub Helmet optymalizują procesy zarządzania stanem, routingu i interakcji z API. Takie funkcje, jak wiązanie danych, routing oparty na komponentach, generowanie projektów, walidacja formularzy lub wstrzykiwanie zależności, wymagają zainstalowania dodatkowych modułów lub bibliotek.

Angular 

Angular to pełnoprawny framework do tworzenia oprogramowania, który zwykle nie wymaga dodatkowych bibliotek. Wszystkie wyżej wymienione funkcje – wiązanie danych, routing oparty na komponentach, generowanie projektów, walidacja formularzy, wstrzykiwanie zależności – można zaimplementować za pomocą pakietu Angular.

4. Krzywa uczenia się

React

React jest minimalistyczny: bez wstrzykiwania zależności, bez klasycznych szablonów, bez nadmiernie skomplikowanych funkcji. Framework będzie dość prosty do zrozumienia, jeśli dobrze znasz JavaScript.

Jednak nauczenie się konfigurowania projektu zajmuje trochę czasu, ponieważ nie ma wstępnie zdefiniowanej struktury projektu. Musisz także nauczyć się biblioteki Redux, która jest używana w ponad połowie aplikacji Reacta do zarządzania stanem. Stałe aktualizacje frameworka również wymagają dodatkowego wysiłku od programisty. Co więcej, w Reakcie jest sporo dobrych praktyk, których będziesz musiał się nauczyć, jak robić to dobrze.

Angular 

Sam Angular to ogromna biblioteka, a poznanie wszystkich pojęć z nim związanych zajmie znacznie więcej czasu niż w przypadku Reacta. Angular jest bardziej skomplikowany do zrozumienia, jest dużo niepotrzebnej składni, a zarządzanie komponentami jest skomplikowane. Niektóre skomplikowane funkcje są osadzone w rdzeniu frameworka, co oznacza, że ​​programista nie może uniknąć uczenia się i używania ich. Ponadto istnieje wiele sposobów rozwiązania pojedynczego problemu.

Chociaż TypeScript bardzo przypomina JavaScript, nauczenie go zajmuje również trochę czasu. Ponieważ framework jest stale aktualizowany, programista musi włożyć dodatkowy wysiłek w naukę.

5. Społeczność

React

Framework React jest jednym z najpopularniejszych frameworków JS na świecie, a społeczność wspierająca go i rozwijająca jest ogromna.

Pracując z Reactem, musisz stale się uczyć, ponieważ framework jest często aktualizowany. Chociaż społeczność stara się jak najszybciej opracowywać najnowszą dokumentację, nadążanie za wszystkimi zmianami nie jest takie łatwe. Czasami może brakować dokumentacji, ale często problem jest rozwiązywany przez wsparcie społeczności na forach tematycznych.

React jest aktywnie wykorzystywany przez takie firmy jak Facebook, Twitter, Netflix, Airbnb, PayPal, The New York Times, Yahoo, Walmart, Uber i Microsoft.

Angular 

Angular jest mniej podziwiany niż React i spotyka się z dużym sceptycyzmem, częściowo z powodu niepopularności Angular 1.0. Programiści zwykli odrzucać framework jako zbyt skomplikowany, ponieważ wymagał dużo czasu na naukę. Jednak ta struktura została opracowana przez Google, co działa na korzyść wiarygodności Angular.

Google zapewnia długoterminowe wsparcie struktury i stale ją ulepsza. Jednak aktualizacje są tak szybkie, że dokumentacja często pozostaje w tyle.

Angular jest używany przez takie firmy jak McDonald’s, AT&T, HBO, Apple, Forbes, Adobe, Nike czy Microsoft.

6. Wydajność

React

Wydajność React została znacznie poprawiona wraz z wprowadzeniem wirtualnego DOM. Ponieważ wszystkie wirtualne drzewa DOM są lekkie i zbudowane na serwerze, obciążenie przeglądarki jest zmniejszone. Ponadto, ponieważ proces wiązania danych jest jednokierunkowy, powiązaniom nie przypisuje się obserwatorów, jak w przypadku Angular. W związku z tym nie jest tworzone żadne dodatkowe obciążenie.

Angular 

Angular wypada gorzej, zwłaszcza w przypadku złożonych i dynamicznych aplikacji internetowych.

Na wydajność aplikacji Angular negatywnie wpływa dwukierunkowe wiązanie danych. Każdemu powiązaniu jest przypisany obserwator do śledzenia zmian, a każda pętla jest kontynuowana, dopóki wszyscy obserwatorzy i powiązane wartości nie zostaną sprawdzone. Z tego powodu im więcej masz powiązań, tym więcej obserwatorów jest tworzonych i tym bardziej uciążliwy staje się proces.

Jednak najnowsza aktualizacja Angulara znacznie poprawiła jego wydajność i nie przegrywa już z React. Co więcej, rozmiar aplikacji Angular jest nieco mniejszy niż rozmiar aplikacji React.

7. Język

React

React bazuje na JavaScript ES6 + połączonym ze skryptem JSX. JSX to rozszerzenie składni, które sprawia, że ​​kod JavaScript przypomina ten napisany w HTML. Dzięki temu kod jest łatwiejszy do zrozumienia, a literówki są łatwiejsze do wykrycia. Aby kod JSX mógł zostać skompilowany w przeglądarce, React jest wzbogacony o Babel – narzędzie do tłumaczenia kodu.

Angular 

Angular może używać JavaScript lub TypeScript, który jest nadzbiorem JS opracowanym specjalnie dla większych projektów. TypeScript jest bardziej kompaktowy niż JavaScript, kod jest łatwiejszy w nawigacji, a literówki są łatwo dostrzegalne. Proces refaktoryzacji kodu również staje się prostszy i szybszy.

8. Struktura aplikacji

React

Struktura Reacta daje deweloperom swobodę wyboru. Nie ma „jedynej właściwej struktury” dla aplikacji React. Jednak konieczność zaprojektowania struktury aplikacji na początku każdego projektu sprawia, że ​​rozpoczęcie jest trudniejsze i dłuższe.

Poza tym React oferuje tylko warstwę Widok, podczas gdy Model i Kontroler są dodawane przy użyciu innych bibliotek.

Architektura aplikacji React jest oparta na komponentach. Kod składa się z komponentów Reacta, które są renderowane za pomocą biblioteki React DOM i kierowane na dwa sposoby: funkcjonalne (funkcja zwracająca JSX) …

function Hello(props){
return <div>Hello {props.name}</div>
}

… i oparte na klasach (z klasami ES6).

class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}

Angular 

Struktura Angulara jest stała i złożona, odpowiednia dla doświadczonych programistów.

Angular jest oparty na trzech warstwach – modelu, kontrolerze i widoku. Obiekt odpowiedzialny za Model jest inicjowany przez Kontroler i wyświetlany z Widokiem.

Kod aplikacji składa się z różnych komponentów Angular, z których każdy jest zapisany w czterech oddzielnych plikach: TypeScript do implementacji komponentu, plik HTML do zdefiniowania widoku, plik CSS do zdefiniowania cech stylistycznych oraz specjalny plik do celów testowych. Linki do tych plików są zapisane w dyrektywie aplikacji, która wyświetla logikę strukturalną aplikacji. Odpowiednio, komponenty Angular są również wielokrotnego użytku.

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }

9. Komponenty UI

React

Narzędzia UI dla Reacta są rozwijane przez społeczność. Na portalu React jest wiele darmowych i płatnych komponentów interfejsu użytkownika. Aby używać komponentów Material Design w Reakcie, musiałbyś zainstalować dodatkową bibliotekę – Material-UI Library & Dependencies.

Angular 

Angular ma wbudowany zestaw narzędzi Material i oferuje szereg gotowych komponentów do projektowania materiałów. Istnieją różne przyciski, układy, wskaźniki, wyskakujące okienka i kontrolki formularzy. Z tego powodu konfiguracja interfejsu użytkownika staje się prostsza i szybsza.

10. Dyrektywy

React

W Reakcie szablony i logika są wyjaśnione w jednym miejscu – na końcu komponentu. Pozwala czytelnikowi szybko zrozumieć znaczenie kodu, nawet jeśli nie zna składni.

Angular 

W Angular każdy szablon jest zwracany z atrybutem – dyrektywą określającą sposób ustawienia obiektu. Składnia dyrektyw Angular jest złożona i wyrafinowana, co sprawia, że ​​jest niezrozumiała dla czytelnika bez doświadczenia w pracy z tą technologią.

11. Zarządzanie stanem

React

W Reakcie każdy komponent ma swój własny stan. Deweloper React może stworzyć specjalne komponenty do przechowywania stanu całej aplikacji lub jej części. Główna wada polega na tym, że stan globalny musi być przechowywany w wielu różnych częściach aplikacji, a dane są ręcznie przekazywane między różnymi poziomami drzewa komponentów.

class Clock extends React.Component {
  constructor(props) {
    super(props);
   this.state = {date: new Date()};
 }
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <h2>Now is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Aby rozwiązać ten problem, istnieje specjalna biblioteka zarządzania stanem – Redux. Chodzi o to, że stan globalny jest reprezentowany jako pojedynczy obiekt stanowy, który jest zmieniany w różnych częściach aplikacji za pomocą reduktorów – specjalnych funkcji Redux.

Innym rozwiązaniem jest biblioteka zarządzania stanem MobX. W przeciwieństwie do Redux ze stanem globalnym przechowywanym w jednym niezmiennym obiekcie stanowym, MobX oferuje przechowywanie tylko minimalnego wymaganego stanu, podczas gdy reszta może zostać wyprowadzona.

Angular 

W Angular dane komponentu są przechowywane we właściwościach komponentu. Komponenty nadrzędne przekazują dane do komponentów podrzędnych. Zmiany stanu w niektórych częściach można zidentyfikować i ponownie obliczyć, ale w dużej aplikacji może to spowodować wielokierunkową serię aktualizacji drzewa, które będą trudne do śledzenia. Funkcje można ulepszyć za pomocą bibliotek zarządzania stanem, takich jak NgRx lub RxJS, które zapewniłyby jednokierunkowy przepływ danych.

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;
  constructor(private service: HeroService) { }
  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
} 

12. Zastrzyk zależności

React

React nie obsługuje w pełni wstrzykiwania zależności, ponieważ nie jest w pełni zgodny z ideą programowania funkcjonalnego i niezmienności danych. Zamiast tego ma stan globalny dla wszystkich komponentów.

Angular 

Największą zaletą Angulara jest to, że w przeciwieństwie do Reacta obsługuje on wstrzykiwanie zależności. Dlatego Angular umożliwia posiadanie różnych cykli życia dla różnych sklepów.

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable({
  // we declare that this service should be created
  // by the root application injector.
  providedIn: 'root',
})
export class HeroService {
  getHeroes() { return HEROES; }
}

13. Wiązanie danych

React

Powiązanie danych oznacza proces synchronizacji danych między modelem a widokiem. React należy wzbogacić o Redux , który umożliwia pracę z niezmiennymi danymi i sprawia, że ​​przepływ danych jest jednokierunkowy. Wiązanie jednokierunkowe jest przewidywalne, co ułatwia proces debugowania.

Angular 

Angular działa z dwukierunkowym wiązaniem danych i danymi zmiennymi. Chociaż zalety zmiennych i niezmiennych danych są przedmiotem gorącej dyskusji, zdecydowanie łatwiej jest pracować z dwukierunkowym wiązaniem danych niż z podejściem jednokierunkowym. Jednocześnie dwukierunkowe wiązanie danych negatywnie wpływa na wydajność, ponieważ Angular automatycznie tworzy obserwatora dla każdego powiązania.

Sposoby wiązania danych w Angular:

{{expression}}   Interpolation
[target]="expression"    Property
bind-target="expression"    Attribute
(target)="statement" Event
on-target="statement" Event
[(target)]="expression" Two-way
bindon-target="expression" Two-way

14. Zmień renderowanie

React

React wykorzystuje wirtualny Document Object Model (DOM), który umożliwia łatwe wprowadzanie drobnych zmian danych w jednym elemencie bez aktualizowania struktury całego drzewa. Framework tworzy w pamięci pamięć podręczną struktury danych, oblicza zmiany i efektywnie aktualizuje DOM wyświetlany w przeglądarce. W ten sposób cała strona wydaje się być renderowana przy każdej zmianie, podczas gdy w rzeczywistości biblioteki renderują tylko zmienione podkomponenty.

Zespół React stale ulepsza Fibre – mechanizm mający na celu zwiększenie produktywności renderowania zmian.

Angular 

Angular używa prawdziwego DOM, który aktualizuje całą strukturę drzewa, nawet jeśli zmiany zaszły w pojedynczym elemencie. Prawdziwy DOM jest uważany za wolniejszy i mniej efektywny niż wirtualny DOM.

Aby zrekompensować tę wadę, Angular wykorzystuje wykrywanie zmian do identyfikacji komponentów, które wymagają zmiany. Dlatego prawdziwy DOM w Angular działa równie efektywnie jak wirtualny DOM w React.

15. Narzędzia

React

React jest obsługiwany przez wiele edytorów kodu. Na przykład kod w React można edytować za pomocą Sublime Text , Visual Studio i Atom . Aby załadować projekt, możesz użyć narzędzia Create React App (CLI). Z kolei renderowanie po stronie serwera jest wykonywane przy użyciu frameworka Next.js.

Aby przetestować całą aplikację napisaną w React, potrzebujesz wielu narzędzi. Na przykład Enzyme do testowania komponentów, Jest do testowania kodu JS, jednostka React do testów jednostkowych i tak dalej. Aby debugować aplikację w trybie programistycznym, możesz użyć rozszerzenia przeglądarki React Dev Tools.

Innym ciekawym narzędziem jest React 360 , czyli biblioteka służąca do tworzenia aplikacji AR i VR.

Angular 

Podobnie jak React, Angular jest obsługiwany przez różne narzędzia do edycji kodu. Na przykład możesz pracować z takimi edytorami kodu, jak Aptana , Sublime Text i Visual Studio . Projekt można szybko skonfigurować za pomocą Angular CLI . Renderowanie po stronie serwera jest zakończone za pomocą Angular Universal .

W przeciwieństwie do Reacta, Angular można w pełni przetestować za pomocą jednego narzędzia. W przypadku testów od końca do końca w Angular platformami są Jasmine , Protractor i Karma . Kolejnym narzędziem debugującym aplikację w trybie programistycznym jest rozszerzenie przeglądarki Augury .

Podsumowując

Angular to pełnoprawna platforma do tworzenia aplikacji mobilnych i internetowych. React to framework przeznaczony wyłącznie do tworzenia UI, który można przekształcić w pełnoprawne rozwiązanie przy pomocy dodatkowych bibliotek.

React wydaje się na pierwszy rzut oka prostszy, a rozpoczęcie pracy nad projektem zajmuje mniej czasu. Jednak ta prostota jako główna zaleta Reacta jest zneutralizowana, ponieważ musisz nauczyć się pracować z dodatkowymi frameworkami i narzędziami JavaScript.

Sam Angular jest bardziej złożony i jego opanowanie zajmuje trochę czasu. Jest to jednak potężne narzędzie, które oferuje całościowe doświadczenie w tworzeniu stron internetowych, a gdy nauczysz się z nim pracować, będziesz zbierać owoce.

Nie ma lepszych frameworków. Oba są stale aktualizowane, aby nadążyć za konkurentem . Na przykład, chociaż wierzono, że React wygrywa dzięki swojemu wirtualnemu DOM, Angular wyrównał wynik, implementując wykrywanie zmian. Chociaż Angular był uważany za zwycięski dzięki temu, że został opracowany przez tak autorytatywną firmę jak Google, ogromna, oddana społeczność React w pełni wynagrodziła reputację Google i upodobniła Reacta do Angulara.

Ostatecznie React vs Angular to kwestia osobistych preferencji, umiejętności i nawyków . Jako początkujący programista prawdopodobnie skorzystałbyś bardziej na rozpoczęciu pracy z Reactem. Jako doświadczony programista po prostu pracujesz nad tym, co znasz lepiej.

Nie zapomnij rzucić sobie wyzwania i rozpocząć naukę nowego frameworka, Reacta lub Angulara. Jako kierownik projektu lub właściciel firmy zajmujący się outsourcingiem deweloperów, powinieneś porozmawiać ze swoim zespołem programistów internetowych i wspólnie wybrać platformę, która najbardziej Ci odpowiada, czy to Angular czy React.