by Maximilian Schwarzmüller / Instruktor Udemy
Kiedy kursanci pytają mnie, który framework JavaScript powinni wybrać do swoich projektów stron internetowych (Angular, React.js czy Vue.js), muszę przyznać, że nie mam dla nich idealnej odpowiedzi. Zamiast wybierać jedną z opcji, wskazuję na mocne i słabe strony każdej z nich. Opieram swoje porównanie na kluczowych cechach każdego frameworku, jego wydajności, popularności w branży i doświadczeniach developerów.
Zanim przejdziemy do porównania frameworków, zaczniemy od krótkiego opisu każdego z nich:
Angular
Angular 8 to najnowsza wersja Angulara, frameworku JavaScript wspieranego i rozwijanego przez Google. Framework ten jest oparty na przeglądarce po stronie użytkownika. Zamiast wysyłać zapytanie do serwera w celu załadowania na nowo kodu HTML, Angular sprawia, że strony renderują się dużo szybciej i są bardziej wydajnie. To samowystarczalny framework z wbudowanymi narzędziami do routingu, zarządzania stanem i walidacji formularzy. Angular jest zbudowany na bazie TypeScript, nadzbioru języka JavaScript.
React.js
Stworzony i rozwijany przez Facebooka, React.js jest jedną z najpopularniejszych bibliotek JavaScript. Skupia się on na budowaniu i renderowaniu komponentów strony internetowej. Gdy używasz React.js, wszystkie elementy są tworzone w języku JavaScript. Polecam używać go razem z JSX, rozszerzeniem składni JavaScriptu, które “opisuje, jak powinien wyglądać UI” w Twoim kodzie JavaScript.
Nie jest to jednak kompletny zestaw narzędzi, w przeciwieństwie do Angulara, React.js składa się z rozwiązań, które pozwalają na budowanie komponentów do umieszczenia na stronie. To daje dużą elastyczność, ale też często zmusza developerów do korzystania z dodatkowych bibliotek w celu dodania funkcjonalności, których React nie oferuje. Przykładem takiej funkcji jest routing, który w wypadku Reacta musi być dodany manualnie poprzez zewnętrzne narzędzia.
Vue.js
Vue.js jest otwartym frameworkiem JavaScript, który łączy w sobie funkcjonalności React.js i Angulara. W przeciwieństwie do React.js, który jest związany z Facebookiem, za Vue.js nie stoi żaden technologiczny gigant. Framework ten został stworzony przez byłego pracownika Google, Evana You, który zgromadził team zajmujący się routingiem i zarządzaniem stanem w Vue.js.
Podobnie jak Angular, Vue.js jest frameworkiem kompletnym, choć oferuje nieco mniej funkcji. Dzięki obszernej dokumentacji i prostej składni, programiści o różnych poziomach zaawansowania (również Ci, którzy dopiero zaczynają uczyć się JavaScript i HTML) uważają Vue.js za bardzo przystępny framework.
Teraz porównamy wyżej wymienione frameworki JavaScript abyś mógł zdecydować, który będzie najlepszy dla Twojego projektu. Weźmiemy pod uwagę sześć kryteriów:
- Łatwość nauki
- Aplikacje single-page
- Aplikacje multi-page
- Wskaźniki wydajności
- Wdrożenie (deployment)
- Zastosowanie w branży
1. Łatwość nauki
W zależności od doświadczeń, developerzy mają różne opinie co do tego, który framework jest najłatwiejszy do nauki:
- Najłatwiejszy do opanowania: Vue.js.
Myślę, że Vue.js jest najłatwiejszy do nauczenia się dla większości web developerów. Jest on najbliższy podstawom HTML i JavaScript, więc zasady będą wydawały się znajome. Aby rozpocząć przygodę z Vue.js, wystarczy dodać fragment kodu do Twojego dokumentu HTML.
W miarę budowania coraz bardziej złożonych aplikacji, Vue.js również robi się coraz bardziej skomplikowany. Pojawia się potrzeba pracy z plikami .vue, za czym idzie konieczność odpowiedniego skonfigurowania narzędzi do budowania aplikacji. W tym wypadku wiele uprości użycie narzędzia Vue CLI.
- Najtrudniejszy do opanowania: Angular
Angular opiera się na TypeScript (który, jak już wspomniałem, jest nadzbiorem JavaScriptu), co sprawia, że nauka tego frameworku jest znacznie trudniejsza. Komponenty, moduły i składnia mogę wyglądać zupełnie inaczej niż składnia JavaScript, do której jesteś już przyzwyczajony. Angular oferuje wiele wbudowanych, bardzo zaawansowanych funkcji, które wymagają od developerów używania konkretnych wzorców kodowania. Może to być bardzo pomocne w procesie budowania większych aplikacji.
- Średni poziom trudności: React.js
Powiedziałbym, że React.js ma średnio stromą krzywą uczenia. To framework, który wychodzi z założenia, że “wszystko jest JavaScriptem”. Są jednak dwie rzeczy, które osoby początkujące powinny wziąć pod uwagę. Po pierwsze, React.js działa najlepiej ze składnią ES6, co może być wyzwaniem dla niedoświadczonego developera. Inną trudnością jest użycie składni JSX (hybrydy HTML i JavaScript), która nie jest używana w typowych projektach JavaScript. Na pierwszy rzut oka JSX wygląda jak HTML, choć w gruncie rzeczy jest to JavaScript. To może być mylące przy próbie zrozumienia kodu.
Zwycięzca w kategorii “łatwość nauki” – Vue.js
2. Aplikacje single-page
Aplikacje single-page (SPAs, single-page apps) to wysoce reaktywne, podobne do mobilnych, aplikacje internetowe, które ładują się od razu w całości. Strona aplikacji opiera się na pojedynczym pliku HTML, natomiast JavaScript kontroluje wszystko to, co użytkownik widzi w przeglądarce. Kliknięcie na przycisk lub otwarcie nowego okna w obrębie strony nie wysyła nowego żądania do serwera. Zamiast tego, kod JavaScript jest modyfikowany i renderowany w ramach załadowanej już strony.
Aplikacje single-page są popularne ze względu na szybkość ładowania. Spójrzmy na przykład: gdy bierzesz udział w jednym z moich kursów na Udemy, możesz klikać na zakładki poniżej odtwarzacza wideo, np. zakładkę Q&A, bez odświeżania strony. Ponieważ JavaScript i jego framework działają w przeglądarce, strona nie musi komunikować się z serwerem aby pokazać zawartość zakładki Q&A. Zobaczysz je od razu pod odtwarzaczem wideo.
A zatem, jak nasze trzy frameworki radzą sobie z budowaniem aplikacji single-page? Angular został stworzony przez Google specjalnie dla SPAs. Użycie TypeScript oraz wszystkich wbudowanych narzędzi Angulara czynią tworzenie SPA świetnym doświadczeniem dla developera. Funkcje takie jak zarządzanie stanem, routing i walidacja formularzy pozwalają na łatwą i szybką pracę. Używanie React.js lub Vue.js przy większych aplikacjach Vue.js może być bardziej skomplikowane ze względu na mniejszą dostępność potrzebnych paczek.
Zwycięzca w kategorii “aplikacje single-page” – Angular
3. Aplikacje multi-page
Aplikacja multi-page (MPA, multi-page application) to w zasadzie “tradycyjna” strona, taka jak Twój ulubiony sklep internetowy lub strona mediów. Za każdym razem, gdy strona ma wysłać lub załadować nowe dane, wysyłane jest żądanie do serwera, które renderuje przeglądarka.
React.js świetnie sprawdza się przy tego rodzaju projektach, kiedy używamy go do wzbogacenia istniejącego kodu HMTL strony. Możesz importować React.js w celu dodania komponentów opartych na JavaScript. Warto jednak zaznaczyć, że aby pisać komponenty React.js za pomocą JSX, potrzebna będzie konfiguracja narzędzi do kompilacji frontendu. Dla kontrastu, Vue.js jest bardzo prosty w użyciu w przypadku aplikacji multi-page. Wystarczy zaimportować bibliotekę Vue.js, aby zacząć używać jej funkcji ich komponentów na Twojej stronie. Nie są wymagane żadne specjalne ustawienia.
Podsumowując, zarówno Vue.js, jak i React.js są dobrym wyborem, jeśli chcesz dodać funkcjonalność JavaScript do aplikacji multi-page. Uważam Vue.js za nieco lepszą opcję, jako że nie musisz używać specjalnej składni (JSX), która wymaga dodatkowego kroku w kompilacji. Mała uwaga: JSX jest opcjonalny, ale to de facto standard w budowaniu komponentów React.js.
Nie polecam Angulara do tworzenia MPA. Całościowe podejście do komponentów i użycie TypeScript nie czynią tego frameworku dobrą opcją. Importowanie paczek Angulara do Twojego HTML jest niepotrzebnie skomplikowane. Próba kompilowania TypeScript w aplikacji opartej na HTML (takiej jak MPA) nie tylko będzie mieć wpływ na wydajność, ale również zirytuje Ciebie i Twój team. Ogólnie rzecz biorąc, Angular został stworzony aby ułatwić tworzenie aplikacji single-page. Być może w przyszłości będzie on lepszą opcją dla aplikacji multi-page, ale na razie się na to nie zanosi.
Zwycięzca w kategorii “aplikacja multi-page” – Remis: React.js i Vue.js
4. Wydajność aplikacji
Strony internetowe, które ładują się powoli i nie działają płynnie to ogromne ryzyko biznesowe. Jeśli klient musi czekać kilka minut, by strona załadowała się w pełni, to najprawdopodobniej przeszedł już na stronę Twojej konkurencji.
Aby zbadać, jak radzą sobie frameworki JavaScript, odwołam się do punktów odniesienia z serwisu GitHub. Wyniki tego badania są dość relatywne, gdyż każdy z omawianych frameworków jest dość szybki. Warto zauważyć, że tego rodzaju testy są dość zdradliwe, bo każdy framework może radzić sobie lepiej niż inne w danym przypadku, ale działać zupełnie inaczej w wypadku nieudokumentowanym w konkretnym badaniu.
5. Wdrożenie (deployment)
Jak łatwo Twój zespół będzie mógł wdrażać aplikacje przy użyciu konkretnego frameworku?
Chociaż Angular jest uznawany za najbardziej wymagający framework do wdrożenia, narzędzia takie jak Angular CLI znacznie upraszczają ten proces. CLI wykonuje wiele zadań za Ciebie, od tworzenia projektu aż po optymalizację kodu. W ramach jednej komendy otrzymujesz w pełni zoptymalizowaną aplikację gotową do wdrożenia na statycznym serwerze. Stworzenie uniwersalnej, prerenderowaną po stronie serwera aplikacji również wymaga tylko jednej komendy.
Budowanie i wdrażanie aplikacji przy pomocy React.js jest równie proste. Create-react-app pozwala na generowanie w pełni skonfigurowanych aplikacji React.js. Zawierają one wszystko to, czego potrzebujesz do tworzenia Twojego projektu. Razem z konfiguracją otrzymujesz w pełni zoptymalizowany projekt, który może być wdrożony na jakimkolwiek statycznym serwerze. W przeciwieństwie do Angulara CLI, w wypadku React.js nie można stworzyć aplikacji renderowanej po stronie serwera za pomocą tylko jednej komendy.
W wypadku Vue.js również możesz skorzystać z CLI, który generuje z góry skonfigurowane ustawienia dla projektów. Podobnie jak w wypadku Angulara i React.js, możesz optymalizować swój kod za pomocą pojedynczej komendy. Projekty Vue.js również mogą być wdrażane na każdym statycznym serwerze, a włączenie renderowania po stronie serwera (na korzyść SEO) jest zupełnie bezproblemowe.
Zwycięzca w kategorii “wdrożenie” – Angular nieco odbiega od konkurencji, ale ogólnie wszystkie trzy opcje są łatwe do wdrożenia.
6. Zastosowanie w branży
W badaniu Stack Overflow z 2019 ankietowani developerzy określili React.js i Vue.js jako odpowiednio pierwszy i drugi ulubiony framework wśród specjalistów z branży. React.js okazał się drugim najczęściej używanym frameworkiem, co odzwierciedla jego popyt na rynku.
W sierpniu 2019 Indeed.com miał w swojej bazie niemal 15 tysięcy ofert pracy z USA, które wymagały znajomości React.js. Dla porównania, na tej samej stronie można było znaleźć 13,5 tysiąca ofert pracy z Angularem i 2,2 tysiąca ofert dla specjalistów od Vue.js. Ze wszystkich trzech frameworków, React.js jest tym najbardziej pożądanym na rynku. Oznacza to, że nauka Reacta powinna być priorytetem dla developerów, którzy chcą poszerzyć swoje umiejętności.
Zwycięzca w kategorii “zastosowanie w branży”: React.js i Angular
Zupełnie jak każdy inny język programowania, frameworki i biblioteki mają swoje (często subiektywne) plusy i minusy. Zawsze zachęcam managerów i developerów, aby skupili się nie tylko na porównaniu dostępnych frameworków JavaScript, ale też mieli na uwadze zasoby i umiejętności dostępne w ich własnym teamie.