Którego frameworka powinieneś użyć?

React i Vue to jedne z najbardziej znanych bibliotek/frameworków JavaScript do tworzenia aplikacji internetowych. Jeśli jesteś programistą, wiedza o tym, który framework/bibliotekę wybrać, może być trudna, ponieważ oba mają zalety i wady.

W tym artykule szczegółowo wyjaśnię, jak działają te frameworki/biblioteki, ich podobieństwa i różnice oraz przypadki użycia każdej biblioteki/frameworka.

Co to jest reakcja?

React to biblioteka JavaScript opracowana przez Meta, dawniej Facebook, do tworzenia interfejsów użytkownika. Ta biblioteka umożliwia budowanie interfejsów użytkownika z komponentów lub pojedynczych elementów.

React wykorzystuje architekturę opartą na komponentach, która pozwala użytkownikom podzielić kod na małe komponenty wielokrotnego użytku. Ta biblioteka wykorzystuje wirtualny DOM (Document Object Model) i tworzy aplikacje jednostronicowe.

Marki korzystające z React

Co to jest Vue?

Vue/ Vue.js to progresywny framework JavaScript do tworzenia internetowych interfejsów użytkownika. Ta struktura jest zbudowana na standardowym HTML, CSS i JavaScript.

Vue został stworzony przez Evana You i oficjalnie wydany w lutym 2014 r. Vue przyjmuje architekturę opartą na komponentach, która umożliwia programistom łamanie kodu interfejsu użytkownika na małe, samodzielne komponenty wielokrotnego użytku.

Marki korzystające z Vue

  • Tencent
  • Alibaba
  • Xiaomi
  • Baidu
  • Carrefour

React vs. Vue: podobieństwa

Zanim zagłębimy się w to, jak React i Vue różnią się funkcjonalnością, możemy również sprawdzić ich podobieństwa.

Oto niektóre z godnych uwagi;

  • Oba są używane do tworzenia interfejsów użytkownika (rozwój front-end)
  • Oba są frameworkami/bibliotekami JavaScript
  • Oba wykorzystują architekturę opartą na komponentach
  • Oba używają wirtualnego DOM

React vs. Vue: Szybkie porównanie

CechaReactVueSyntaxSzablony JSXHTMLSpołecznośćDuże i aktywneRozwijające się i aktywneDokumentacjaKompleksoweDobreKrzywa uczenia sięUmiarkowaneŁatweProgramowanie mobilneReactNativeVueNativeZarządzanie stanemUżyje ReduxUżyje VeuxPopularnośćBardzo popularnePopularneBiblioteki i narzędziaDuży katalog narzędzi i bibliotek innych firmRozrastający się katalog narzędzi i bibliotek

React vs. Vue: głębokie porównanie

Chociaż możesz używać React lub Vue do budowania interfejsów użytkownika, te dwa frameworki/biblioteki różnią się w następujący sposób;

# 1. Składnia

Reagować

React używa JSX, rozszerzenia, które pozwala programistom pisać JavaScript i HTML w tym samym pliku. Aby użyć JSX, klasy w CSS są nazwane classNames. Pliki reakcji można zapisywać za pomocą rozszerzenia jsx lub js. Na przykład, jeśli masz komponent, który chcesz nazwać „Dom”, możesz go zapisać jako Home.jsx lub Home.js.

Vue

Vue opiera się na HTML, JavaScript i CSS. Ma intuicyjną składnię, która łączy JavaScript, szablony oparte na HTML i dodatkowe dyrektywy. Szablony HTML są podobne do czystego HTML, ale zawierają specjalne dyrektywy umożliwiające powiązanie danych z obiektowym modelem dokumentu (DOM).

#2. Rozwój i elastyczność

Reagować

React nie ma opinii, oferując programistom elastyczność podczas tworzenia aplikacji. Jako programista React masz kontrolę nad strukturą kodu.

Istnieje kilka podejść, których możesz użyć do stworzenia aplikacji React. Niezależnie od Twojego podejścia, musisz mieć zainstalowany Node.js na swojej lokalnej maszynie.

Do celów demonstracyjnych możemy zastosować podejście cli utwórz-reaguj-aplikację. Możesz wybrać język szablonu jako TypeScript lub JavaScript. Narzędzie create-react-app domyślnie wybiera JavaScript, jeśli nie wybierzesz języka szablonu.

Wpisz te polecenia w swoim terminalu, jeśli chcesz śledzić;

npx create-react-app my-app
cd my-app
npm start

Możesz teraz otworzyć aplikację w swoim ulubionym edytorze kodu.

To jest struktura aplikacji React.

Większość kodu napiszesz w folderze o nazwie src.

Vue

Vue jest uważany za opiniotwórczą platformę, ponieważ zapewnia perspektywę i bardziej uporządkowany sposób budowania aplikacji. Jego spójna i przejrzysta architektura pomaga budować aplikacje. Vue zachęca użytkowników do przestrzegania najlepszych praktyk, a także egzekwuje określone konwencje.

Potrzebujesz vue-cli, aby utworzyć aplikację Vue. Zanim zaczniesz budować swoją pierwszą aplikację Vue, upewnij się, że masz Node.js.

Uruchom te polecenia;

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

Możesz teraz otworzyć aplikację w swoim ulubionym edytorze kodu.

To jest struktura aplikacji Vue;

Kod Twojej aplikacji Vue będzie znajdować się w folderze src. Znajdziesz tu również folder komponentów, w którym dodasz wszystkie swoje komponenty i napiszesz kod.

#3. Wydajność

React i Vue są szybkie; większość ludzi może nie zauważyć różnic w wydajności. Oba używają wirtualnego DOM. Renderowanie zarówno w React, jak i Vue jest wysoce zoptymalizowane.

Aplikacja React jest mała, po skompilowaniu zajmuje około 1-2 MB. Jednak rozmiar pakietu może wzrosnąć w miarę dodawania zależności z bibliotek innych firm, takich jak Redux i React-Router.

Podstawowa aplikacja Vue ma około 16 KB. Vue zapewnia wewnętrzne narzędzia do zarządzania stanem. Możesz jednak również użyć narzędzi zewnętrznych, co zwiększa rozmiar aplikacji.

#4. Zarządzanie państwem

Zarządzanie stanem śledzi i aktualizuje wszystkie dane używane do renderowania aplikacji internetowej. Na przykład narzędzie do zarządzania stanem może sprawdzać dane wejściowe użytkownika i aktualizować stan. Dobrym przykładem jest licznik, który z każdym kliknięciem zwiększa liczbę na ekranie.

W React możesz użyć lokalnego zarządzania stanem, jeśli twój jest mały. Jednak wraz ze wzrostem rozmiaru aplikacji do zarządzania stanem potrzebna jest zewnętrzna biblioteka, taka jak Redux lub MobX.

Vue ma wbudowany system reaktywności do zarządzania stanem w małych aplikacjach. Jednak wraz ze wzrostem złożoności aplikacji Vue do zarządzania stanem potrzebna jest zewnętrzna biblioteka, taka jak Vuex.

#5. Testowanie

React i Vue oferują frameworki testowe, dzięki którym programiści mogą tworzyć aplikacje internetowe z niewielką liczbą błędów. Te dwie platformy obsługują testy jednostkowe, testy integracyjne i testy kompleksowe. Niektóre frameworki testowe, takie jak Jest, mogą być używane w aplikacjach React i Vue.

React nie ma oficjalnej platformy testowej, ale doskonale współpracuje z Enzyme, Jest i React Testing Library.

W przypadku aplikacji Vue Vue Test Utils jest oficjalną biblioteką testową. Jednak nadal możesz korzystać z innych bibliotek w zależności od potrzeb.

React ma bardzo dużą społeczność opartą na aktywności na swoim profilu GitHub. Projekt ma ponad 43,5 tys. rozwidleń i ponad 208 tys. gwiazdek. Poza GitHub platforma ma wielu zwolenników na platformach społecznościowych, takich jak Discord, Facebook i LinkedIn.

Vue ma coraz więcej zwolenników. Jednak społeczność jest mniejsza niż społeczność Reacta. Szybki przegląd tej platformy na GitHub pokazuje, że ma ona ponad 37,9 tys. gwiazdek i ponad 6,9 tys. forków. Platforma oferuje pomoc za pośrednictwem kanału Discord i obsługi społeczności DEV.

#7. Narzędzia

React ma większy ekosystem narzędzi i bibliotek. Narzędzia te należą do różnych kategorii. Na przykład, jeśli potrzebujesz narzędzi do zarządzania stanem, możesz użyć narzędzi takich jak Redux, MobX lub Zustand. React ma więcej narzędzi do debugowania, takich jak React DevTools i Redux DevTools.

Vue ma mniejszy ekosystem, ale prawie wszystko, czego potrzebujesz do zbudowania funkcjonalnego interfejsu użytkownika. Możesz użyć narzędzi Vite, Vue CLI, a nawet narzędzi Nuxt.js do wygenerowania aplikacji Vue. Możesz także debugować swoją aplikację Vue za pomocą Vue DevTools.

#8. Krzywa uczenia się

Zarówno React, jak i Vue mają unikalne wzorce/koncepcje uczenia się, które programiści muszą zrozumieć.

React ma bardziej stromą krzywą uczenia się, ponieważ wprowadza JSX, nową składnię. JSX umożliwia programistom pisanie HTML i JavaScript w tym samym pliku. React ma wiele zasobów i może być przytłaczający dla uczących się, którzy dopiero zaczynają. Aby jak najlepiej wykorzystać React, upewnij się, że uczysz się jednej rzeczy na raz.

Vue jest uważane za łatwe do nauczenia i zbudowane na standardowym HTML, CSS i JavaScript. Szablon HTML Vue jest podobny do HTML, dzięki czemu jest przyjazny dla początkujących. Platforma posiada również zwięzłą i przejrzystą dokumentację.

Dlaczego warto używać Reacta?

  • Architektura oparta na komponentach: React pozwala podzielić kod na małe elementy wielokrotnego użytku.
  • Elastyczność: React nie ma opinii, co zapewnia elastyczność w zakresie struktury kodu.
  • Duża społeczność: React ma dużą społeczność, narzędzia i biblioteki ułatwiające tworzenie aplikacji.
  • Wirtualny DOM: Wirtualny DOM zapewnia, że ​​React aktualizuje i renderuje tylko zmienione komponenty. Dzięki temu aplikacja React jest szybka.

Ograniczenia React

  • Stroma krzywa uczenia się dla początkujących.
  • Fragmentacja społeczności wynika z tego, że wiele bibliotek i platform osiąga te same cele.

Dlaczego warto używać Vue?

  • Łatwy do nauczenia: Vue używa standardowego HTML, dzięki czemu jest łatwy do nauczenia się dla początkujących.
  • Architektura oparta na komponentach: Vue pozwala podzielić kod na małe elementy wielokrotnego użytku.
  • Progresywny: Możesz łatwo dodawać komponenty Vue do istniejącego projektu, a nawet starszych baz kodu.

Ograniczenia Vue

  • Mała społeczność
  • Niewiele opcji narzędzi

Z powyższego porównania być może zauważyłeś kilka przypadków, w których React wygrywa. Z drugiej strony, istnieje kilka obszarów, w których Vue jest zwycięzcą. Możemy je podsumować jako;

Kiedy stosować React

  • Szukasz biblioteki ze świetną społecznością: fakt, że React został stworzony i jest utrzymywany przez Meta, dawniej Facebook, zapewnił mu popularność w porównaniu z innymi frameworkami/bibliotekami. React ma wielu zwolenników; prawdopodobnie znajdziesz pomoc na różnych forach, gdy utkniesz.
  • Szukasz biblioteki z większą liczbą miejsc pracy: popularność Reacta sprawiła, że ​​zostało przyjęte przez wiele firm. Jeśli jesteś studentem i chcesz mieć bibliotekę z wieloma zadaniami, React może być lepszą opcją niż Vue.
  • Chcesz platformy z dużą kolekcją bibliotek: duża liczba zwolenników Reacta przyciągnęła również programistów, którzy zbudowali biblioteki i narzędzia rozszerzające jego użyteczność. Ekosystem Reacta jest większy niż Vue i prawdopodobnie będziesz miał duży wybór, ponieważ możesz znaleźć kilka bibliotek pełniących tę samą funkcję.

Kiedy używać Vue

  • Chcesz progresywnego frameworka: progresywne podejście sprawia, że ​​dodawanie Vue lub jego komponentów do istniejącego projektu jest łatwe. Dlatego Vue jest dobrą opcją do dodania nowego frameworka do Twojego starszego projektu.
  • Szukasz frameworka, który jest łatwy do nauczenia: Vue jest łatwiejszy do nauczenia się w porównaniu do Reacta. Framework korzysta z szablonów HTML i dlatego jest łatwy do nauczenia się, jeśli pochodzisz z CSS i HTML.
  • Potrzebujesz struktury o małym rozmiarze pakietu: rozmiar pakietu aplikacji wpływa na jej wydajność. Vue przydaje się, jeśli budujesz aplikację, w której szybkość i wydajność mają kluczowe znaczenie ze względu na mały rozmiar pakietu.

Podsumowanie

Wierzymy, że potrafisz odróżnić React od Vue. Wybór między tymi dwoma frameworkami/bibliotekami będzie zależał od Twojego gustu, charakteru aplikacji, którą chcesz stworzyć, oraz poziomu opanowania.

Możesz sprawdzić nasz artykuł na temat React vs. Next.js.

x