Angular vs React vs Vue 2022

Istnieją trzy frameworki do tworzenia aplikacji internetowych, o których słyszał każdy programista frontend: React, Vue.js i Angular.

React to biblioteka interfejsu użytkownika, Angular to pełnoprawny framework front-endowy, a Vue.js to progresywny framework.

Można ich używać prawie zamiennie do tworzenia aplikacji front-end, ale nie są one w 100% takie same, więc warto je porównać i zrozumieć różnice między nimi.

Każda struktura jest oparta na komponentach i umożliwia szybkie tworzenie funkcji interfejsu użytkownika.

Jednak wszystkie mają inną strukturę i architekturę — ​​więc najpierw przyjrzymy się ich różnicom architektonicznym, aby zrozumieć stojącą za nimi filozofię.

Architektura

Reagować

React nie wymusza określonej struktury projektu, a jak widać na poniższym oficjalnym przykładzie „Hello World”, możesz zacząć korzystać z Reacta za pomocą zaledwie kilku linijek kodu.

 ReactDOM.render(
  <h1>Witaj świecie!</h1>,
  document.getElementById('root')
);

React może być używany jako biblioteka UI do renderowania elementów, bez narzucania określonej struktury projektu, i dlatego nie jest to ściśle framework.

React Elements to najmniejsze elementy budulcowe aplikacji React. Są potężniejsze niż elementy DOM, ponieważ React DOM zapewnia ich skuteczną aktualizację za każdym razem, gdy coś się zmieni.

Komponenty to większe bloki konstrukcyjne, które definiują niezależne i wielokrotnego użytku elementy, które mają być używane w całej aplikacji. Akceptują dane wejściowe zwane rekwizytami i wytwarzają elementy, które są następnie wyświetlane użytkownikowi.

React bazuje na JavaScript, ale łączy się go głównie z JSX (JavaScript XML), rozszerzeniem składni, które pozwala tworzyć elementy zawierające jednocześnie HTML i JavaScript.

Wszystko, co tworzysz za pomocą JSX, może być również tworzone za pomocą interfejsu API React JavaScript, ale większość programistów preferuje JSX, ponieważ jest bardziej intuicyjny.

Vue

Podstawowa biblioteka Vue.js skupia się tylko na warstwie Widok. Nazywa się to progresywnym frameworkiem, ponieważ możesz rozszerzyć jego funkcjonalność za pomocą oficjalnych i zewnętrznych pakietów, takich jak Vue Router lub Vuex, aby przekształcić go w rzeczywisty framework.

Chociaż Vue nie jest ściśle związany ze wzorcem MVVM (Model-View-ViewModel), jego projekt został częściowo zainspirowany nim. Z Vue będziesz pracować głównie na warstwie ViewModel, aby upewnić się, że dane aplikacji są przetwarzane w sposób, który umożliwia frameworkowi renderowanie aktualnego widoku.

Składnia szablonów Vue pozwala tworzyć komponenty View i łączy znajomy HTML ze specjalnymi dyrektywami i funkcjami. Ta składnia szablonów jest preferowana, mimo że obsługiwane są również surowe JavaScript i JSX.

Komponenty w Vue są małe, samodzielne i mogą być ponownie używane w całej aplikacji. Komponenty pojedynczego pliku (SFC) z rozszerzeniem .vue zawierają HTML, CSS i JavaScript, dzięki czemu cały odpowiedni kod znajduje się w jednym pliku.

SFC są zalecanym sposobem organizowania kodu w projektach Vue.js, zwłaszcza większych. Narzędzia takie jak Webpack lub Browserify są wymagane do transpilacji SFC do działającego kodu JavaScript.

Kątowy

W tym artykule omawiam Angular 2, a nie pierwszą wersję frameworka, która jest teraz znana jako AngularJS.

Oryginalna platforma AngularJS jest strukturą MVC (Model-View-Controller). Ale w Angular 2 nie ma ścisłego powiązania z wzorcami MV*, ponieważ jest on również oparty na komponentach.

Projekty w Angular są podzielone na moduły, komponenty i usługi. Każda aplikacja Angular ma co najmniej jeden składnik główny i jeden moduł główny.

Każdy składnik w Angular zawiera szablon, klasę definiującą logikę aplikacji i metadane (dekoratory). Metadane dla komponentu informują Angular, gdzie znaleźć bloki konstrukcyjne, których potrzebuje, aby utworzyć i zaprezentować swój widok.

Szablony Angular są napisane w języku HTML, ale mogą również zawierać składnię szablonów Angular ze specjalnymi dyrektywami do wyświetlania danych reaktywnych i renderowania wielu elementów, między innymi.

Usługi w Angular są używane przez komponenty do delegowania zadań logiki biznesowej, takich jak pobieranie danych lub sprawdzanie poprawności danych wejściowych. Stanowią odrębną część aplikacji Angulara. Chociaż Angular nie wymusza ich używania, zdecydowanie zaleca się ustrukturyzowanie aplikacji jako zestawu odrębnych usług, które można ponownie wykorzystać.

Angular jest zbudowany w TypeScript, więc jego użycie jest zalecane, aby uzyskać najbardziej bezproblemowe działanie, ale obsługiwany jest również zwykły JavaScript.

Popularność

Reagować

React to jeden z najpopularniejszych projektów JavaScript z 160 tysiącami gwiazdek na GitHub. Jest rozwijany i utrzymywany przez Facebooka i jest używany wewnętrznie w wielu ich projektach. Dodatkowo obsługuje ponad 2 miliony stron internetowych, zgodnie ze statystykami użytkowania BuiltWith.

Vue

Spośród trzech struktur, Vue ma najwięcej gwiazd na GitHub, z 176 tys. gwiazd. Projekt jest rozwijany i prowadzony przez byłego Googlera Evana You. Według BuiltWith jest to bardzo silny, niezależny projekt w społeczności open-source, z którego korzysta ponad milion stron internetowych.

Kątowy

Angular jest rozwijany przez Google, ale co zaskakujące, nie jest używany w niektórych flagowych produktach, takich jak wyszukiwarka czy YouTube. Jest często używany w projektach korporacyjnych i obsługuje ponad 97 000 stron internetowych opartych na danych BuiltWith.

Jest najmniej gwiazdorem spośród trzech frameworków, z 68k gwiazdami na GitHub. Jednak po przejściu z Angular 1 na Angular 2 stworzyli zupełnie nowe repozytorium zamiast kontynuować projekt AngularJS, który również ma 59 000 gwiazd.

Ekosystem

Pakiety open source oszczędzają cenny czas podczas tworzenia aplikacji. Nie tylko to, ale często są one lepsze niż komponenty i pakiety wykonane na zamówienie, ponieważ są przetestowane w boju.

Ważne jest, aby przyjrzeć się dostępności gotowych do użycia składników, motywów i innych narzędzi, które mogą ułatwić tworzenie nowych funkcji.

Reagować

Wiele aplikacji typu front-end polega na globalnym zarządzaniu stanem w celu przechowywania informacji, takich jak kto jest zalogowany i inne ustawienia użytkownika.

Najpopularniejszym projektem do zarządzania stanem JavaScript jest Redux. Większość programistów korzysta z oficjalnych powiązań React dla Redux, które są utrzymywane przez zespół Redux.

Ze względu na popularność Reacta znalezienie komponentów wejściowych i gotowych do użycia elementów jest niezwykle łatwe. Wszystkie są w zasięgu wyszukiwania Google lub GitHub.

Ekosystem React obejmuje również React Native, który pozwala budować natywne aplikacje na iOS i Androida z jednej bazy kodu napisanej w React. React może więc być również doskonałym wyborem do tworzenia aplikacji mobilnych przy użyciu technologii internetowych.

React jest częścią stosu MERN, który zawiera MongoDB, ExpressJS, React i NodeJS. Wspaniałą rzeczą w tej kombinacji jest to, że jeden język — JavaScript — obsługuje całą aplikację.

Vue

Mimo że Redux może być używany w Vue, nie ma oficjalnych wiązań. Ale to nie powinno Cię martwić, ponieważ Vuex to oficjalna biblioteka zarządzania stanem stworzona specjalnie dla aplikacji Vue. Oprócz bardzo dobrej integracji z Vue, łatwo jest debugować za pomocą narzędzi programistycznych Vue.

Na początku Vue trudniej było znaleźć gotowe do użycia komponenty. Odkąd społeczność się rozrosła, istnieje szeroka gama komponentów wejściowych i zaawansowanych elementów, których możesz użyć, aby przyspieszyć rozwój.

W przypadku tworzenia aplikacji mobilnych istnieje nowy projekt o nazwie Weex. Weex jest rozwijany i używany przez Alibaba, ale nie jest tak dojrzały i potężny jak React Native. Co więcej, ponieważ projekt jest coraz bardziej rozwijany i wykorzystywany w Chinach, trudniej jest znaleźć dokumentację i rozwiązania problemów w języku angielskim.

Vue dobrze integruje się z Laravelem, dlatego często używa się ich razem. Laravel oferuje kompletne rusztowanie JavaScript i CSS, aby umożliwić wykorzystanie Vue w nowych projektach.

Kątowy

Do zarządzania stanem w Angularze możesz użyć projektu NgRx. Został zainspirowany Redux, ale został stworzony specjalnie dla Angulara.

Podobnie jak w przypadku Vue i React, istnieje wiele gotowych do użycia komponentów, które możesz zaimportować do swoich projektów. Nieco inaczej w Angular jest to, że w projekcie Angular Material istnieje wiele oficjalnych komponentów. Jest to oficjalny projekt Google, który oferuje komponenty Material Design dla aplikacji Angular.

Możesz tworzyć wieloplatformowe aplikacje mobilne w Angular za pomocą NativeScript. Obsługuje również Vue, ale obsługa Angular jest bardziej dojrzała.

Angular jest częścią dobrze znanego stosu MEAN, który łączy Angular z MongoDB, ExpressJS i NodeJS. Podobnie do stosu MERN, opiera się całkowicie na JavaScript zarówno dla front-endu, jak i back-endu.

Wspólne technologie

Angular, React i Vue mogą być używane do tworzenia progresywnych aplikacji internetowych, znanych również jako PWA.

Aplikacje PWA nie są aplikacjami mobilnymi, ale aplikacjami internetowymi, które użytkownicy smartfonów mogą dodawać jako skróty do ekranu głównego i oferować wygląd podobny do natywnych aplikacji mobilnych.

Możesz także znaleźć szablony premium i gotowe aplikacje dla każdego frameworka, ale Angular i React mają więcej dostępnych opcji premium niż Vue.

Wydajność

Wybierając framework lub bibliotekę, musisz również pomyśleć o wydajności.

W wielu przypadkach nie musisz się martwić o wydajność, zwłaszcza jeśli tworzysz mały projekt. Jednak im bardziej projekt rośnie w zakresie i złożoności, wydajność może (i będzie) stanowić problem.

Należy zauważyć, że jakość programowania i przestrzeganie najlepszych praktyk, jeśli chodzi o wydajność sieci, jest ważniejsza niż wybór frameworka.

Ale ponieważ istnieją pewne metryki wydajności i różnice, przyjrzę się im i wyjaśnię, jak każdy z nich może wpłynąć na twoje wysiłki programistyczne.

JS Framework Benchmark: Angular vs React vs Vue

Wyniki testu JS Framework Benchmark pokazują, że wszystkie one działają całkiem dobrze w większości testów porównawczych, takich jak tworzenie lub dołączanie wierszy w tabeli.

Jak widać powyżej, Vue jest znacznie wolniejszy niż Angular i React przy zaznaczaniu wierszy. Z drugiej strony Angular i React nie są zbyt wydajne w zamianie wierszy.

To jedyne istotne różnice w testach porównawczych renderowania — iw większości przypadków nie przyniosą zauważalnych rezultatów. Ponieważ wybieranie wierszy jest bardziej powszechną funkcją niż zamiana wierszy, powiedziałbym, że ten test porównawczy umieszcza Vue na trzecim miejscu za Angularem i Reactem, które dzielą najwyższą pozycję.

Jeśli chodzi o pamięć i czas uruchamiania, React i Vue osiągają bardzo dobre wyniki, ale Angular jest nieco wolniejszy. Angular może potrwać 150 ms, aby uruchomić podstawowy skrypt i wymaga więcej pamięci do uruchomienia.

Perf Track: Angular vs React vs Vue

Perf Track firmy Google Chrome Labs pokazuje dane produkcyjne z tysięcy stron internetowych. Na te statystyki wpływa wiele innych rzeczy, a nie tylko ramy wyboru, ale spójrzmy na liczby.

Pierwsza pełna treści farba

Witryny Vue i React mają wyższą pozycję pod względem tego wskaźnika w porównaniu do Angulara, który może zająć więcej czasu na uruchomienie i prezentację treści użytkownikowi.

Największa zawartość farby

Angular jest również najwolniejszym spośród trzech frameworków, jeśli chodzi o renderowanie kompletnej strony, z zaledwie 27 procentami stron internetowych Angulara w akceptowalnym zakresie.

Opóźnienie pierwszego wejścia

We wszystkich trzech platformach ponad 80 procent witryn mieści się w dopuszczalnym zakresie dla pierwszego opóźnienia wejściowego, które pokazuje, ile czasu zajmuje, zanim użytkownik będzie mógł wejść w interakcję ze stroną.

Bajty JavaScript

Najlżejsze aplikacje to zdecydowanie te opracowane w Vue, a 68 procent aplikacji Vue ładuje mniej niż 1 MB JavaScript. Z drugiej strony aplikacje Angular i React mają zwykle większy rozmiar kodu.

Jak korzystać z tych wskaźników

Na tych liczbach widać trend, ale nie należy zbyt szybko wyciągać wniosków. Na przykład na ostatnim rysunku wyjaśnieniem może być to, że Vue jest używany do tworzenia lżejszych aplikacji, podczas gdy Angular jest używany do większych projektów.

Statystyki mogą pomóc w podjęciu właściwej decyzji, ale nie możesz ich użyć do udowodnienia, że ​​jeden framework jest szybszy lub lepszy od drugiego.

Zaawansowane funkcje

W przypadku bardziej zaawansowanych aplikacji używana platforma frontonu powinna być w stanie wykonywać niektóre zadania, które poprawiają wydajność i można lepiej skalować.

Dwie kluczowe technologie to renderowanie po stronie serwera (SSR) i wirtualizacja.

Reagować

React obsługuje renderowanie po stronie serwera z oficjalnym pakietem ReactDOMServer. Do wirtualizacji możesz użyć popularnego narzędzia innej firmy o nazwie React Virtualized.

Vue

Renderowanie po stronie serwera jest obsługiwane w Vue również z oficjalnym pakietem SSR. Ponadto możesz również użyć frameworka Nuxt.js, który jest zbudowany na Vue i obsługuje SSR.

Opcje wirtualizacji w Vue nie są niestety tak silne. Moim zdaniem Vue Virtual Scroll List jest najlepszym rozwiązaniem do wirtualnego przewijania, ale jest nieco zabużona i nie tak stabilna jak opcje React i Angular.

Kątowy

Angular ma oficjalny pakiet Angular Universal dla SSR oraz oficjalny komponent do wirtualnego przewijania i wydajnego renderowania dużych list.

Krzywa uczenia się

Jak łatwo jest nauczyć się każdego z tych frameworków?

Aby odpowiedzieć na to pytanie, musimy przyjrzeć się złożoności każdego frameworka i wprowadzanym przez nie koncepcjom.

Reagować

W najbardziej podstawowym przypadku użycia React jest najmniej złożonym z trzech frameworków. Dzieje się tak, ponieważ wystarczy zaimportować bibliotekę, a następnie możesz zacząć pisać swoją aplikację React za pomocą kilku linijek kodu.

Ale poza przykładem Hello World, większość aplikacji React opiera się na komponentach i nie renderuje tylko kilku elementów na stronie.

Jedną z rzeczy, które niektórzy programiści uważają za dziwne lub trudne w React, jest fakt, że nauka JSX to droga jednokierunkowa. Możesz również używać surowego JavaScript, ale ponieważ większość programistów React używa JSX, nauczenie się go jest prawie nieuniknione.

To jest główna rzecz, która może sprawić, że krzywa uczenia się Reacta będzie nieco bardziej stroma, ale poza tym jest to biblioteka łatwa do nauczenia dla programistów, którzy znają JavaScript i rozumieją koncepcje tworzenia stron internetowych.

Vue

Vue jest nieco bardziej skomplikowany w konfiguracji niż React. Możesz go używać jako biblioteki do definiowania komponentów, których możesz używać w całym kodzie HTML — ale podobnie jak w przypadku Reacta, większość projektów nie jest tak budowana.

Większość projektów Vue będzie zawierała komponent główny o nazwie App.vue oraz szereg komponentów podrzędnych do wyświetlania różnych rzeczy.

Jeśli chodzi o składnię, jedyną nową rzeczą, której musisz się nauczyć, jest składnia szablonów Vue, która jest bardzo łatwa do zrozumienia, jeśli znasz HTML. Podstawowe dyrektywy, takie jak v-if i v-for dla renderowania warunkowego i renderowania list, są łatwe do zrozumienia nawet dla początkujących.

Dodatkowo, jednoplikowe komponenty Vue utrzymują cały kod front-endowy w jednym miejscu, co ułatwia organizowanie nowych projektów.

Vue jest moim zdaniem najłatwiejszy do nauczenia ze względu na swoją prostotę i intuicyjną składnię.

Kątowy

Angular ma najbardziej złożoną strukturę projektu z trzech, a ponieważ jest to w pełni rozbudowany framework front-end, opiera się na większej liczbie koncepcji.

Oprócz komponentów Angular obsługuje moduły i usługi. Oczekuje, że napiszesz i zaprojektujesz swoją bazę kodu w określony sposób, który sprawi, że Twój projekt będzie łatwiejszy w utrzymaniu, gdy się skaluje.

Jeśli chodzi o składnię, ponieważ Angular działa najlepiej z TypeScript, ważne jest, aby znać TypeScript podczas tworzenia projektu Angular.

Podobnie jak w przypadku Vue, musisz również zapoznać się ze składnią zbliżoną do HTML, aby móc zacząć kodować nowe funkcje interfejsu użytkownika za pomocą Angulara.

Moim zdaniem Angular jest najtrudniejszy do nauczenia dla przeciętnego programisty, ponieważ jest bardziej złożony i opiera się na TypeScript.

Prognozy na przyszłość

Wiele projektów i frameworków o otwartym kodzie źródłowym odchodzi w zapomnienie i staje się nieutrzymywane. Czy powinieneś się martwić o którykolwiek z omawianych tutaj frameworków?

Chociaż nie możemy w pełni przewidzieć, co się stanie, ciągłe prace rozwojowe są dobrym wskaźnikiem kondycji tych projektów. Popularność i wzrost są również ważnymi wskaźnikami pozwalającymi przewidzieć trwałość projektu, więc przyjrzyjmy się każdemu frameworkowi.

Reagować

React v17.0 został wydany, ale co zaskakujące, nie zawiera żadnych nowych funkcji dla programistów.

Główną zmianą jest to, że ta nowa wersja ułatwia aktualizację samego Reacta. Możesz zaktualizować tylko niektóre części Reacta ze starszej wersji do nowszej, bez konieczności uaktualniania całego projektu.

Jeśli Twoja aplikacja opiera się na funkcjach, które zmieniają się lub stają się przestarzałe w nowej wersji, możesz zachować starą wersję, aby zachować tę funkcjonalność. Ta aktualizacja sprawia, że ​​React jest doskonałym wyborem na dłuższą metę, ponieważ ułatwia bycie na bieżąco z nowymi wersjami.

React wzrósł o 44 procent od zeszłego roku pod względem cotygodniowych pobrań npm. W liczbach bezwzględnych jest to nadal najczęściej pobierany z trzech projektów.

Vue

Vue 3 został wydany we wrześniu 2020 roku i rozwiązuje wiele poważnych problemów, które Vue 2 ma w dużych projektach. Wprowadza interfejs Composition API inspirowany hakami React i ułatwia ponowne użycie logiki w różnych komponentach.

Cały projekt został przepisany w TypeScript, co poprawia obsługę TypeScript w nowych projektach Vue, a jednocześnie sprawia, że ​​projekt jest łatwiejszy w utrzymaniu.

Vue 3 to bardzo potrzebne ulepszenie i sprawia, że ​​Vue lepiej pasuje do projektów na dużą skalę.

Tygodniowe pobrania Vue wzrosły o 87 procent od zeszłego roku, co czyni Vue najszybciej rozwijającą się platformą w ujęciu względnym. Jeśli Vue będzie w stanie utrzymać to tempo wzrostu, to z pewnością wkrótce przewyższy Angular.

Kątowy

Angular niedawno wprowadził kompilator Ivy. Skraca czas kompilacji, optymalizuje zasoby, pozwala na szybsze testowanie i ogólnie poprawia wrażenia programistów.

Zespół Angulara kilka razy w roku publikuje główne aktualizacje, które mogą zawierać nowe funkcje lub po prostu przyspieszać platformę dzięki nowym wersjom przeglądarek.

Od zeszłego roku liczba pobrań Angulara wzrosła o około 50 procent, więc nadal jest popularnym projektem.

Wniosek

Angular, React i Vue są bardzo aktywnie rozwijane. Regularnie wypuszczają nowe wersje i utrzymują istniejące. Ponieważ obecny poziom wsparcia jest w każdym przypadku wysoki, możesz bezpiecznie korzystać z dowolnego z tych frameworków.

Ważne jest, aby pamiętać, że Angular nie rośnie tak szybko jak wcześniej, podczas gdy Vue – mimo że zaczął się niedawno – wydaje się bardzo rosnąć.

Jak wspomniano wcześniej, nie możemy przewidzieć, które frameworki pozostaną istotne w dłuższej perspektywie, ale za każdym projektem stoi wspaniała społeczność i stale się rozwija.

Moim celem w tym artykule było wyjaśnienie różnic architektonicznych, rozbicie mocnych i słabych stron każdego frameworka i porównanie ich wszędzie tam, gdzie ma to zastosowanie.

Przed przejściem do nowego frameworka należy wziąć pod uwagę kilka rzeczy.

Po pierwsze, doświadczenie Twojego zespołu może być decydującym czynnikiem przy wyborze nowej technologii.

Podobnie musisz wziąć pod uwagę talent dostępny w Twojej okolicy, aby móc zatrudnić programistów do swojego projektu.

Wreszcie, jeśli chodzi o sam projekt, złożoność i zakres mogą również wpływać na wybór frameworka.

Biorąc pod uwagę wszystkie kluczowe różnice, mam nadzieję, że zdecydujesz, który framework front-endowy jest najlepszy dla Twoich celów i potrzeb.