Na czym budować aplikacje, czyli subiektywne porównanie React, Angular 2 i Vue.js

TeamQuest 20.08.2018 r.
Budowanie aplikacji

Każdy developer wie, jak ważny jest wybór Frameworku. Szkielet do budowy aplikacji w JavaScript jest jedną z najważniejszych decyzji do podjęcia. Każdy z nas lubi pracować na czymś innym. Ale czym w zasadzie one się różnią? Jaka jest różnica między Angular 2 a React? Czy Vue.js jest lepszy od tych dwóch?

W przeszłości było całe mnóstwo różnego rodzaju Frameworków. Lider zmieniał się co rok, lub dwa. Dziesięć lat temu rządził GWT. Następnie był Ext JS, Knockout, czy Backbone. Później starły się ze sobą Angular i React. Najpierw był ten pierwszy, później drugi był popularniejszy. W 2016 roku wyszła druga ulepszona wersja Angular. W tym roku pojawiła się stabilna wersja Vue.js.

Czym jest Framework

Platforma programistyczna zwana Frameworkiem to nic innego, jak szkielet, na którym budowana jest aplikacja w środowisku JavaScript. Framework to nie tylko biblioteka, to przede wszystkim samodzielna kategoria oprogramowania. To właśnie platforma definiuje strukturę i mechanizm działania aplikacji. Ponadto Framework dostarcza biblioteki i niezbędne komponenty do funkcjonowania oprogramowania.

Oczywiście Framework nie jest konieczny, by stworzyć aplikację. Natomiast dzięki zastosowaniu gotowych platform oszczędzamy sobie czasu i nie musimy pisać aż tak dużo kodu. Dodatkowo Frameworki gwarantują nam poprawność i niezawodność, bo były już przetestowane i są dobrze zaprojektowane.
Opanowanie Frameworków nie jest jednak łatwe. Ponadto aplikacja traci na wydajności, bo platformy programistyczne pochłaniają dużo mocy przerobowej. Jeśli jednak chcesz sobie ułatwić pracę, warto pochylić się nad trzema najpopularniejszymi Frameworkami:

  1. React
    Najstarszy z trzech Frameworków. Wypuszczony już w 2013 roku. Napisany pod JavaScript. Autorem jest Jordan Walke, programista Facebooka. Wykorzystywany głównie do interfejsów graficznych aplikacji. Używany jest regularnie na takich stronach internetowych, jak: PayPal, Netflix, Walmart, czy Imgur. Aktualna wersja stabilna 16.4.2 została wypuszczona 1. sierpnia.
  2. Angular 2
    Następca Angular.js, choć napisany w języku TypeScript. Wypuszczony w 2016 roku, od razu zyskał dużą popularność. Wydawcą Angular jest Google. Udoskonalono w nim przede wszystkim wsparcie dla przeglądarek mobilnych. Aktualna stabilna wersja 6.0.4 została wypuszczona dwa miesiące temu.
  3. Vue.js
    Nowy Framework w środowisku JavaScript. Twórcą jest Evan You, człowiek odpowiedzialny wcześniej za Meteor. Framework należy do Vue Technology LLC. Na rynek wszedł 1. sierpnia tego roku. Jego aktualna wersja to 2.5.17.

Dlaczego warto postawić na React

ReactJS

Wielu front-end developerów używa właśnie React. Cała reszta uważa, że React jest popularny tylko przez swoją społeczność i jest pełno lepszych Frameworków. Ponieważ jest to dyskusja podobna do tej, kto jest lepszy: Messi, czy Ronaldo, nie będę w nią wchodził. Na pewno React ma jednak kilka zalet, które warto wziąć pod uwagę przy wyborze Frameworka. Pamiętajcie więc, by zachować otwarty umysł, bo zawsze warto próbować czegoś nowego. Może na React będzie wam się pracowało łatwiej.

React jest najpopularniejszym rozwiązaniem we front-endowej deweloperce. Na początku wypada więc poznać dokładnie, czym jest React. To nie jest kompletny Framework, bliżej jemu do biblioteki. Żeby więc wykonać na przykład zapytanie AJAX, musisz korzystać z zewnętrznych materiałów. Przy nauce, niewątpliwą zaletą React jest właśnie jego popularność i duża społeczność. Dzięki temu jesteś w stanie znaleźć rozwiązanie na niemal każdy problem.

Tworzenie aplikacji w React polega na pisaniu i komponowaniu kolejnych materiałów. Nie bez kozery React czasem nazywany jest deweloperskim tetrisem, bo praca na nim przypomina trochę układanie klocków. Musisz tylko najpierw te klocki sam stworzyć.

Dlaczego warto więc postawić na React? Oto kilka podstawowych kwestii, które ułatwiają pracę:

  • deklaratywny kod
    raz stworzony kod możesz używać wielokrotnie bez problemów, także pomiędzy różnymi aplikacjami
  • dużo gotowych rozwiązań
    obsługa formularzy, routing, czy inne usługi są do znalezienia za darmo, dostępne i gotowe do wkomponowania
  • wirtualny DOM
    DOM (Document Object Model), czyli obiektywny model dokumentu. React przechowuje cały DOM aplikacji w pamięci. Dzięki temu renderowanie w przeglądarce jest znacznie szybsze i wygodniejsze. Za sprawą wirtualnego DOM-a, podczas renderowania aktualizujesz tylko te fragmenty, które uległy zmianie.

Dlaczego warto wykorzystać Angular 2

AngularJS

Angular to już Framework w pełnym tego słowa znaczeniu. Często pomijany ze względu na to, że kodowanie nie jest tak przyjemne, jak w React. Zaletą Angular jest jednak fakt, że lepiej ten kod sie czyta. Różnicą na pewno jest TypeScript, który z założenia powinien ułatwiać pisanie. Kosztem używania jest też mniejsza elastyczność aplikacji, a architektura jest dość rozbudowana i sztywna. Do tego wymagane jest używanie różnych dekoratorów.

Jakie są więc zalety? Oto kilka z nich:

  • bardziej skomplikowany i trudniejszy do opanowania, ale oferujący więcej możliwości
    TypeScript ułatwia pisanie skomplikowanych kodów. Opanowanie jego jest proste (o ile znasz JavaScript) i daje więcej możliwości niż sam JavaScript. Dzięki tworzeniu w Angular przede wszystkim poszerzysz swoją wiedzę
  • pełny wypasiony Framework
    Wolność wyboru różnych bibliotek jest dużą zaletą. W Angular przewidziano wszystko, czego trzeba do budowania aplikacji. W React będziesz musiał więcej szukać poza samym React. Tutaj nie będziesz musiał szukać rozwiązań do routingu czy AJAX
  • TypeSript
    Zalet statystycznych kontroli typów jest wiele. Choć ogranicza on elastyczność, daje wiele możliwości kompatybilności innych środowisk. Stosowanie TypeScript ma przede wszystkim więcej sensu w dużych aplikacjach

Dlaczego można postawić na Vue.js

Tak naprawdę Vue.js jest czymś pomiędzy React, a Angular 2. O ile React jest znacznie bliższy standardowej biblioteki (niektórzy stwierdzą, że bez wątpienia jest tylko biblioteką), a Angular 2 jest Frameworkiem, tak popularny "Wju" nie jest ani jednym, ani drugim. Vue.js jest ekosystemem, który świetnie adaptuje się do każdego środowiska. Dzięki temu jest bardzo różnorodny i uniwersalny.

Zaletami Vue.js są przede wszystkim:

  • niesamowicie szybki wirtualny DOM
    Producenci Vue twierdzą, że ich wirtualny DOM jest najszybszym na rynku. Oczywiście przekłada się to na renderowanie aplikacji. Wydaje się więc, że używając Vue będziesz mógł zaoszczędzić dużo czasu.
  • najniższy próg wejścia
    Nie jest wymagana zaawansowana wiedza, by zdołać opanować Vue.js. Tak, jak Angular ma najwyższy próg wejścia i wymaga sporej wiedzy, tak Vue przeciwnie.
  • koniec ręcznej manipulacji drzew DOM
    Tak, jak w React musiałeś manipulować w drzewie DOM, tak tutaj nie musisz.

Różnice

Vue jest najbardziej podatny na interakcje. Można traktować to jako bibliotekę, ale framework ten udostępnia też bardzo dużo narzędzi.
React jest ciągle rozwijany, ale ma swoje ograniczenia. Na przykład jego licencja ma zapis, który blokuje zezwolenie na wykorzystywanie ich produktu, jeśli jest używany do budowania konkurencyjnego portalu do Facebooka. React używa TypeScript, czyli kodowanie jest w zupełnie innym języku. Przeglądarki nie rozumieją jego składni, więc kod jest przed uruchomieniem tłumaczony na JavaScript.
Angular został stworzony głównie na duże aplikacje. Do małych aplikacji bywa uciążliwy. Kodu jest zdecydowanie za wiele, konstrukcja jest zbyt skomplikowana, by kontrolować małe fragmenty pojedynczych stron. Choć każdy z nich ma wiele cech wspólnych, różnice są dość subtelne, ale istotne.

Co więc wybrać?

React, Angular 2 i Vue.js to trzy najpopularniejsze platformy do obsługi Frameworków. Który z nich jest jednak najlepszy? Wszystko zależy od tego, do czego chcesz ich używać i na jakim poziomie zaawansowania jesteś.


React więc daje tobie:
  • szybkość znalezienia pracy
  • zwykle większy zarobek
  • korzystanie z największej społeczności
  • niewysoki próg wejścia w środowisko
  • przyjemność z pisania kodów.
Angular jest najlepszy w:
  • nauce najlepszej jakości pisania kodu
  • wymaga dużej wiedzy, ale daje spory rozwój jako programista - developer
  • tworzeniu dużych projektów
  • najbardziej logiczna struktura Frameworka
  • duża społeczność kodujących.
Vue.js jest:
  • najszybszy do nauki
  • ma najniższy próg wejścia
  • świetny do tworzenia mniejszych projektów (idealny do tworzenia "lekkich" aplikacji webowych)
  • alternatywą dla Angulara, kiedy potrzeba tylko podstawowych funkcjonalności
  • przyjemny w pisaniu kodów.

Podsumowanie

Kontrola jakości

Jeśli jesteś na początku swojej kariery jako front-end developer, warto pomyśleć nad opanowaniem Frameworków. Nie ma jednoznacznej odpowiedzi, od czego zacząć. Jeśli chcesz, by na początku było łatwo, wybierz Vue.js. To środowisko nie wymaga dużej wiedzy, bez trudu można w nie wejść, oferuje szybkość renderowania i szereg uproszczeń. Jeśli chcesz mieć łatwość ze znalezieniem pracy, rynek najwięcej oferuje programistom z React. Poza tym w React pisze się niemal równie przyjemnie, jak w Vue. Pamiętaj tylko, że React to bardziej biblioteka, niż platforma programistyczna i wymaga to opanowania szeregu innych komponentów. Jeśli chciałbyś się realizować przy największych projektach i masz dużą wiedzę o JavaScript, warto pomyśleć nad Angular 2. Dzięki niemu nauczysz się nowego języka kodowania - TypeScript. Poza tym, jeśli zdołasz opanować Angular, będziesz w stanie opanować niemal każdy Framework.

Decyzja więc należy do ciebie. Każda z tych platform jest inna i wymaga zupełnie różnej wiedzy i umiejętności. Każda z nich jest też przeznaczona do konkretnych aspektów rozwijania aplikacji. Warto, byś miał to na uwadze.

Najnowsze oferty pracy:

Polecane wpisy na blogu IT: