Dlaczego React JS jest lepszy niż Angular czy Vue JS?

Powszechnie wiadomo, że strony internetowe są budowane głównie przy użyciu języków programowania HTML, CSS i JavaScript (trzech podstawowych elementów składowych sieci). W szczególności HTML tworzy elementy na stronach internetowych, takie jak menu, teksty i pola. Podczas gdy CSS służy do stylizowania, projektowania i umieszczania tych elementów na stronach internetowych. I na koniec JavaScript, który ułatwia interakcję i manipulację tymi elementami. Tematem naszej dyskusji będzie JavaScript; w szczególności React.Js i jego wyższość nad Angularem i Vue.Js.

Podsumowując, React JS jest lepszy niż Angular lub Vue JS ze względu na doskonałe możliwości wirtualnego DOM, solidną obsługę społeczności, bogatą dokumentację, lekkie atrybuty, łatwą do opanowania krzywą uczenia się i elastyczność, która umożliwia mobilną funkcjonalność z React Native.

JavaScript: język kleju

Aby ustanowić pierwszeństwo w naszym przypadku, uzasadniające dominację Reacta, przytoczymy kilka podstaw. JavaScript jest często identyfikowany jako język klejowy, używany do składania innych komponentów. Spośród trzech bloków konstrukcyjnych stron internetowych HTML i CSS są mniej złożone (chociaż używane głównie do celów projektowania statycznego). Jednak dla programistów, którzy tworzą dynamiczną zawartość internetową, JavaScript jest priorytetem, co wskazuje, dlaczego jest znacznie większy i bardziej skomplikowany niż jego rówieśnicy. Zasadniczo stając się de facto standardem stosowanym na większości stron internetowych.

W związku z tym w ciągu ostatniej dekady wiele front-endowych frameworków zostało opracowanych na bazie JavaScript, aby ułatwić tworzenie i utrzymanie stron internetowych. W rezultacie od 2020 roku najpopularniejszymi z tych front-endowych frameworków JavaScript były React i Vue, a następnie Angular.

Ponieważ pokrótce ustaliliśmy, że frameworki i biblioteki oparte na JavaScript i JavaScript są kluczowymi narzędziami do tworzenia stron internetowych. Tak więc, aby ustawić kontekst dla naszego bloga, cofnijmy się pokrótce i opiszmy historię i rozwój JavaScript.

Historia technologii internetowych i przeglądarek

Pierwsza przeglądarka internetowa została opracowana i wydana w grudniu 1990 roku, a głównym programistą był Tim Berners-Lee. Równolegle opracował i wydał Hypertext Transfer Protocol (HTTP), protokół aplikacji dla World Wide Web do indeksowania i nawigacji w witrynach internetowych.

Później w 1993 roku została wydana inauguracyjna graficzna przeglądarka internetowa Mosaic. Podobnie, w tym samym roku opracowano HTML. Było to kilka lat przed utworzeniem JavaScript, podczas gdy CSS został wydany w 1996 roku, rok po JavaScript. Te trzy języki utworzyły później słynny stos technologiczny nazwany „triadą technologii, których programiści sieci Web muszą się nauczyć”.

Rozwój JavaScript

Jedną ze słynnych kontynuacji przeglądarki Mosaic była przeglądarka Netscape Navigator, wydana w 1994 roku. W 1995 roku twórcy popularnego wówczas Netscape zatrudnili Brendana Elcha, programistę, do stworzenia nowego dynamicznego języka skryptowego dla stron internetowych oraz manipulowanie danymi po stronie klienta.

W odpowiedzi na rynek, Netscape dostrzegł potrzebę tworzenia dynamicznych stron internetowych zamiast ograniczania się do HTML. Niestety, większość wczesnych stron internetowych wykorzystywała tylko HTML, a zatem były niewydajne obliczeniowo. Dlatego firma Netscape została zmuszona do opracowania prostego języka skryptów internetowych, przeznaczonego do manipulacji DOM (document object model). Projekt był konsekwentnie inspirowany funkcjonalnością i składnią Javy – chociaż różnią się zasadniczo pomimo niewielkiego podobieństwa składniowego.

Oficjalnie wydany w marcu 1996 r. JavaScript w końcu udostępnił nowe funkcje na stronach internetowych, których sam HTML nie był w stanie. Na przykład reagowanie na dane wejściowe użytkownika, wyświetlanie wyskakujących okienek i zmienianie kolorów elementów. Netscape został później przejęty przez America Online (AOL), która była również właścicielem Mozilli, która przyczyniła się do wykładniczego rozwoju JavaScript jako standardu internetowego.

Pojawienie się XML, AJAX i aplikacji jednostronicowych

Później, na początku XXI wieku, użytkownicy sieci byli sfrustrowani powolnymi odpowiedziami serwerów i długimi czasami transmisji danych. Zostały one dodatkowo pogorszone przez wolne połączenia internetowe, które naznaczyły tę epokę. Doprowadziło to do rozwoju stosu technologii AJAX (Asynchronous XML i JavaScript)

Pod tym względem XML jest językiem znaczników podobnym do HTML, ale używanym do reprezentacji danych zamiast wyświetlania treści. XML stał się istotny w JavaScript wraz z utworzeniem stosu AJAX.

Często opisywany jako zbiór kilku technologii, połączonych razem jako całość, AJAX składa się z XHTML, CSS, DOM, XML, XLST, XML HttpRequest i JavaScript. A w AJAX JavaScript łączy wszystkie inne narzędzia razem . W związku z tym AJAX zapewnił sposób aktualizowania części strony HTML bez pobierania całej jej zawartości.

Aplikacje jednostronicowe

Ogólnie rzecz biorąc, wszystkie frameworki JavaScript przyjmują zasady aplikacji jednostronicowych. W praktyce aplikacja jednostronicowa (SPA) to aplikacja składająca się z pojedynczych komponentów, które są ładowane do pamięci podczas wizyty na pierwszej stronie, a następnie mogą być wymieniane lub aktualizowane niezależnie, dzięki czemu cała strona internetowa nie musi być ponownie ładowana na każdym działaniu użytkownika.

Co więcej, dzięki SPA, komponenty mogą być ponownie użyte, a tym samym ilość potrzebnego kodu jest znacznie zmniejszona. Pierwsza jednostronicowa aplikacja została zaimplementowana w 2002 roku, a jednym z języków docelowych do wdrożenia był JavaScript. Sukces aplikacji jednostronicowych wynikał głównie z wcześniejszej technologii AJAX i jej pierwszeństwa w komunikacji z serwerami.

Relacja JavaScript-HTML

HTML może działać zarówno jako uzupełnienie JavaScript, jak z jQuery; lub jako zintegrowaną składnię podobną do HTML, która jest kompilowana do elementów HTML. Przykładem tego jest składnia JSX, zalecana do użycia podczas programowania w React. Nie jest to ani czysty JavaScript ani HTML, ale połączenie ich obu. Tak więc, zasadniczo, integracja podstawowego tworzenia elementów i strukturalnej funkcjonalności HTML z dynamicznymi możliwościami JavaScript.

Relacja CSS-HTML

CSS jest powszechnie używany w połączeniu z JavaScript. Tradycyjnym formatem przykładowym jest zaimplementowanie właściwości CSS w oddzielnych plikach .css. Drugim formatem jest integracja CSS z samymi frameworkami JavaScript, za pomocą wyspecjalizowanych bibliotek, takich jak CSS-in-JS i styled-components. Takie biblioteki umożliwiają programistom pisanie kodu JavaScript, który stylizuje elementy wizualne za pomocą składni podobnej do CSS, która jest następnie zwykle kompilowana w czysty CSS w przeglądarce.

Pojawienie się implementacji JavaScript po stronie serwera

Ostatecznie rok 2009 nadszedł wraz z wydaniem Node.js, implementacji JavaScript po stronie serwera. Node.js rozszerzył domenę JavaScript na back-end, dzięki czemu JavaScript stał się językiem o pełnym stosie.

Node.js jest obecnie najczęściej używanym środowiskiem wykonawczym JavaScript, używanym do wykonywania kodu JavaScript poza środowiskiem przeglądarki internetowej. Wykorzystywany do funkcjonalności po stronie serwera, twórcy Node.js mieli na celu opracowanie wydajniejszej alternatywy dla popularnego wówczas serwera HTTP Apache (często używanego z PHP). Node.js został stworzony przy użyciu silnika JavaScript V8 firmy Google, który sam został zbudowany przy użyciu C++.

Frontendowe frameworki JavaScript

Skoro już położyliśmy fundamenty, możemy teraz położyć cegły i zagłębić się w przyczyny naszej skłonności do React.js.

Frameworki a biblioteki

Częstym argumentem jest to, co kwalifikuje się jako biblioteka, gdy mówimy o tym trio JavaScript. Jak na ironię, React jest czasami określany jako biblioteka, a innym razem jako framework. Jednak ze względu na przejrzystość i spójność często przydatne jest oddzielenie struktur od bibliotek.

W szczególności biblioteka jest pasywną kolekcją nieulotnych zasobów, w której programiści mają kontrolę nad sposobem korzystania z zasobów. Są one zazwyczaj bardzo proste i wykonują tylko jedno określone zadanie, dlatego można je zaliczyć do narzędzi.

Podczas gdy frameworki są zaprojektowane tak, aby były mniej pasywne i zmuszały programistów do robienia rzeczy w określony sposób, wykorzystując szkielet do celów programistycznych i wymuszając przepływ kontroli. Na przykład programista ma zdefiniowany sposób tworzenia i konfigurowania całej aplikacji internetowej. Podczas gdy biblioteka aplikacji internetowych nie, zamiast tego zapewnia prostsze operacje na subdomenach, takie jak żądania sieciowe lub operacje stylizacji.

Chociaż Vue i Angular są technicznie uważane za frameworki, nadal istnieje pewna różnica zdań co do tego, czy React jest frameworkiem, czy biblioteką. Podczas gdy pierwotni twórcy Reacta nazywają go biblioteką, wciąż jest on częściej używany jako framework.

Dlaczego React jest dominującą alternatywą!

Z perspektywy czasu React został opracowany jako port JavaScript XHP (biblioteki PHP stworzonej przez Facebooka). Ogólnie rzecz biorąc, XHP było modyfikacją PHP, która umożliwiała tworzenie niestandardowych komponentów i miała na celu zapobieganie atakom złośliwych użytkowników. Później z tego projektu portowania JavaScript wyrósł JSX (JavaScript XML), który stał się powszechnym językiem standardowym dla Reacta.

Biorąc wszystko pod uwagę, React ma węższy zakres niż jego rówieśnicy, renderując tylko interfejs użytkownika aplikacji. Jednak zachowuje zalety lekkiej konstrukcji, a zatem jest mniej kosztowny w nauce i użytkowaniu. Biorąc to pod uwagę, nadal można go uznać za framework, ponieważ jest używany w tym samym celu, co Vue i Angular.

Doskonałe możliwości wirtualnego DOM.

React był pierwszym frameworkiem, który zoptymalizował swoją funkcjonalność zgodnie z DOM. To przyczyniło się do jego sukcesu, ponieważ manipulacja DOM jest dość kosztowna pod względem wykorzystywanych zasobów obliczeniowych. W szczególności React został zaprojektowany tak, aby wykonywać jak najmniej manipulacji DOM, wykorzystując intuicyjne zarządzanie stanem i wirtualny DOM do kontrolowania tej manipulacji.

Takie wykorzystanie wirtualnego DOM sprawia, że ​​aktualizacja Reacta jest szybsza, kosztem większej ilości pamięci. Aby wykonać szybkie aktualizacje DOM przeglądarki, React utrzymuje w pamięci kopię wirtualnego drzewa DOM, co zużywa dodatkową pamięć. W konsekwencji popularność Reacta dała początek licznym bibliotekom spinoff, takim jak React Native do tworzenia aplikacji mobilnych.

Jednokierunkowy przepływ danych

W React dane mają płynąć w dół i są określane jako jednokierunkowy przepływ danych. Podczas gdy dwukierunkowe wiązanie danych Angulara i Vue sprawia, że ​​kod jest ładniejszy i prostszy, React kompensuje to doskonałą łatwością zarządzania i wydajnością. Znacząca zaleta w naszej argumentacji.

Dlaczego React jest lepszy niż Angular

Zróbmy porównanie przypadku po przypadku dla większego kontekstu, dobrze? Przeznaczony do tworzenia większych aplikacji, Angular jest bardziej w pełni funkcjonalnym frameworkiem JavaScript, jeśli chodzi o funkcje programistyczne i rozmiar pliku.

Jednak w porównaniu do React, Angular ma negatywne wzdęcia, złożoność i ciężki styl cech rozwojowych. Jest zalecany do mniejszych projektów rozwojowych i cytowany jako posiadający stromą krzywą uczenia się. Aby pogorszyć sytuację, AngularJS nie jest już aktywnie rozwijany.

Angular jest zbudowany w całości w TypeScript i wymaga dużej ilości kodu, co czyni go nieco skomplikowanym. Wręcz przeciwnie, React jest dość „prosty”, a jego pierwotna orientacja skupia się na kontrolowaniu i manipulowaniu widokiem. Zasadniczo pozwala programiście wybrać dokładnie to, czego potrzebuje, ale także umożliwia korzystanie z dużej liczby pakietów innych firm. W związku z tym React nie zawiera dużego narzutu w porównaniu z Angularem.

Dlaczego React jest lepszy niż Vue

Vue.js został stworzony przez pracownika Google Evana You. Evan zainspirował się AngularJS, ale chciał stworzyć jego uproszczoną, ulepszoną wersję. Pomimo lekkich atrybutów, świetnej wydajności i ładnego stylu programowania, negatywnym aspektem Vue jest jego niezdarność. To tutaj widać wyższość Reacta.

Na przykład nie ma jasnych najlepszych praktyk w Vue.js w przeciwieństwie do Reacta, co może utrudnić utrzymanie głównych aplikacji. Jednak najlepsze praktyki dotyczące Reacta można znaleźć w społeczności. Na przykład tworzenie opłacalnego przepływu pracy jest możliwe za pośrednictwem oficjalnego pakietu create-react-app. Dzięki powyższym punktom React odpowiednio zapewnia możliwość pisania i utrzymywania bardzo złożonego kodu.

Składnia ES6

Co więcej, programiści mogą również korzystać ze składni ES6 z Vue, jednak React jest pod tym względem zaprojektowany bardziej optymalnie niż Vue. Chociaż Vue obecnie oferuje obsługę TypeScriptu, jego obsługa nie jest dobrze dopracowana, jak React przy użyciu CRA (Create React App) z obsługą TS w jednym poleceniu. Ponadto w przypadku Vue nadal potrzebujemy niektórych pakietów innych firm z niestandardowymi dekoratorami i funkcjami, aby stworzyć prawdziwą, kompletną aplikację TypeScript. I niestety oficjalna dokumentacja nie zawiera wszystkich informacji wymaganych do rozpoczęcia. Kolejna zaleta Reacta!

Kiedy umacniamy naszą argumentację, dalej podzielmy dyskusję, używając jaśniejszych pewnych punktów odniesienia.

1. Rozmiar ramy

Chociaż rozmiar zminifikowanego pakietu frameworka w rejestrze npm raczej nie zniechęci ani nie zachęci programistów do wybrania frameworka, może jednak pomóc w naszej argumentacji. Angular jest znacznie większy niż reszta (187,6 kB), podczas gdy React ma 6,4 kB, a Vue mieści się gdzieś pomiędzy, przy 63,5 kB.

Ogólnie rzecz biorąc, porównanie rozmiarów pakietów pokazuje, że Angular obsługuje i zawiera szerszy zakres funkcji, podczas gdy React został zaprojektowany z myślą o bardziej usprawnionym rozwoju. Charakter Reacta daje więc programiście mniej możliwości poprawy wydajności, co jest przydatne w przypadku mniejszych projektów.

Co więcej, skomplikowana struktura Angulara prowadzi do potencjalnego ryzyka słabej wydajności w porównaniu z Reactem lub Vue, zwłaszcza w przypadku alokacji pamięci.

2. Doświadczenie w rozwoju, krzywa uczenia się i dostępność

Ogólnie rzecz biorąc, TypeScript sam w sobie nie jest dużo trudniejszy ani łatwiejszy do nauczenia niż JavaScript. Jednak nie jest tak powszechnie używany i zawiera mniej bibliotek i ogólnej dokumentacji niż JavaScript. Te czynniki, w połączeniu z różnicami w składni i czasem potrzebnym na przyzwyczajenie się do kodowania w nieco innej odmianie JavaScript, zapewniają niewielką przewagę Reactowi nad Angularem.

3. Sytuacja oparta na języku

Kolejnym kluczowym punktem jest to, że React i Vue używają JavaScript ES6 jako języka bazowego. ES6 to najnowszy standard branżowy JavaScript z 2015 roku. Z drugiej strony, Angular 1 wykorzystuje JavaScript ES5, który jest poprzednią wersją, podczas gdy Angular 2 opiera się na TypeScript.

Chociaż TypeScript umożliwia programistom pozbycie się tradycyjnego formatu programowania JavaScript, ma jednak ograniczone społeczności użytkowników. Oznacza to, że istnieje potencjalne ryzyko, że TypeScript może zniknąć, jeśli pojawi się inny nowy ścisły nadzbiór składniowy JavaScript. Wręcz przeciwnie, JavaScript ES6 nie zniknie wkrótce, ponieważ jest to obecne kryterium branżowe podczas programowania w JavaScript.

4. Dokumentacja

Szczerze mówiąc, dostępność dokumentacji jest zadowalająca dla wszystkich tych frameworków. To powiedziawszy, nadal warto zauważyć, że dokumentacja Reacta jest dostępna w największej liczbie języków (16). Vue pozostaje w tyle, z dokumentacją w 8 językach, podczas gdy dokumentacja Angulara jest dostępna w 4 językach. Dokumentacja React jest spójna i ma zjednoczoną teorię w dostarczaniu dla różnych programistów.

Niestety, sytuacja ramowa Angulara może stwarzać pewne trudności dla programisty, ponieważ jest on podzielony między AngularJS i Angular 2. Co więcej, termin „Angular” może czasami wydawać się tak niejednoznaczny, do jakiego frameworka się odnosi w kontekście online. Szczególnie podczas przeglądania mniejszych witryn i krótszych odpowiedzi.

5. Wsparcie społeczności

W przeważającej części React ma prawdopodobnie największe wsparcie społeczności spośród wszystkich frameworków JavaScript. Przykładem jest szeroki zakres forów dyskusyjnych i czatów. Ponadto użytkownicy mogą śledzić najnowsze wiadomości i uczestniczyć w dyskusji na Facebooku i Twitterze.

Svelte Framework (wyróżnienie honorowe)

Pomyśleliśmy, że mądrze będzie wspomnieć o stosunkowo nowym wejściu w sferę JavaScript. Opracowany przez Richa Harrisa i wydany w 2016 roku, Svelte zyskał ogromną popularność w 2019 roku. Wprowadził kilka ulepszeń w JavaScript, takich jak zmiany w obsłudze stanów lokalnych.

Warto również zauważyć, że Svelte nie ma wirtualnego DOM i konwertuje napisany kod na JavaScript w czasie budowania, zamiast w czasie wykonywania. Zasadniczo omija konwersję elementów deklaratywnych do prawdziwego DOM.

Streszczenie

Chociaż Vue ma nieco więcej gwiazdek Github, React wciąż jest lepszy, bez dostrzegalnych słabości i lepszymi mocnymi stronami wydajności. Zasadniczo lepsza wydajność oznacza krótszy czas ładowania i większą satysfakcję użytkownika. Co więcej, w przypadku komercyjnych witryn internetowych skutkuje to wzrostem przychodów, ponieważ skrócenie czasu ładowania o kilka milisekund może zwiększyć interakcję i retencję użytkownika.

Ostatecznie przyszłość środowiska frameworka JavaScript jest trudna do przewidzenia. Chociaż, jak sugerują dowody, React prawdopodobnie pozostanie dominującą strukturą w przewidywalnej przyszłości. Jednak dla programistów, którzy chcą tworzyć aplikacje przy użyciu dojrzałego, dobrze obsługiwanego frameworka o doskonałej wydajności i dużej ilości dokumentacji, React jest najlepszym wyborem!